/* ==========================================================================
   MatricMap dashboard (explore.html) — builds on css/style.css tokens
   ========================================================================== */

.wide { max-width: 1180px; }
body.app { background: var(--paper); }
body.app main { padding-top: 28px; padding-bottom: 64px; min-height: 70vh; }
.loading-msg { color: var(--ink-3); padding: 60px 0; }
.is-unlocked .hide-unlocked { display: none; }

/* Shared explorer controls: the same filters on a phone and a desktop. */
.map-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) minmax(170px, 0.8fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.map-filters label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.map-filters input, .map-filters select { width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.map-filters input { padding: 9px 12px; }
.map-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 8px; color: var(--ink-2); font-size: 0.875rem; }
.map-result-summary p { margin: 0; }
.map-reset { padding: 8px 0 8px 12px; min-height: 44px; border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.map-reset[hidden] { display: none; }
.map-empty { padding: 28px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.map-empty h2 { font: 700 1.2rem var(--font); margin-bottom: 8px; }
.map-empty p { color: var(--ink-2); margin: 0; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--brand); color: #fff; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app button:focus-visible, .app input:focus-visible, .app select:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
#view:focus, #view h1:focus { outline: none; }
@media (max-width: 720px) {
  .map-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 10px; }
  .map-search { grid-column: 1 / -1; }
  .map-lenses { display: flex; flex-wrap: wrap; border-radius: 14px; }
  .map-lenses button { flex: 1 1 auto; min-height: 44px; }
}
@media (max-width: 380px) {
  .map-filters { grid-template-columns: minmax(0, 1fr); }
  .map-filters .map-select { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
}

/* nav */
.app-nav { display: flex; gap: 4px; margin: 0 auto 0 28px; }
.app-nav a {
  padding: 8px 12px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.app-nav a:hover { background: rgba(15, 61, 62, 0.06); }
.app-nav a.on { background: var(--brand); color: #fff; }

/* headings */
.view-head { margin-bottom: 22px; }
.view-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.lead-sm { max-width: 72ch; margin: 10px 0 0; color: var(--ink-2); font-size: 1.05rem; }
.meta { margin: 10px 0 0; color: var(--ink-3); font-size: 0.92rem; }
.section-h { margin: 38px 0 16px; }
.crumbs { margin-bottom: 12px; font-size: 0.9rem; color: var(--ink-3); }
h4 { margin: 22px 0 8px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* methodology */
.method { margin-top: 12px; max-width: 78ch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px; }
.method summary { padding: 12px 0; font-size: 0.95rem; }
.method p { font-size: 0.93rem; color: var(--ink-2); }

/* toolbar + segmented buttons */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  font: 600 0.92rem var(--font); color: var(--ink-2);
}
.seg button.on { background: var(--brand); color: #fff; }
.select { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
select {
  min-height: 40px; padding: 0 34px 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 0.95rem var(--font); max-width: 100%;
}

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; font-size: 0.86rem; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.swatch {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 6px;
  font: 700 0.8rem var(--font);
}
.demand-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}

/* heatmap */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.heat { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 760px; padding: 8px; }
.heat thead th { padding: 6px 4px 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); vertical-align: bottom; }
.heat thead a { color: inherit; text-decoration: none; display: grid; gap: 1px; justify-items: center; }
.heat thead a:hover .cname { text-decoration: underline; }
.heat .cc { font-size: 0.95rem; color: var(--ink); }
.heat .cname { font-weight: 500; color: var(--ink-3); font-size: 0.72rem; white-space: nowrap; }
.heat .corner { text-align: left; padding-left: 8px; }
.heat tbody th {
  position: sticky; left: 0; z-index: 1;
  padding: 4px 12px 4px 8px; min-width: 190px; max-width: 250px;
  text-align: left; font-weight: 600; font-size: 0.93rem; background: var(--surface);
}
.heat tbody th a { color: var(--ink); text-decoration: none; }
.heat tbody th a:hover { text-decoration: underline; }
.cluster-row th {
  position: static !important; padding: 16px 8px 4px !important; max-width: none !important;
  font-size: 0.74rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3) !important;
}
.heat td { padding: 0; text-align: center; }
.cell {
  position: relative; display: grid; place-items: center;
  height: 40px; min-width: 56px; border-radius: 7px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  transition: transform .08s, box-shadow .12s;
}
.cell:hover, .cell:focus-visible { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); z-index: 2; outline: none; }
.cell .demand-dot { position: absolute; top: 5px; right: 5px; box-shadow: none; width: 7px; height: 7px; }
.cell-empty { color: var(--ink-3); }
.cell-unknown, .swatch-unknown { background: repeating-linear-gradient(45deg, #ecebe4 0 5px, #f7f6f1 5px 10px); color: var(--ink-3); }
.facts-tight { margin-top: 10px; gap: 6px; }
.free-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #fdf1d3; color: #6b4e00; font-size: 0.68rem; font-weight: 700; vertical-align: 2px; white-space: nowrap;
}
.score { padding: 0 8px 0 12px !important; white-space: nowrap; font-size: 0.92rem; text-align: left !important; }
.score-bar { display: inline-block; width: 46px; height: 6px; margin-left: 8px; border-radius: 3px; background: var(--tint); vertical-align: 1px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: var(--brand-2); border-radius: 3px; }

/* tooltip */
.tip {
  position: absolute; top: 0; left: 0; z-index: 50; pointer-events: none;
  max-width: 300px; padding: 10px 12px; border-radius: 10px;
  background: #10272b; color: #fff; font-size: 0.85rem; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.tip[hidden] { display: none; }
.tip b { display: block; margin-bottom: 2px; }
.tip span { color: #ffd98a; font-weight: 600; }
.tip p { margin: 6px 0 0; color: #dfe9ea; }
.tip small { display: block; margin-top: 6px; color: #a9c0c2; }

/* cards & panels */
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card-plain, .panel { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-plain h2 { font: 700 1.05rem var(--font); margin-bottom: 12px; letter-spacing: 0; }
.card-plain p { color: var(--ink-2); font-size: 0.96rem; }

.degree-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.degree-head > div:first-child { flex: 1 1 420px; }
.tile { flex: 0 0 220px; padding: 18px 20px; border-radius: var(--radius); background: var(--brand); color: #fff; }
.tile-num { font: 700 2.6rem/1 var(--serif); }
.tile-num small { font-size: 1rem; opacity: 0.7; margin-left: 2px; }
.tile-label { margin-top: 4px; font-weight: 700; color: var(--accent); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tile-sub { margin-top: 8px; font-size: 0.88rem; color: #d5e6e6; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 4px 10px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; border: 1px solid var(--line); background: var(--paper); }
.chip em { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 0.78rem; }
.chip-required { border-color: var(--brand-2); background: #e6f1f0; }
.chip-note { font-weight: 500; color: var(--ink-2); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 10px; border-radius: 8px; background: var(--tint); font-size: 0.88rem; }
.framework { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--accent); background: #fdf8ea; border-radius: 0 10px 10px 0; }
.framework p { margin: 4px 0 0; font-size: 0.92rem; }

/* fan diagram */
.grid-fan { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.fan-wrap { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fan { width: 100%; height: auto; display: block; }
.fan-node { fill: var(--paper); stroke: var(--line); }
.fan-link:hover .fan-node, .fan-link.on .fan-node { fill: #e6f1f0; stroke: var(--brand-2); }
.fan-link.on .fan-node { stroke-width: 2; }
.fan-num { font: 700 12px var(--font); }
.fan-name { font: 700 12.5px var(--font); fill: var(--ink); }
.fan-sub { font: 500 10px var(--font); fill: var(--ink-3); }
.fan-root { fill: var(--brand); }
.fan-root-t { font: 700 9px var(--font); fill: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.fan-root-s { font: 700 11px var(--font); fill: #fff; }
.fan-list { display: none; list-style: none; margin: 0; padding: 0; }
.fan-list a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.fan-list a.on { background: #e6f1f0; }
.fan-list small { display: block; color: var(--ink-3); font-size: 0.8rem; }

.panel-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.panel-head h3 { font-size: 1.15rem; }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.headline { margin: 12px 0 4px; font-size: 1.05rem; font-weight: 600; }
.pathway { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink-2); }
.pathway li::marker { color: var(--brand-2); font-weight: 700; }
.facts { margin: 18px 0 0; display: grid; gap: 10px; }
.facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 0.94rem; }
.facts dt { color: var(--ink-3); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-2); }
.caveat { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 0.92rem; color: var(--ink-2); }
.sources { margin: 0; padding-left: 18px; font-size: 0.9rem; display: grid; gap: 4px; }

/* lock */
.lock {
  display: flex; gap: 16px; margin-top: 18px; padding: 20px;
  border-radius: var(--radius); border: 1px solid #cbdad4; background: var(--brand-soft);
}
.lock-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.lock-ico svg { width: 20px; height: 20px; }
.lock h4 { margin: 0 0 6px; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.lock p { font-size: 0.93rem; color: var(--ink-2); }
.lock-note { color: var(--ink); }
/* Locked page: the real layout, blurred and fading out, with the lock card on top */
.locked-preview { display: grid; margin-top: 18px; }
.locked-preview > * { grid-area: 1 / 1; min-width: 0; }
.locked-page {
  max-height: 640px; overflow: hidden; pointer-events: none; user-select: none;
  filter: blur(3px); opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.locked-preview > .lock {
  position: relative; z-index: 1; align-self: start; justify-self: center; width: min(100%, 580px); margin: 56px 0 24px;
  background: linear-gradient(var(--brand-soft), var(--brand-soft)), var(--surface);
  box-shadow: 0 12px 40px rgba(16, 40, 32, 0.18);
}

/* subject planner */
.planner-controls { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 18px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; margin-bottom: 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.planner-summary { padding: 14px 16px; border-radius: var(--radius); background: var(--brand); color: #fff; font-size: 1.05rem; }
.planner-summary b { color: var(--accent); }
.plan-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 18px 0; }
.col { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.col h2 { font: 700 1rem var(--font); letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.col .count { padding: 1px 9px; border-radius: 999px; background: var(--tint); font-size: 0.82rem; }
.col.is-closed { background: #f6f3ee; }
.col.is-closed .plan-list b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.col.is-open h2::before, .col.is-maybe h2::before, .col.is-check h2::before, .col.is-closed h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.col.is-open h2::before { background: var(--brand-2); }
.col.is-maybe h2::before { background: var(--accent); }
.col.is-closed h2::before { background: #b9b4a6; }
.col.is-check h2::before { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); } /* position unknown: a ring, not the 'within reach' dot */
.plan-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.plan-list a { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.plan-list a:hover { background: var(--tint); }
.plan-list b { font-weight: 600; }
.plan-list small { display: block; padding: 0 8px 6px; color: var(--ink-3); font-size: 0.8rem; }
.score-pill { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--tint); font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }

/* countries */
.country-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.country-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .08s; }
.country-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.country-card h2 { font: 700 1.15rem var(--font); margin: 8px 0 6px; letter-spacing: 0; }
.country-card p { font-size: 0.93rem; color: var(--ink-2); margin-bottom: 8px; }
.cc-big { display: inline-block; padding: 2px 9px; border-radius: 7px; background: var(--brand); color: var(--accent); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rank a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.rank a:hover { background: var(--tint); }
.rank .demand-dot { margin-left: 2px; }
.routes { display: grid; gap: 14px; }
.route { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.route-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.route p { color: var(--ink-2); margin: 0; font-size: 0.96rem; }
.reqs { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 0.94rem; display: grid; gap: 5px; }
.route-settle { margin-top: 10px !important; font-size: 0.92rem !important; } .route .more .reqs { margin-top: 0; } .route .more .facts { margin-top: 12px; }

/* compare */
.compare { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 0.94rem; }
.compare thead th { font-size: 1rem; }
.compare tbody th { width: 190px; color: var(--ink-3); font-weight: 600; }
.compare .big { font: 700 1.5rem var(--serif); color: var(--brand); }
.cmp-cell { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink-2); }
.compare .chips { margin: 0; }

@media (max-width: 900px) {
  .grid-fan { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app .header-row { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; row-gap: 6px; }
  .app-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { white-space: nowrap; font-size: 0.9rem; padding: 7px 11px; }
  .fan { display: none; }
  .fan-list { display: grid; gap: 2px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .tile { flex: 1 1 100%; }
  .heat tbody th { min-width: 150px; font-size: 0.86rem; }
  .free-tag { display: none; }
  .lock { flex-direction: column; }
  .locked-preview > .lock { margin-top: 32px; }
  .locked-page { filter: blur(2.5px); }
}

/* --------------------------------------------------------------------------
   AI robustness, pay, pathways
   -------------------------------------------------------------------------- */

.tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.tiles .tile { flex: 1 1 200px; max-width: 260px; text-decoration: none; }
.tile-ai { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.tile-ai .tile-num { color: var(--brand); }
.tile-ai .tile-label { color: var(--brand-2); }
.tile-ai .tile-sub { color: var(--ink-2); line-height: 1.7; }
.ai-why { margin: 0 0 22px; }

.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 2px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1.5px solid #b9c7c6; }
.pips i.on { background: var(--brand-2); border-color: var(--brand-2); }

.ai-head, .ai-row { display: grid; grid-template-columns: minmax(130px, 210px) minmax(80px, 1fr) 34px repeat(3, 92px); gap: 12px; align-items: center; }
.ai-head { padding: 0 10px 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ai-head span { text-align: center; line-height: 1.2; }
.ai-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px; margin-bottom: 18px; }
.ai-row { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.ai-row:hover, .ai-row:focus-visible { background: var(--tint); outline: none; }
.ai-name { font-weight: 600; font-size: 0.93rem; }
.ai-bar, .pay-bar { height: 10px; border-radius: 0 4px 4px 0; background: var(--tint); overflow: hidden; }
.ai-bar span, .pay-bar span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--brand-2); }
.ai-num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-row .pips { justify-self: center; }

.chart-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.scatter { width: 100%; height: auto; display: block; }
.scatter .grid { stroke: #e8e6dc; stroke-width: 1; }
.scatter .tick { font: 500 11px var(--font); fill: var(--ink-3); }
.scatter .axis { font: 600 12px var(--font); fill: var(--ink-2); }
.scatter .quad { font: 700 11px var(--font); fill: #9aa8a8; letter-spacing: 0.04em; text-transform: uppercase; }
.scatter .pt { fill: var(--brand-2); stroke: var(--surface); stroke-width: 2; }
.scatter a:hover .pt, .scatter a:focus .pt { fill: var(--accent); stroke: var(--brand); }
.scatter .pt-label { font: 600 12px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; }
.scatter .band { fill: #0f3d3e; }
.scatter .band-0 { fill-opacity: 0.045; } .scatter .band-1 { fill-opacity: 0.025; } .scatter .band-2 { fill-opacity: 0.01; }
.scatter .band-line { stroke: #cfd8d6; stroke-width: 1; stroke-dasharray: 4 4; }
.scatter .band-name { font: 700 12px var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.scatter .lead { stroke: #9aa8a8; stroke-width: 1; }
.scatter .axis-mid { font: 500 12px var(--font); fill: var(--ink-3); }
.scatter .sc-pt:hover .pt-label, .scatter .sc-pt:focus .pt-label { fill: var(--brand); text-decoration: underline; }
.scatter .sc-pt:hover .pt { r: 9; }
@media (max-width: 720px) { .scatter .pt-label { font-size: 15px; } .scatter .band-name, .scatter .axis, .scatter .axis-mid, .scatter .tick { font-size: 14px; } }

.cell-pay { font-size: 0.82rem; white-space: nowrap; padding: 0 8px; }
.za-col { font-weight: 700; font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; padding: 0 8px !important; }
.pay-chart { display: grid; gap: 7px; }
.pay-row { display: grid; grid-template-columns: 130px minmax(60px, 1fr) 64px 44px; gap: 12px; align-items: center; font-size: 0.93rem; }
.pay-row b { text-align: right; font-variant-numeric: tabular-nums; }
.pay-row small { color: var(--ink-3); }
.pay-row.is-home .pay-bar span { background: var(--accent); }
.pay-row.is-home .pay-name { font-weight: 700; }
.pay-table { margin-top: 14px; min-width: 560px; }
.pay-table small { color: var(--ink-3); }

.pathways { display: grid; gap: 16px; }
.pathway-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pw-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pw-head h3 { font-size: 1.15rem; }
.pw-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pw-step {
  position: relative; flex: 1 1 140px; max-width: 210px; padding: 10px 12px;
  border-radius: 10px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand-2);
}
.pw-step:not(:last-child)::after { content: "›"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 1.3rem; }
.pw-step b { display: block; font-size: 0.92rem; line-height: 1.3; }
.pw-step small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 0.78rem; line-height: 1.35; }
.pw-kind { display: block; margin-bottom: 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pw-train { border-top-color: #4fa19c; }
.pw-register { border-top-color: #7fbfba; }
.pw-move { border-top-color: var(--accent); }
.pw-work { border-top-color: var(--brand); background: var(--brand); border-color: var(--brand); }
.pw-work b { color: #fff; } .pw-work small, .pw-work .pw-kind { color: #cfe3e2; }
.pw-outcome { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.pathway-card .more .pw-steps { margin-top: 4px; }

@media (max-width: 720px) {
  .ai-head { display: none; }
  .ai-row { grid-template-columns: minmax(0, 1fr) 70px 30px; }
  .ai-row .pips { display: none; }
  .pw-step { max-width: none; flex-basis: 100%; }
  .pw-step:not(:last-child)::after { content: "⌄"; right: 50%; top: auto; bottom: -19px; transform: translateX(50%); }
  .pw-steps { gap: 18px; }
  .pay-row { grid-template-columns: 96px minmax(40px, 1fr) 58px 36px; gap: 8px; font-size: 0.86rem; }
}

.cell-pay sup { position: absolute; top: 2px; right: 5px; font-size: 0.7em; line-height: 1; opacity: 0.85; }

.caveat-top { margin: 0 0 22px; max-width: 90ch; } .caveat-top > p { margin: 0; color: inherit; } .caveat-top .more > p { padding-bottom: 8px; }

/* --------------------------------------------------------------------------
   Printable report
   -------------------------------------------------------------------------- */
.report { max-width: 860px; margin: 18px auto 0; padding: 36px 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.rp-cover { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--brand); }
.rp-cover h1 { font-size: 1.7rem; } .rp-cover p { margin: 2px 0 0; color: var(--ink-2); }
.rp-degree { padding: 26px 0 8px; border-bottom: 1px solid var(--line); }
.rp-degree h2 { font-size: 1.5rem; margin: 0; color: var(--brand); }
.rp-degree h3 { margin: 22px 0 8px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rp-degree p { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 8px; }
.rp-sub { color: var(--ink-3) !important; font-size: 0.9rem !important; }
.rp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rp-tiles div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.rp-tiles b { display: block; font: 700 1.7rem/1 var(--serif); color: var(--brand); }
.rp-tiles span { font-size: 0.8rem; color: var(--ink-2); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.rp-table th, .rp-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rp-table thead th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.rp-table tbody th { white-space: nowrap; font-weight: 600; }
.rp-pay td:nth-child(2) { width: 55%; vertical-align: middle; } .rp-pay .is-home .pay-bar span { background: var(--accent); }
.rp-facts { font-size: 0.88rem !important; }
.rp-foot { padding-top: 18px; } .rp-foot p { font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 720px) { .report { padding: 20px 16px; } .rp-tiles { grid-template-columns: 1fr; } .rp-table { font-size: 0.8rem; } }

/* html2pdf lays a transparent full-screen layer (left -100000px to the right edge) over the page while it renders the plan's PDF in
   the background; without this it swallows every tap and click on step 5 for those seconds */
.html2pdf__overlay { pointer-events: none !important; }

@media print {
  @page { margin: 14mm; }
  .site-header, .site-footer, .no-print, .tip, .lock, .locked-page { display: none !important; }
  /* the copies made while a PDF is being prepared (js/app.js planPdf and html2pdf's own) must not print as extra pages */
  .pdf-stage, .html2pdf__overlay, .html2canvas-container { display: none !important; }
  body, body.app { background: #fff; }
  body.app main { padding: 0; max-width: none; }
  .report { border: 0; padding: 0; margin: 0; max-width: none; }
  .rp-degree { break-before: page; border-bottom: 0; }
  .rp-degree:first-of-type { break-before: auto; }
  .rp-table tr, .pathway li, .rp-tiles { break-inside: avoid; }
  .report h2, .report h3, .report h4 { break-after: avoid; page-break-after: avoid; }
  .report p, .report li, .rp-keep, .rp-sum-box, .rp-sum-now, .rp-cal, .guide-programme, dl > div { break-inside: avoid; }
  .report p { orphans: 3; widows: 3; }
  .swatch, .pay-bar span, .chip-required { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* links stay clickable in a saved PDF: show them as links, and print the address for the short ones */
  a[href] { color: #0f3d3e; text-decoration: underline; text-decoration-color: #7fbfba; }
  .rp-online { display: block !important; }
}
.rp-online { display: none; margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-2); }

.pay-row { grid-template-columns: 130px minmax(60px, 1fr) 64px 84px; }
.rp-paypair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; break-inside: avoid; }
.rp-paypair .rp-pay td:nth-child(2) { width: 38%; }
@media (max-width: 720px) { .rp-paypair { grid-template-columns: 1fr; } .pay-row { grid-template-columns: 96px minmax(40px, 1fr) 54px 70px; } }

/* My options (prototype) */
.marks-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 10px; margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mark { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.mark span { grid-column: 1 / -1; }
.mark input[type=number] { grid-column: 1 / 3; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); font: 600 1rem var(--font); width: 100%; background: var(--paper); color: var(--ink); }
.mark input:disabled { opacity: 0.4; }
.mark i { font-style: normal; color: var(--ink-3); }
.mark-wide select { grid-column: 1 / -1; width: 100%; }
.mark-check { grid-template-columns: auto 1fr; align-content: end; padding-bottom: 8px; }
.mark-check span { grid-column: auto; }
.mark-check input { width: 18px; height: 18px; accent-color: var(--brand-2); }
.opt-list { gap: 8px; }
.opt { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.opt a { padding: 0 !important; display: flex; flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.opt-uni { font-size: 0.8rem; color: var(--ink-3); }
.opt-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.opt-req { font-size: 0.76rem; color: var(--ink-3); }
.opt small { padding: 6px 0 0 !important; color: #8a5a00 !important; }
.is-closed .opt small { color: var(--ink-3) !important; }

.mark select:disabled { opacity: 0.4; }

.privacy-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 16px; font-size: 0.88rem; color: var(--ink-2); }
.privacy-note { flex: 1 1 320px; }
.remember { display: inline-flex; gap: 7px; align-items: center; font-weight: 600; white-space: nowrap; }
.remember input { width: 17px; height: 17px; accent-color: var(--brand-2); }

.account { display: inline-flex; gap: 8px; align-items: center; margin-right: 8px; }
.acct-email { font-size: 0.82rem; color: var(--ink-2); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .acct-email { display: none; } }

/* second passport + backup plan */
.personal-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fdf1d3; color: #4d3800; font-size: 0.92rem; }
.personal-hint { margin: 0 0 12px; font-size: 0.9rem; color: var(--ink-2); }
.ancestry { display: grid; gap: 8px; max-width: 860px; }
.anc { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px; }
.anc summary { padding: 14px 0; } .anc p { font-size: 0.95rem; color: var(--ink-2); }
.rights { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 14px 0 20px; }
.right { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.right input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand-2); flex: none; }
.right small { display: block; color: var(--ink-3); font-size: 0.82rem; margin-top: 2px; }
.movers { max-width: 520px; }
.backup-first { margin-bottom: 8px; } .backup-first h2 { font: 700 1.3rem var(--serif) !important; }
.backup-list { display: grid; gap: 14px; }
.backup { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.backup h3 a { color: var(--brand); text-decoration: none; } .backup p { color: var(--ink-2); margin: 0 0 10px; }
.backup-facts { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.92rem; color: var(--ink-2); }
/* the app nav now has many items: let it scroll rather than wrap */
.app-nav { overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a { white-space: nowrap; }

/* two-row header: brand + account on top, scrolling nav underneath (the nav has grown) */
.app .header-row { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
.app .app-nav { order: 3; flex: 1 0 100%; margin: 0; padding-bottom: 2px; }
.app .brand { margin-right: auto; }
.nav-sep { align-self: center; margin: 0 4px 0 10px; padding: 2px 8px; border-radius: 999px; background: #fdf1d3; color: #6b4e00; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* My options (real data) */
.opt-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.opt-top a { flex: 1; }
.short-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.78rem; font-weight: 700; white-space: nowrap; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.short-btn span { font-size: 0.95rem; line-height: 1; }
.short-btn:hover { border-color: var(--brand); color: var(--brand); }
.short-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.short-btn.on:hover { background: #17605f; color: #fff; }
.opt.is-short { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } /* an even outline all round */
.opt-score { margin: 8px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.opt-note { margin: 5px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--ink-3); }
.opt-accr { color: var(--brand-2); }
.uni-filter .chip { cursor: pointer; } .uni-filter input { accent-color: var(--brand-2); }
.opt-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.planner-summary a { color: var(--accent); margin-left: 6px; }

/* tracker, universities, bursaries */
.tracker, .bursaries { display: grid; gap: 14px; }
.track, .bursary { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.track h3 a { color: var(--brand); text-decoration: none; }
.track-open { background: #e6f1f0; border-color: #9fcac6; } .track-urgent { background: #fdf1d3; border-color: #e3c873; font-weight: 700; }
.track-closed { background: #f1efe7; color: var(--ink-3); } .track-soon { background: var(--paper); }
.track-progs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.track-progs li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 0.93rem; }
.track-progs small { grid-column: 1 / -1; color: var(--ink-3); }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.todo label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.todo input { width: 18px; height: 18px; accent-color: var(--brand-2); }
.uni-table small { color: var(--ink-3); } .uni-table td, .uni-table th { font-size: 0.88rem; }
.bursary h3 { font-size: 1.08rem; } .bursary .meta { margin: 2px 0 8px; }
.bursary { padding: 16px 18px; } .bursary h3 { margin: 0; }
.b-filters { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.b-selects { margin-bottom: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 14px; }
.b-selects .select { display: grid; gap: 4px; } .b-selects select { width: 100%; min-width: 0; min-height: 40px; }
.b-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.b-chip-label { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.b-chip-row .chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Bursary filter toggles: pills with a tick-box that fills when chosen */
.b-chip-row .chip-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 16px 8px 11px; border: 1.5px solid #cfdcd7; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9rem/1.25 var(--font); white-space: normal; text-align: left; box-shadow: 0 1px 2px rgba(15, 61, 62, .06); transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.b-chip-row .chip-btn::before { content: ""; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #9bb8b1; border-radius: 50%; background: var(--surface); color: var(--brand); font: 800 .7rem/1 var(--font); }
.b-chip-row .chip-btn:not(.on):hover { border-color: var(--brand-2); background: var(--brand-soft); box-shadow: 0 3px 10px rgba(15, 61, 62, .1); }
.b-chip-row .chip-btn.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(15, 61, 62, .18); }
.b-chip-row .chip-btn.on::before { content: "✓"; border-color: var(--accent); background: var(--accent); color: var(--brand); }
.b-chip-row .chip-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .b-chip-row .chip-btn { transition: none; } }
.b-chip-label { flex-basis: 100%; }
.uni-routes { margin-top: 18px; } .uni-routes .guide-programme { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uni-routes .guide-programme + .guide-programme { border-top: 1px solid var(--line); } .uni-routes .guide-programme h3 { margin: 2px 0 4px; font-size: 1rem; }
.guide-kicker { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .guide-kicker a { color: var(--brand-2); text-decoration: none; }
.uni-routes details .uni-progs { margin-top: 8px; } .uni-routes .guide-programme[hidden], .uni-routes[hidden] { display: none; }
.b-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; color: var(--ink-2); } .b-count .btn { min-height: 40px; }
.b-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.b-badge { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.b-badge-open { background: #e6f1f0; border-color: #9fcac6; color: var(--brand); } .b-badge-urgent { background: #fdf1d3; border-color: #e3c873; color: #6b4e00; }
.b-badge-closed { color: var(--ink-3); } .b-badge-soon { border-style: dashed; } .b-badge-for { background: var(--tint); }
.b-facts { margin-top: 0; } .bursary .b-facts > div { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.bursary .facts > div > * { min-width: 0; } .bursary .b-more .facts > div { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
@media (max-width: 640px) { .bursary .b-more .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.bursary .b-more { margin: 10px 0 0; border: 0; border-top: 1px solid var(--line); } .bursary .b-more summary { padding: 10px 2px; min-height: 40px; font-size: 0.95rem; }
.bursary .b-more summary::after { font-size: 1.25rem; } .bursary .b-more .fine { max-width: none; }
.bursary .b-link { margin: 8px 0 0; } .b-foot { margin-top: 14px; }
/* One university: programme cards (decisive facts up front, fine print in a disclosure) */
.more, .more:first-of-type { border: 0; margin: 8px 0 0; }
.more > summary { padding: 8px 0; min-height: 40px; font-size: 0.88rem; color: var(--brand); justify-content: flex-start; gap: 8px; }
.more > summary::after { font-size: 1.1rem; }
.more > p, .more > ul { font-size: 0.9rem; margin-top: 0; }
.uni-apply { margin-bottom: 12px; } .uni-apply h2 { margin-bottom: 4px; }
.uni-score { margin: 0 0 8px; } .uni-score > p { font-size: 0.93rem; }
.uni-find { margin: 6px 0 0; }
.uni-progs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin: 8px 0 20px; }
.uni-prog { padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uni-prog[hidden] { display: none; }
.uni-prog-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.uni-prog-head h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.uni-prog-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.uni-prog-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0 2px; }
.uni-prog-facts dt { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.uni-prog-facts dd { margin: 1px 0 0; font-size: 0.92rem; color: var(--ink-2); } .uni-prog-facts dd b { color: var(--ink); font-size: 1.02rem; } .uni-prog-facts small { color: var(--ink-3); }
.uni-prog-subj { grid-column: 1 / -1; }
.uni-prog .short-btn { flex: none; min-height: 40px; }
.cost-lead { margin: 4px 0 2px; font-size: 1.02rem; color: var(--ink); }
.cost-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin: 8px 0 18px; }
.cost-card { padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cost-card h3 { margin: 0; font-size: 1rem; line-height: 1.3; }

/* My Plan: two-area nav, stepper, wizard */
.nav-plan { margin-left: 10px; background: var(--accent); color: var(--accent-ink) !important; font-weight: 800 !important; }
.nav-plan.on { background: var(--brand) !important; color: #fff !important; }
.stepper { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper li { flex: 1 0 auto; }
.stepper a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.stepper span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); font-size: 0.8rem; font-weight: 800; }
.stepper .on a { border-color: var(--brand); color: var(--ink); } .stepper .on span { background: var(--brand); color: var(--accent); }
.stepper .done span { background: var(--brand-2); color: #fff; }
.plan-card { margin-bottom: 16px; } .plan-card h2 { font: 700 1.35rem var(--serif) !important; }
.plan-h3 { margin: 22px 0 6px; font-size: 1.02rem; }
.plan-nav { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }
.btn.is-disabled { opacity: 0.45; } /* still takes the tap: it explains what is missing, or goes on if it has just become ready */
.mark input[type=text] { grid-column: 1 / -1; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); font: 500 1rem var(--font); background: var(--paper); color: var(--ink); width: 100%; }
.chip-btn { cursor: pointer; font: 600 0.9rem var(--font); min-height: 38px; } .chip-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.degree-picks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pick { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.pick.on { border-color: var(--brand-2); background: #e6f1f0; }
.pick input { width: 20px; height: 20px; accent-color: var(--brand-2); }
.pick-main small { display: block; color: var(--ink-3); font-size: 0.82rem; line-height: 1.4; margin-top: 2px; }
.teaser-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.teaser-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.teaser-list span { color: var(--ink-2); font-size: 0.93rem; }
.rp-bullets { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 0.93rem; color: var(--ink-2); }
.rp-bullets small { color: var(--ink-3); }
.rp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.93rem; }
.rp-check li::before { content: "☐ "; font-size: 1.1rem; }
.plan-tools { margin: 18px 0; padding: 14px 16px; border-radius: 12px; background: var(--tint); font-size: 0.92rem; }
@media (max-width: 720px) { .pick { grid-template-columns: auto 1fr; } .pick .opt-meta { grid-column: 2; } }

/* AI spectrum in the dashboard */
.ai-head, .ai-row { grid-template-columns: minmax(130px, 210px) minmax(120px, 1fr) 104px repeat(3, 92px); }
.ai-head .ai-axis-ends { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 0.66rem; }
.ai-head .ai-axis-ends em { font-style: normal; }
.ai-list .ai-track::before { background: var(--line); }
.ai-list .ai-track i { background: var(--brand-2); box-shadow: 0 0 0 2px var(--surface); }
.ai-word { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.tile-word { font-size: 1.7rem !important; }
.ai-track-light { margin: 10px 0 4px; }
.ai-track-light::before { background: var(--line) !important; }
.ai-track-light i { background: var(--brand-2) !important; box-shadow: 0 0 0 2px var(--surface) !important; }
@media (max-width: 720px) { .ai-row { grid-template-columns: minmax(0, 1fr) 90px 96px; } }

.ai-head-group { padding-bottom: 2px; }
.ai-group { grid-column: 4 / -1; text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink-2) !important; }
@media (max-width: 720px) { .ai-head-group { display: none; } }

/* roadmap tables must never be wider than the page: let every cell wrap */
.report { overflow-wrap: break-word; }
.rp-table { table-layout: auto; max-width: 100%; }
.rp-table tbody th { white-space: normal; }
.rp-table td, .rp-table th { overflow-wrap: break-word; word-break: normal; hyphens: manual; } /* break-word, not anywhere: columns widen to fit whole words such as "Netherlands" */
.rp-funds { table-layout: fixed; }
.rp-funds th:nth-child(1), .rp-funds td:nth-child(1) { width: 27%; }
.rp-funds th:nth-child(2), .rp-funds td:nth-child(2) { width: 33%; }
.rp-funds th:nth-child(3), .rp-funds td:nth-child(3) { width: 24%; }
.rp-funds th:nth-child(4), .rp-funds td:nth-child(4) { width: 16%; }
.rp-funds td, .rp-funds th { font-size: 0.82rem; }

/* PhD route */
.phd-models { margin-bottom: 8px; }
.phd-row { grid-template-columns: 130px minmax(60px, 1fr) 64px minmax(90px, 150px); }
.phd-list { display: grid; gap: 8px; }
.phd-list + .fine { margin-top: 16px; }
.phd-intro { margin: -6px 0 14px; max-width: 70ch; color: var(--ink-2); font-size: 0.95rem; }
.phd-cols, .phd-sum { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(150px, 1.3fr); gap: 4px 16px; align-items: center; }
.phd-cols { padding: 0 50px 0 17px; font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.phd-country, .phd-country:first-of-type { margin: 0; scroll-margin-top: 90px; }
.phd-country > summary { gap: 12px; min-height: 48px; }
.phd-country > summary::after { flex: none; }
.phd-sum { flex: 1; min-width: 0; font-weight: 500; font-size: 0.93rem; color: var(--ink-2); }
.phd-name { font-weight: 700; color: var(--ink); }
.phd-pay em { font-style: normal; font-size: 0.78rem; color: var(--ink-3); }
.phd-k { display: none; }
.chip.phd-employee { background: #dff1e6; border-color: #b9dcc7; color: #1f5c3d; }
.chip.phd-mixed { background: var(--brand-soft); color: var(--brand); }
.phd-body { padding: 0 0 16px; }
.phd-lead { margin: 0 0 4px; max-width: 70ch; }
.phd-part { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.phd-part h3 { margin: 0; font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); }
.phd-part .facts { margin-top: 8px; }
.phd-part ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.93rem; }
.phd-sources, .phd-sources:first-of-type, .lic-more, .lic-more:first-of-type { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 0; }
.phd-sources summary, .lic-more summary { padding: 12px 0; font-size: 0.93rem; min-height: 44px; }
@media (max-width: 720px) {
  .phd-cols { display: none; }
  .phd-sum { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .phd-type { justify-self: end; }
  .phd-pay, .phd-len { grid-column: 1 / -1; font-size: 0.88rem; }
  .phd-k { display: inline; color: var(--ink-3); font-weight: 600; }
}

/* Qualification & licensing */
.lic-chooser { display: grid; gap: 16px; margin-bottom: 22px; max-width: 900px; }
.lic-degree { display: grid; gap: 6px; max-width: 420px; font-size: 0.9rem; font-weight: 600; }
.lic-hint { margin: -4px 0 8px; }
.lic-list { max-width: 980px; }
.lic-list-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: 1.1rem; }
.lic-list-h small { font: 500 .85rem/1.3 var(--font); color: var(--ink-3); }
.lic-cols, .lic-row > summary { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) 20px; align-items: center; gap: 12px; }
.lic-cols { padding: 0 14px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.lic-cols::after { content: ""; }
.lic-row { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scroll-margin-top: 90px; }
.lic-row > summary { min-height: 52px; padding: 8px 14px; list-style: none; cursor: pointer; }
.lic-row > summary::-webkit-details-marker { display: none; }
.lic-row > summary::after { content: "+"; justify-self: end; font-size: 1.3rem; line-height: 1; color: var(--brand); }
.lic-row[open] > summary::after { content: "–"; }
.lic-row[open] details:not([open]) > summary::after { content: "+"; } /* the site-wide open sign would reach the folds inside */
.lic-row[open] { border: 2px solid var(--brand); }
.lic-row[open] > summary { padding: 7px 13px; border-bottom: 1px solid var(--line); }
.lic-row > summary:hover .lic-row-name { text-decoration: underline; }
.lic-row .swatch { width: 32px; height: 32px; border-radius: 50%; font-size: .9rem; }
.lic-row-name { font-size: .95rem; }
.lic-row-facts { display: contents; }
.lic-row-rec, .lic-row-demand { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.lic-row-rec .rec-pips { margin-right: 6px; }
.lic-row .lic-panel { padding: 4px 16px 16px; }
.lic-row .headline { margin-top: 12px; }
.lic-h { margin: 22px 0 0; font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); }
.lic-panel .pathway { margin-top: 10px; }
.lic-glance { margin-top: 10px; }
.lic-more p { max-width: none; }
.lic-visa { margin: 16px 0 0; font-size: 0.93rem; color: var(--ink-2); }
@media (max-width: 720px) { .phd-row { grid-template-columns: 96px minmax(40px, 1fr) 54px; } .phd-row small { grid-column: 1 / -1; } }

/* Curriculum picker (NSC / IEB / Cambridge / IB) */
.cur-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.cur-q { font-weight: 700; margin-right: 4px; }
.cur-btn { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.cur-btn:hover { border-color: var(--brand); color: var(--brand); }
.cur-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cur-notes { margin: 0 0 16px; padding: 0 0 0 18px; font-size: 0.88rem; color: var(--ink-2); display: grid; gap: 6px; }
.cur-ieb { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.intl-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 8px; background: var(--paper); }
.intl-block summary { cursor: pointer; font-weight: 700; }
.intl-block p { margin: 8px 0 0; }
@media print { .cur-pick, .cur-notes { display: none; } }

/* Typical pathways: career rail + route board (every route on one shared time axis) */
.pw-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: start; }
.pw-rail { position: sticky; top: 84px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pw-rail-h { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 2px 10px 6px; }
.pw-rail a { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.pw-rail a:hover { background: var(--paper); color: var(--brand); }
.pw-rail a.on { background: var(--brand); color: #fff; }
.pw-rail em { font-style: normal; font-weight: 500; font-size: 0.76rem; opacity: 0.7; }
/* The route board, drawn like the Competitive Careers board (css/competitive.css): column heads over a year axis, a big years
   figure, thick bars named where they fit, and diamonds and a gold-ringed finish dot for the steps that take no set time */
.pwt-board { --pwt-study: #0f3d3e; --pwt-train: #4fa19c; --pwt-register: #7fbfba; --pwt-cols: minmax(140px, 190px) 64px minmax(0, 1fr) 200px; --pwt-step: 19px; --pwt-gap: 10px;
  padding: 16px 20px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 28px; }
.pwt-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: .78rem; color: var(--ink-2); }
.pwt-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pwt-legend i { display: inline-block; flex: none; width: 16px; height: 10px; border-radius: 3px; }
.pwt-key-study { background: var(--pwt-study); }
.pwt-key-train { background: var(--pwt-train); }
.pwt-legend .pwt-key-register, .pwt-legend .pwt-key-move { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--pwt-register); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pwt-legend .pwt-key-move { background: var(--accent); }
.pwt-legend .pwt-key-work { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--accent); }
.pwt-legend .pwt-key-then { width: 18px; height: 0; border-radius: 0; border-top: 2px dotted var(--ink-3); }
.pwt-headrow, .pwt-row { display: grid; grid-template-columns: var(--pwt-cols); gap: 0 18px; align-items: center; }
.pwt-headrow { padding: 4px 0 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pwt-axis-head { display: grid; gap: 4px; }
.pwt-axis { position: relative; display: block; height: 1.1em; }
.pwt-axis i { position: absolute; transform: translateX(-50%); font-style: normal; letter-spacing: 0; }
.pwt-axis i:first-child { transform: none; }
.pwt-row { padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.pwt-row:hover .pwt-name b { color: var(--brand-2, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.pwt-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pwt-name b { display: block; font-size: .95rem; line-height: 1.25; color: var(--ink); }
.pwt-ev small { display: block; font-size: 0.74rem; color: var(--ink-3); line-height: 1.35; }
.pwt-years { display: grid; justify-items: start; line-height: 1.15; }
.pwt-years b { font: 700 1.75rem/1 var(--serif); color: var(--ink); white-space: nowrap; }
.pwt-years small { font-size: .72rem; color: var(--ink-3); }
.pwt-road { position: relative; display: block; min-width: 0; }
/* faint gridlines every two years, on the same scale as the axis */
.pwt-track { position: relative; display: block; height: 26px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(200% / 13)); }
.pwt-seg { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--surface); background-clip: padding-box; container-type: inline-size; }
.pwt-seg.pwt-start { border-radius: 6px 0 0 6px; }
.pwt-seg.pwt-end { border-radius: 0 6px 6px 0; border-right: 0; }
.pwt-seg.pwt-start.pwt-end { border-radius: 6px; }
.pwt-seg.pwt-study { background-color: var(--pwt-study); }
.pwt-seg.pwt-train { background-color: var(--pwt-train); }
.pwt-seg i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 6px; overflow: hidden; font-style: normal; font-size: .66rem; font-weight: 700; color: #fff; white-space: nowrap; }
.pwt-n { white-space: pre; }
/* A bar too narrow for its name keeps just the years; the name stays in the tip and the opened route */
@container (max-width: 42px) { .pwt-n-xs { display: none; } }
@container (max-width: 54px) { .pwt-n-s { display: none; } }
@container (max-width: 66px) { .pwt-n-m { display: none; } }
@container (max-width: 84px) { .pwt-n-l { display: none; } }
@container (max-width: 132px) { .pwt-n-xl { display: none; } }
.pwt-mark { position: absolute; top: 50%; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg); border-radius: 2px; background: var(--pwt-register); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 2px var(--surface); }
.pwt-mark.pwt-move { background: var(--accent); }
.pwt-mark.is-over { top: 0; } /* a step between two bars sits on their boundary, on the bar's top edge so the years stay readable */
.pwt-mark.pwt-study, .pwt-mark.pwt-train { background: var(--surface); } /* an optional step with no set time, between two bars */
.pwt-mark.pwt-work { width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: none; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 2px var(--surface); }
.pwt-then { position: absolute; top: 50%; height: 0; border-top: 2px dotted var(--ink-3); } /* the steps after the road take no set time: a dotted chain, not years */
.pwt-foot { margin: 0; padding: 10px 0 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); }
.trodden { display: inline-block; font-style: normal; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 3px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); }
.trodden.is-high { background: #0f3d3e; border-color: #0f3d3e; color: #fff; }
.trodden.is-mid { background: #d9ecea; border-color: #b9dcd9; color: #0f3d3e; }
.pwt-none { font-style: italic; }
.ev-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.ev-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 0.92rem; }
.ev-list li > b { font-size: 1.1rem; }
@media (max-width: 980px) {
  .pw-layout { grid-template-columns: 1fr; gap: 16px; }
  .pw-rail { position: static; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
  .pw-rail-h { display: none; }
  .pw-rail a { flex: none; white-space: nowrap; min-height: 40px; align-items: center; }
  .pw-rail a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
}
/* Tablets and small laptops: the road gets the full row width under the route, its years and the count (as on Competitive Careers) */
@media (max-width: 1199px) {
  .pwt-headrow { display: none; }
  .pwt-row { grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, 1fr); grid-template-areas: "name years ev" "road road road"; gap: 10px 18px; }
  .pwt-name { grid-area: name; } .pwt-years { grid-area: years; } .pwt-road { grid-area: road; } .pwt-ev { grid-area: ev; }
}
@media (max-width: 720px) {
  .pwt-board { padding: 12px 14px 4px; }
  .pwt-legend { gap: 6px 12px; font-size: .74rem; }
  .pwt-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name years" "road road" "ev ev"; gap: 8px 14px; }
  .pwt-years { justify-items: end; text-align: right; }
  .pwt-years b { font-size: 1.5rem; }
  .pwt-seg i { padding: 0 3px; font-size: .62rem; }
  .pwt-board { --pwt-step: 15px; --pwt-gap: 8px; } /* a nine-year route with six steps after it still fits a 360px phone */
  .pwt-mark { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .pwt-mark.pwt-work { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
}

.pwt-measure { display: block !important; }
.pwt-measure b { color: var(--ink); font-size: 0.82rem; }
.pwt-ev { display: block; }

.pwt-trend { color: var(--ink-2) !important; }

/* Quick search */
@media(max-width:720px){.start-way input{font-size:16px}}
/* Page change */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view.view-in { animation: view-in 0.22s ease-out; }
@keyframes step-in { from { opacity: .35; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.step-in { animation: step-in 0.2s ease-out; } /* the next My Map step's content; the map beside it stays still */
#view[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce), print { #view.view-in, .step-in { animation: none; } } /* print renders animations at their first frame, which is opacity 0: blank pages */
/* Phone nav scrolls sideways: fade the edge so it is clear there is more */
@media (max-width: 900px) { .app-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 30px; } }

/* Next step band: every Explore page ends by pointing somewhere */
.next-step { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin: 40px 0 18px; padding: 22px 26px; border-radius: var(--radius); background: var(--brand); color: #fff; }
.next-step b { display: block; font-family: var(--serif, Georgia, serif); font-size: 1.25rem; margin-bottom: 4px; }
.next-step p { margin: 0; max-width: 60ch; color: #d5e6e6; font-size: 0.95rem; }
.next-step-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.next-step .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.next-step .btn:not(.btn-primary):hover { border-color: #fff; }
.pwt-mini { margin-bottom: 16px; padding-top: 6px; }
.pwt-mini .pwt-row:first-child { border-top: 0; }
.plan-empty { text-align: left; max-width: 640px; }



/* Schools: class mode (projector), subject-choice pack, deadlines */
.class-mode { font-size: 118%; }
.class-mode .app-nav, .class-mode .site-footer, .class-mode .next-step, .class-mode .search-btn, .class-mode .hide-unlocked { display: none !important; }
.class-mode #view { max-width: none; }
.class-mode .view-head h1 { font-size: 2.8rem; }
.class-mode .heat td, .class-mode .heat th { font-size: 1.05em; }
.rp-school { margin: 2px 0 6px; font-weight: 700; color: var(--brand); letter-spacing: 0.02em; }
.dl-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.dl-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); border-left: 4px solid #2b827e; }
.dl-list li.dl-bursary { border-left-color: var(--accent); }
.dl-list li.is-past { opacity: 0.55; }
.dl-list time { font-weight: 700; }
.dl-list small { display: block; color: var(--ink-3); font-size: 0.8rem; }
@media (max-width: 640px) { .dl-list li { grid-template-columns: 1fr; gap: 2px; } }
@media print { .dl-list li { break-inside: avoid; } }

/* Start page */
.start-ways { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0 0 30px; }
.start-way { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; }
a.start-way:hover { border-color: var(--brand); }
.start-way h2 { margin: 0; font-size: 1.25rem; }
.start-way p { margin: 0; color: var(--ink-2); font-size: 0.93rem; }
.start-way .btn { align-self: flex-start; margin-top: auto; }
.start-way input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.start-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.start-hits a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.start-hits a:hover { background: var(--paper); }
.start-hits b { display: block; font-size: 0.93rem; }
.start-hits small { color: var(--ink-3); font-size: 0.78rem; }
.shape { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 22px; }
.shape a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; }
.shape a:hover { border-color: var(--brand); }
.shape b { display: block; color: var(--brand); margin-bottom: 3px; }
.shape span { font-size: 0.86rem; color: var(--ink-2); }
.trust-line { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); }
/* Phone layouts for the map and pay pages */
.chips-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chip { flex: none; }
.chip-btn { cursor: pointer; font: inherit; color: var(--brand); }
@media (hover: hover) {
  .chip-btn:not(.on):hover { background: var(--brand-soft); border-color: var(--brand-2); }
}
.chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-sm { margin: 0 0 12px; }
.phone-map li a, .phone-pay li a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.phone-map li b, .phone-pay li b { flex: 1; font-size: 0.95rem; }
.phone-map li small { display: block; color: var(--ink-3); font-size: 0.8rem; margin-top: 3px; }
.phone-pay .pay-za, .phone-pay .pay-cc { flex: none; min-width: 88px; white-space: nowrap; text-align: center; font-weight: 700; font-size: 0.86rem; padding: 4px 6px; border-radius: 8px; }
.phone-pay .pay-za { color: var(--ink-2); background: var(--paper); }
.phone-pay-head { display: flex; gap: 10px; padding: 0 12px 4px !important; border: 0 !important; background: transparent !important; }
.phone-pay-head span { flex: 1; } .phone-pay-head small { flex: none; min-width: 88px; text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
/* Loading skeleton: shown until the data arrives, then replaced */
.skel { padding: 8px 0; }
.skel-h, .skel-p, .skel-row { border-radius: 8px; background: linear-gradient(90deg, #ece8dc 25%, #f6f3ea 50%, #ece8dc 75%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
.skel-h { width: 46%; height: 34px; margin: 10px 0 14px; }
.skel-p { width: 72%; height: 14px; margin-bottom: 26px; }
.skel-row { height: 52px; margin-bottom: 10px; }
.skel-note { margin: 18px 0 0; font-size: 0.86rem; color: var(--ink-3); }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-h, .skel-p, .skel-row { animation: none; } }
.plan-summary { margin: -8px 0 18px; font-size: 0.86rem; color: var(--ink-2); }
.plan-details { margin-top: 18px; }
.plan-details summary { cursor: pointer; font-weight: 700; }
.plan-details summary small { font-weight: 500; color: var(--ink-3); margin-left: 6px; }

/* The two halves of the app: two buttons, and the free half's pages under them */
.app-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 auto 0 28px; }
.top-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.top-btn { font-size: 0.9rem; font-weight: 700; padding: 7px 16px; border-radius: 999px; color: var(--ink-2); text-decoration: none; }
.top-btn.on { background: var(--brand); color: #fff; }
.sub-nav { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav[hidden] { display: none; }
.sub-nav a { white-space: nowrap; }
@media (max-width: 900px) {
  .app-nav { order: 3; width: 100%; margin: 0; align-items: stretch; }
  .app .app-nav { overflow: visible; mask-image: none; -webkit-mask-image: none; padding-right: 0; }
  .top-switch { align-self: flex-start; }
  .top-btn { font-size: 0.86rem; padding: 6px 13px; }
  .app-nav .top-btn { white-space: normal; text-align: center; }
  .sub-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 30px; }
}

/* My Plan: what the paid plan includes (until unlocked) */
.premium-info { margin: 36px 0 10px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.premium-info h2 { margin: 4px 0 8px; }
.premium-info .premium-grid { display: grid; gap: 18px 36px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 18px 0 20px; }
.premium-info h3 { margin: 0 0 8px; font-size: 1.05rem; }
.premium-info .plan-steps, .premium-info .checks { margin: 0; padding-left: 20px; font-size: 0.93rem; color: var(--ink-2); display: grid; gap: 6px; }
.premium-info .checks { list-style: none; padding-left: 0; } /* the tick itself comes from the shared .checks style */

.premium-pay { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }

/* Route board on narrow screens: nothing may force the row wider than the screen */
.pw-main, .pwt-row > *, .pwt-ev, .pwt-name { min-width: 0; }
@media (max-width: 720px) { .pwt-trend { white-space: normal; } .pw-rail { max-width: 100%; } }

/* The premium tools, listed under My Matric Map; locked until bought */
.sub-nav a.is-locked { color: var(--ink-3); }
.sub-nav a.is-locked::before { content: ""; display: inline-block; width: 9px; height: 11px; margin-right: 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: 0.8; background: linear-gradient(transparent 45%, currentColor 45%); }
@media (min-width: 901px) { .sub-nav { flex-wrap: wrap; overflow: visible; } }

.opt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.opt-top > a { min-width: 0; }
.opt-top .short-btn { flex: none; margin-top: 2px; }
@media print { .short-btn { display: none; } }

/* The paid waitlist sign-up on the offer page */
.premium-signup { margin: 8px 0 18px; padding: 20px 24px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }

/* One navigation switch for the two pay comparisons. */
.pay-tabs{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-width:100%;padding:4px;margin:0 0 24px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.pay-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:999px;color:var(--ink-2);font-size:.9rem;font-weight:600;line-height:1.3;text-align:center;text-decoration:none}
.pay-tabs a:hover{background:var(--tint);color:var(--brand)}
.pay-tabs a[aria-current="page"]{background:var(--brand);color:#fff}
@media(max-width:560px){.pay-tabs{display:grid;width:100%;max-width:360px}.pay-tabs a{padding-inline:8px}}

/* Public previews explain a locked tool without loading its full data. */
.tool-preview{padding:24px;margin:24px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tool-preview>.eyebrow{font-size:.72rem;color:var(--brand);margin-bottom:8px}
.tool-preview>h2{font-size:1.3rem;margin:0 0 16px}
.tool-preview-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.tool-preview-item{padding:18px;border-radius:10px;background:var(--tint);min-width:0}
.tool-preview-item h3{font-size:.95rem;margin:0 0 8px}
.tool-preview-item p{font-size:.92rem;color:var(--ink-2);margin:0}
.tool-preview>.fine{margin:14px 0 0}.preview-caption{color:var(--ink-3)}
.premium-lock{display:inline-block;width:11px;height:13px;margin-left:7px;vertical-align:-1px;flex:none;color:currentColor;opacity:.7}
.premium-lock svg{display:block;width:100%;height:100%}
@media(max-width:560px){.tool-preview{padding:18px}.tool-preview-item{padding:15px}}

/* Field guides reuse the existing palette and disclosure layout. */
.degree-guide, .guide-choices, .guide-tracker, .guide-related { margin-block: 1.5rem; }
.degree-guide li, .guide-choices li { margin-block: .55rem; line-height: 1.6; }
.guide-programme { padding-block: .65rem 1rem; overflow-wrap: break-word; }
.guide-programme + .guide-programme { border-top: 1px solid var(--line, #d5dfd7); }
.guide-programme h3 { margin-block: .5rem; }
.guide-check { border-left: 3px solid var(--teal, #17605f); padding: .75rem 1rem; margin-block: 1rem; background: var(--paper, #f7f8f2); }
.guide-related .chips { gap: .6rem; }
.guide-related .chip { white-space: normal; }
.guide-tracker .card-plain { margin-block: 1rem; }
@media(max-width: 600px) { .guide-programme .short-btn { min-height: 44px; white-space: normal; } .guide-check { padding: .7rem; } }
@media print { .degree-guide details > * { display: block; } .guide-programme button { display: none; } .guide-programme, .guide-check { break-inside: avoid; } }
.planner-waiting{margin:18px 0 0;color:var(--ink-3);font-size:.93rem}
.studying-countries{margin:6px 0 20px}.studying-countries .chip{gap:8px;text-decoration:none}.studying-countries .swatch{width:22px;height:22px;font-size:.75rem;flex:none}
.studying-results{margin-bottom:8px}.studying-picked{margin:4px 0 14px;color:var(--ink-2)}.studying-picked a{margin-left:8px;font-weight:600}.studying-search input{width:100%}
.studying-routes{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.studying-routes li{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.studying-routes span{font-size:.92rem;color:var(--ink-2);display:block}
.studying-note{margin:-6px 0 14px;font-size:.92rem;color:var(--ink-3)}
.studying-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:4px 0 14px}.studying-bar .studying-picked{margin:0}
.studying-bar .btn .premium-lock{margin-left:6px}
.studying-report.print-only{display:none}
@media print{.studying-report.print-only{display:block}.studying-report .panel{border:0;padding:0;box-shadow:none}.studying-report .panel-head h3{display:none}.studying-report .pathway-card,.studying-report .studying-routes li{break-inside:avoid}.studying-report .rp-table .swatch{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media print{.studying-report .rp-table th{white-space:nowrap}.studying-report .rp-table td:nth-child(3),.studying-report .rp-table td:nth-child(4){white-space:nowrap}}
.parent-share{margin:22px 0;padding:22px;border-radius:var(--radius);background:var(--brand-soft);display:grid;gap:12px}
.parent-share h2{font-size:1.2rem;margin:0}
.parent-steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)}
.parent-form{display:grid;gap:8px}.parent-form label{font-weight:600}
.parent-row{display:flex;flex-wrap:wrap;gap:10px}.parent-row input{flex:1 1 240px;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:500 1rem var(--font);color:var(--ink)}.parent-row input:focus-visible{outline:2px solid var(--brand-2);outline-offset:1px}.parent-row .btn{flex:none}
.parent-share .fine{margin:0}
.report.pdf-export{border:0;border-radius:0;padding:0;margin:0;max-width:none;box-shadow:none}.pdf-export .rp-table thead th{overflow-wrap:normal;word-break:keep-all;hyphens:none}.pdf-export .rp-online{display:block}
.example-pdf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:20px 0;padding:22px;border-radius:var(--radius);background:var(--brand-soft)}
.example-pdf h2{font-size:1.2rem;margin:0 0 6px}.example-pdf p{margin:0;max-width:60ch;color:var(--ink-2)}
.example-pdf-action{display:grid;gap:6px;justify-items:start}
.rp-note{display:block;margin-top:2px;font-size:.76rem;font-weight:400;color:var(--ink-3);line-height:1.35}
.rp-apply tbody th{width:32%}.rp-apply td{font-size:.84rem}
/* the appendix flows on after the last section when there is room (each further profile still starts a page) */
/* Your year at a glance: the plan's dates on a 12-month calendar */
.rp-cal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:8px 0 6px}
.rp-month{min-height:74px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.rp-month>b{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rp-month>b em{font-style:normal;margin-left:4px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:.62rem;letter-spacing:.04em}
.rp-month.is-now{border:2px solid var(--brand);padding:6px 7px}
.rp-month.is-past{opacity:.5}.rp-month.is-empty>b{color:var(--line)}
.rp-ev{position:relative;display:block;padding-left:12px;font-size:.7rem;line-height:1.3;color:var(--ink)}
.rp-ev i{font-style:normal;font-weight:700;margin-right:4px}
.rp-ev::before{content:"";position:absolute;left:0;top:.35em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.rp-ev-open::before{box-sizing:border-box;background:#fff;border:2px solid #2f8f6a}.rp-ev-close::before{background:var(--brand)}.rp-ev-bursary::before{background:var(--accent)}
.rp-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 14px}.rp-legend .rp-ev{font-size:.72rem;color:var(--ink-3)}
.rp-month,.rp-ev::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media(max-width:720px){.rp-cal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rp-ev{overflow-wrap:break-word;word-break:normal}@media(max-width:520px){.rp-cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Page 1: your plan on a page */
.rp-summary{padding:22px 0 8px}.rp-summary>h2{font-size:1.5rem;margin:0 0 14px;color:var(--brand)}
.rp-sum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rp-sum-box{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.rp-sum-box h3{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rp-sum-box p{margin:0 0 6px;font-size:.92rem;color:var(--ink-2)}
.rp-sum-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem;color:var(--ink-2)}
.rp-sum-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.rp-sum-list b{color:var(--ink)}
.rp-chip{display:inline-block;min-width:74px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rp-chip-safe{background:#dff1e6;color:#1f6b45}.rp-chip-realistic{background:var(--brand-soft);color:var(--brand)}.rp-chip-reach{background:#fbeccb;color:#7a5410}.rp-chip-stretch{background:#eceae4;color:#5f6e76}
.rp-date{min-width:54px;font-weight:700;color:var(--brand)}
.rp-sum-now{margin-top:12px;padding:14px 16px;border-radius:10px;background:var(--brand-soft);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rp-sum-now h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}.rp-sum-now .rp-check{margin:0}
.report.pdf-export .rp-summary+.rp-degree{page-break-before:always;break-before:page}
@media(max-width:600px){.rp-sum-grid{grid-template-columns:1fr}}
.rp-sum-list li.rp-sum-fund{display:grid;gap:1px}.rp-sum-fund span{font-size:.82rem;color:var(--ink-3)}
.rp-sum-stack li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px}
/* Phones: report tables scroll sideways in their own box instead of breaking words; bigger checkboxes */
/* Phones: report tables with headings become one card per row; the column heading labels each cell. */
@media(max-width:600px){
  .report:not(.pdf-export) .rp-table.rp-labelled thead{display:none}
  .report:not(.pdf-export) .rp-table.rp-labelled,.report:not(.pdf-export) .rp-table.rp-labelled tbody,.report:not(.pdf-export) .rp-table.rp-labelled tr{display:block;width:100%}
  .report:not(.pdf-export) .rp-table.rp-labelled tr{border-bottom:1px solid var(--line);padding:8px 0}
  .report:not(.pdf-export) .rp-table.rp-labelled th,.report:not(.pdf-export) .rp-table.rp-labelled td{display:block;border:0;padding:3px 0;white-space:normal}
  .report:not(.pdf-export) .rp-table.rp-labelled td[data-label]{display:grid;grid-template-columns:37% 1fr;gap:10px}
  .report:not(.pdf-export) .rp-table.rp-labelled td[data-label]::before{content:attr(data-label);font-size:.7rem;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
}
.rp-sum-list li.rp-sum-choice{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px}.rp-sum-choice .rp-chip{margin-top:1px}
#view input[type=checkbox]{width:20px;height:20px;flex:none}
.planner-summary .planner-count{display:block;margin-top:8px;font-weight:600}
.lock-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:14px 0 10px}.lock .fine{margin:0}
.opt-gap{display:block;margin-top:4px;color:var(--ink-2)}
.opt-more{margin-top:8px;font-size:.8rem}.opt-more summary{cursor:pointer;color:var(--brand);font-weight:600;min-height:28px;display:flex;align-items:center}.opt-more .opt-note:first-of-type{margin-top:2px}
@media print{.opt-more>*{display:block}}
.opt-more,.opt-more:first-of-type{border:0;margin-top:6px}.opt-more summary{padding:4px 0;font-size:.8rem}.opt-more summary::after{font-size:1rem}.opt-more p{padding:0}
.opt-more summary{justify-content:flex-start;gap:6px}
.dl-year{margin:28px 0 4px;font-size:1.45rem}.dl-year small{display:block;font:500 .9rem/1.4 var(--font);color:var(--ink-3);margin-top:2px}
.dl-jump{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 4px}.dl-jump a{font-weight:600}
.dl-exp{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font:600 .7rem/1.6 var(--font);font-style:normal;vertical-align:middle}
.dl-list li.is-expected{border-style:dashed}
.dl-past{margin-top:26px}.dl-past summary{font-size:1rem}
.dl-kinds{display:inline-grid;grid-template-columns:repeat(3,auto);max-width:100%;margin:14px 0 4px}.dl-kinds button{min-height:40px;padding:0 12px;white-space:nowrap}@media (max-width:380px){.dl-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.dl-kinds button{padding:2px 4px;font-size:.84rem;white-space:normal;line-height:1.15}.dl-kinds button span{margin-left:1px}}.dl-count{margin:10px 0 0}
.dl-next,.dl-next:first-of-type{margin-top:28px;border-top:1px solid var(--line)}.dl-next>summary{padding:16px 2px}.dl-next>summary span{font:700 1.3rem/1.25 var(--serif);color:var(--ink)}.dl-next>summary small{display:block;font:500 .88rem/1.4 var(--font);color:var(--ink-3);margin-top:2px}
@media print{.dl-next>*,.dl-past>*{display:block}}
@media print{.dl-past>*{display:block}}
.dl-jump button{background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;font-size:.95rem}
/* Step 2: finding a degree */
.pick-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 14px}.pick-tags .fine{margin:0 4px 0 0}
.pick-tag{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--brand);border-radius:999px;background:var(--brand-soft);color:var(--brand);font:600 .88rem var(--font);cursor:pointer}
.pick-tag span{font-size:1.1rem;line-height:1}.pick-tag:hover,.pick-tag:focus-visible{background:var(--brand);color:#fff}
.pick-search{display:grid;gap:6px;margin:0 0 12px;font-weight:600;font-size:.92rem}.pick-search input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 1rem var(--font)}
.pick-interests,.pick-interests:first-of-type{border:0;margin:0 0 6px}.pick-interests summary{padding:8px 0;font-size:.92rem;justify-content:flex-start;gap:8px;color:var(--brand)}.pick-interests summary::after{font-size:1.1rem}
.field-group,.field-group:first-of-type{border:1px solid var(--line);border-radius:12px;margin:8px 0 0;padding:0 14px;background:var(--surface)}
.field-group summary{padding:13px 0;font-size:.98rem;justify-content:flex-start;gap:10px}.fg-name{flex:1;min-width:0}.fg-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}.fg-meta small{font-weight:600;color:var(--brand);font-size:.8rem;white-space:nowrap}.fg-meta .count{min-width:2.4em;text-align:center}.field-group summary::after{flex:none;width:1em;text-align:center}.field-group .degree-picks{margin:0 0 12px}
.fg-meta .count{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--tint);font-size:.82rem;font-weight:600;box-sizing:border-box}
.seg-switch{display:inline-flex;gap:4px;padding:4px;margin:6px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.seg-switch button{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 .9rem var(--font);cursor:pointer}
.seg-switch button span{font-weight:500;color:var(--ink-3);margin-left:2px}.seg-switch button[aria-pressed="true"]{background:var(--brand);color:#fff}.seg-switch button[aria-pressed="true"] span{color:#d5e6e6}
.plan-need{margin:10px 0 0;text-align:right;color:var(--warn,#9a3b1b);font-weight:600;font-size:.92rem}
/* The report's contents, under the maps: each entry links to its section (two columns on wide screens, one on phones) */
/* Contents: right under the title, the first thing a family reads. Each section with a line from the learner's own plan. */
.rp-toc{position:relative;margin:16px 0 18px;padding:20px 20px 16px;border:1px solid #d7e4df;border-radius:16px;background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%);overflow:hidden}
.rp-toc::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),#f3cf7c)}
.rp-toc-head{margin:0 0 12px}
.rp-toc-kicker{margin:0 0 2px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)}
.rp-toc .rp-toc-h{margin:0;font:700 1.45rem/1.2 var(--serif);color:var(--brand);letter-spacing:0;text-transform:none}
.rp-toc-lead{margin:4px 0 0;font-size:.92rem;color:var(--ink-2)}
.rp-toc-list,.rp-toc-sub{list-style:none;margin:0;padding:0}
.rp-toc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rp-toc-list>li{min-width:0;display:flex;flex-direction:column}.rp-toc-list>li>.rp-toc-link{flex:1}
.rp-toc-list>li.has-kids{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding-bottom:10px}
.rp-toc-list>li.has-kids:nth-child(even){grid-column:auto} /* the appendix fills the open slot beside the last section instead of a row of its own */.has-kids>.rp-toc-link{flex:none;border:0;background:none;box-shadow:none}
.rp-toc-link{display:flex;align-items:flex-start;gap:11px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.rp-toc-link:hover,.rp-toc-link:focus-visible{border-color:var(--brand-2);box-shadow:0 4px 14px rgba(15,61,62,.1)}
.rp-toc-link:hover .rp-toc-t,.rp-toc-link:focus-visible .rp-toc-t{text-decoration:underline}
.rp-toc-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font:700 .85rem/1 var(--font);font-variant-numeric:tabular-nums}
.is-extra>.rp-toc-link .rp-toc-n{background:var(--accent)}
.is-extra>.rp-toc-link .rp-toc-n::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.rp-toc-body{flex:1;min-width:0;display:grid;gap:2px}
.rp-toc-t{font-weight:700;font-size:.97rem;line-height:1.3;color:var(--brand)}
.rp-toc-note{font-size:.85rem;line-height:1.4;color:var(--ink-2)}
.rp-toc-p{display:none}
.rp-toc-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0 12px 0 51px}
.rp-toc-kid{display:inline-flex;align-items:center;gap:0;padding:4px 12px;border-radius:999px;font-size:.84rem;background:var(--brand-soft)}
.rp-toc-kid .rp-toc-n{display:none}.rp-toc-kid .rp-toc-t{font-weight:600;font-size:.84rem}
@media(max-width:600px){.rp-toc{padding:16px 14px 12px}.rp-toc .rp-toc-h{font-size:1.25rem}.rp-toc-list{grid-template-columns:1fr}.rp-toc-link{padding:10px}.rp-toc-sub{margin-left:49px}.rp-toc-kid{min-height:40px}}
@media(prefers-reduced-motion:reduce){.rp-toc-link{transition:none}}
@media print{.rp-toc{break-inside:avoid}}
.pdf-export .rp-toc{margin:8px 0 10px;padding:12px 14px 10px;border-radius:10px}
.pdf-export .rp-toc .rp-toc-h{font-size:18px}.pdf-export .rp-toc-lead{font-size:11px}.pdf-export .rp-toc-kicker{font-size:9px}
.pdf-export .rp-toc-list{gap:5px}.pdf-export .rp-toc-link{padding:6px 8px;gap:8px;border-radius:8px}
.pdf-export .rp-toc-list{grid-template-columns:repeat(2,minmax(0,1fr))} /* two columns in every PDF, also one made on a phone */
.pdf-export .rp-toc-n{width:24px;height:24px;font-size:12px}.pdf-export .rp-toc-t{font-size:15.5px}.pdf-export .rp-toc-note{font-size:13px;line-height:1.3}
.pdf-export .rp-toc-t,.pdf-export .rp-toc-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* one row each: a rare long degree or country name is cut, never wrapped */
.pdf-export .rp-toc-p{display:block;flex:none;align-self:center;min-width:2.6em;text-align:right;font-size:15px;line-height:1.1;font-weight:700;color:var(--brand-2);font-variant-numeric:tabular-nums}
.pdf-export .rp-toc-p::before{content:"Page";display:block;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} /* the number is a page number, said on every entry */
.pdf-export .rp-toc-sub{display:none}.pdf-export .rp-toc-list>li.has-kids{padding-bottom:6px;border-radius:8px}.pdf-export .rp-toc-kid{padding:2px 8px;font-size:10px}.pdf-export .rp-toc-kid .rp-toc-t{font-size:10px}.pdf-export .rp-toc-kid .rp-toc-p{min-width:0;margin-left:6px}
/* ===================================================================   Round 2 (30 Sept): Universities, University page, Costs, Deadlines, Bursaries
   ========================================================================== */
/* Shared: status badges reuse .b-badge; toggle chips reuse .b-chip-row .chip-btn */
.b-badge-urgent,.b-badge-open,.b-badge-closed,.b-badge-soon{white-space:nowrap}
/* Universities list */
.uni-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 4px}.uni-controls .seg-switch,.uni-controls .b-chip-row{margin:0}
.uni-count{margin:8px 0 10px}
.uni-card{display:flex;flex-direction:column;gap:6px;padding:18px}
.uni-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.uni-card h2{margin:4px 0 0}.uni-card .uni-card-city{margin:0;font-size:.88rem;color:var(--ink-3)}
.uni-card-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:.88rem;color:var(--ink-2)}.uni-card-stats b{font-size:1.15rem;color:var(--ink);margin-right:2px}
.uni-bar{display:flex;height:6px;border-radius:999px;background:var(--tint);overflow:hidden}.uni-bar i{display:block;height:100%;background:var(--brand)}.uni-bar i.uni-bar-routes{background:var(--accent)}
.uni-card-date{margin-top:auto;padding-top:8px;font-size:.88rem;color:var(--ink-2)}
.uni-others .journey-details summary{justify-content:flex-start;gap:10px}.uni-other-name{flex:1;min-width:0}
.uni-others .count{flex:none;padding:1px 9px;border-radius:999px;background:var(--tint);font-size:.8rem;font-weight:600;color:var(--ink-2)}
/* University page */
.uni-apply-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}.uni-apply-head h2{margin:0}
.uni-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:12px 0 4px}
.uni-date{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.uni-date dt{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}.uni-date dd{margin:2px 0 0;font-weight:700;color:var(--ink)}
.uni-date.is-main{border-color:var(--brand);background:var(--brand-soft)}.uni-date.is-past dd{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.uni-apply .facts>div{grid-template-columns:130px minmax(0,1fr)}
.uni-res,.uni-res:first-of-type{border:0;margin:0}.uni-res summary{padding:0;min-height:0;font-weight:500;color:var(--ink-2);justify-content:flex-start;gap:6px}.uni-res p{margin:6px 0 0}
.uni-apply-foot{margin:10px 0 0}
.uni-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.uni-jump-btn{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--brand);font:600 .88rem var(--font);cursor:pointer}
.uni-jump-btn span{margin-left:4px;padding:0 7px;border-radius:999px;background:var(--tint);color:var(--ink-2);font-weight:600}
.uni-jump-btn:hover,.uni-jump-btn:focus-visible{border-color:var(--brand-2);background:var(--brand-soft)}
#uni-programmes,#uni-more,#uni-intl{scroll-margin-top:118px}
.uni-find-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:8px 0 4px}
.uni-find-q{display:grid;gap:6px;font-weight:600;font-size:.92rem}.uni-find-q input{width:100%;box-sizing:border-box;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 1rem var(--font)}
.uni-find-bar #uni-count{margin:0}
@media(min-width:760px){.uni-find-bar{grid-template-columns:minmax(0,1fr) auto;align-items:end;position:sticky;top:104px;z-index:5;padding:10px 0 8px;background:var(--paper)}.uni-find-bar #uni-count{grid-column:1/-1}}
.uni-sort select{min-height:46px}
#uni-empty[hidden]{display:none}#uni-empty p{margin:0 0 10px}
/* Costs */
.cost-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.cost-links{display:flex;flex-wrap:wrap;gap:8px}
.cost-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:14px 0 6px}
.cost-tile{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cost-tile span{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}.cost-tile b{font-size:1.25rem;color:var(--ink)}.cost-tile small{font-size:.8rem;color:var(--ink-3)}
.cost-rows{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:8px}
.cost-row{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cost-row-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.cost-row-head h3{margin:0;font-size:1rem;line-height:1.3}.cost-row-head .b-badge{margin-left:4px;font-size:.72rem;vertical-align:middle}
.cost-amt b{font-size:1.1rem;color:var(--ink)}.cost-amt small{font-size:.78rem;color:var(--ink-3)}
.cost-bar{display:block;height:10px;margin:8px 0 6px;border-radius:999px;background:var(--tint);overflow:hidden}.cost-bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.cost-row:first-child .cost-bar i{background:#2b827e}
.cost-row-sub{margin:0;font-size:.84rem;color:var(--ink-3)}.cost-row-sub b{color:var(--ink-2)}
.cost-res,.cost-res:first-of-type{border:0;margin:4px 0 0}.cost-res summary{padding:6px 0;min-height:36px;font-size:.86rem;justify-content:flex-start;gap:6px}.cost-res p{margin:0 0 6px;font-size:.88rem}
.cost-np{list-style:none;margin:6px 0 18px;padding:0;display:grid;gap:6px}.cost-np li{padding:10px 14px;border:1px dashed var(--line);border-radius:12px}.cost-np small{display:block;font-size:.82rem;color:var(--ink-3)}
.cost-budget{margin-top:18px}.cost-pay{margin-top:14px}
@media print{.cost-budget>*{display:block}.cost-bar,.cost-bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* Deadlines */
.dl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0}.dl-bar .seg-switch{margin:0}
.dl-jump-next{background:none;border:0;padding:8px 0;min-height:40px;cursor:pointer;color:var(--brand);font:600 .92rem var(--font);text-decoration:underline;text-underline-offset:4px}
.dl-kinds{display:grid;grid-template-columns:repeat(3,auto)}.dl-kinds button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.dl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2b827e}.dl-dot-bursary{background:var(--accent)}
@media(max-width:480px){.dl-kinds{display:grid;width:100%;box-sizing:border-box;grid-template-columns:repeat(3,minmax(0,1fr))}.dl-kinds button{padding:2px 4px;font-size:.84rem;white-space:normal;line-height:1.15}}
.dl-year{margin:22px 0 0}.dl-count{margin:2px 0 6px;font-size:.9rem;color:var(--ink-3)}
.dl-list li{grid-template-columns:52px minmax(0,1fr) auto;align-items:center}
.dl-leaf{display:grid;justify-items:center;align-content:center;width:48px;height:50px;border-radius:9px;background:var(--brand-soft);color:var(--brand);line-height:1}
.dl-leaf b{font-size:1.2rem}.dl-leaf span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.dl-bursary .dl-leaf{background:#fbf1d9;color:#6b4e00}.is-past .dl-leaf{background:var(--tint);color:var(--ink-3)}
.dl-what b{margin-right:6px}.dl-what .dl-exp{margin-left:0}
.dl-left{display:inline-block;padding:1px 8px;border-radius:999px;font:600 .72rem/1.6 var(--font);font-style:normal;vertical-align:middle;white-space:nowrap}
.dl-left-urgent{background:#fdf1d3;color:#6b4e00}.dl-left-soon{background:#e6f1f0;color:var(--brand)}
.dl-link{font-size:.86rem;font-weight:600;white-space:nowrap}
@media(max-width:640px){.dl-list li{grid-template-columns:52px minmax(0,1fr);gap:4px 12px;align-items:start}.dl-list li .dl-link{grid-column:2;min-height:32px;display:inline-flex;align-items:center}}
/* Bursaries */
.b-caveat{margin:0 0 14px;padding:10px 12px 10px 14px;border-left:4px solid var(--accent);border-radius:8px;background:var(--tint);font-size:.9rem;color:var(--ink-2)}
.b-filters{scroll-margin-top:118px}
@media(min-width:360px){.b-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.b-selects .select{min-width:0}.b-selects select{width:100%;min-width:0}}
@media(min-width:1000px){.b-selects{grid-template-columns:repeat(4,minmax(0,1fr))}}
.b-count{position:sticky;top:104px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 4px 12px rgba(15,61,62,.08)}
.b-count-on{font-size:.85rem;color:var(--ink-3)}
.b-to-filters{margin-left:auto;background:none;border:0;padding:6px 0;min-height:40px;cursor:pointer;color:var(--brand);font:600 .88rem var(--font);text-decoration:underline;text-underline-offset:4px}
.b-group{display:flex;align-items:center;gap:8px;margin:20px 0 10px;font-size:1.15rem}.b-group .count{padding:1px 9px;border-radius:999px;background:var(--tint);font:600 .8rem var(--font);color:var(--ink-2)}
.b-when{margin:0 0 8px;padding:6px 10px;border-radius:8px;background:var(--tint);font-size:.88rem;font-weight:600;color:var(--ink-2)}
.b-when-open{background:#e6f1f0;color:var(--brand)}.b-when-urgent{background:#fdf1d3;color:#6b4e00}.b-when-closed,.b-when-none{font-weight:500;color:var(--ink-3)}
.bursary .b-link{margin:10px 0 0}.bursary .b-link .btn{min-height:40px}
.b-empty p{margin:0 0 10px}
.uni-card-stats>span{display:inline-flex;align-items:baseline;gap:3px}.uni-key{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:3px}
@media(max-width:480px){.uni-controls .seg-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;box-sizing:border-box}.uni-controls .seg-switch button{padding:0 6px}}
.uni-date.is-past dd{text-decoration:none;font-weight:600}.uni-date.is-past.is-main{border-color:var(--line);background:var(--paper)}
@media(max-width:600px){.uni-dates{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .uni-date{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:9px 12px;border:0;border-radius:0;border-top:1px solid var(--line)}.uni-date:first-child{border-top:0}.uni-date dd{margin:0}
  .uni-apply .facts>div{grid-template-columns:1fr;gap:2px}.uni-jump{gap:6px}.uni-jump-btn{padding:0 11px;font-size:.84rem}}
@media(min-width:960px){.b-group+.bursaries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}}
.b-selects .select{font-size:.9rem}
.uni-dates .uni-date{display:block}.uni-dates .uni-date dd{margin-top:1px}
/* ==== Round 2: Pay, PhD pay, AI outlook, Careers abroad (map), Countries, Country page ==== */
/* Pay pages: mode switch, the rand key said once, ranked bars with South Africa marked on every track */
.pp-seg{display:flex;width:max-content;flex-wrap:wrap;max-width:100%;margin:0 0 12px}.pp-seg button{min-height:40px;padding:0 16px;cursor:pointer}
@media(max-width:560px){.pp-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%;border-radius:14px}.pp-seg button{padding:4px 6px;white-space:normal;line-height:1.2}}
.rand-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 18px}
.rand-key>div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-3)}
.rand-key>div.on{border-color:var(--brand-2);background:var(--brand-soft);color:var(--ink-2)}
.rand-key dt{font-weight:700;font-size:.9rem;color:var(--ink)}.rand-key dt span{margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;vertical-align:1px}
.rand-key dd{margin:3px 0 0;font-size:.84rem;line-height:1.45}
@media(max-width:560px){.rand-key{grid-template-columns:1fr}.rand-key>div:not(.on){display:none}}
.pp-card{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.pp-card-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.pp-card-head h2{margin:0;font:700 1.1rem/1.3 var(--font);letter-spacing:0}
.pp-pick{display:grid;gap:4px;font-size:.8rem;font-weight:600;color:var(--ink-3)}.pp-pick select{min-height:44px;min-width:min(260px,100%);padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:600 .95rem var(--font);color:var(--ink)}
@media(max-width:560px){.pp-pick{width:100%}.pp-pick select{width:100%}}
.pp-bars{display:grid;gap:6px}
.pp-row{display:grid;grid-template-columns:130px minmax(60px,1fr) 92px 80px;gap:12px;align-items:center;font-size:.92rem}
.pp-row b{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.pp-row b sup{color:var(--ink-3)}
.pp-track{position:relative;height:16px;border-radius:0 5px 5px 0;background:var(--tint)}
.pp-track>span{display:block;height:100%;border-radius:0 5px 5px 0;background:var(--brand-2)}
.pp-ref{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--accent);z-index:1}
.pp-band{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.42) var(--mid),color-mix(in srgb,var(--brand-2) 34%,transparent) var(--mid),color-mix(in srgb,var(--brand-2) 14%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-2) 30%,transparent)}
.pp-row.is-home .pp-band{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.5) var(--mid),color-mix(in srgb,var(--accent) 60%,transparent) var(--mid),color-mix(in srgb,var(--accent) 35%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent)}
.pp-row.is-home .pp-start{border-color:#7a5a10}
.pp-row{position:relative}.pp-row.has-tip{cursor:default;border-radius:8px}.pp-row.has-tip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pp-row.has-tip:hover .pp-track,.pp-row.has-tip:focus .pp-track{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-2) 25%,transparent)}
.pp-tip{position:absolute;left:142px;top:calc(100% + 4px);z-index:8;display:none;gap:3px;min-width:220px;max-width:340px;padding:9px 12px 10px;border-radius:12px;background:#0e2d31;color:#fff;font-size:.8rem;line-height:1.35;box-shadow:0 12px 30px rgba(0,0,0,.28);pointer-events:none}
.pp-tip>strong{justify-self:start;font-size:.84rem;margin-bottom:2px}.pp-tip>span{display:grid;grid-template-columns:76px 1fr;column-gap:8px}
.pp-tip em{grid-row:span 2;font-style:normal;color:#b9cfcb}.pp-tip small{grid-column:2;color:#b9cfcb;font-size:.74rem}
.pp-row.has-tip:hover .pp-tip,.pp-row.has-tip:focus .pp-tip{display:grid}
.pp-start{position:absolute;width:10px;height:10px;margin:0 0 0 -5px;top:3px;border-radius:50%;background:var(--paper,#fff);border:2px solid #0e2d31;z-index:2}
.pp-key-band{display:inline-block;width:22px;height:10px;border-radius:0 3px 3px 0;vertical-align:-1px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand-2) 70%,#fff),color-mix(in srgb,var(--brand-2) 55%,#fff) 50%,color-mix(in srgb,var(--brand-2) 30%,transparent) 50%,color-mix(in srgb,var(--brand-2) 12%,transparent))}
.pp-key-start{display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid #0e2d31;vertical-align:0}
.pp-row.is-home .pp-track>span{background:var(--accent)}.pp-row.is-home .pp-name{font-weight:700}
.pp-x{display:inline-block;padding:1px 7px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}
.pp-x.is-up{background:var(--brand-soft);color:var(--brand)}.pp-x.is-down{background:#f6ece4;color:#8a4a1c}
.pp-foot{margin:12px 0 0;font-size:.8rem;color:var(--ink-3)}
.pp-key-home{display:inline-block;width:12px;height:10px;border-radius:2px;background:var(--accent);vertical-align:0}
.pp-more{margin:6px 0 0;font-size:.88rem}.pp-h{margin-top:8px}
.pp-chips{position:sticky;top:0;z-index:2;flex-wrap:nowrap;background:var(--paper,#faf8f2);margin-top:4px}
.pp-method,.mp-method{margin-top:18px}
.pp-picked th a{color:var(--brand);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.phone-pay .pay-cc sup{font-size:.65em}
@media(max-width:720px){.pp-bars{gap:10px}.pp-row{grid-template-columns:minmax(40px,1fr) 84px 64px;gap:2px 8px;font-size:.88rem}.pp-row .pp-name{grid-column:1/-1}.pp-row .pp-x{justify-self:start}.pp-tip{left:0;right:0;max-width:none}}
/* PhD pay: funding kind and tax as small badges instead of a sentence per row */
.phd-bar{grid-template-columns:130px minmax(60px,1fr) 62px 250px}
.pp-tags{display:flex;flex-wrap:wrap;gap:4px}
.phd-kind,.phd-tax{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;border:1px solid transparent}
.phd-kind.k-employee{background:var(--brand);color:#fff}.phd-kind.k-mixed{background:var(--brand-soft);color:var(--brand);border-color:#b9d2cb}.phd-kind.k-stipend{background:var(--tint);color:var(--ink-2);border-color:var(--line)}
.phd-tax{background:#fbf1dc;color:#7a5510;border-color:#efd9a8}
.pp-legend{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.pp-sum{display:grid;gap:1px;flex:1;min-width:0}.pp-sum small{font-weight:500;color:var(--ink-3);font-size:.82rem}
.phd-country summary{gap:10px}.pp-next{margin:18px 0 0}
@media(max-width:720px){.phd-bar{grid-template-columns:minmax(40px,1fr) 52px}.phd-bar .pp-tags{grid-column:1/-1}}
/* AI outlook: band filter chips, band headings, factor dots labelled on phones, the chart scrolls inside its card */
.ai-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:12px 16px;max-width:72ch;border:1px solid #efd9a6;background:#fdf7e9;border-radius:12px;font-size:.95rem;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ai-note p{margin:0}.ai-note b{color:var(--ink)}.ai-note small{display:block;margin-top:3px;font-size:.84rem;color:var(--ink-3)}
.ai-note-i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 .8rem/1 var(--serif);font-style:italic}
@media print{.ai-note{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.ai-filter{margin:0 0 16px}.ai-filter .chip-btn small{font-weight:600;opacity:.75}
.ai-band-h{margin:10px 10px 4px;padding:8px 0 4px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-3)}.ai-list .ai-band-h:first-child{margin-top:2px;border-top:0}
.ai-band-h b{color:var(--brand);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}.ai-band-h.ai-evolving b{color:#2b827e}.ai-band-h.ai-transforming b{color:#4d8f8a}
.ai-fs{display:contents}.ai-f{display:flex;justify-content:center}.ai-f small{display:none}
.ai-pip-key{margin:-8px 0 8px;font-size:.84rem;color:var(--ink-3)}.ai-swipe{display:none}
@media(max-width:720px){
  .ai-row{grid-template-columns:minmax(0,1fr) 70px 30px;row-gap:4px}.ai-row .ai-word{display:none}
  .ai-fs{display:flex;flex-wrap:wrap;gap:4px 12px;grid-column:1/-1}.ai-f{gap:5px;align-items:center}.ai-f small{display:inline;font-size:.72rem;color:var(--ink-3)}.ai-row .ai-f .pips{display:inline-flex}
  .ai-band-h{margin-inline:6px}
  .ai-chart{overflow-x:auto}.ai-chart .scatter{min-width:640px}.ai-swipe{display:block;margin:0 0 6px}
  .ai-fs{flex-wrap:nowrap;gap:10px}
}
/* Careers abroad: legend beside the lens switch, mini score bars on phones, a clear way out of an empty result */
.mp-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.mp-toolbar .legend{margin:0}
.mp-cover{margin-top:4px}
.mp-chips{flex-wrap:nowrap}.mp-chips .chip-btn,.pp-chips .chip-btn{flex:none;white-space:nowrap}
.mp-score{display:flex;align-items:center;gap:8px;flex:none}.mp-bar{width:52px;height:8px;border-radius:4px;background:var(--tint);overflow:hidden}.mp-bar i{display:block;height:100%;background:var(--brand-2)}
.mp-key{margin:0 0 6px}
.map-empty .btn{margin-top:14px}
/* Countries: order switch, one strength meter per card, a consistent call to action */
.cty-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 16px}.cty-bar .b-chip-row{margin:0}
.cty-compare{font-weight:600;font-size:.92rem}
.cty-card{display:flex;flex-direction:column;gap:6px}.cty-card h2{margin:2px 0 0}.cty-card p{margin:0}
.cty-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cty-stat{display:grid;gap:5px;margin-top:auto;padding-top:8px;font-size:.86rem;color:var(--ink-2)}
.cty-meter{display:block;height:8px;border-radius:4px;background:var(--tint);overflow:hidden}.cty-meter i{display:block;height:100%;background:var(--brand-2)}
.cty-go{font-weight:700;font-size:.9rem;color:var(--brand)}.cty-card:hover .cty-go{text-decoration:underline}
/* Country page: fact tiles, the first sentence of each fact with the rest folded, and a switcher to the others */
.cty-story{max-width:68ch;margin:8px 0 0;color:var(--ink-2);font-size:.95rem}
.cty-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 18px}
.cty-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:10px}
.cty-tiles li{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cty-tiles b{font:700 1.5rem/1.1 var(--serif);color:var(--brand)}.cty-tiles b small{font:500 .9rem var(--font);color:var(--ink-3)}
.cty-tiles span{font-size:.84rem;color:var(--ink-3)}
.cty-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.cty-rank a{gap:10px}.cty-deg{display:grid;flex:1;min-width:0}.cty-deg b{font-weight:600}.cty-deg small{color:var(--ink-3);font-size:.78rem}
.cty-rank .cty-meter{flex:none;width:56px}
.cty-all,.cty-all:first-of-type{border:0;margin:4px 0 0}.cty-all summary{font-size:.9rem;padding:8px;color:var(--brand)}
.cty-facts>div{grid-template-columns:130px 1fr}
.cty-more,.cty-more:first-of-type{border:0;margin:2px 0 0}.cty-more summary{padding:2px 0;font-size:.82rem;justify-content:flex-start;gap:6px;color:var(--brand)}.cty-more p{margin:4px 0 0}
.cty-switch{margin:22px 0 8px}.cty-switch .chip-btn{text-decoration:none;padding-left:16px}.cty-switch .chip-btn::before{display:none}
@media(max-width:560px){.cty-rank .cty-meter{display:none}}
@media(max-width:720px){.cty-facts>div{grid-template-columns:1fr}.cty-tiles{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}}
@media print{.cty-more>*,.cty-all>*{display:block}}
#map-results .heat tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--surface)}#map-results .heat tbody tr:hover th[scope="row"] a{color:var(--brand);text-decoration:underline}
.mp-cover{margin-top:-4px}
/* ==== Round 2 (ux-d): Tools landing, Overseas pathways, Qualification & licensing, Visa guides, Second passport, PhD route ==== */
/* Shared toggle chips: the look of the bursary 'Aimed at' pills (.b-chip-row .chip-btn), as a class any page can use.
   Buttons carry aria-pressed; links carry aria-current. */
.mm-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.mm-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 16px 8px 11px; border: 1.5px solid #cfdcd7; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9rem/1.25 var(--font); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 61, 62, .06); transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; box-sizing: border-box; }
.mm-toggle::before { content: ""; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #9bb8b1; border-radius: 50%; background: var(--surface); color: var(--brand); font: 800 .7rem/1 var(--font); box-sizing: border-box; }
.mm-toggle:not(.on):hover { border-color: var(--brand-2); background: var(--brand-soft); box-shadow: 0 3px 10px rgba(15, 61, 62, .1); }
.mm-toggle.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(15, 61, 62, .18); }
.mm-toggle.on::before { content: "✓"; border-color: var(--accent); background: var(--accent); color: var(--brand); }
.mm-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mm-toggle span { font-weight: 500; opacity: .7; }
.mm-toggle-sm { min-height: 40px; padding: 6px 14px 6px 9px; font-size: .86rem; gap: 7px; }
.mm-toggle-sm::before { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .mm-toggle { transition: none; } }

/* Tools landing */
.tools-intro .lead-sm { margin: 4px 0 0; }
.tool-group { scroll-margin-top: 90px; }
.tool-group .tool-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 12px; }
.tool-group .tool-group-head h2 { margin: 0; }
.tool-group-ask { margin: 0; font-size: .92rem; color: var(--ink-3); }
@media (max-width: 800px) {
  .tool-group .degree-directory { gap: 8px; }
  .tool-group .degree-directory .tool-card { padding: 13px 14px; gap: 12px; }
  .tool-card h3 { margin-bottom: 2px; font-size: 1rem; }
  .tool-card p { font-size: .86rem; line-height: 1.4; }
  .tool-card .degree-card-go { width: 30px; height: 30px; }
}

/* Overseas pathways */
.pw-filter { margin: 0 0 14px; }
.pw-filter .mm-toggles { margin: 0; }
.pw-count, .visa-count { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); }
.pw-count .linkish, .visa-count .linkish { margin-left: 8px; min-height: 40px; }
.pw-empty { padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 24px; }
.pw-empty p { margin: 0 0 10px; }
.pwt-num { display: block; font-size: .95rem; color: var(--ink); line-height: 1.3; }
.pwt-num small { display: inline !important; font-weight: 500; font-size: .74rem; color: var(--ink-3); }
.pwt-ev .pwt-measure { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pwt-ev .pwt-trend { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.pathway-card { display: grid; gap: 10px; padding: 18px 20px; }
.pathway-card > * { margin: 0; }
.pathway-card .pw-head { margin: 0; flex-wrap: nowrap; align-items: flex-start; }
.pw-years { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pw-watch { padding-left: 12px; border-left: 3px solid var(--accent); font-size: .92rem; color: var(--ink-2); }
.pathway-card .more { margin: 0; }
.pw-link a { font-weight: 600; font-size: .92rem; }
.pw-howto { margin-top: 22px; }
.pw-howto p { font-size: .9rem; color: var(--ink-2); }
.pw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  .pw-rail a { border: 1.5px solid #cfdcd7; background: var(--surface); }
  .pw-rail a.on { border-color: var(--brand); }
  .pw-filter .mm-toggles { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
  .pw-filter .mm-toggle { flex: none; white-space: nowrap; }
  .pathway-card { padding: 16px; }
}

/* Qualification & licensing */
.rec-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.rec-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.rec-pips i.on { background: var(--brand-2); }
.lic-tiles { display: grid; grid-template-columns: max-content 1fr; margin: 14px 0 4px; padding: 4px 14px; border-radius: 12px; background: var(--brand-soft); }
.lic-tile { display: contents; }
.lic-tile dt, .lic-tile dd { margin: 0; padding: 8px 0; border-top: 1px solid #d5e2dd; }
.lic-tile:first-child dt, .lic-tile:first-child dd { border-top: 0; }
.lic-tile dt { padding: 11px 16px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); }
.lic-tile b { font-size: .95rem; line-height: 1.35; color: var(--ink); }
.lic-tile b .rec-pips { margin-left: 6px; }
.lic-tile small { display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.3; }
.lic-h small { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.lic-panel .lic-steps { list-style: none; padding: 0; counter-reset: lic; gap: 0; margin-top: 12px; }
.lic-steps li { position: relative; counter-increment: lic; padding: 0 0 14px 40px; }
.lic-steps li::before { content: counter(lic); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 .8rem/1 var(--font); }
.lic-steps li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.lic-steps li:last-child { padding-bottom: 0; }
.lic-visa { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .93rem; }
.lic-visa-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lic-visa-list .chip { text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.lic-visa-all { font-weight: 600; }
.lic-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 560px) {
  .lic-tiles { grid-template-columns: 1fr; }
  .lic-tile dt { padding: 9px 0 0; border-top: 1px solid #d5e2dd; }
  .lic-tile dd { padding-top: 2px; border-top: 0; }
  .lic-tile:first-child dt { border-top: 0; }
  .lic-cols { display: none; }
  /* one short row per country: score, name with demand beside it, then the recognition dots and words */
  .lic-row { margin-top: 4px; border-radius: 10px; }
  .lic-row > summary { grid-template-columns: 28px minmax(0, 1fr) auto 14px; grid-template-areas: "s n d x" "s r r x"; gap: 0 8px; min-height: 0; padding: 6px 10px; line-height: 1.25; }
  .lic-row[open] > summary { padding: 5px 9px; }
  .lic-row .swatch { grid-area: s; width: 28px; height: 28px; font-size: .82rem; } .lic-row-name { grid-area: n; font-size: .9rem; }
  .lic-row > summary::after { grid-area: x; font-size: 1.1rem; }
  .lic-row-facts { display: contents; }
  .lic-row-rec { grid-area: r; min-width: 0; font-size: .78rem; color: var(--ink-3); white-space: normal; } .lic-row-rec .rec-pips { margin-right: 5px; }
  .lic-row-demand { grid-area: d; font-size: .74rem; color: var(--ink-3); }
  .lic-row .lic-panel { padding: 2px 12px 14px; }
  .lic-steps li { padding-left: 36px; }
}

/* Visa guides */
.visa-countries { margin: 4px 0 6px; }
.visa-filter { margin: 8px 0 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.visa-filter .mm-toggles { margin: 0; }
article.route { display: grid; gap: 8px; }
article.route > * { margin: 0 !important; }
article.route .route-head { justify-content: flex-start; margin: 0; }
article.route h3 { font-size: 1.1rem; }
.route-type { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-2); }
.route-conf { padding: 1px 8px; border-radius: 999px; background: var(--tint); font-size: .74rem; font-weight: 600; color: var(--ink-2); }
article.route .route-settle { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--ink); }
.route-settle b { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); }
.visa-foot { margin-top: 18px; }
@media (max-width: 720px) {
  .visa-countries { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
  .visa-countries .mm-toggle { flex: none; white-space: nowrap; }
  article.route { padding: 16px; }
}

/* Second passport */
.passport-note { font-size: .88rem; }
.passport-step { margin-top: 8px; }
.passport-step .section-h { display: flex; align-items: center; gap: 10px; }
.pp-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 .95rem/1 var(--font); }
.anc-panel { margin: 14px 0 10px; }
.anc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anc-col { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.anc-col span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-2); }
.anc-col p { margin: 4px 0 0; font-size: .95rem; color: var(--ink-2); }
.anc-panel .fine { margin: 10px 0 0; }
.anc-act { margin: 10px 0 0; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anc-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-3); font-size: .93rem; }
.movers-bars { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; max-width: 620px; }
.movers-bars a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.movers-bars a:hover b { text-decoration: underline; }
.mv-bar { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.mv-bar > span { position: absolute; inset: 0; }
.mv-bar i { display: block; height: 100%; border-radius: 5px; }
.mv-new i { background: var(--brand-2); }
.mv-old i { background: #9fc9c4; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
  .anc-cols { grid-template-columns: 1fr; }
  .movers-bars a { grid-template-columns: 1fr auto; }
  .mv-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* PhD route */
.phd-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 10px 0 8px; }
.phd-controls .mm-toggles { margin: 0; }
.phd-controls .seg-switch { margin: 0; }
.phd-intro { margin: 4px 0 12px; }
.phd-power { display: grid; gap: 2px; margin-top: 4px; max-width: 170px; }
.phd-power-bar { display: block; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.phd-power-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-2); }
.phd-power small { font-size: .74rem; color: var(--ink-3); }
.phd-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.phd-parts .phd-part { min-width: 0; }
@media (max-width: 720px) {
  .phd-parts { grid-template-columns: 1fr; }
  .phd-controls { flex-direction: column; align-items: stretch; }
  .phd-controls .seg-switch { align-self: flex-start; }
  .phd-power { max-width: 220px; }
}
@media (max-width: 380px) { .phd-controls .seg-switch button { padding: 0 10px; font-size: .84rem; } }
@media (max-width: 720px) {
  .visa-filter .mm-toggles { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
  .visa-filter .mm-toggle { flex: none; white-space: nowrap; }
}
.passport-step .section-h { font-size: 1.4rem; line-height: 1.25; margin-top: 28px; }
@media (max-width: 560px) { .passport-step .section-h { font-size: 1.2rem; } }
.view-head .btn > span[aria-hidden], .pw-link span[aria-hidden], .lic-visa-all span[aria-hidden] { margin-left: 6px; }
@media (max-width: 720px) { .phd-controls .seg-switch { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; } .phd-controls .seg-switch button { padding: 0 8px; line-height: 1.2; } }
/* ==== Round 2 (ux-a): Subjects, Degrees, Degree page, Already studying, Backup plan ==== */
/* Subjects */
.subj-controls { align-items: flex-end; }
.subj-controls .seg button { min-height: 40px; }
.subj-reset { align-self: flex-end; min-height: 40px; }
.subj-result { margin: 4px 0 0; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.subj-result-h { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink-2); } .subj-result-h b { color: var(--brand); font-size: 1.2rem; }
.subj-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--tint); gap: 2px; }
.subj-bar i { display: block; min-width: 4px; } .subj-bar .is-open { background: var(--brand-2); } .subj-bar .is-maybe { background: var(--accent); } .subj-bar .is-closed { background: #b9b4a6; }
.subj-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 6px; padding: 0; font-size: .9rem; color: var(--ink-2); }
.subj-legend li { display: inline-flex; align-items: center; gap: 6px; } .subj-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); }
.subj-legend .is-maybe::before { background: var(--accent); } .subj-legend .is-closed::before { background: #b9b4a6; } .subj-legend b { color: var(--ink); }
.subj-result .fine { margin: 0; }
.subj-tools { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 14px 0 0; padding: 10px 0; background: var(--paper); }
.subj-find { display: grid; gap: 4px; flex: 1 1 220px; max-width: 340px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.subj-find input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 500 1rem var(--font); box-sizing: border-box; }
.subj-show { margin: 0; flex-wrap: wrap; } .subj-show button { min-height: 40px; padding: 0 12px; }
.plan-cols[data-group="open"] .col:not(.is-open), .plan-cols[data-group="maybe"] .col:not(.is-maybe), .plan-cols[data-group="closed"] .col:not(.is-closed) { display: none; }
.plan-cols[data-group]:not([data-group="all"]) { grid-template-columns: 1fr; }
.plan-cols[data-group]:not([data-group="all"]) .plan-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 14px; }
.plan-cols .subj-empty { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.subj-how { margin: 0 0 8px; }
@media (max-width: 420px) { .subj-show { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .subj-show button { padding: 0 4px; font-size: .84rem; } .subj-find { max-width: none; } .subj-controls .seg button { padding: 0 11px; } }
/* Degrees directory */
.dir-controls { position: sticky; top: 0; z-index: 3; display: grid; gap: 4px; margin: 0 0 4px; padding: 10px 0 8px; background: var(--paper); }
.dir-search { display: grid; gap: 6px; max-width: 520px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.dir-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 500 1rem var(--font); box-sizing: border-box; }
.dir-fields .chip-btn small { font-weight: 500; opacity: .75; }
.dir-key { margin: -6px 0 12px; }
.dir-needs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dir-need { padding: 1px 8px; border: 1px solid #cfdcd7; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 .74rem/1.6 var(--font); }
.dir-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); } .dir-empty p { margin: 0 0 10px; color: var(--ink-2); }
.dir-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.dir-controls > * { min-width: 0; }
@media (max-width: 560px) { .dir-controls { position: static; } .dir-fields .chips { gap: 6px; } .dir-fields .chip-btn { min-height: 40px; padding: 6px 12px 6px 9px; gap: 7px; font-size: .84rem; } .dir-next .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }
@media (max-width: 560px) { #degree-directory { gap: 8px; } #degree-directory .degree-card { padding: 12px 14px; gap: 10px; } #degree-directory .degree-card h2 { margin-bottom: 2px; font-size: 1rem; } #degree-directory .degree-card p { font-size: .84rem; line-height: 1.35; } #degree-directory .dir-needs { margin-top: 6px; } #degree-directory .degree-card-go { width: 30px; height: 30px; } }
/* Degree page */
.deg-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.deg-glance > div { padding: 12px 14px; background: var(--surface); min-width: 0; }
.deg-glance dt { margin: 0 0 3px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.deg-glance dd { margin: 0; font-weight: 600; color: var(--ink); font-size: .95rem; line-height: 1.4; } .deg-glance dd small { font-weight: 500; color: var(--ink-3); }
.deg-glance .dir-need { font-size: .78rem; } .deg-glance .linkish { font-weight: 700; min-height: 32px; }
.deg-where { margin: 26px 0 8px; } .deg-where .section-h { display: flex; align-items: center; gap: 10px; } .deg-where .section-h .count { padding: 1px 10px; border-radius: 999px; background: var(--tint); font: 600 .85rem var(--font); }
.deg-where > .fine { max-width: 70ch; }
.deg-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 12px; }
.deg-progs .guide-programme, .deg-progs .guide-programme + .guide-programme { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.deg-progs .guide-programme h3 { margin: 0 0 2px; font-size: 1.02rem; } .deg-progs .guide-programme > .fine:first-of-type { margin: 0 0 8px; }
.deg-progs .guide-programme > p { font-size: .92rem; } .deg-progs .short-btn { margin-top: auto; align-self: flex-start; }
.gp-badge { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 .72rem/1.7 var(--font); white-space: nowrap; }
.deg-sources { margin: 10px 0 0; font-size: .88rem; color: var(--ink-3); } .deg-sources summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; } .deg-sources ul { margin: 4px 0 0; }
.guide-related .chip { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; } .guide-related .chip:hover { text-decoration: underline; }
.degree-deeper > summary small { display: block; margin-top: 2px; font: 500 .86rem var(--font); color: var(--ink-3); }
/* Already studying */
.studying-bar { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.studying-bar .studying-picked { display: grid; gap: 1px; margin: 0 auto 0 0; } .studying-bar .studying-picked span { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .studying-bar .studying-picked b { font-size: 1.1rem; color: var(--brand); }
.studying-bar .btn-small { min-height: 40px; }
.studying-key { margin: 0 0 6px; }
.studying-countries .chip { min-height: 40px; }
.st-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -8px 0 16px; font-size: .92rem; } .st-jump span { color: var(--ink-3); font-weight: 600; } .st-jump .linkish { min-height: 40px; font-weight: 600; }
@media (min-width: 900px) { .studying-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.studying-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Backup plan */
.bk-pick select { min-height: 44px; min-width: min(100%, 300px); font-size: 1rem; }
@media (max-width: 560px) { .bk-pick .select { display: grid; gap: 6px; width: 100%; } .bk-pick select { width: 100%; } }
.bk-kicker { margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2); }
.backup-first .pw-head { margin-bottom: 8px; } .backup-first h2 a { color: var(--brand); text-decoration: none; }
.section-h .count { margin-left: 6px; padding: 1px 10px; border-radius: 999px; background: var(--tint); font: 600 .85rem var(--font); vertical-align: middle; }
.bk-note { margin: -4px 0 12px; }
.backup .pw-head { margin-bottom: 6px; }
.bk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; gap: 8px; margin: 10px 0 0; }
.bk-fact { padding: 10px 12px; border-radius: 10px; background: var(--tint); border-left: 3px solid #b9b4a6; min-width: 0; }
.bk-fact.is-good { border-left-color: var(--brand-2); } .bk-fact.is-warn { border-left-color: var(--accent); }
.bk-fact dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px; }
.bk-fact dd { margin: 0; font-weight: 600; font-size: .92rem; color: var(--ink); } .bk-fact small { display: block; margin-top: 4px; font-weight: 500; color: var(--ink-2); font-size: .8rem; line-height: 1.4; }
.bk-meter { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .bk-meter i { display: block; height: 100%; background: var(--brand-2); }
.bk-empty { padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.bk-ways ul { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 4px; } .bk-ways p { margin: 0; }

/* ===== Round 3: Teacher guides (#/teachers) ===== */
.tg-page .journey-intro p { margin-bottom: 0; }
.tg-page .tg-grades { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.tg-page .tg-grades a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1.5px solid #cfdcd7; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 var(--font); text-decoration: none; }
.tg-page .tg-grades a:hover { border-color: var(--brand-2); background: var(--brand-soft); }
.tg-page .tg-grades a.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.tg-page .tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tg-page .tg-list li { margin: 0; }
.tg-page .tg-list a { display: grid; gap: 3px; padding: 14px 44px 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; position: relative; }
.tg-page .tg-list a::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--brand); font-weight: 700; }
.tg-page .tg-list a:hover { border-color: var(--brand-2); }
.tg-page .tg-list b { font-size: 1rem; } .tg-page .tg-list span { font-size: .9rem; color: var(--ink-2); }
.tg-page .tg-guide h2 { margin: 0 0 8px; font-size: 1.45rem; }
.tg-page .tg-outcome { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--tint); }
.tg-page .tg-blocks { display: grid; gap: 12px; }
.tg-page .tg-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tg-page .tg-block h3 { margin: 0 0 6px; font: 700 .74rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2); }
.tg-page .tg-block p { margin: 0; }
.tg-page .tg-block ol { margin: 0; padding-left: 22px; } .tg-page .tg-block li { margin: 6px 0; }
.tg-page .tg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 20px 0 0; }
.tg-page .tg-print-btn { min-height: 40px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tg-page .tg-note { margin: 22px 0 0; font-size: .85rem; color: var(--ink-3); }
.tg-page .tg-print { display: none; }
@media (min-width: 800px) { .tg-page .tg-blocks { grid-template-columns: 1fr 1.6fr 1fr; align-items: start; } }
@media print { .tg-page .tg-print { display: block; } .tg-page .tg-print .tg-guide { break-inside: avoid; margin-bottom: 18px; } .tg-page .tg-list, .tg-page .tg-grades { display: none; } .tg-page .tg-blocks { grid-template-columns: 1fr; } }

/* ===== Round 3: Our sources (#/method) ===== */
.method-page { max-width: 820px; }
.method-page .method-rows { display: grid; margin: 4px 0 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.method-page .method-rows > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 20px; padding: 13px 16px; }
.method-page .method-rows > div + div { border-top: 1px solid var(--line); }
.method-page .method-rows dt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.method-page .method-rows dd { margin: 0; font-weight: 600; }
.method-page .method-unis { margin-top: 4px; font-weight: 400; }
.method-page .method-unis summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; color: var(--brand); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.method-page .method-unis p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-2); }
.method-page .method-h { margin: 0 0 10px; font-size: 1.2rem; }
.method-page .method-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.method-page .method-list li { margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--brand-soft); color: var(--ink-2); }
.method-page .method-list b { color: var(--ink); }
.method-page .method-note { margin: 20px 0 0; font-size: .9rem; color: var(--ink-3); }
@media (max-width: 600px) { .method-page .method-rows > div { grid-template-columns: minmax(0, 1fr); } }

/* Our sources: how every fact is audited, as six blocks joined by arrows (a row from 1000px, where the page widens; a
   column below), under a line about the AI setup and three numbers from the latest full audit. */
.method-page { --ac-critical: #c2410c; --ac-major: #00856d; --ac-minor: #50c79f; }
.audit-flow { margin: 0 0 8px; }
.audit-flow .af-ai { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.audit-flow .af-ai-mark { flex: none; color: #b7862a; font-size: 1.05rem; line-height: 1.5; }
.audit-flow .af-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.audit-flow .af-stats[hidden] { display: none; }
.audit-flow .af-stats li { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--brand); color: #dfe9e5; font-size: .84rem; line-height: 1.35; }
.audit-flow .af-stats b { display: block; margin-bottom: 2px; font-size: 1.5rem; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.audit-flow .af-flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.audit-flow .af-flow li { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 14px 8px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
/* the arrow to the next block */
.audit-flow .af-flow li + li::before { content: ""; position: absolute; top: 50%; left: -18px; width: 10px; height: 2px; background: var(--brand); }
.audit-flow .af-flow li + li::after { content: ""; position: absolute; top: calc(50% - 5px); left: -9px; border: 6px solid transparent; border-left: 7px solid var(--brand); border-right: 0; }
.audit-flow .af-num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--brand); color: var(--accent); font-weight: 800; font-size: .92rem; }
.audit-flow .af-flow h3 { margin: 0 0 4px; font-size: .95rem; line-height: 1.25; }
.audit-flow .af-flow p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.audit-flow .af-flow li[hidden], .audit-flow .af-chip[hidden] { display: none; }
/* Steps where many AI checkers work at once: a stack of cards with a few lanes running side by side */
.audit-flow .af-flow .af-par { box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--line), 6px 6px 0 -1px var(--surface), 6px 6px 0 0 var(--line); }
.audit-flow .af-lanes { display: grid; gap: 4px; width: min(100%, 110px); margin: auto 0 0; padding-top: 10px; }
.audit-flow .af-done .af-chip { margin-top: auto; }
.audit-flow .af-lanes i { position: relative; height: 3px; border-radius: 2px; background: var(--brand-soft); overflow: hidden; }
.audit-flow .af-lanes i::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; border-radius: 2px; background: var(--brand); animation: af-run 2.6s linear infinite; }
.audit-flow .af-lanes i:nth-child(2)::after { animation-duration: 2.1s; animation-delay: -.8s; }
.audit-flow .af-lanes i:nth-child(3)::after { animation-duration: 3s; animation-delay: -1.9s; }
.audit-flow .af-lanes i:nth-child(4)::after { animation-duration: 2.4s; animation-delay: -1.2s; }
@keyframes af-run { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .audit-flow .af-lanes i::after { animation: none; left: 12%; }
  .audit-flow .af-lanes i:nth-child(2)::after { left: 52%; }
  .audit-flow .af-lanes i:nth-child(3)::after { left: 30%; }
  .audit-flow .af-lanes i:nth-child(4)::after { left: 64%; }
}
.audit-flow .af-chip { display: inline-block; margin-top: 8px; white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); font-size: .74rem; font-weight: 700; line-height: 1.45; }
/* The last step: the gate that holds known mistakes at zero */
.audit-flow .af-flow .af-done { border-color: var(--brand); background: var(--brand); color: #dfe9e5; }
.audit-flow .af-done .af-num { background: var(--accent); color: var(--brand); }
.audit-flow .af-done h3 { color: #fff; }
.audit-flow .af-flow .af-done p { color: #dfe9e5; }
.audit-flow .af-done .af-chip { background: var(--accent); color: var(--brand); }
.audit-flow .af-between { margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); }
@media (min-width: 1000px) and (max-width: 1199px) { .audit-flow .af-flow h3 { font-size: .88rem; } }
@media (max-width: 999px) {
  .audit-flow .af-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .audit-flow .af-flow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 11px 14px; text-align: left; }
  .audit-flow .af-num { grid-row: 1 / span 4; margin: 0; }
  .audit-flow .af-lanes, .audit-flow .af-chip { grid-column: 2; justify-self: start; }
  .audit-flow .af-lanes { margin: 0; padding-top: 9px; }
  .audit-flow .af-done .af-chip { margin-top: 8px; }
  /* the arrow points down instead, under the numbers */
  .audit-flow .af-flow li + li::before { top: -18px; left: 28px; width: 2px; height: 10px; }
  .audit-flow .af-flow li + li::after { top: -9px; left: 23px; border: 6px solid transparent; border-top: 7px solid var(--brand); border-bottom: 0; }
}
@media (max-width: 520px) { .audit-flow .af-stats { grid-template-columns: minmax(0, 1fr); } .audit-flow .af-stats li { display: flex; align-items: baseline; gap: 10px; } .audit-flow .af-stats b { flex: none; min-width: 2.8em; margin: 0; } }

/* Our sources: mistakes found by each full audit, a line per severity. Critical stands out in burnt orange; major and minor are two steps of one green. */
.method-audits { margin: 0 0 26px; } /* its colours are set on .method-page, shared with the flow diagram */
.method-audits > p { margin: 0 0 12px; color: var(--ink-2); }
.audit-chart { margin: 0; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.audit-chart .ac-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; padding: 0; list-style: none; font-size: .85rem; color: var(--ink-2); }
.audit-chart .ac-key li { display: inline-flex; align-items: center; gap: 7px; }
/* the key mirrors the marks: a short line with its point */
.audit-chart .ac-key i, .audit-chart .ac-levels i { position: relative; width: 20px; height: 2px; border-radius: 1px; background: var(--ac-major); }
.audit-chart .ac-key i::after, .audit-chart .ac-levels i::after { content: ""; position: absolute; left: 6px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
.audit-chart .ac-key i.ac-critical, .audit-chart .ac-levels i.ac-critical { background: var(--ac-critical); }
.audit-chart .ac-key i.ac-minor, .audit-chart .ac-levels i.ac-minor { background: var(--ac-minor); }
.audit-chart .ac-plot svg { display: block; overflow: visible; font: 12px var(--font); }
.audit-chart .ac-grid { stroke: var(--line); stroke-width: 1; }
.audit-chart .ac-base { stroke: #c9c5b6; stroke-width: 1; }
.audit-chart .ac-tick { fill: var(--ink-3); text-anchor: end; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.audit-chart .ac-value { fill: var(--ink-2); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.audit-chart .ac-value .ac-name { font-weight: 600; }
.audit-chart .ac-v-critical .ac-name { fill: var(--ac-critical); }
.audit-chart .ac-v-major .ac-name { fill: var(--ac-major); }
.audit-chart .ac-v-minor .ac-name { fill: #2a9672; } /* the minor green, darkened enough to read as text */
.audit-chart .ac-lead { stroke-width: 1; opacity: .7; }
.audit-chart .ac-lead.ac-critical { stroke: var(--ac-critical); }
.audit-chart .ac-lead.ac-major { stroke: var(--ac-major); }
.audit-chart .ac-lead.ac-minor { stroke: var(--ac-minor); }
.audit-chart .ac-date { fill: var(--ink-2); text-anchor: middle; }
.audit-chart .ac-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.audit-chart .ac-line.ac-critical { stroke: var(--ac-critical); }
.audit-chart .ac-line.ac-major { stroke: var(--ac-major); }
.audit-chart .ac-line.ac-minor { stroke: var(--ac-minor); }
.audit-chart .ac-dot { stroke: var(--surface); stroke-width: 2; }
.audit-chart .ac-dot.ac-critical { fill: var(--ac-critical); }
.audit-chart .ac-dot.ac-major { fill: var(--ac-major); }
.audit-chart .ac-dot.ac-minor { fill: var(--ac-minor); }
.audit-chart .ac-hit { fill: transparent; }
.audit-chart .ac-launch line { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.audit-chart .ac-launch text { fill: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.audit-chart .ac-table .ac-launch-row td { text-align: left; color: var(--ink-2); font-style: italic; }
.audit-chart .ac-cross { stroke: var(--ink-3); stroke-width: 1; opacity: 0; }
.audit-chart .ac-col { cursor: default; outline: none; }
.audit-chart .ac-col:hover .ac-cross, .audit-chart .ac-col:focus-visible .ac-cross { opacity: .55; }
.audit-chart .ac-col:hover .ac-dot, .audit-chart .ac-col:focus-visible .ac-dot { r: 5.5px; }
.audit-chart .ac-col:focus-visible .ac-hit { stroke: var(--brand); stroke-width: 2; }
.audit-chart figcaption { margin: 10px 0 0; font-size: .85rem; color: var(--ink-3); }
/* each severity named in its line colour, with what it means */
.audit-chart .ac-levels { display: grid; gap: 8px; margin: 0 0 10px; }
.audit-chart .ac-levels div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.audit-chart .ac-levels dt { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.audit-chart .ac-levels i { flex: none; top: -1px; }
.audit-chart .ac-levels dd { margin: 0; color: var(--ink-2); }
.audit-chart figcaption > p { margin: 0; }
.audit-chart .ac-numbers { margin-top: 6px; font-size: .9rem; overflow-x: auto; } /* six columns: never wider than the card */
.audit-chart .ac-numbers summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.audit-chart .ac-table { width: 100%; margin: 4px 0 2px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.audit-chart .ac-table th, .audit-chart .ac-table td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: right; }
.audit-chart .ac-table th:first-child { text-align: left; }
.audit-chart .ac-table thead th { border-top: 0; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
/* Desktop: the page uses the card's width. Where facts come from (the lead line and the three source rows, stacked) sits
   beside the graph of mistakes found by each audit, with the severity key beside the graph; the flow spans the width under
   both, and running text keeps a readable line length. Phones and tablets keep the single column above. */
@media (min-width: 1000px) {
  .method-page { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 36px; align-items: start; }
  .method-page > * { grid-column: 1 / -1; }
  .method-page > .journey-intro { display: contents; }
  .method-page > .journey-intro h1 { grid-column: 1 / -1; margin: 10px 0 18px; }
  .method-page > .journey-intro p { grid-column: 1; grid-row: 2; margin: 2px 0 14px; font-size: 1.12rem; line-height: 1.45; color: var(--ink); }
  .method-page .method-note, .audit-flow .af-between { max-width: 72ch; }
  .method-page .method-rows { grid-column: 1; grid-row: 3; margin: 0 0 30px; }
  .method-page .method-rows > div { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 14px 16px; }
  .method-audits { grid-column: 2; grid-row: 2 / span 3; margin-bottom: 30px; }
  .method-audits > p { max-width: 72ch; }
  /* no graph (audits.json did not load): the source rows go back across the width */
  .method-page:has(.method-audits[hidden]) > .journey-intro p, .method-page:has(.method-audits[hidden]) .method-rows { grid-column: 1 / -1; grid-row: auto; }
  /* the graph takes most of its column and the severity notes sit beside it as its key, with the numbers table under both */
  .audit-chart { display: grid; grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: auto auto auto; gap: 0 22px; padding: 18px 20px 14px; }
  .audit-chart .ac-key { display: none; } /* the severity list beside the graph is its key */
  .audit-chart .ac-plot { grid-column: 1; grid-row: 1; padding-top: 6px; }
  /* the key beside the graph; the note on what is shown under the graph */
  .audit-chart figcaption { display: contents; }
  .audit-chart .ac-levels { grid-column: 2; grid-row: 1 / span 2; align-self: center; gap: 12px; margin: 0; padding-left: 18px; border-left: 1px solid var(--line); font-size: .88rem; }
  .audit-chart figcaption > p { grid-column: 1; grid-row: 2; margin: 8px 0 0; font-size: .82rem; }
  .audit-chart .ac-levels div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .audit-chart .ac-levels dt { font-size: .95rem; }
  .audit-chart .ac-levels dd { line-height: 1.4; }
  .audit-chart .ac-numbers { grid-column: 1 / -1; grid-row: 3; }
}
/* Phones: the six-column numbers table fits a 320 px screen (short headers, no "about", tight cells). */
@media (max-width: 600px) { .audit-chart { padding: 12px 10px 10px; } .audit-chart .ac-table th, .audit-chart .ac-table td { padding: 7px 2px; } .audit-chart .ac-table { font-size: .8rem; } .audit-chart .ac-table thead th { font-size: .72rem; hyphens: auto; } .audit-chart .ac-about { display: none; } }

/* ===== Round 3: legal pages (#/terms, #/privacy, #/refunds) ===== */
.legal-doc { padding-top: 8px; max-width: 760px; }
.legal-doc .legal-tabs { display: inline-flex; gap: 3px; margin: 0 0 18px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.legal-doc .legal-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
.legal-doc .legal-tabs a:hover { background: var(--tint); }
.legal-doc .legal-tabs a.on { background: var(--brand); color: #fff; }
.legal-doc h1 { margin-bottom: 4px; }
.legal-doc h1 + .fine { margin: 0 0 16px; }
.legal-doc .legal-summary { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--tint); }
.legal-doc .legal-summary p { margin: 0; color: var(--ink); }
.legal-doc .legal-summary ul { margin: 8px 0 0; gap: 4px; }
.legal-doc .legal-summary li { color: var(--ink); }
.legal-doc .legal-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.legal-doc .legal-toc span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.legal-doc .legal-toc button { min-height: 36px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand); font: 600 .84rem/1.2 var(--font); cursor: pointer; }
.legal-doc .legal-toc button:hover { border-color: var(--brand-2); }
.legal-doc h2 { padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.legal-doc h2:focus { outline: none; }
.legal-doc .legal-contact { margin-top: 28px; font-size: .9rem; }
@media (max-width: 560px) { .legal-doc .legal-toc button { min-height: 40px; } .legal-doc .legal-tabs { display: flex; } .legal-doc .legal-tabs a { flex: 1; justify-content: center; } }

/* ===== Round 3: welcome (#/welcome) ===== */
.welcome-view .welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
/* ===== Round 3: My Matric Map steps 1-4, My options, My shortlist, Access (all rules scoped to these pages) ===== */
/* Option cards (step 4 and My options): fee and places share a row with the shortlist button */
.opt .opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.opt .opt-foot .opt-meta { margin: 0; }
.opt .opt-foot .short-btn { margin-left: auto; min-height: 40px; }
.opt .opt-top > a { flex-basis: auto; }
/* The four result groups as counts that switch the list */
.opt-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.opt-tabs .opt-tab { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 8px; min-height: 58px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: 600 .84rem/1.2 var(--font); text-align: left; cursor: pointer; }
.opt-tabs .opt-tab b { grid-row: span 2; font-size: 1.4rem; line-height: 1; color: var(--ink); }
.opt-tabs .opt-tab span { padding-right: 10px; }
.opt-tabs .opt-tab span::before { content: ""; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; }
.opt-tabs .opt-tab.is-open span::before { background: var(--brand-2); }
.opt-tabs .opt-tab.is-maybe span::before { background: var(--accent); }
.opt-tabs .opt-tab.is-check span::before { box-shadow: inset 0 0 0 2px var(--accent); }
.opt-tabs .opt-tab.is-closed span::before { background: var(--ink-3); }
.opt-tabs .opt-tab:not(:disabled):hover { border-color: var(--brand-2); }
.opt-tabs .opt-tab[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(15, 61, 62, .18); }
.opt-tabs .opt-tab[aria-pressed="true"] b { color: var(--accent); }
.opt-tabs .opt-tab:disabled { opacity: .55; cursor: default; }
.opt-tabs .opt-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt-panels { grid-template-columns: 1fr; margin-top: 10px; }
.opt-panels .col { padding: 0; border: 0; background: none; }
.opt-panels .col[hidden] { display: none; }
.opt-panels .opt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0; }
.opt-panels .opt-rest { margin-top: 10px; }
.opt-panels .opt-rest > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--brand); border-radius: 999px; color: var(--brand); font-weight: 700; cursor: pointer; list-style: none; }
.opt-panels .opt-rest > summary::-webkit-details-marker { display: none; }
.opt-panels .opt-rest[open] > summary { display: none; }
@media (max-width: 720px) { .opt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Step 4: shortlist link and city filter on one quiet line */
.plan-opt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 12px 0 0; }
.plan-opt-bar .pm-filter { margin: 0; }
.plan-opt-bar .plan-short-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 600; text-decoration: none; }
.plan-opt-bar .plan-short-link:hover { background: var(--brand); color: #fff; }
.plan-opt-groups + .fine { margin-top: 8px; }
/* Step 2: how many degrees are chosen, beside the tags */
.pick-tags .pick-count { font-size: .82rem; color: var(--ink-3); }
/* Step 3: curriculum and symbols in one card */
.results-card .cur-inline { margin: 2px 0 14px; }
/* My options: results folded once entered, filters with a live count */
.opt-marks { margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.opt-marks > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; }
.opt-marks > summary::-webkit-details-marker { display: none; }
.opt-marks > summary span { color: var(--ink-3); font-size: .9rem; }
.opt-marks > summary i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--brand); font-size: .9rem; }
.opt-marks[open] > summary i { visibility: hidden; }
.opt-marks[open] { padding-bottom: 14px; } .opt-marks[open] > :not(summary) { margin-inline: 16px; }
.opt-filters { display: grid; gap: 10px; }
.opt-filters .b-chip-row { margin: 0; }
.opt-filters .opt-field { display: grid; gap: 4px; max-width: 360px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.opt-filters .opt-field select { min-height: 44px; }
.opt-filters .filter-summary { display: flex; align-items: center; gap: 12px; }
.opt-filters .filter-summary p { margin: 0; }
.opt-empty { margin: 16px 0; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.view-head .opt-short-link { margin-left: 6px; white-space: nowrap; }
/* My shortlist */
.track-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--brand-soft); color: var(--ink-2); }
.track-sum b { color: var(--ink); }
.track .track-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px 16px; }
.track .track-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.track .track-facts dd { margin: 2px 0 0; font-size: .92rem; }
.track-progs .track-prog { display: grid; gap: 2px; min-width: 0; }
.track-progs .track-prog small { color: var(--ink-3); }
.track-progs .track-due { color: var(--ink-2) !important; }
.track .track-more { margin-top: 10px; font-size: .88rem; }
.track .track-more > summary { cursor: pointer; color: var(--brand); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.track .track-more p { margin: 6px 0 0; color: var(--ink-2); }
.track-progs .track-more { margin-top: 4px; font-size: .82rem; }
.track-check-head { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; }
.track-check-head .section-h { margin: 0 0 10px; }
.track-empty .track-empty-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
/* Access: the request first, the guarantees as a compact list, founding facts in one box */
.access-journey .access-offer-header .access-facts { padding: 14px 18px; border-left: 3px solid var(--accent, #dba43f); background: var(--tint); border-radius: 0 10px 10px 0; }
.access-journey .access-offer-header .access-facts p { margin: 0; }
.access-journey .access-offer-header .access-facts p + p { margin-top: 6px; }
.access-journey .access-selected .access-facts .founding-note { padding: 0; border: 0; background: none; line-height: 1.5; }
.access-journey .access-selected .access-request { margin: 18px 0 0; }
.access-journey .access-selected .access-promise li span { display: block; color: var(--ink-3); font-size: .88rem; line-height: 1.45; }
.access-journey .access-selected .access-promise ul { gap: 14px 28px; }
.account-view .signin-help { margin-top: 10px; }
.plan-opt-groups .opt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-panels .opt-rest, .opt-panels .opt-rest:first-of-type { border: 0; }
/* ==== Round 3 (r3-tools1): Subjects, Degrees, Degree page, Already studying, Backup plan, Universities, University page, Costs, Deadlines, Bursaries ==== */
/* A light inline disclosure (no box) used by these pages' own classes only */
details.subj-how,details.deg-entry,details.gp-req,details.uni-score,details.b-morefilters,details.st-work-item{border:0;margin:0}
.subj-how>summary,.deg-entry>summary,.gp-req>summary,.uni-score>summary{justify-content:flex-start;gap:8px;padding:8px 0;min-height:40px;font-size:.9rem;font-weight:600;color:var(--brand)}
.subj-how>summary::after,.deg-entry>summary::after,.gp-req>summary::after,.uni-score>summary::after{font-size:1.15rem}
/* Subjects: the switch is the legend (dots match the bar), the caveat folds under the bar */
.subj-result{padding:4px 0 0;border:0;background:none}
.subj-result .subj-bar{margin-bottom:2px}
.subj-how p{margin:0 0 8px;font-size:.9rem}
.subj-show .subj-dot{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;background:var(--brand-2);vertical-align:middle}
.subj-show .subj-dot.is-maybe{background:var(--accent)}.subj-show .subj-dot.is-closed{background:#b9b4a6}
.plan-cols[data-group]:not([data-group="all"]) .col>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Degrees: one list with dividers on phones, field chips in one scrolling row, "Needs" said on the card */
.dir-needs .dir-needs-k{font-size:.74rem;font-weight:600;color:var(--ink-3);align-self:center}
@media (max-width:560px){
  .dir-fields .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px}.dir-fields .chips::-webkit-scrollbar{display:none}.dir-fields .chip-btn{flex:none;white-space:nowrap}
  #degree-directory{gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
  #degree-directory .degree-card{border:0;border-radius:0;border-top:1px solid var(--line);background:none}#degree-directory .degree-card:first-child{border-top:0}#degree-directory .degree-card:hover{transform:none}
  #degree-directory .dir-empty{border:0}}
/* Degree page: entry details folded under the glance, study and careers without boxes, requirements folded on each programme */
.deg-glance+details.deg-entry{margin:-14px 0 18px}.deg-entry p{margin:0 0 8px;font-size:.92rem}
.deg-glance .deg-soft{display:block;margin-top:3px;font-weight:500;color:var(--ink-3)}
.deg-body{display:grid;gap:4px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.deg-block h2{margin:0 0 10px;font:700 1.05rem var(--font)}.deg-block ul:not(.tags){margin:0 0 12px;padding-left:20px;color:var(--ink-2)}.deg-block .tags{margin-bottom:12px}
.deg-progs .gp-req p{margin:0 0 8px}.deg-progs .gp-req{margin-bottom:6px}
.uni-routes .gp-req p{margin:0 0 8px;font-size:.9rem}
/* Already studying: ways to work as one list of short disclosures */
.st-work{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin:0 0 12px}
.st-work details.st-work-item+details.st-work-item{border-top:1px solid var(--line)}
.st-work .st-work-item>summary{padding:10px 14px;min-height:44px;font-size:.95rem}.st-work .st-work-item>summary::after{font-size:1.2rem}
.st-work .st-work-item p{margin:0;padding:0 14px 12px;font-size:.92rem}
/* Backup plan: the picker inside the first-choice block, one-line comparisons, no box for "other ways back in" */
.backup-first{padding:0;border:0;background:none}
.backup-first .bk-pick{display:grid;gap:6px;max-width:420px;font-weight:600}.backup-first .bk-pick select{width:100%}
.bk-first-sum{margin:10px 0 8px;color:var(--ink-2);font-size:.95rem}
.bk-first-facts .opt-meta{display:flex;gap:6px;margin:0 0 8px}.bk-first-facts .chips{margin-bottom:4px}.bk-first-facts .fine{margin:0}
.backup-list .backup{padding:16px 18px}
.backup-list .bk-facts{display:grid;grid-template-columns:none;gap:4px;margin:8px 0 0}
.backup-list .bk-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:0 0 0 16px;border:0;background:none;position:relative}
.backup-list .bk-fact::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:#b9b4a6}
.backup-list .bk-fact.is-good::before{background:var(--brand-2)}.backup-list .bk-fact.is-warn::before{background:var(--accent)}
.backup-list .bk-fact dt{margin:0;min-width:92px;font-size:.78rem;letter-spacing:.03em}.backup-list .bk-fact dd{font-size:.92rem}
.backup-list .bk-fact small{display:inline;margin:0;font-size:.8rem;color:var(--ink-3)}
.bk-ways{margin-top:22px}.bk-ways ul{padding-left:20px;color:var(--ink-2)}
/* Universities: closing date in the city line; other institutions as one list */
.uni-card .uni-card-city b{color:var(--ink-2);font-weight:600}
.uni-others-list{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.uni-others-list>.journey-details{margin:0;border:0;border-radius:0;background:none;padding:0 16px}.uni-others-list>.journey-details+.journey-details{border-top:1px solid var(--line)}
.uni-others-list>.journey-details summary{padding:12px 0}
/* University page: the scoring note is the programmes' subheading */
details.uni-score{margin:-6px 0 6px}.uni-score>summary{font-weight:500;color:var(--ink-2)}.uni-score p{margin:0 0 8px;font-size:.92rem}
/* Costs: one summary strip, the rows as one list */
.cost-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0;margin:14px 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.cost-sum .cost-tile{margin:0;padding:12px 14px;border:0;border-radius:0;background:none}.cost-sum .cost-tile+.cost-tile{border-top:1px solid var(--line)}
@media(min-width:620px){.cost-sum .cost-tile+.cost-tile{border-top:0;border-left:1px solid var(--line)}}
.cost-sum dt{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}.cost-sum dd{margin:2px 0 0}.cost-sum dd b{display:block;font-size:1.2rem;color:var(--ink)}.cost-sum dd small{font-size:.82rem;color:var(--ink-3)}
.cost-rows{gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.cost-rows .cost-row{border:0;border-radius:0;background:none}.cost-rows .cost-row+.cost-row{border-top:1px solid var(--line)}
.cost-np{gap:0;border:1px dashed var(--line);border-radius:12px;overflow:hidden}.cost-np li{border:0;border-radius:0}.cost-np li+li{border-top:1px dashed var(--line)}
.cost-note{margin-top:16px}
/* Deadlines: each month is one list, the date's name links to the official site */
#dl-body .dl-list{gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
#dl-body .dl-list li{border:0;border-radius:0;border-left:3px solid #2b827e;background:none}#dl-body .dl-list li.dl-bursary{border-left-color:var(--accent)}
#dl-body .dl-list li+li{border-top:1px solid var(--line)}#dl-body .dl-list li.is-expected{border-style:none none none dashed}#dl-body .dl-list li.is-expected+li{border-top:1px dashed var(--line)}
#dl-body .dl-list li{grid-template-columns:52px minmax(0,1fr)}
.dl-title{font-weight:700;color:var(--ink);margin-right:6px;text-decoration-color:var(--line);text-underline-offset:3px}.dl-title:hover{color:var(--brand);text-decoration-color:currentColor}
.dl-count .dl-jump-next{display:inline-block;min-height:0;padding:6px 0;margin-left:10px;font-size:inherit}@media(max-width:560px){.dl-count .dl-jump-next{display:block;margin:0;min-height:40px}}
.dl-exp-note{margin:8px 0 10px}.dl-foot{margin-top:16px}
/* Bursaries: two filters first, the rest behind "More filters"; the official page sits beside the funder */
details.b-morefilters{margin:8px 0 0}
.b-morefilters>summary{justify-content:flex-start;gap:8px;padding:8px 0;min-height:44px;font-size:.92rem;color:var(--brand)}.b-morefilters>summary::after{font-size:1.2rem}
.b-morefilters .b-more-n{padding:0 8px;border-radius:999px;background:var(--brand-soft);font-size:.78rem}
.b-morefilters>.b-selects{margin-bottom:8px}
.bursary .b-official{font-weight:600;white-space:nowrap}
.bursary .b-when{padding:0;background:none}
.subj-show [aria-pressed="true"] .subj-dot{box-shadow:0 0 0 1.5px #fff}
@media (max-width:420px){.subj-show button{white-space:nowrap;font-size:.8rem}.subj-show .subj-dot{width:7px;height:7px;margin-right:3px}}
.plan-cols[data-group]:not([data-group="all"]) .col{padding-top:10px}
details.b-closed{margin:20px 0 0;border:0;border-top:1px solid var(--line)}details.b-closed>summary{padding:4px 0;justify-content:flex-start;gap:10px}details.b-closed>summary .b-group{margin:10px 0}
details.b-closed>summary::after{font-size:1.3rem}
.backup-list .bk-fact{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px}.backup-list .bk-fact dt{min-width:0}
.bk-first-facts .chips .chip{font-size:.84rem}
/* ===================================================================
   Round 3 (30 Sept): My Matric Map roadmap, parent PDF, Grade 9 subject plan, printable reports
   =================================================================== */
/* AI change band, self-explanatory wherever it stands alone (aiBandHtml / aiBandKey in js/app.js) */
.ai-level { display: inline-grid; gap: 3px; vertical-align: top; }
.ai-level-top { display: inline-flex; align-items: center; gap: 8px; }
.ai-level-scale { display: inline-flex; gap: 2px; vertical-align: middle; }
.ai-level-scale i { display: block; width: 12px; height: 6px; border-radius: 3px; background: var(--line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ai-level-scale i.on { background: var(--brand-2); }
.ai-level small { display: block; font-size: .8rem; line-height: 1.35; color: var(--ink-2); }
.ai-level-key { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; gap: 4px 20px; margin: 8px 0 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .78rem; color: var(--ink-2); }
.ai-level-key > span { display: inline-flex; align-items: center; gap: 6px; }
.ai-level-key b { color: var(--ink); }
.ai-level-key .ai-level-kh { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.report .rp-tiles .rp-tile-ai .ai-level-top b { font: 700 1.45rem/1 var(--serif); color: var(--brand); }
.report .rp-tiles .rp-tile-ai .ai-level-top { font-size: inherit; }
/* Section 6: where each degree travels, as a short list instead of a paragraph */
.report .rp-go-label { margin: 4px 0 6px; font-size: .74rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3) !important; }
.report .rp-go-label small { letter-spacing: 0; text-transform: none; }
.report .rp-go { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.report .rp-go li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9rem; }
.report .rp-go li small { display: block; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
.report .rp-go .swatch { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-go-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 600 .72rem/1.6 var(--font); font-style: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-go-why { font-size: .88rem !important; }
/* Degree profiles: the decisive facts as one row; pathway facts as label: value */
.report .rp-dfacts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 10px 0 12px; }
.report .rp-dfacts > div { min-width: 0; }
.report .rp-dfacts dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.report .rp-dfacts dd { margin: 2px 0 0; font-size: .92rem; color: var(--ink); }
.report .rp-dfacts dd b { font-size: 1.05rem; color: var(--brand); }
.report .rp-dfacts-ai .ai-level-top b { font-size: .92rem; color: var(--brand); }
/* Degree profiles: each country's way in as a card, the short answers in a tinted column beside the numbered steps */
.report .rp-route { margin: 12px 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.report .rp-route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.report .rp-route-head h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--brand); }
.report .rp-route-head h4 .swatch { width: 22px; height: 22px; font-size: .74rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-route-head > span { flex: none; font-size: .78rem; color: var(--ink-3); }
.report .rp-route-body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.report .rp-route-facts { display: grid; align-content: start; gap: 10px; margin: 0; padding: 14px 16px; background: var(--brand-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-route-facts dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-2); }
.report .rp-route-facts dd { margin: 2px 0 0; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
.report .rp-route-facts dd b { font-weight: 600; color: var(--ink); }
.report .rp-route-steps { list-style: none; margin: 0; padding: 14px 18px 4px 16px; }
.report .rp-route-steps li { position: relative; padding: 0 0 12px 34px; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.report .rp-route-steps li > span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 .72rem/1 var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-route-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 25px; bottom: 3px; width: 2px; background: var(--line); }
.report .rp-route-src { margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--line); font-size: .76rem; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 600px) { /* a phone: the answers above the steps, each label beside its answer */
  .report:not(.pdf-export) .rp-route-body { grid-template-columns: 1fr; }
  .report:not(.pdf-export) .rp-route-facts { gap: 8px; padding: 12px 14px; }
  .report:not(.pdf-export) .rp-route-facts > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .report:not(.pdf-export) .rp-route-facts dd { margin: 0; }
  .report:not(.pdf-export) .rp-route-head, .report:not(.pdf-export) .rp-route-steps, .report:not(.pdf-export) .rp-route-src { padding-left: 14px; padding-right: 14px; }
}
.report .rp-pay .pay-bar { display: block; position: relative; border-radius: 4px; }
.rp-pay .pay-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.42) var(--mid), rgba(20,90,91,.38) var(--mid)); box-shadow: inset 0 0 0 1px rgba(20,90,91,.6); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-pay .is-home .pay-band { background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.42) var(--mid), rgba(237,182,75,.4) var(--mid)); box-shadow: inset 0 0 0 1px rgba(237,182,75,.7); }
/* Plan on a page: the whole checklist, in two columns where there is room */
@media (min-width: 601px) { .report .rp-sum-now .rp-check { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } }
.report.pdf-export .rp-sum-now .rp-check { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
/* Grade 9: the proposed subjects as chips */
.report .rp-subj { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.report .rp-subj li { padding: 4px 12px; border: 1px solid var(--brand-2); border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: .9rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report .rp-subj li.is-out { border-style: dashed; border-color: var(--line); background: none; color: var(--ink-3); font-weight: 500; }
/* Already studying: the country table with a wide "In short" column */
.studying-report .rp-countries td:nth-child(4) { width: 52%; }
@media print { .studying-report .rp-countries td:nth-child(3), .studying-report .rp-countries td:nth-child(4) { white-space: normal; } }
/* Printing (Print or save as PDF, Save as PDF): only the report, on white, sections flowing on */
@media print {
  .skip-link { display: none !important; }
  html body.app { background: #fff !important; }
  html body.app main#view { margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: #fff; }
  #view:has(> article.report:not(.print-only)) > :not(article.report) { display: none !important; }
  .report .rp-degree { break-before: auto; }
  .report .rp-summary + .rp-degree { break-before: page; }
  .report .rp-toc a[href] { text-decoration: none; color: inherit; }
  .report .rp-dfacts > div, .report .rp-go li { break-inside: avoid; }
}
/* Your dates: a little more room in each month so place names do not break mid-word */
.report .rp-cal { gap: 5px; } .report .rp-month { padding: 7px 5px 7px 7px; } .report .rp-month.is-now { padding: 6px 4px 6px 6px; }
.report .rp-ev { padding-left: 10px; } .report .rp-ev::before { width: 6px; height: 6px; }
.report .rp-table tr.pdf-rehead th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 520px) { .ai-level-key { grid-template-columns: 1fr; } }
.report p.ai-level-key { margin: 8px 0 12px; font-size: .78rem; color: var(--ink-2); }
.report.pdf-export .rp-appendix + .rp-degree ~ .rp-degree { page-break-before: always; break-before: page; } /* each further degree profile starts a page */
@media print { .report .rp-appendix + .rp-degree ~ .rp-degree { break-before: page; } }
.report-subject .rp-subj-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.report-subject .rp-subj-cards > .card-plain { margin: 0; min-width: 0; }
@media (max-width: 600px) { .report-subject:not(.pdf-export) .rp-subj-cards { grid-template-columns: 1fr; } }
@media print { .studying-report > section:nth-of-type(2) { break-before: page; } }
@media (max-width: 720px) { .report .rp-abroad .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .report .rp-abroad .rp-tiles > div { padding: 10px 12px; } .report .rp-abroad .rp-tiles > div:nth-child(3) { grid-column: 1 / -1; } }
/* ===== Round 3 (simplify): Tools landing, Pay, PhD pay, AI outlook, Careers abroad, Countries, Country pages,
   Overseas pathways, Qualification & licensing, Visa guides, Second passport, PhD route. Every rule is scoped to its page. ===== */
/* Tools landing: each question is one quiet list, not a wall of cards */
.tools-groups { columns: 2 380px; column-gap: 32px; margin-top: 8px; }
.tools-groups .tool-group { break-inside: avoid; margin: 0; padding: 20px 0 6px; }
.tools-groups .tool-group-head { margin: 0 0 8px; }
.tool-list { display: grid; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.tool-list .tool-card { position: relative; flex-direction: row; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; }
.tool-list .tool-card + .tool-card::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid var(--line); }
.tool-list .tool-card:hover { transform: none; background-color: var(--tint); }
.tool-list .tool-card:hover::before, .tool-list .tool-card:hover + .tool-card::before { opacity: 0; }
.tool-list .tool-card h3 { margin: 0 0 1px; font-size: 1rem; }
.tool-list .tool-card p { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink-3); }
.tool-list .tool-card .degree-card-go { width: 30px; height: 30px; }
.tool-list .tool-card:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* AI outlook: the band buttons are the filter and the key; the line on every row shows the three bands */
.ai-bands { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 18px; }
.ai-band-btn { display: grid; align-content: start; gap: 3px; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ai-band-btn:hover { border-color: var(--brand-2); }
.ai-band-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ai-band-btn.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.ai-band-all { align-content: center; min-width: 76px; }
.ai-band-top { display: flex; align-items: center; gap: 8px; }
.ai-band-top b { font-size: .95rem; color: var(--brand); }
.ai-band-top small { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--tint); font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.ai-band-all .ai-band-top small { margin-left: 0; }
.ai-band-means { font-size: .82rem; line-height: 1.35; color: var(--ink-3); }
.ai-zone { flex: none; width: 34px; height: 8px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.ai-zone::after { content: ""; position: absolute; top: 0; bottom: 0; background: var(--brand-2); }
.ai-zone-0::after { left: 0; width: 40%; background: #0f3d3e; } .ai-zone-1::after { left: 40%; width: 25%; background: #2b827e; } .ai-zone-2::after { left: 65%; right: 0; background: #7fbfba; }
.ai-head.ai-zoned-head, .ai-zoned .ai-row { grid-template-columns: minmax(130px, 210px) minmax(160px, 1fr) repeat(3, 92px); }
.ai-zoned-head .ai-group { grid-column: 3 / -1; } .ai-zoned-head .ai-group small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ai-axis-zones { display: grid; grid-template-columns: 40fr 25fr 35fr; text-align: center; }
.ai-axis-zones em { font-style: normal; font-size: .64rem; color: var(--ink-3); border-left: 1px dashed var(--line); } .ai-axis-zones em:first-child { border-left: 0; }
.ai-zoned .ai-row .ai-word { display: none; }
.ai-zoned .ai-track::before { top: 4px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(15, 61, 62, .16) 0 40%, rgba(43, 130, 126, .13) 40% 65%, rgba(127, 191, 186, .2) 65% 100%); }
.ai-zoned .ai-track i { background: var(--brand); }
.method.ai-chart-more { max-width: none; } .ai-chart-more > .chart-card { margin-bottom: 14px; }
.ai-method { display: grid; gap: 8px; margin: 8px 0 10px; padding-left: 18px; font-size: .92rem; }
@media (max-width: 720px) {
  .ai-bands { grid-template-columns: 1fr; gap: 6px; }
  .ai-band-btn { padding: 8px 12px; }
  .ai-zoned .ai-row { grid-template-columns: minmax(0, 1fr) 110px; }
}
@media (prefers-reduced-motion: reduce) { .ai-band-btn { transition: none; } }
/* Pay and PhD pay: the page switch and the figure switch share one row; one line says what the figures mean; notes and sources fold together */
.pp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 8px; }
.pp-controls .pay-tabs, .pp-controls .pp-seg { margin: 0; }
.rand-line { max-width: 78ch; margin: 0 0 16px; font-size: .88rem; line-height: 1.45; color: var(--ink-3); }
.rand-line b { color: var(--ink); }
.pp-notes { display: grid; gap: 8px; margin: 6px 0 14px; padding-left: 18px; font-size: .92rem; color: var(--ink-2); }
.pp-sources { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.pp-sources h3 { margin: 0 0 8px; font-size: 1rem; }
.pp-sources select { display: block; min-height: 44px; margin: 4px 0 10px; max-width: 100%; }
.pp-method.phd-figures { max-width: none; }
.phd-figures .phd-list { margin: 4px 0 14px; }
@media (max-width: 560px) { .pp-controls { display: grid; } .pp-controls .pay-tabs { max-width: none; } }
/* PhD route: the count and the pay comparison share one line */
.phd-intro:has(> [role="status"]) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; max-width: none; }
.phd-intro > a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
/* Qualification & licensing: the visas are one link row, the page ends with one line */
.lic-panel .lic-visa-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0 0; color: var(--ink); text-decoration: none; }
.lic-visa-go > span:first-child { display: grid; gap: 2px; min-width: 0; }
.lic-visa-go small { font-size: .82rem; color: var(--ink-3); }
.lic-visa-go .lic-visa-n { flex: none; font-weight: 700; color: var(--brand); white-space: nowrap; }
.lic-visa-go:hover b { text-decoration: underline; }
.lic-end { margin-top: 16px; } .lic-end a { font-weight: 600; white-space: nowrap; }
/* Visa guides: two columns on wide screens; the settlement answer is a quiet fact line, not a box */
@media (min-width: 900px) { .visa-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.visa-routes article.route { padding: 16px 18px; }
.visa-routes article.route .route-settle { padding: 2px 0 2px 12px; border-left: 3px solid var(--brand-2); border-radius: 0; background: none; }
.visa-routes .route > .more > summary { min-height: 40px; }
.visa-end { margin-top: 16px; } .visa-end a { font-weight: 600; white-space: nowrap; }
/* Countries: one calm card per country (name, one line, one stat line); country page: one action row, the story folded */
.cty-card .cty-top { justify-content: flex-start; gap: 10px; }
.cty-card .cty-top h2 { margin: 0; font-size: 1.1rem; }
.cty-card .cty-arrow { margin-left: auto; font-weight: 700; color: var(--brand); transition: transform .15s; }
.cty-card:hover .cty-arrow { transform: translateX(2px); }
.cty-card .cty-stat { font-size: .82rem; }
.cty-story-more, .cty-story-more:first-of-type { margin: 6px 0 0; }
.cty-story-more > summary { font-size: .88rem; }
p.cty-actions { align-items: center; gap: 8px 18px; margin: 0 0 18px; }
.cty-actions .cty-compare { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.cty-rank-sum { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; font-size: .86rem; color: var(--ink-3); }
.cty-rank-sum .cty-meter { flex: none; width: 80px; }
.cty-rank-sum b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .cty-card .cty-arrow { transition: none; } }
/* Second passport: the caveat is one line under the lead; on phones the rights are one list, not seven boxes */
.passport-fine { margin: 6px 0 0; }
.passport-step .pp-tick-note { margin: 4px 0 0; font-size: .88rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .passport-step .rights { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
  .passport-step .rights .right { padding: 11px 14px; border: 0; border-radius: 0; background: none; }
  .passport-step .rights .right + .right { border-top: 1px solid var(--line); }
}
/* Overseas pathways: on a career's page each board row unfolds to its route, instead of a second list of cards below */
.pwt-board-fold .pwt-item, .pwt-board-fold .pwt-item:first-of-type { margin: 0; border: 0; }
.pwt-board-fold .pwt-item > summary.pwt-row { position: relative; padding: 14px 30px 14px 0; font-weight: inherit; cursor: pointer; }
.pwt-board-fold .pwt-item > summary.pwt-row::after { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; }
.pwt-board-fold .pwt-item > summary.pwt-row:hover .pwt-name b { color: var(--brand); text-decoration: underline; }
.pwt-board-fold .pwt-item > summary.pwt-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pwt-board-fold .pwt-item[open] > summary.pwt-row .pwt-name b { color: var(--brand); }
.pwt-body { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper, #faf8f2); }
.pwt-body p { margin: 0; max-width: 78ch; font-size: .93rem; }
.pwt-body .pw-steps { margin: 4px 0 0; }
.pw-counts, .pw-counts:first-of-type { margin: 0 0 12px; }
@media (max-width: 720px) { .pwt-board-fold .pwt-item > summary.pwt-row::after { top: 18px; transform: none; } .pwt-body { padding: 12px; } }
.lic-what, .lic-what:first-of-type { margin: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lic-what > summary { padding: 12px 0; min-height: 44px; font-size: .95rem; }
.lic-what .lic-glance { margin: 0 0 12px; }
/* Careers abroad: the notes sit once under the results; the phone list names its score column */
#map-results + .mp-cover, .mp-method + .mp-cover { margin-top: 14px; }
.phone-map .mp-list-head { display: flex; justify-content: space-between; gap: 12px; padding-top: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.phone-map .mp-list-head span:last-child { text-align: right; max-width: 55%; }
.mp-notes { display: grid; gap: 8px; margin: 6px 0 12px; padding-left: 18px; font-size: .92rem; color: var(--ink-2); }
.phd-intro > a { gap: 6px; }
/* PhD route: the countries are one table-like list, not ten boxes */
.phd-rows { gap: 0; }
.phd-rows .phd-cols { padding-bottom: 8px; }
.phd-rows .phd-country { border-radius: 0; border-bottom-width: 0; }
.phd-rows .phd-cols + .phd-country { border-radius: 12px 12px 0 0; }
.phd-rows .phd-country:last-child { border-bottom-width: 1px; border-radius: 0 0 12px 12px; }
.phd-rows .phd-cols + .phd-country:last-child { border-radius: 12px; }
.phd-rows .phd-country[open] { background: var(--surface); box-shadow: inset 3px 0 0 var(--brand-2); }
/* Compact closed rows: all ten countries fit on one desktop screen (1280x720 and up) */
.phd-head { margin-bottom: 10px; }
.phd-head .lead-sm { margin-top: 4px; }
.phd-controls { margin: 0 0 8px; justify-content: flex-start; }
.phd-controls .seg-switch { padding: 3px; }
.phd-controls .seg-switch button { min-height: 32px; padding: 0 14px; font-size: .86rem; }
.phd-count { color: var(--ink-3); font-size: .9rem; }
.phd-rows .phd-cols, .phd-rows .phd-sum { grid-template-columns: minmax(110px, 1fr) minmax(110px, .7fr) minmax(240px, 1.6fr) minmax(160px, 1.6fr); gap: 2px 16px; }
.phd-rows .phd-cols { padding-bottom: 4px; font-size: .72rem; }
.phd-rows .phd-country > summary { min-height: 38px; padding: 3px 0; line-height: 1.25; }
.phd-rows .phd-country > summary::after { font-size: 1.25rem; }
.phd-rows .chip { padding: 1px 9px; font-size: .8rem; }
.phd-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.phd-rows .phd-power { display: flex; align-items: center; gap: 8px; max-width: none; margin-top: 1px; }
.phd-rows .phd-power-bar { flex: none; width: 56px; height: 5px; }
.phd-rows .phd-power small, .phd-net { font-size: .74rem; line-height: 1.25; color: var(--ink-3); }
@media (max-width: 720px) {
  .phd-rows .phd-sum { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .phd-rows .phd-country > summary { min-height: 44px; padding: 8px 0; }
  .phd-rows .phd-power { margin-top: 2px; }
  .phd-controls { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
/* My shortlist (#/shortlist): summary with the next date, one group per university, compact programme rows. Every rule is scoped to .sl-page. */
.sl-page { display: grid; gap: 16px; }
.sl-page .sl-sum { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sl-page .sl-count { margin: 0; color: var(--ink-2); font-size: 1rem; }
.sl-page .sl-count b { color: var(--ink); font-size: 1.15rem; }
.sl-page .sl-next { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand-2); }
.sl-page .sl-next.is-urgent { background: #fdf1d3; box-shadow: inset 4px 0 0 var(--accent); }
.sl-page .sl-next.is-none { background: var(--tint); box-shadow: inset 4px 0 0 #b9b4a6; }
.sl-page .sl-k { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sl-page .sl-days { font-size: 1.35rem; line-height: 1.2; color: var(--ink); }
.sl-page .sl-next-what { color: var(--ink-2); font-size: .93rem; }
.sl-page .sl-next-what a { color: var(--brand); font-weight: 600; }
.sl-page .sl-top-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-page .sl-hint, .sl-page .sl-undo { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--tint); color: var(--ink-2); font-size: .93rem; }
.sl-page .sl-hint a { color: var(--brand); font-weight: 700; white-space: nowrap; }
.sl-page .sl-undo { background: var(--brand-soft); }
.sl-page .sl-undo .linkish { min-height: 40px; margin-left: 4px; font-weight: 700; }
.sl-page .sl-groups { display: grid; gap: 14px; }
.sl-page .sl-uni { padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sl-page .sl-uni-name { margin: 0 0 4px; font: 700 1.05rem/1.3 var(--font); }
.sl-page .sl-uni-name a { color: var(--brand); text-decoration: none; }
.sl-page .sl-uni-name a:hover { text-decoration: underline; }
.sl-page .sl-rows { list-style: none; margin: 0; padding: 0; }
.sl-page .sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.sl-page .sl-row:first-child { border-top: 0; }
.sl-page .sl-name { display: grid; gap: 2px; min-width: 0; }
.sl-page .sl-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.sl-page .sl-name a:hover { color: var(--brand); text-decoration: underline; }
.sl-page .sl-name small { color: var(--ink-3); font-size: .85rem; }
.sl-page .sl-tags { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1; }
.sl-page .sl-badge, .sl-page .sl-due { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.35; }
.sl-page .sl-badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sl-page .sl-badge.is-yes { background: #e6f1f0; color: #0f4a44; } .sl-page .sl-badge.is-yes::before { background: var(--brand-2); }
.sl-page .sl-badge.is-near { background: #fdf1d3; color: #5e4300; } .sl-page .sl-badge.is-near::before { background: var(--accent); }
.sl-page .sl-badge.is-special { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); } .sl-page .sl-badge.is-special::before { box-shadow: inset 0 0 0 2px var(--accent); }
.sl-page .sl-badge.is-no { background: var(--tint); color: var(--ink-2); } .sl-page .sl-badge.is-no::before { background: #b9b4a6; }
.sl-page .sl-due { background: var(--tint); color: var(--ink-2); }
.sl-page .sl-due.is-open { background: var(--brand-soft); color: var(--brand); }
.sl-page .sl-due.is-urgent { background: #fdf1d3; color: #5e4300; font-weight: 700; }
.sl-page .sl-due.is-closed { color: var(--ink-3); }
.sl-page .sl-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sl-page .sl-applied, .sl-page .sl-act { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 .86rem/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sl-page .sl-applied:hover, .sl-page .sl-act:hover { border-color: var(--brand-2); background: var(--brand-soft); color: var(--brand); }
.sl-page .sl-applied:focus-visible, .sl-page .sl-act:focus-visible, .sl-page .sl-more > summary:focus-visible, .sl-page .sl-how > summary:focus-visible, .sl-page .sl-todo > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sl-page .sl-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid #9bb8b1; border-radius: 4px; background: var(--surface); }
.sl-page .sl-applied[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.sl-page .sl-applied[aria-pressed="true"] .sl-box { border-color: var(--accent); background: var(--accent); }
.sl-page .sl-applied[aria-pressed="true"] .sl-box::after { content: "✓"; color: var(--brand); font: 800 .7rem/1 var(--font); }
.sl-page .sl-remove { border-color: transparent; color: var(--ink-3); }
.sl-page .sl-row.is-applied .sl-name a { color: var(--ink-2); }
.sl-page .sl-row.is-applied .sl-due { opacity: .7; }
.sl-page details.sl-more, .sl-page details.sl-how { grid-column: 1 / -1; margin: 0; border: 0; }
.sl-page .sl-more > summary, .sl-page .sl-how > summary { justify-content: flex-start; gap: 8px; min-height: 36px; padding: 4px 0; font-size: .86rem; font-weight: 600; color: var(--brand-2); }
.sl-page .sl-more > summary::after, .sl-page .sl-how > summary::after { font-size: 1.1rem; }
.sl-page .sl-more p, .sl-page .sl-how p { margin: 0 0 6px; font-size: .9rem; max-width: 75ch; }
.sl-page details.sl-how { padding: 4px 0 6px; border-top: 1px solid var(--line); }
.sl-page .sl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 4px 0 8px; }
.sl-page .sl-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sl-page .sl-facts dd { margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); }
.sl-page details.sl-todo { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 16px; }
.sl-page .sl-todo > summary { gap: 10px; min-height: 52px; font-weight: 700; }
.sl-page .sl-todo > summary > span:first-child { flex: 1; }
.sl-page .sl-todo-n { padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .8rem; font-weight: 700; }
.sl-page .sl-todo .todo { margin: 0 0 14px; max-width: none; }
.sl-page .sl-foot { margin: 0; }
.sl-page.sl-empty { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); gap: 10px; }
.sl-page.sl-empty h2 { margin: 0; font-size: 1.25rem; }
.sl-page.sl-empty > p { margin: 0; color: var(--ink-2); }
.sl-page .sl-ways { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; }
.sl-page .sl-way { position: relative; display: grid; gap: 2px; height: 100%; min-height: 64px; padding: 12px 36px 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; box-sizing: border-box; }
.sl-page .sl-way span { color: var(--ink-3); font-size: .86rem; }
.sl-page .sl-way i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--brand-2); }
.sl-page .sl-way:hover { border-color: var(--brand-2); background: var(--brand-soft); }
.sl-page .sl-way:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sl-page .sl-way.is-primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.sl-page .sl-way.is-primary span { color: rgba(255, 255, 255, .8); } .sl-page .sl-way.is-primary i { color: var(--accent); }
@media (min-width: 721px) { .sl-page .sl-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } .sl-page .sl-count { grid-column: 1 / -1; } .sl-page .sl-top-acts { justify-content: flex-end; } }
@media (max-width: 720px) {
  .sl-page .sl-sum, .sl-page .sl-uni { padding-inline: 14px; }
  .sl-page .sl-row { grid-template-columns: minmax(0, 1fr); }
  .sl-page .sl-acts { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .sl-page .sl-top-acts { display: grid; grid-template-columns: 1fr 1fr; }
  .sl-page .sl-top-acts .btn { padding: 0 10px; }
  .sl-page .sl-wide { display: none; }
  .sl-page .sl-top-acts .btn-primary { grid-column: 1 / -1; }
  .sl-page .sl-acts { gap: 4px; }
  .sl-page .sl-applied, .sl-page .sl-act { padding: 0 10px; }
  .sl-page .sl-remove { padding: 0 8px; }
}
/* Small phones: the sort and date switches and the My options tabs keep their labels inside the buttons; breadcrumbs get a finger-sized target */
@media (max-width: 380px) {
  .uni-controls .seg-switch { grid-template-columns: 1fr 1fr auto; }
  .uni-controls .seg-switch button { padding: 0 6px; font-size: .84rem; line-height: 1.15; }
  .dl-bar .dl-kinds { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .dl-bar .dl-kinds button:first-child { padding: 2px 10px; }
  .opt-tabs .opt-tab { gap: 0 6px; padding: 8px 9px; font-size: .8rem; }
  .opt-tabs .opt-tab span { padding-right: 8px; }
}
@media (max-width: 720px) { .crumbs a { display: inline-block; padding: 8px 0; margin: -8px 0; } }

/* My options grouped by degree: each degree in its own colour, its qualification beside its name; smaller cards */
.deg-c0 { --deg: #0f766e; } .deg-c1 { --deg: #b4462b; } .deg-c2 { --deg: #5b4fc4; } .deg-c3 { --deg: #9a6400; }
.deg-c4 { --deg: #a23b72; } .deg-c5 { --deg: #3f6ea5; } .deg-c6 { --deg: #7a6a4f; } .deg-c7 { --deg: #5f6b73; }
.opt-deg { margin-top: 12px; padding: 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--deg) 24%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--deg) 5%, var(--surface)); }
.opt-deg:first-of-type { margin-top: 4px; }
.opt-deg-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.opt-deg-h i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--deg); }
.opt-deg-h span { flex: 1; min-width: 0; }
.opt-deg-h small { font-size: .86rem; font-weight: 600; color: var(--deg); }
.opt-deg-h b { flex: none; padding: 1px 9px; border-radius: 999px; background: var(--deg); color: #fff; font-size: .76rem; }
.opt-panels .opt-deg .opt-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.opt-deg .opt { padding: 8px 10px; border-left: 3px solid var(--deg); background: var(--surface); }
.opt-deg .opt-top a { gap: 1px !important; }
.opt-deg .opt-top a b { font-size: .9rem; }
.opt-deg .opt-uni { font-size: .76rem; }
.opt-deg .opt-score { margin-top: 4px; font-size: .8rem; line-height: 1.35; }
.opt-deg .opt small { padding-top: 3px !important; font-size: .74rem; }
.opt-deg .opt .opt-foot { margin-top: 4px; gap: 4px 8px; }
.opt-deg .opt .opt-foot .short-btn { min-height: 32px; padding: 0 10px; font-size: .78rem; }
.opt-deg .opt-more, .opt-deg .opt-more:first-of-type { margin-top: 2px; }
.opt-deg .opt-more summary { min-height: 24px; padding: 2px 0; font-size: .76rem; }
.opt-panels .opt-deg .opt-rest { margin-top: 8px; }
.opt-panels .opt-deg .opt-rest > summary { min-height: 36px; font-size: .84rem; }
.opt-pending { display: inline-block; margin-right: 2px; padding: 0 7px; border-radius: 999px; background: #fdf1d3; color: #5e4300; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.opt-pend-note { margin: 10px 2px 0; }
/* inside a degree group the group names the degree, so each card leads with its university (the degree stays for screen readers) */
.opt-deg .opt-top a b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opt-deg .opt-uni { font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.opt-score.is-pending { font-weight: 500; color: var(--ink-2); }