/* Styling for sim.html.
 *
 * Colors are defined once at the top under :root and referred to by name
 * everywhere else, so changing the gold or the background is a one-line
 * edit rather than a search through the whole file.
 */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* KEYBOARD FOCUS
     Anyone working through the page by keyboard needs to see where they
     are. :focus-visible shows the ring for keyboard use and stays out of
     the way for mouse clicks. This is deliberately one rule covering every
     control rather than a style per component, so a control added later
     cannot be forgotten. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* MOTION
     Some people get motion sickness from movement on screen, and their
     browser says so. Honour it: keep everything functional, remove the
     travel. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

  :root {
    /* Dark palette from social media slides */
    --bg:          #0a0c14;
    --bg-card:     #131620;
    --bg-elevated: #1a1e2e;
    --rule:        #252a3d;
    --rule-light:  #1e2235;
    --white:       #ffffff;
    --ink-muted:   #a0a4b8;
    --ink-dim:     #6b7094;

    /* Brand colors */
    --gold:        #ffd750;
    --gold-dim:    rgba(255,215,80,.12);
    --green:       #64d278;
    --green-dim:   rgba(100,210,120,.12);
    --amber:       #f5a623;
    --amber-dim:   rgba(245,166,35,.12);
    --red:         #ff6464;
    --red-dim:     rgba(255,100,100,.12);
    --blue:        #5b8ef0;
    --blue-dim:    rgba(91,142,240,.12);
    --purple:      #5b9bd5;

    --radius:      10px;
    --shadow:      0 4px 24px rgba(0,0,0,.4);
  }

  html {
    font-size: 16px;
    background: #0a0c14 !important;
    background-color: #0a0c14 !important;
  }
  body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background: #0a0c14 !important;
    background-color: #0a0c14 !important;
    color: #ffffff;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    line-height: 1.5;
  }
  /* Ensure shell area is also dark */
  .shell, #exploreMode, #compareMode {
    background: #0a0c14;
  }

  /* HEADER */
  header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--rule);
    padding: 0 32px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
  }
  .logo { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
  .logo span { color: var(--gold); }
  .badge {
    font-size: .7rem; font-weight: 600;
    background: var(--gold-dim); color: var(--gold);
    padding: 3px 10px; border-radius: 20px;
    letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid rgba(255,215,80,.2);
  }

  /* LAYOUT */
  /* The bottom padding is deliberately deep. Pressing Continue on one of the
     last steps should put that step near the top of the screen, and a page
     that ends right below the last step cannot scroll that far - the step
     would sit stranded at the bottom edge with its questions cut off. This
     is empty background nobody sees unless they scroll past the end. */
  .shell { max-width: 1160px; margin: 0 auto; padding: 40px 24px min(50vh, 460px); }
  .page-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; color: #ffffff; }
  .page-title span { color: var(--gold); }
  .page-sub { color: var(--ink-muted); font-size: .95rem; margin-bottom: 36px; }

  .grid { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }
  @media(max-width:900px){ .grid { grid-template-columns: 1fr; } }

  /* CARD */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
  }
  .card-head {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--rule);
    display: flex; align-items: center; gap: 10px;
  }
  .card-head h2 {
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--white);
  }
  /* The emoji beside each heading, scaled up so it does not look stranded
     next to the larger text. */
  .card-head > span:not(.step-badge):not(.path-tag) { font-size: 1.2rem; line-height: 1; }
  .card-body { padding: 18px; }

  /* STEP STATES: make the existing step-locked / step-active / step-done
     classes (already toggled by JS) actually visible. Without this, a locked
     step and an active step look identical, which is what confused testers. */
  .step-badge {
    font-size: .68rem; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;
    background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(255,215,80,.25);
    flex-shrink: 0;
  }
  .step-card { transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .step-card.step-active {
    border-color: rgba(255,215,80,.45);
    box-shadow: 0 0 0 1px rgba(255,215,80,.35), 0 4px 24px rgba(255,215,80,.08);
  }
  .step-card.step-active .step-badge { background: var(--gold); color: #14161f; }
  .step-card.step-locked { opacity: .4; pointer-events: none; }
  .step-card.step-locked .step-badge { background: var(--bg-elevated); color: var(--ink-dim); border-color: var(--rule); }
  .step-card.step-done { opacity: .85; }
  .step-card.step-done .step-badge { background: var(--green-dim); color: var(--green); border-color: rgba(100,210,120,.25); }
  .step-card.step-done .step-badge::after { content: " \2713"; }

  /* FORM */
  .field { margin-bottom: 16px; }
  .field:last-child { margin-bottom: 0; }
  label { display: block; font-size: .8rem; font-weight: 500; color: var(--ink-muted); margin-bottom: 6px; }
  .hint { font-size: .74rem; color: var(--ink-dim); margin-top: 4px; }

  input[type=number], input[type=text], select {
    width: 100%; padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-radius: 7px;
    font-size: .9rem; font-family: inherit;
    color: var(--white);
    transition: border .15s;
    appearance: none;
  }
  input:focus, select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255,215,80,.1);
  }
  select option { background: var(--bg-elevated); }
  /* WHAT THE GROWTH NUMBER MEANS, said once above the list rather than on
     every card. A student who never opens Details or presses the pill still
     reads it, and no card gets taller.

     Deliberately brighter than the fine print around it. At --ink-dim it read
     as something to skip, which defeats the point of moving it out from behind
     the info icon. It stays smaller and lighter than the career names, so it
     is still clearly secondary to them. */
  .growth-meaning {
    font-size: .76rem; color: var(--ink-muted); line-height: 1.55;
    margin: 0 0 9px; padding-left: 2px;
  }

  /* The same sentence under the Job Growth label in the comparison, which is
     where one path can show a state and the other the country. */
  .ct-label-note {
    font-size: .72rem; color: var(--ink-muted); line-height: 1.5;
    font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px;
  }

  /* CITY PICKER
     Fifty-four places is too many to hunt through by eye, so the plain
     dropdown is hidden and this sits in its place: a box to type in, and the
     matching places underneath. The dropdown is still there, still holds the
     answer, and is still what the rest of the page reads. */
  .city-native { display: none; }
  .city-picker { position: relative; }
  .city-list {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 60; max-height: 240px; overflow-y: auto;
    background: var(--bg-elevated); border: 1px solid var(--gold);
    border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.55);
  }
  .city-option {
    padding: 8px 12px; font-size: .88rem; color: var(--white); cursor: pointer;
    border-bottom: 1px solid var(--rule-light);
  }
  .city-option:last-child { border-bottom: none; }
  .city-option:hover, .city-option.active { background: var(--gold-dim); color: var(--gold); }
  .city-none { padding: 10px 12px; font-size: .82rem; color: var(--ink-dim); }

  .input-prefix { position: relative; }
  .input-prefix .pfx {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--ink-muted); font-size: .88rem; pointer-events: none;
  }
  .input-prefix input { padding-left: 24px; }

  .range-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
  input[type=range] {
    flex: 1; cursor: pointer; height: 4px;
    accent-color: var(--gold);
    background: var(--rule);
    border-radius: 2px;
  }
  .range-val {
    font-family: 'DM Mono', monospace;
    font-size: .88rem; font-weight: 500;
    color: var(--gold); min-width: 48px; text-align: right;
  }
  .divider { border: none; border-top: 1px solid var(--rule); margin: 16px 0; }

  .btn {
    width: 100%; padding: 12px;
    background: var(--gold); color: var(--bg);
    border: none; border-radius: 8px;
    font-size: .95rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: 4px; letter-spacing: .01em;
  }
  .btn:hover { opacity: .9; }
  .btn:active { transform: scale(.98); }

  /* SCENARIO TABS */
  .scenario-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
  .tab {
    flex: 1; padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 7px; font-size: .82rem; font-weight: 500;
    background: var(--bg-card); color: var(--ink-muted);
    cursor: pointer; text-align: center; transition: all .15s;
  }
  .tab.active { background: var(--gold); color: #0a0c14; border-color: var(--gold); font-weight: 700; }

  /* SEARCH + FILTER */
  .search-wrap { position: relative; margin-bottom: 12px; }
  .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-dim); font-size: .95rem; pointer-events: none; }
  .search-wrap input { padding-left: 34px; }

  .filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .filter-pill {
    font-size: .72rem; font-weight: 600; padding: 4px 10px;
    border-radius: 20px; border: 1px solid var(--rule);
    background: var(--bg-elevated); color: var(--ink-muted);
    cursor: pointer; transition: all .15s; letter-spacing: .02em;
  }
  .filter-pill:hover { border-color: var(--gold); color: var(--gold); }
  .filter-pill.active { background: var(--gold-dim); color: var(--gold); border-color: rgba(255,215,80,.3); }

  /* CAREER LIST */
  .career-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 340px; overflow-y: auto; padding-right: 4px;
  }
  .career-list::-webkit-scrollbar { width: 4px; }
  .career-list::-webkit-scrollbar-track { background: var(--bg); }
  .career-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

  .career-row {
    border: 1px solid var(--rule); border-radius: 8px;
    padding: 11px 13px; cursor: pointer;
    transition: all .15s; background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .career-row:hover { border-color: var(--gold); background: rgba(255,215,80,.08); }
  .career-row.selected { border-color: var(--gold); background: rgba(255,215,80,.22); box-shadow: 0 0 0 1px var(--gold); }
  .career-row.selected .cr-name { color: var(--gold); }
  .career-row.selected .cr-cat { color: rgba(255,215,80,.7); }
  .cr-left { flex: 1; min-width: 0; }
  .cr-name { font-size: .88rem; font-weight: 600; color: var(--white); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-cat { font-size: .7rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; }
  .cr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .cr-salary { font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 500; color: var(--ink-muted); }
  /* THE WAY INTO A CAREER'S DETAIL.
     It used to be a dim outline on a dim border, and people read it as
     disabled and never pressed it - which meant never seeing pay at thirty,
     the training routes, or the growth and AI notes. It now looks like a
     control at rest on every card, selected or not: its own surface, a
     border you can actually see, and text bright enough to read.
     Deliberately neutral rather than gold, so the one gold thing on the
     screen is still "Choose This Career". Gold is kept for hover, focus and
     the selected card, where it is a response to something the user did. */
  .info-btn {
    background: var(--bg-elevated); border: 1px solid rgba(160,164,184,.45);
    color: var(--ink-muted);
    cursor: pointer; font-size: .78rem; padding: 5px 10px;
    border-radius: 5px; transition: all .15s; flex-shrink: 0;
    font-family: inherit; font-weight: 600; white-space: nowrap;
  }
  .info-btn:hover, .info-btn:focus-visible {
    color: var(--gold); border-color: var(--gold); background: var(--gold-dim);
  }
  .career-row.selected .info-btn { color: var(--gold); border-color: rgba(255,215,80,.55); }

  /* Says what the figures above it are, and are not: national estimates,
     with salary always adjusting to the chosen city and growth adjusting
     only where a real state figure exists. On every card whether or not
     that career has one, because the claim is about the product, not the
     career. The dashed rule separates it from the pills without adding
     another box. */
  .cr-scope {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--rule);
    font-size: .68rem; line-height: 1.45; color: var(--ink-dim);
  }
  .detail-box-scope {
    margin-top: 4px; font-size: .66rem; line-height: 1.45; color: var(--ink-dim);
  }

  /* AI PILL */
  .ai-pill {
    font-size: .63rem; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;
  }
  .ai-pill-info-icon {
    font-size: 1.05em; opacity: .8; margin-left: 3px;
    text-transform: none; letter-spacing: normal; vertical-align: -1px;
  }
  .ai-LOW       { background: var(--green-dim); color: var(--green); border: 1px solid rgba(100,210,120,.2); }
  .ai-MEDIUM    { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,166,35,.2); }
  .ai-HIGH      { background: rgba(255,150,50,.12); color: #ff9632; border: 1px solid rgba(255,150,50,.2); }
  .ai-VERY-HIGH { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,100,100,.2); }

  .growth-pill {
    font-size: .63rem; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
  }
  .growth-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(100,210,120,.2); }
  .growth-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,166,35,.2); }
  .growth-red   { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,100,100,.2); }
  /* A figure for the student's own state. Deliberately outside the
     green/amber/red scale the national figures use: this is not "a better
     score", it is a different and more specific number, and it has to read
     as one at a glance rather than being mistaken for the pill they saw on
     the browse card. Solid, so it reads as the answer rather than a rating. */
  .growth-local {
    background: var(--blue); color: #0a0c14;
    border: 1px solid var(--blue);
  }

  /* CAREER BANNER */
  .career-banner {
    background: var(--gold-dim); border: 1px solid rgba(255,215,80,.3);
    border-radius: 8px; padding: 10px 14px;
    margin-bottom: 12px; display: none;
    align-items: center; justify-content: space-between; gap: 10px;
  }
  .career-banner.visible { display: flex; }
  .cb-name { font-size: .88rem; font-weight: 600; color: var(--gold); }
  .cb-change { font-size: .78rem; color: var(--ink-muted); cursor: pointer; background: none; border: none; font-family: inherit; text-decoration: underline; }
  .cb-change:hover { color: var(--gold); }

  /* EDU OPTIONS */
  .edu-option {
    border: 1px solid var(--rule); border-radius: 8px;
    padding: 10px 13px; cursor: pointer; margin-bottom: 7px;
    transition: all .15s; background: var(--bg-elevated);
  }
  .edu-option:hover { border-color: var(--gold); background: rgba(255,215,80,.08); }
  .edu-option.selected { border-color: var(--gold); background: rgba(255,215,80,.22); box-shadow: 0 0 0 1px var(--gold); }
  .edu-option.selected .edu-name { color: var(--gold); }
  .edu-option.selected .edu-meta { color: rgba(255,215,80,.7); }
  .edu-name { font-size: .85rem; font-weight: 600; color: var(--white); }
  .edu-meta { font-size: .74rem; color: var(--ink-muted); margin-top: 3px; }

  .debt-note {
    background: var(--blue-dim); border: 1px solid rgba(91,142,240,.25);
    border-radius: 7px; padding: 9px 13px; margin-bottom: 14px;
    font-size: .8rem; color: var(--ink-muted); display: none;
  }
  .debt-note strong { color: var(--blue); font-family: 'DM Mono', monospace; }

  .extra-pay-block {
    background: var(--gold-dim); border: 1px solid rgba(255,215,80,.2);
    border-radius: 8px; padding: 13px;
  }
  .extra-pay-block label { color: var(--gold); }

  /* MODAL */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 1000; display: none;
    align-items: center; justify-content: center; padding: 20px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--bg-card); border: 1px solid var(--rule);
    border-radius: 14px; max-width: 560px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
  }
  .modal-header {
    padding: 20px 22px 16px; border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .modal-title { font-size: 1.2rem; font-weight: 700; }
  .modal-cat { font-size: .75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
  .close-btn { background: none; border: none; font-size: 1.2rem; color: var(--ink-dim); cursor: pointer; padding: 0 4px; }
  .close-btn:hover { color: var(--white); }
  .modal-body { padding: 20px 22px 22px; }

  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
  .detail-box { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
  .detail-box-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); margin-bottom: 5px; }
  .detail-box-value { font-family: 'DM Mono', monospace; font-size: 1.1rem; font-weight: 500; }
  .detail-box-value.gold { color: var(--gold); }
  .detail-box-value.green { color: var(--green); }
  .detail-box-value.red { color: var(--red); }
  .detail-box-sub { font-size: .7rem; color: var(--ink-dim); margin-top: 3px; }

  .detail-section { margin-bottom: 16px; }
  .detail-section-title {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-muted); margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  }
  .detail-row {
    display: flex; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--rule-light);
    font-size: .84rem;
  }
  .detail-row:last-child { border-bottom: none; }
  .detail-row-label { color: var(--ink-muted); }
  .detail-row-val { font-weight: 500; color: var(--white); }

  .growth-bar-wrap { margin-top: 8px; height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
  .growth-bar { height: 100%; border-radius: 3px; }

  .ai-note { font-size: .84rem; color: var(--ink-muted); line-height: 1.65; background: var(--bg-elevated); border-radius: 7px; padding: 12px 14px; }

  .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
  .modal-btn-primary {
    flex: 1; padding: 10px; background: var(--gold); color: var(--bg);
    border: none; border-radius: 8px; font-size: .92rem; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: opacity .15s;
  }
  .modal-btn-primary:hover { opacity: .9; }
  .modal-btn-ghost {
    flex: 1; padding: 10px; background: transparent; color: var(--ink-muted);
    border: 1px solid var(--rule); border-radius: 8px;
    font-size: .92rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .15s;
  }
  .modal-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

  /* RESULTS */
  .results-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 24px;
    text-align: center; color: var(--ink-dim); gap: 14px;
  }
  .results-placeholder p { font-size: .9rem; max-width: 260px; line-height: 1.6; }

  .results-grid { display: none; flex-direction: column; gap: 22px; }
  .results-grid.visible { display: flex; }

  .section-label {
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-muted); margin-bottom: 10px;
  }

  .scenario-label {
    font-size: .92rem; font-weight: 600; color: var(--white);
    margin-bottom: 16px; padding: 12px 14px;
    background: var(--bg-elevated); border-radius: 8px;
    border-left: 3px solid var(--gold);
  }

  /* KPI GRID */
  .kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  @media(max-width:640px){ .kpi-row { grid-template-columns: 1fr 1fr; } }
  .kpi { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
  .kpi-label { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); margin-bottom: 5px; }
  .kpi-value { font-family: 'DM Mono', monospace; font-size: 1.1rem; font-weight: 500; line-height: 1.2; }
  .kpi-sub { font-size: .7rem; color: var(--ink-dim); margin-top: 3px; }
  /* The judgement in words. Without it the tile says "on track" only by
     being green, which is invisible to anyone who cannot separate the
     colors and silent to a screen reader. */
  .kpi-status {
    font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    margin-top: 7px;
  }
  .kpi.green { background: var(--green-dim); border-color: rgba(100,210,120,.2); }
  .kpi.green .kpi-value, .kpi.green .kpi-status { color: var(--green); }
  .kpi.amber { background: var(--amber-dim); border-color: rgba(245,166,35,.2); }
  .kpi.amber .kpi-value, .kpi.amber .kpi-status { color: var(--amber); }
  .kpi.red { background: var(--red-dim); border-color: rgba(255,100,100,.2); }
  .kpi.red .kpi-value, .kpi.red .kpi-status { color: var(--red); }
  .kpi.gold { background: var(--gold-dim); border-color: rgba(255,215,80,.2); }
  .kpi.gold .kpi-value, .kpi.gold .kpi-status { color: var(--gold); }

  /* LOAN BLOCK */
  .loan-block { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
  .loan-block-head { padding: 9px 14px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
  .loan-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--rule-light); font-size: .84rem; }
  .loan-row:last-child { border-bottom: none; }
  .loan-row-label { color: var(--ink-muted); }
  .loan-row-val { font-family: 'DM Mono', monospace; font-weight: 500; color: var(--white); }
  .loan-row-val.green { color: var(--green); }
  .loan-row-val.red { color: var(--red); }
  .loan-row-val.gold { color: var(--gold); }

  /* PROJECTION */
  .projection-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-light); }
  .projection-row:last-child { border-bottom: none; }
  .proj-age { font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--ink-dim); width: 48px; flex-shrink: 0; }
  .proj-bar-wrap { flex: 1; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
  .proj-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
  .proj-val { font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 500; color: var(--white); min-width: 90px; text-align: right; }

  /* COMPARE */
  .compare-wrap { display: block; width: 100%; }
  .compare-col-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
  .compare-col-label.b { color: var(--purple); border-color: var(--purple); }

  /* COMPARE TABLE - 3 column layout works on all screen sizes */
  .compare-table { width: 100%; }
  .compare-table-header {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    padding: 8px 4px; border-bottom: 2px solid var(--rule);
    margin-bottom: 4px;
  }
  .ct-label-col { font-size: .7rem; color: var(--ink-dim); font-weight: 500; }
  .ct-a-col { font-size: .72rem; font-weight: 700; color: var(--gold); text-align: right; }
  .ct-b-col { font-size: .72rem; font-weight: 700; color: var(--purple); text-align: right; }
  .compare-table-row {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    padding: 9px 4px; border-bottom: 1px solid var(--rule-light);
    align-items: center;
  }
  .compare-table-row:last-child { border-bottom: none; }
  .compare-table-row .ct-label-col { font-size: .78rem; color: var(--ink-muted); }
  .compare-table-row .ct-a-col { font-size: .8rem; font-family: 'DM Mono', monospace; font-weight: 500; color: var(--white); text-align: right; }
  .compare-table-row .ct-b-col { font-size: .8rem; font-family: 'DM Mono', monospace; font-weight: 500; color: var(--white); text-align: right; }

  .status-pill { display: inline-block; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; }
  .status-pill.green { background: var(--green-dim); color: var(--green); }
  .status-pill.amber { background: var(--amber-dim); color: var(--amber); }
  .status-pill.red { background: var(--red-dim); color: var(--red); }

  .no-results { font-size: .84rem; color: var(--ink-dim); padding: 16px 0; text-align: center; }
  #scenarioBPanel { display: none; }

  /* COMPARE INPUTS GRID */
  .compare-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* stretch, not start: the two cards in a row are the same step on two
       paths, so they should be the same height and read across as a pair.
       Left to their own heights they sit ragged and stop looking like rows. */
    align-items: stretch;
    margin-bottom: 4px;
  }
  @media(max-width:860px){ .compare-inputs-grid { grid-template-columns: 1fr; } }

  /* The shared Continue button under a step, spanning both columns. */
  .compare-continue-row { grid-column: 1 / -1; margin-bottom: 14px; }
  .compare-continue-row .step-continue { margin-top: 0; }

  /* Off until both paths have filled in what the step needs. The note
     underneath says which side is still missing something - a button that is
     off with no explanation is worse than no button. */
  .step-continue:disabled,
  .step-continue:disabled:hover {
    opacity: .45; cursor: not-allowed; box-shadow: none;
    border-color: var(--rule); color: var(--ink-muted); background: var(--bg-elevated);
  }

  /* Which path a card belongs to, on the card itself. The column headings
     above only work while there are two columns; below 860px there is one. */
  .path-tag {
    margin-left: auto; flex-shrink: 0;
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; padding: 3px 8px; border-radius: 10px;
  }
  .path-tag.a { color: var(--gold);   background: var(--gold-dim);          border: 1px solid rgba(255,215,80,.22); }
  .path-tag.b { color: var(--purple); background: rgba(91,155,213,.12);     border: 1px solid rgba(91,155,213,.25); }
  @media(max-width:860px){ .compare-path-header { display: none; } }

  .compare-path-header {
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
    padding: 12px 16px; margin-bottom: 12px;
    border-radius: 8px; text-align: center;
    background: var(--bg-elevated);
  }
  .gold-border   { border-left: 4px solid var(--gold);   color: var(--gold); }
  .purple-border { border-left: 4px solid var(--purple);  color: var(--purple); }
  .mode-selector {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 32px;
  }
  .mode-btn {
    background: var(--bg-card); border: 1.5px solid var(--rule);
    border-radius: 10px; padding: 18px 16px; cursor: pointer;
    transition: all .15s; text-align: center;
  }
  .mode-btn:hover { border-color: var(--gold); background: var(--gold-dim); }
  .mode-btn.active { border-color: var(--gold); background: var(--gold-dim); box-shadow: 0 0 0 1px var(--gold); }
  .mode-icon { font-size: 1.6rem; margin-bottom: 8px; }
  .mode-title { font-size: .92rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
  .mode-btn.active .mode-title { color: var(--gold); }
  .mode-desc { font-size: .75rem; color: var(--ink-muted); line-height: 1.4; }

  /* SALARY CITY NOTE */
  .salary-city-note {
    background: var(--bg-elevated); border: 1px solid var(--rule);
    border-radius: 7px; padding: 8px 12px; margin-top: 8px;
    font-size: .75rem; color: var(--ink-muted); line-height: 1.5;
  }
  .salary-city-note strong { color: var(--gold); }

  /* WHICH COUNTY - only for the generic "Rural / Small Town" option, which
     is the one place that cannot find a wage area on its own. */
  .rural-where { margin-top: 8px; }
  .rural-where[hidden] { display: none; }
  .rural-where-label {
    display: block; font-size: .75rem; color: var(--ink-muted); margin-bottom: 6px;
  }
  .rural-where-row { display: flex; gap: 8px; flex-wrap: wrap; }
  /* The shared input rule above already gives these their colors and border;
     all they need here is to share the row. */
  .rural-where-row .rural-select { flex: 1 1 130px; min-width: 0; }
  .rural-select:disabled { color: var(--ink-dim); opacity: .6; }
  .rural-where-hint {
    font-size: .7rem; color: var(--ink-dim); line-height: 1.5; margin-top: 6px;
  }

  /* BUDGET BLOCK */
  .budget-block { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
  .budget-section-head {
    padding: 9px 14px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--rule);
  }
  /* Category colours are deliberately NOT the green/amber/red used for
     judgements. A section heading saying "Fixed Obligations" in red read as a
     warning about the section itself. These four are their own palette -
     slate, teal, violet, mint - and every section keeps its text heading, so
     the grouping never depends on colour alone. */
  .budget-section-head.fixed     { background: rgba(139,147,184,.10); color: #aab1d0; }
  .budget-section-head.essential { background: rgba(79,195,199,.10);  color: #6fd3d7; }
  .budget-section-head.discr     { background: rgba(167,139,250,.10); color: #b9a3fb; }
  .budget-section-head.savings   { background: rgba(125,211,192,.10); color: #8fdcc9; }
  .budget-section-head.total     { background: rgba(255,215,80,.08);  color: var(--gold); border-top: 1px solid var(--rule); }
  .budget-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid var(--rule-light);
    font-size: .83rem;
  }
  .budget-row:last-child { border-bottom: none; }
  .budget-row-label { color: var(--ink-muted); }
  .budget-row-val { font-family: 'DM Mono', monospace; font-weight: 500; color: var(--white); }
  .budget-row-val.red   { color: var(--red); }
  .budget-row-val.green { color: var(--green); }
  .budget-row-val.amber { color: var(--amber); }
  .budget-row-val.gold  { color: var(--gold); }

  /* EDITABLE BUDGET ROWS
     "Uses your amounts" is a text label, not a colour. Somebody who cannot
     separate these shades, or who is hearing the page read aloud, still finds
     out which figures are theirs and which the Sim estimated. */
  .budget-row-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .budget-row-edit input[type=number] {
    width: 92px; padding: 4px 8px; font-size: .8rem; text-align: right;
    font-family: 'DM Mono', monospace;
  }
  .budget-reset {
    background: none; border: 1px solid var(--rule); border-radius: 5px;
    color: var(--ink-muted); font-size: .68rem; padding: 3px 8px; cursor: pointer;
  }
  .budget-reset:hover { color: var(--white); border-color: var(--ink-dim); }
  .budget-row-note { font-size: .68rem; color: var(--ink-dim); padding: 0 14px 8px; }
  .budget-row-note a, .budget-row-note button.linklike {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--gold); text-decoration: underline; cursor: pointer;
  }
  /* The estimate beside the person's own figure. Brighter and larger than the
     muted notes around it, because it answers "what did I change, and from
     what?" - and deliberately not red or amber: an amount that differs from the
     estimate is a choice someone made, not a problem being reported. */
  .budget-custom-note {
    font-size: .76rem; color: var(--ink-muted);
    padding: 2px 14px 9px; line-height: 1.5;
  }
  .budget-custom-note strong { color: #b9a3fb; font-weight: 700; }

  /* A figure that is waiting on a borrowing answer. Deliberately plain: it is
     not a warning, and it must not read as a low number or a good result. */
  .awaiting {
    font-family: inherit; font-size: .78rem; font-weight: 600;
    color: var(--ink-muted); font-style: normal;
  }
  .awaiting-note {
    font-size: .72rem; color: var(--ink-muted);
    background: var(--bg-card); border-left: 3px solid var(--ink-dim);
    padding: 7px 14px; line-height: 1.45;
  }
  /* A result built on an amount the person asked to try, not one they expect. */
  .hypo-tag {
    display: inline-block; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--gold); border: 1px solid rgba(255,215,80,.45);
    border-radius: 20px; padding: 1px 7px; margin-left: 6px; white-space: nowrap;
  }
  .debt-state-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--ink-muted); margin-top: 8px; cursor: pointer;
  }
  .debt-state-row input { width: auto; margin: 0; }
  /* The statement under every set of results. */
  .model-disclaimer {
    font-size: .74rem; color: var(--ink-muted); line-height: 1.5;
    border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 10px;
  }
  .custom-tag {
    display: inline-block; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #b9a3fb; border: 1px solid rgba(167,139,250,.45);
    border-radius: 20px; padding: 1px 7px; margin-left: 6px; white-space: nowrap;
  }
  .custom-summary {
    font-size: .72rem; color: var(--ink-muted);
    padding: 8px 14px; border-bottom: 1px solid var(--rule-light);
  }
  /* A shortfall says so in words. The styling is the second signal, never the
     only one - the same rule the judgement colours follow. */
  .budget-warning {
    font-size: .74rem; font-weight: 600; color: var(--red);
    background: var(--red-dim); border-left: 3px solid var(--red);
    padding: 7px 14px; line-height: 1.45;
  }
  /* Read aloud, never drawn. Each editable amount needs a name a screen
     reader can announce; the row's visible label sits in a separate element,
     so without this the box is just "spin button" with no idea what it sets. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .budget-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 14px; font-size: .88rem; font-weight: 600;
    border-bottom: 1px solid var(--rule-light);
  }
  .budget-total-row:last-child { border-bottom: none; }

  .ratio-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px 14px; border-top: 1px solid var(--rule);
  }
  .ratio-box { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 7px; padding: 10px 12px; }
  .ratio-box-label { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); margin-bottom: 4px; }
  .ratio-box-value { font-family: 'DM Mono', monospace; font-size: 1rem; font-weight: 500; }
  .ratio-box-sub { font-size: .68rem; color: var(--ink-dim); margin-top: 3px; }

  /* TOOLTIPS */
  .tip {
    position: relative; display: inline-block;
    border-bottom: 1px dashed var(--ink-dim); cursor: help;
  }
  .tip .tip-box {
    visibility: hidden; opacity: 0;
    position: fixed;
    background: #1e2540; border: 1px solid var(--rule);
    border-radius: 8px; padding: 10px 13px;
    font-size: .78rem; line-height: 1.55;
    color: var(--ink-muted); font-weight: 400;
    width: 220px; z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,.7);
    transition: opacity .15s;
    pointer-events: none;
    text-transform: none; letter-spacing: 0;
  }
  .tip .tip-box::after {
    content: '';
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e2540;
  }
  .tip .tip-box.flip-below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1e2540;
  }
  .tip:hover .tip-box { visibility: visible; opacity: 1; }

  /* EXPANDABLE SECTIONS
     These are real <button> elements, not clickable divs. A div with an
     onclick cannot be reached by keyboard and announces nothing to a screen
     reader, which is a procurement blocker for public schools as well as a
     barrier for the student using it. The button carries aria-expanded so
     the open/shut state is not conveyed by the rotated chevron alone. */
  .expand-toggle {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; text-align: left;
    background: none; border: none; border-top: 1px solid var(--rule);
    font-family: inherit;
    cursor: pointer; padding: 12px 14px;
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-muted);
    user-select: none; transition: color .15s;
  }
  .expand-toggle:hover { color: var(--gold); }
  .expand-toggle .chevron {
    font-size: .7rem; transition: transform .2s;
    color: var(--ink-dim);
  }
  .expand-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  .expand-content { display: none; }
  .expand-content.open { display: block; }

  /* The "where does this data come from" control used to sit inside the
     budget toggle. A button inside a button is invalid and unreachable, so
     it now sits on its own line directly beneath the heading - still always
     visible, rather than hidden inside the section it describes. */
  .expand-aside { padding: 0 14px 10px; }
  .info-pill {
    display: inline-block; font-family: inherit;
    font-size: .7rem; font-weight: 700;
    color: var(--gold); background: var(--gold-dim);
    border: 1px solid rgba(255, 215, 80, .2); border-radius: 20px;
    padding: 2px 9px; cursor: pointer;
  }
  .info-pill:hover { background: rgba(255, 215, 80, .16); }

