/* Night ocean, across the site: the sea is deep green, each page sits on a light sheet over it,
   and the maps are cream land with gold cities. */
:root { --sea: #0e2d31; --sea-land: #6f968e; --sea-ink: #fbf6ea; --sea-soft: #a9bdb7; }
body.app, body.auth-page { background: var(--sea); }
body.app main#view, body.auth-page main { background: var(--paper); border-radius: 24px; margin-top: 18px; margin-bottom: 36px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
@media (max-width: 700px) { body.app main#view, body.auth-page main { width: calc(100% - 16px); border-radius: 18px; margin-top: 10px; } }
body.app .site-footer, body.auth-page .site-footer { background: var(--sea); color: var(--sea-soft); border-top: 0; }
body.app .site-footer a, body.auth-page .site-footer a, body.app .site-footer strong { color: var(--sea-ink); }

/* the step maps and the roadmap maps at night */
.plan-map { background: var(--sea); border-color: var(--sea); }
.pm-land { stroke: var(--sea-land); }
.pm-label { fill: var(--sea-ink); stroke: var(--sea); stroke-width: 9px; }
.pm-minor .pm-label { fill: var(--sea-soft); }
.pm-none .pm-pin { fill: var(--sea); stroke: var(--sea-soft); }
.pm-offered .pm-pin { fill: var(--accent); stroke: var(--sea); }
.pm-offered .pm-count { fill: #1c1603; }
.pm-glow { fill: var(--accent); opacity: .18; }
.pm-yes .pm-pin { fill: #4fb58f; } .pm-chosen .pm-pin { fill: var(--accent); }
.pm-pick .pm-pin { fill: var(--sea); stroke: var(--accent); }
.pm-city.is-home .pm-pin, .pm-homepin .pm-pin { fill: var(--accent); stroke: #fff; }
.pm-home { fill: var(--accent); stroke: #fff; }
.pm-dot { fill: var(--sea-ink); }
.pm-leader { stroke: var(--sea-ink); }
.pm-home-land { stroke: var(--accent); }
.pm-caption, .pm-legend { color: var(--sea-soft); }
.pm-key.pm-none i { background: var(--sea); border-color: var(--sea-soft); }
.pm-key.pm-offered i, .pm-chip.pm-offered i { background: var(--accent); }
.pm-key.pm-yes i, .pm-chip.pm-yes i { background: #4fb58f; }
.pm-key.pm-chosen i { background: var(--accent); }
/* the 1-5 score ramp runs from grey-green to gold, which reads on the dark sea */
.pm-s1 { --pm: #6f8a85; } .pm-s2 { --pm: #9fb49a; } .pm-s3 { --pm: #cfc98f; } .pm-s4 { --pm: #e6c46a; } .pm-s5 { --pm: #edb64b; }
.pm-badge-t, .pm-ramp i { fill: #1c1603; color: #1c1603; }
.pm-s1 + .pm-badge-t, .pm-s2 + .pm-badge-t, .pm-ramp .pm-s1, .pm-ramp .pm-s2 { fill: #1c1603; color: #1c1603; }
.pm-arc { stroke: rgba(237, 182, 75, .5); }
.pm-extra .q-note { color: var(--sea-soft); }
.pdf-export .plan-map { background: var(--sea); }

/* locked tools in the header menus: the lock just after the name, as inside the pages */
.sub-nav a.is-locked::before { content: none; }
.sub-nav a.is-locked::after { content: ""; display: inline-block; width: 9px; height: 11px; margin-left: 6px; vertical-align: -1px; border: 1.5px solid currentColor; border-radius: 2px;
  border-top-left-radius: 5px; border-top-right-radius: 5px; box-sizing: border-box; opacity: .75; background: linear-gradient(transparent 45%, currentColor 45%); }

/* ---- the Tools landing page: a block per tool, grouped ---- */
.tool-group { margin: 26px 0 6px; }
.tool-group h2 { margin: 0 0 12px; font: 700 1.25rem/1.25 var(--serif); color: var(--brand); }
.tool-card h3 { margin: 0 0 6px; font: 700 1.05rem/1.3 var(--font); color: var(--ink); }
/* a locked tool shows its lock where the arrow would be, in the same circle */
.tool-card:has(.premium-lock) .degree-card-go { display: none; }
.tool-card .premium-lock { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 8px 9px 9px; border-radius: 50%; background: var(--tint); color: var(--ink-3); opacity: 1; box-sizing: border-box; }

/* the locked plan steps: a clear way to see a finished example plan */
.lock-example { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; padding: 10px 14px 10px 10px; border: 1.5px solid var(--brand); border-radius: 14px; background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: 0 8px 20px rgba(15, 61, 62, .12); transition: transform .15s ease, box-shadow .15s ease; }
.lock-example:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15, 61, 62, .18); color: var(--ink); }
.lock-example img { flex: none; width: 64px; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.lock-example span { display: grid; gap: 2px; }
.lock-example b { color: var(--brand); font-size: 1rem; }
.lock-example small { color: var(--ink-3); font-size: .85rem; line-height: 1.35; }
.lock-example .lock-example-go { margin-left: auto; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--accent); font-weight: 800; }

/* Tools page: AI outlook, Overseas pathways and Pay catch the eye. When one is in view (startToolShine in app.js), a soft
   light sweeps across it, left to right, with a brief gold edge glow; this replays every 5 seconds, one card at a time.
   No motion for reduced-motion or low-data. */
/* The sweep is a moving background on the card itself (no extra layer, isolation or transform): Safari mis-painted the
   old layered version, blanking the cards and drawing the hover highlight in the wrong place. The hover tint uses
   background-color, so the two never fight. */
.tool-shine { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .tool-shine.is-shining, .tool-list .tool-shine.is-shining {
    background-image: linear-gradient(100deg, rgba(237, 182, 75, 0) 0%, rgba(237, 182, 75, .14) 32%, rgba(255, 244, 214, .9) 50%, rgba(237, 182, 75, .14) 68%, rgba(237, 182, 75, 0) 100%);
    background-repeat: no-repeat; background-size: 45% 100%;
    animation: tool-glow 1.4s ease-out both, tool-sweep 1.3s cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes tool-sweep { from { background-position: -95% 0; } to { background-position: 195% 0; } }
@keyframes tool-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(237, 182, 75, 0); } 40% { box-shadow: 0 0 0 2px rgba(237, 182, 75, .75), 0 8px 24px rgba(237, 182, 75, .25); } }
.low-data .tool-shine { animation: none !important; background-image: none !important; }