/* My Matric Map as a map: the steps as stations on a line, the roadmap route, and the South Africa / world map. */

/* ---- The steps: stations on one line ---- */
.stepper.route { position: relative; gap: 0; overflow: visible; margin-bottom: 26px; padding: 16px 8px 12px; border-radius: var(--radius); }
.stepper.route li { flex: 1 1 0; position: relative; min-width: 0; }
.stepper.route li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 4px; background: var(--line); border-radius: 2px; }
.stepper.route li:first-child::before { display: none; }
.stepper.route li.done::before, .stepper.route li.on::before { background: var(--brand-2); }
.stepper.route a { position: relative; flex-direction: column; gap: 6px; padding: 0 4px; border: 0; background: none; border-radius: 0; text-align: center; white-space: normal; font-size: .85rem; line-height: 1.25; }
.stepper.route span { width: 30px; height: 30px; background: var(--surface); border: 3px solid var(--line); color: var(--ink-3); position: relative; z-index: 1; }
.stepper.route .done span { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.stepper.route .on span { background: var(--brand); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px rgba(237, 182, 75, .28); }
.stepper.route .on a { color: var(--ink); }
.stepper.route a:hover span { border-color: var(--brand-2); }
/* Locked steps (before access): the lock covers the station's number completely */
.stepper.route .premium-lock { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 5px 6px 6px;
  border: 3px solid var(--ink-3); border-radius: 50%; background: var(--ink-3); color: #fff; opacity: 1; font-size: 0; box-sizing: border-box; }
.stepper.route .premium-lock svg { width: 100%; height: 100%; }
.stepper.route a:hover .premium-lock { border-color: var(--ink-2); background: var(--ink-2); }
@media (max-width: 560px) {
  .stepper.route { align-items: flex-start; }
  .stepper.route::before { content: none; }
  .stepper.route li:not(.on) { display: block; }
  .stepper.route li:not(.on) a { font-size: 0; gap: 0; }
  .stepper.route li.on { flex: 1 1 0; }
  .stepper.route li.on a { font-size: .78rem; }
}

/* My dashboard: the station after step 5, on laptops and desktops only (planStepper in app.js), on a dashed line */
.stepper.route li.st-dash { display: none; }
@media (min-width: 1100px) {
  .stepper.route li.st-dash { display: block; }
  .stepper.route li.st-dash::before { background: repeating-linear-gradient(90deg, var(--brand-2) 0 7px, transparent 7px 12px); }
  .stepper.route li.st-dash span { background: var(--accent); border-color: var(--accent); color: var(--brand); }
  .stepper.route li.st-dash a { color: var(--brand); font-weight: 700; }
  .stepper.route li.st-dash small { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-3); }
}

/* ---- The map ---- */
.plan-map { margin: 18px 0 22px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #f4f1e8; }
.pm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pm-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.pm-switch button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.pm-switch button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.pm-picker label { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.pm-picker select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); max-width: 210px; }
.pm-caption { margin: 2px 0 6px; font-size: .88rem; color: var(--ink-2); }
.pm-stage { max-width: 560px; margin: 0 auto; }
.pm-stage-world { max-width: 820px; }
.pm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pm-svg [role="button"] { cursor: pointer; outline: none; }
.pm-hit { fill: transparent; }

.pm-land { stroke: #b9d3cf; stroke-linecap: round; fill: none; }
.pm-home-land { stroke: var(--accent); stroke-linecap: round; fill: none; }
.pm-dest-land { stroke-linecap: round; fill: none; }
/* one sequential green ramp for the 1-5 overall score */
.pm-s1 { --pm: #cfe0dc; } .pm-s2 { --pm: #9cc2bb; } .pm-s3 { --pm: #5f9e96; } .pm-s4 { --pm: #2f7a74; } .pm-s5 { --pm: #0f4f4f; }
.pm-dest-land { stroke: var(--pm); }
.pm-arc { fill: none; stroke: rgba(184, 126, 18, .45); stroke-width: 2; stroke-dasharray: 5 5; }
.pm-arc.is-on { stroke: #c98f12; stroke-width: 3.5; stroke-dasharray: none; }
.pm-home { fill: var(--accent); stroke: var(--brand); stroke-width: 3; }
.pm-dot { fill: var(--brand); }
.pm-leader { stroke: var(--brand); stroke-width: 1.2; opacity: .6; }
.pm-badge { fill: var(--pm); stroke: #fff; stroke-width: 2.5; }
.pm-badge-t { font: 800 15px var(--font); fill: #fff; pointer-events: none; }
.pm-s1 + .pm-badge-t, .pm-s2 + .pm-badge-t { fill: var(--ink); }
.pm-country.is-on .pm-badge, .pm-country:focus-visible .pm-badge { stroke: var(--accent); stroke-width: 4; }

.pm-pin { stroke: #fff; stroke-width: 3; }
.pm-yes .pm-pin { fill: var(--brand-2); } .pm-near .pm-pin { fill: var(--accent); } .pm-no .pm-pin { fill: #b9b4a6; }
.pm-offered .pm-pin { fill: var(--brand); }
.pm-check .pm-pin { fill: #fff; stroke: var(--accent); stroke-width: 4; } .pm-check .pm-count { fill: var(--ink); }
.pm-none .pm-pin { fill: #f4f1e8; stroke: #8fa7a3; stroke-width: 2.5; }
.pm-count { font: 800 14px var(--font); fill: #fff; pointer-events: none; }
.pm-near .pm-count, .pm-no .pm-count { fill: var(--ink); }
.pm-label { font: 700 26px var(--font); fill: var(--ink); paint-order: stroke; stroke: #f4f1e8; stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.pm-minor .pm-label { font-weight: 500; font-size: 22px; fill: var(--ink-3); }
.pm-city.is-on .pm-pin, .pm-city:focus-visible .pm-pin { stroke: var(--ink); stroke-width: 4; }
.pm-city[role="button"]:hover .pm-pin { stroke: var(--ink); }
@media (max-width: 560px) { .pm-minor .pm-label { display: none; } .pm-label { font-size: 34px; } }

.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 8px; font-size: .8rem; color: var(--ink-2); }
.pm-key { display: inline-flex; align-items: center; gap: 6px; }
.pm-key i, .pm-chip i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--pm, #b9b4a6); }
.pm-key.pm-yes i, .pm-chip.pm-yes i { background: var(--brand-2); } .pm-key.pm-near i, .pm-chip.pm-near i { background: var(--accent); }
.pm-key.pm-no i, .pm-chip.pm-no i { background: #b9b4a6; } .pm-key.pm-offered i, .pm-chip.pm-offered i { background: var(--brand); }
.pm-key.pm-check i, .pm-chip.pm-check i { background: #fff; border: 2px solid var(--accent); }
.pm-key.pm-none i { background: #f4f1e8; border: 2px solid #8fa7a3; } .pm-home-key i { background: var(--accent); border: 2px solid var(--brand); }
.pm-ramp { display: inline-flex; align-items: center; gap: 3px; }
.pm-ramp i { font-style: normal; font-weight: 800; font-size: .72rem; width: 20px; height: 18px; display: inline-grid; place-items: center; border-radius: 4px; background: var(--pm); color: #fff; }
.pm-ramp .pm-s1, .pm-ramp .pm-s2 { color: var(--ink); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer; }
.pm-chip b { font-weight: 800; color: var(--ink-2); }
.pm-chip.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.pm-panel { margin: 12px auto 0; max-width: 620px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pm-panel p { margin: 4px 0 6px; font-size: .92rem; }
.pm-filter { margin: -8px 0 12px; font-size: .92rem; color: var(--ink-2); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-2); text-decoration: underline; cursor: pointer; }

/* ---- The roadmap route ---- */
.route-line { list-style: none; margin: 10px 0 8px; padding: 8px 0 4px; display: flex; overflow-x: auto; } /* room above: the 'You are here' circle is larger */
.route-stop { flex: 1 1 0; position: relative; min-width: 88px; overflow-wrap: normal; word-break: normal; hyphens: manual; padding: 26px 4px 0; text-align: center; font-size: .8rem; line-height: 1.3; }
.route-stop::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 4px; background: var(--brand-2); }
.route-stop:first-child::before { display: none; }
.route-stop.is-done::before, .route-stop.is-now::before { background: #b9b4a6; }
.route-stop i { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 4px solid var(--brand-2); z-index: 1; }
.route-stop.is-done i { border-color: #b9b4a6; background: #b9b4a6; }
.route-stop.is-now i { width: 24px; height: 24px; top: -1px; background: var(--accent); border-color: var(--brand); }
.route-stop.is-end i { background: var(--brand); border-color: var(--accent); }
.route-stop b { display: block; font-size: .84rem; color: var(--ink); }
.route-stop.is-done b, .route-stop.is-done span { color: var(--ink-3); }
.route-stop span { display: block; color: var(--ink-2); margin-top: 2px; }
.route-branch { display: block; margin-top: 8px; padding: 6px 6px 0; border-top: 2px dashed var(--accent); font-style: normal; font-size: .76rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .route-line { flex-direction: column; }
  .route-stop { text-align: left; padding: 0 0 16px 38px; }
  .route-stop::before { top: -50%; bottom: 50%; left: 10px; right: auto; width: 4px; height: auto; }
  .route-stop:first-child::before { display: none; }
  .route-stop i { left: 12px; top: 0; }
  .route-stop.is-now i { top: -3px; }
  .route-branch { border-top: 0; border-left: 2px dashed var(--accent); padding: 2px 0 2px 10px; margin-top: 6px; }
}
@media print {
  .plan-map { background: none; border-color: #ccc; break-inside: avoid; }
  .route-line { flex-direction: row !important; overflow: visible; }
  .route-stop { text-align: center !important; padding: 26px 2px 0 !important; font-size: 7pt; min-width: 0 !important; }
  .route-stop b { font-size: 7.5pt; }
  .route-stop::before { top: 9px !important; left: -50% !important; right: 50% !important; bottom: auto !important; width: auto !important; height: 4px !important; }
  .route-stop i { left: 50% !important; top: 2px !important; }
  .route-branch { border-left: 0 !important; border-top: 2px dashed var(--accent) !important; padding: 4px 2px 0 !important; font-size: 7pt; }
  .pm-svg, .pm-land, .pm-pin, .pm-badge, .route-stop i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- One Next in two places: the step's own button and a floating twin that looks exactly the same ---- */
.plan-next { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 14px 22px; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff; font: 700 1rem/1.2 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 61, 62, .32), 0 0 0 3px var(--accent); }
.plan-next span:first-child { color: var(--accent); }
/* until the step is complete it is an instruction: white with a green outline (same size, so docking still lines up) */
.plan-next.is-todo { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand), 0 8px 22px rgba(15, 61, 62, .16); }
.plan-next.is-todo span { color: var(--brand-2); }
.plan-next.is-todo:hover { background: var(--brand-soft); color: var(--brand); }
.plan-next:hover { background: var(--brand-2); color: #fff; }
.plan-next:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* the twin floats at the bottom in line with the real button (left and width set from it), and docks into it */
.plan-fab { position: fixed; z-index: 60; left: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(160%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .2s ease, visibility 0s linear .45s; }
.plan-fab.is-shown { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .2s ease, visibility 0s; }
.plan-fab.is-instant { transition: none; }
@media (prefers-reduced-motion: no-preference) { .plan-next.is-bump { animation: pm-bump .4s cubic-bezier(.2, 1.6, .4, 1); } }
@keyframes pm-bump { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .plan-fab, .plan-fab.is-shown { transition: opacity .2s ease, visibility 0s; } }
@media print { .plan-fab { display: none !important; } }

/* ---- Your map in every step: home, routes, picking a city, the small maps in steps 1-3 ---- */
.pm-warm { stroke: #e7c77a; stroke-linecap: round; fill: none; }
.pm-route { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.pm-pulse { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; animation: pm-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes pm-pulse { 0% { opacity: .55; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.8); } }
.pm-city.is-home .pm-pin, .pm-homepin .pm-pin { fill: var(--accent); stroke: var(--brand); stroke-width: 4; }
.pm-city.is-home .pm-label, .pm-homepin .pm-label { font-weight: 800; }
.pm-glow { fill: var(--brand); opacity: .14; }
.pm-chosen .pm-pin { fill: var(--brand-2); }
.pm-pick .pm-pin { fill: var(--surface); stroke: var(--brand); stroke-width: 4; }
.pm-pick[role="button"]:hover .pm-pin, .pm-pick:focus-visible .pm-pin { fill: var(--accent); }
.pm-key.pm-home i { background: var(--accent); border: 2px solid var(--brand); }
.pm-key.pm-chosen i { background: var(--brand-2); }
.pm-arc.is-route { stroke: #c98f12; stroke-width: 2.6; stroke-dasharray: none; }
.plan-map.pm-compact { padding: 10px; margin: 10px 0 12px; }
.pm-compact .pm-stage-za { max-width: 420px; }
.pm-compact .pm-caption { text-align: center; }
@media (prefers-reduced-motion: reduce) { .pm-pulse { display: none; } }

@media (max-width: 560px) { .pm-compact .pm-stage-za { max-width: 300px; } }

/* Every step: the map in a large column to the right of the step on wide screens (it stays in view), above the step on phones */
.plan-layout { display: grid; gap: 14px; }
.plan-side .plan-map { margin: 0; }
@media (min-width: 960px) {
  .plan-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); gap: 28px; align-items: start; }
  .plan-side { order: 2; position: sticky; top: 160px; }
  .plan-side .pm-stage-za { max-width: none; }
}


/* roadmap cover: South Africa and the world as two separate boxes with a clear gap between them */
.rp-cover-maps { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 6px 28px; margin: 18px 0 6px; }
.rp-cover-box { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.rp-cover-box h3 { margin: 0; font-size: .95rem; align-self: end; }
.rp-cover-box .plan-map { margin: 0; padding: 10px; display: flex; flex-direction: column; }
.rp-cover-box .pm-stage { flex: 1; display: flex; align-items: center; justify-content: center; max-width: none; width: 100%; }
.rp-cover-box .pm-svg { height: 230px; width: 100%; }
.rp-cover-note { font-size: .9rem; color: var(--ink-2); margin: 6px 0 4px; }
.rp-picture-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 18px; }
@media (max-width: 640px) { .rp-cover-maps { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; } .rp-cover-box { grid-row: auto; grid-template-rows: auto; gap: 4px; } }
@media print {
  .rp-cover-maps { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto 1fr !important; gap: 4px 10mm !important; break-inside: avoid; }
  .rp-cover-box { grid-row: span 2 !important; grid-template-rows: subgrid !important; }
  .rp-cover-box .pm-svg { height: 190px; }
  .pm-pulse { display: none; }
}

/* ---- Phones: after step 1 the map folds into a one-line bar ---- */
.pm-fold { display: none; }
@media (max-width: 959px) {
  .plan-side { display: grid; gap: 6px; }
  .pm-fold { display: flex; width: 100%; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f4f1e8; font: inherit; font-size: .92rem; color: var(--ink); text-align: left; cursor: pointer; }
  .pm-fold b { color: var(--brand); white-space: nowrap; }
  .pm-fold span { flex: 1; min-width: 0; color: var(--ink-2); }
  .pm-fold i { font-style: normal; font-weight: 700; font-size: .82rem; color: var(--brand-2); }
  .pm-fold:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
  .plan-side.is-folded #plan-map { display: none; }
}

/* ---- The map fills in when you arrive at a step ---- */
@media (prefers-reduced-motion: no-preference) {
  .pm-enter .pm-city:not(.pm-none) .pm-pin, .pm-enter .pm-city:not(.pm-none) .pm-count, .pm-changed .pm-pin, .pm-changed .pm-count,
  .pm-enter .pm-city.is-home .pm-pin, .pm-enter .pm-homepin .pm-pin { transform-box: fill-box; transform-origin: center; }
  .pm-enter .pm-city:not(.pm-none) .pm-pin, .pm-enter .pm-city:not(.pm-none) .pm-count { animation: pm-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .pm-enter .pm-city:not(.pm-none) .pm-label { animation: pm-fade .45s ease both; animation-delay: calc(var(--i, 0) * 70ms + 220ms); }
  .pm-enter .pm-glow { transform-box: fill-box; transform-origin: center; animation: pm-spread .9s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .pm-enter .pm-city.is-home .pm-pin, .pm-enter .pm-homepin .pm-pin { animation: pm-drop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
  .pm-enter .pm-warm { animation: pm-fade .9s ease both .1s; }
  .pm-enter .pm-route { stroke-dasharray: 1000; animation: pm-draw 1.3s ease-out both .35s; }
  .pm-enter .pm-arc.is-route { animation: pm-fade 1s ease both .5s; }
  .pm-changed .pm-pin, .pm-changed .pm-count { animation: pm-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
  .pm-home-moved .is-home .pm-pin, .pm-home-moved .pm-homepin .pm-pin { transform-box: fill-box; transform-origin: center; animation: pm-drop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
  .pm-home-moved .pm-warm { animation: pm-fade .9s ease both .1s; }
}
@keyframes pm-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pm-drop { from { transform: translateY(-40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-spread { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: .14; } }
@keyframes pm-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@media print { .plan-map *, .plan-map { animation: none !important; } .pm-route { stroke-dasharray: none !important; } }

/* ---- Lasting lines from home: faint to cities offering your degrees, bold to your shortlist; a new one draws itself ---- */
.pm-route { stroke-width: 3; opacity: .45; }
.pm-route.is-strong { stroke-width: 5; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .pm-route.is-new { stroke-dasharray: 1000; animation: pm-draw .9s ease-out both; } }
@media print { .pm-route.is-new { stroke-dasharray: none; animation: none; } }
/* ---- A choice answers on the map: a comet from home along each new line, then a pulse where it lands ---- */
.pm-comet, .pm-ping { pointer-events: none; }
.pm-comet path { fill: none; stroke-linecap: round; stroke-dashoffset: 1100; }
.pm-comet-tail { stroke: #f6d27a; stroke-width: 12; stroke-dasharray: 200 2000; opacity: .55; }
.pm-comet-head { stroke: #fffaf0; stroke-width: 9; stroke-dasharray: 14 2000; filter: drop-shadow(0 0 6px #ffe7a3) drop-shadow(0 0 14px #f6c14b); }
.pm-comet.is-strong .pm-comet-tail { stroke-width: 15; }
.pm-ping { fill: none; stroke: #f6d27a; stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pm-ping.is-change { stroke: #fff8e6; }
@media (prefers-reduced-motion: no-preference) {
  .pm-comet-tail { animation: pm-comet-tail 1s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--n, 0) * 110ms); }
  .pm-comet-head { animation: pm-comet-head 1s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--n, 0) * 110ms); }
  .pm-ping { animation: pm-ping 1s ease-out both; animation-delay: calc(var(--n, 0) * 110ms + .9s); }
  .pm-ping.is-change { animation-delay: calc(var(--n, 0) * 90ms + 100ms); }
}
@media (prefers-reduced-motion: reduce) { .pm-comet, .pm-ping { display: none; } }
@keyframes pm-comet-tail { 0% { stroke-dashoffset: 200; opacity: 0; } 10% { opacity: .55; } 80% { opacity: .55; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes pm-comet-head { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1186; opacity: 0; } }
@keyframes pm-ping { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(3.2); } }
@media print { .pm-comet, .pm-ping { display: none; } }
/* the switch sits over the map's top corner and the caption below it, so the map keeps its place on every step */
.pm-frame { position: relative; }
.pm-frame-za .pm-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0; pointer-events: none; }
.pm-frame-world .pm-bar { margin: 0 0 8px; } /* over the world map it would hide North America's markers */
.pm-frame .pm-bar > * { pointer-events: auto; }
.pm-caption { margin: 8px 0 0; }

/* ---- The steps line docks in the header, in the sub-menu's place, once you scroll past it ---- */
/* one crossfade: the sub-menu and the steps line swap at the same moment, so the row never stands empty */
.header-steps { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
#sub-nav-plan { transition: opacity .16s ease, transform .16s ease; }
.site-header.steps-docked #sub-nav-plan { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.site-header.steps-docked .header-steps { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .header-steps, #sub-nav-plan, .site-header.steps-docked #sub-nav-plan { transform: none; } }
.header-steps { gap: 12px; }
.stepper.stepper-mini { margin: 0; padding: 0; border: 0; background: none; width: 190px; flex: none; }
.stepper.stepper-mini li { flex: 1 1 0; }
.stepper.stepper-mini li::before { top: 10px; height: 3px; }
.stepper.stepper-mini a { flex-direction: column; align-items: center; gap: 0; padding: 0; font-size: 0; }
.stepper.stepper-mini span, .stepper.stepper-mini .premium-lock { position: relative; flex: none; width: 23px; height: 23px; border-width: 2px; font-size: .72rem; }
.stepper.stepper-mini .premium-lock { top: auto; left: auto; transform: none; padding: 4px 5px 5px; }
.stepper.stepper-mini .on span { box-shadow: 0 0 0 3px rgba(237, 182, 75, .28); }
.hs-name { font-size: .85rem; color: var(--ink); white-space: nowrap; }

/* ---- Questions answered by tapping: step 1's where and grade, the world view's citizenship ---- */
.q-card { display: grid; gap: 14px; margin: 0 0 16px; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.q-card .q { margin: 0; font: 700 1.35rem/1.25 var(--serif); color: var(--brand); text-wrap: balance; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 600 .95rem/1.2 var(--font); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.choice:hover { border-color: var(--brand-2); }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.choice.is-suggested { border-color: var(--brand); background: var(--brand-soft); }
.choice.is-suggested::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--brand); }
.choice.is-waiting { border-style: dashed; color: var(--ink-3); cursor: default; }
.choices-small .choice { min-height: 36px; padding: 6px 13px; font-size: .85rem; }
.q-note { margin: -4px 0 0; font-size: .82rem; color: var(--ink-3); }
.q-note a, .q-note .linkish { color: var(--ink-2); }
.pm-extra { display: grid; gap: 8px; margin-top: 12px; justify-items: center; text-align: center; }
.pm-extra .q-note { margin: 0; }
.pm-extra .choices { justify-content: center; }
.rp-name { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.rp-name input { font: inherit; font-weight: 500; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

/* ---- Roadmap: a card per bursary ---- */
.rp-funds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; margin: 10px 0 12px; }
.rp-fund { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); break-inside: avoid; }
.rp-fund h3 { margin: 0; font: 700 1rem/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.rp-fund-by { margin: 0; font-size: .82rem; color: var(--ink-3); }
.rp-fund dl { display: grid; gap: 6px; margin: 4px 0 0; }
.rp-fund dl div { display: grid; gap: 1px; }
.rp-fund dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rp-fund dd { margin: 0; font-size: .88rem; color: var(--ink); }
@media print { .rp-funds-list { grid-template-columns: 1fr 1fr; gap: 8px; } .rp-fund { padding: 8px 10px; } .rp-fund dd { font-size: 8.5pt; } }

/* ---- Step 3: one subject open at a time, symbols as blocks ---- */
.subj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.subj-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font: 600 .95rem/1.2 var(--font); color: var(--ink-2); text-align: left; cursor: pointer; }
.subj-row:hover { border-color: var(--brand-2); }
.subj-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.subj.is-done .subj-row { color: var(--ink); }
.subj-row b { font-weight: 700; color: var(--brand); white-space: nowrap; }
.subj.is-open { padding: 14px; border: 2px solid var(--brand); border-radius: 14px; background: var(--brand-soft); display: grid; gap: 10px; }
.subj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.subj-head b { font: 700 1.1rem/1.2 var(--serif); color: var(--brand); }
.subj-head span { font-size: .8rem; color: var(--ink-3); }
.symbols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.sym { display: grid; justify-items: center; gap: 2px; min-height: 58px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.sym b { font: 800 1.25rem/1 var(--font); color: var(--brand); }
.sym small { font-size: .68rem; color: var(--ink-3); white-space: nowrap; }
.sym:hover { border-color: var(--brand-2); transform: translateY(-1px); }
.sym:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sym.on { background: var(--brand); border-color: var(--brand); }
.sym.on b, .sym.on small { color: #fff; }
.sym-none { grid-column: span 2; align-content: center; font-weight: 600; font-size: .88rem; color: var(--ink-2); }
@media (max-width: 560px) { .symbols { grid-template-columns: repeat(4, 1fr); } .sym-none { grid-column: span 4; min-height: 44px; } }
/* The open subject can be narrow on wide screens too (desktop puts the map beside it): eight symbols need about 470px, so below that they go to two rows of four */
.subj.is-open { container-type: inline-size; }
@container (max-width: 470px) { .symbols { grid-template-columns: repeat(4, 1fr); } .sym-none { grid-column: span 4; min-height: 44px; } }
.q-card .privacy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 0; font-size: .82rem; color: var(--ink-3); }
.q-card .privacy-row .remember { display: inline-flex; align-items: center; gap: 6px; }

/* ---- The parent PDF is drawn from a copy (.pdf-export) at screen media: give it the print layout ---- */
.pdf-export .route-line { flex-direction: row; overflow: visible; }
.pdf-export .route-stop { min-width: 0; text-align: center; padding: 26px 2px 0; font-size: 9.5px; }
.pdf-export .route-stop b { font-size: 10px; }
.pdf-export .route-stop::before { top: 9px; left: -50%; right: 50%; bottom: auto; width: auto; height: 4px; }
.pdf-export .route-stop i { left: 50%; top: 2px; }
.pdf-export .route-branch { border-left: 0; border-top: 2px dashed var(--accent); padding: 4px 2px 0; font-size: 9px; }
.pdf-export .rp-cover-maps { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 4px 24px; }
.pdf-export .rp-cover-box { grid-row: span 2; grid-template-rows: subgrid; }
.pdf-export .rp-cover-box .pm-svg { height: 200px; }
.pdf-export .plan-map { background: #f4f1e8; }
.pdf-export .pm-pulse, .pdf-export .pm-fold { display: none; }
.pdf-export .plan-map *, .pdf-export .pm-route { animation: none !important; stroke-dasharray: none !important; }
.pdf-export .pm-comet, .pdf-export .pm-ping { display: none; }
.pdf-export .rp-funds-list { grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf-export .rp-fund { padding: 9px 11px; }
.pdf-export .rp-fund dd { font-size: 11px; }
.q-text { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: .95rem; background: var(--surface); resize: vertical; }
.q-text:focus { outline: none; border-color: var(--brand-2); }
.q-note .remember { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.plan-subjects { margin: 0 0 12px; font-weight: 700; color: var(--brand); }
.subj-switch { margin: -2px 0 2px; flex-wrap: wrap; } /* two long labels (English Home Language / First Additional Language) wrap on narrow phones */
.subj-switch .choice { min-height: 34px; padding: 5px 12px; font-size: .82rem; white-space: nowrap; }
.subj-switch .choice { background: var(--surface); }
.subj-switch .choice.on { background: var(--brand); }

/* the estimated calendar for the following year: dashed, so it reads as an estimate */
.rp-cal-est .rp-month { border-style: dashed; }

/* Small phones (320 to 380 wide): nothing on My Map may be wider than the screen, or the page pans sideways under a finger */
@media (max-width: 380px) {
  .plan-next { white-space: normal; text-align: center; }
  .symbols { gap: 4px; }
  .sym { padding: 8px 2px; }
  .parent-row .btn { flex: 1 1 100%; text-align: center; }
  .rp-name { flex: 1 1 100%; min-width: 0; }
  .rp-name input { flex: 1; min-width: 0; }
}
.linkish[data-home="skip"], #clear-marks { padding: 10px 6px; margin: -10px -6px; } /* a full-size target without moving the line */