/* ---------------------------------------------------------------------
   CONTINUE BUTTON
   Ends each step that holds more than one box. Those steps cannot tell on
   their own when somebody is finished with them, so the student says so.
   Quiet while it is not this student's next move, and solid gold the moment
   it is. Left quiet throughout, it reads as decoration and people scroll
   past it instead of pressing it - which puts them back in the stalled flow
   this button exists to fix.
   --------------------------------------------------------------------- */
.step-continue {
  display: block; width: 100%; margin-top: 16px; padding: 10px 12px;
  background: var(--bg-elevated); color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 8px;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.step-continue::after { content: " \2192"; }
.step-continue:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.step-continue:active { transform: scale(.99); }

/* Lit: the next thing to do. Solid gold, the same as Run Simulation, with a
   soft ring so the eye lands on it without the page shouting. Two ways in -
   the step it sits in is the active one (single-path view), or the shared
   button has been told it is (comparison view, where it sits between the two
   cards rather than inside one). */
.step-continue.is-next,
.step-card.step-active .step-continue {
  background: var(--gold); color: #0a0c14;
  border-color: var(--gold); font-weight: 700;
  box-shadow: 0 0 0 4px rgba(255,215,80,.12);
}
.step-continue.is-next:hover,
.step-card.step-active .step-continue:hover {
  background: var(--gold); color: #0a0c14; opacity: .9;
}

/* Only appears when Continue is pressed with no city chosen. Says what is
   missing rather than leaving a dead button with no explanation. */
/* The two-letter state code on a growth pill, shown only when the figure is
   that state's rather than the national one. Says why the number differs from
   the one the same career shows elsewhere. */
.growth-pill-state {
  font-size: .72em; font-weight: 700; letter-spacing: .08em;
  padding: 1px 5px; margin-left: 4px; border-radius: 4px;
  background: rgba(255,255,255,.10);
}

.step-warning {
  display: none; margin-top: 8px; text-align: center;
  font-size: .76rem; line-height: 1.5; color: var(--amber);
}

/* ---------------------------------------------------------------------
   COLOR LEGEND
   Sits above the results. The colors are used all over the results, and
   without this a first-time reader has to hover a tooltip to learn that
   red is bad. It is a quiet strip, not a box, so it explains without
   competing with the numbers it is explaining.
   --------------------------------------------------------------------- */
.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: .74rem; color: var(--ink-dim);
  padding: 9px 12px; margin-bottom: 14px;
  background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: 8px;
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-dot.green { background: var(--green); }
.legend-dot.amber { background: var(--amber); }
.legend-dot.red   { background: var(--red); }