:root {
    --bg: #F5F6F2;
    --surface: #FFFFFF;
    --surface-2: #EBEDE7;
    --border: #D7DBD1;
    --ink: #16212B;
    --ink-2: #47555E;
    --ink-3: #7C8790;
    --accent: #0B6E76;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(11,110,118,0.10);
    --good: #2E7D46;      --good-bg: #E4F1E7;
    --warning: #93650A;   --warning-bg: #F5EBD6;
    --critical: #B23B3B;  --critical-bg: #F6E4E2;

    --tier-1: #0A3161; --tier-1-ink:#FFFFFF;
    --tier-2: #1D5C96; --tier-2-ink:#FFFFFF;
    --tier-3: #356B98; --tier-3-ink:#FFFFFF;
    --tier-4: #9DC7E0; --tier-4-ink:#16212B;
    --tier-5: #DCE9EF; --tier-5-ink:#16212B;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }

  * { box-sizing: border-box; min-width: 0; }
  html, body { margin:0; padding:0; max-width:100%; overflow-x:hidden; }
  body {
    background: var(--bg); color: var(--ink); font-family: var(--sans);
    font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); }
  h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; }
  .num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

  .app { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; }
  @media (max-width: 860px) { .app { grid-template-columns: minmax(0,1fr); } }

  .rail {
    border-right: 1px solid var(--border); padding: 1rem 1.25rem; position: sticky; top: 0;
    height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; min-width: 0;
  }
  @media (max-width: 860px) {
    .rail { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  }
  .wordmark { display:flex; flex-direction:column; gap:0.15rem; }
  .lang-switch { position:relative; width:max-content; }
  .lang-switch summary { list-style:none; display:inline-flex; align-items:center; gap:0.4rem; width:max-content; padding:0.35rem 0.6rem; border:1px solid var(--border); border-radius:3px; color:var(--ink-2); font-size:0.75rem; cursor:pointer; user-select:none; }
  .lang-switch summary::-webkit-details-marker { display:none; }
  .lang-switch summary::marker { content:''; }
  .lang-switch summary:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .lang-switch[open] summary { border-color:var(--accent); color:var(--accent); }
  .lang-switch svg { width:14px; height:14px; flex:none; }
  .lang-switch .caret { font-size:0.6rem; color:var(--ink-3); margin-left:-0.15rem; }
  .lang-menu { position:absolute; top:calc(100% + 0.35rem); left:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:5px; box-shadow:0 6px 18px rgba(22,33,43,0.14); overflow:hidden; min-width:9.5rem; }
  .lang-option { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding:0.55rem 0.75rem; font-size:0.8125rem; color:var(--ink-2); text-decoration:none; }
  .lang-option:hover { background:var(--surface-2); color:var(--ink); }
  .lang-option.active { color:var(--accent); font-weight:600; }
  .lang-option .check { font-size:0.7rem; opacity:0; }
  .lang-option.active .check { opacity:1; }
  .wordmark .mark { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
  .wordmark .sub { font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.04em; }

  .nav-group { display:flex; flex-direction:column; gap:0rem; }
  .nav-label { font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0.15rem 0 0.1rem 0.6rem; }
  .nav-link {
    display:flex; align-items:baseline; justify-content:space-between; gap: 0.5rem; line-height: 1.15;
    padding: 0.16rem 0.6rem; border-radius: 3px; color: var(--ink-2); text-decoration:none;
    font-size: 0.8125rem; border-left: 2px solid transparent;
  }
  .nav-link:hover { background: var(--surface-2); color: var(--ink); }
  .nav-link.active { background: var(--accent-soft); color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
  .nav-link .rk { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

  main { padding: 2.75rem clamp(1.25rem, 4vw, 3.5rem) 5rem; min-width:0; }
  .measure { max-width: 66ch; }
  .page-head { display:flex; flex-direction:column; gap:0.6rem; margin-bottom: 2.25rem; }
  .page-head h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
  .dek { color: var(--ink-2); max-width: 62ch; font-size: 0.95rem; }

  .controls-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
  .link-btn { font-size:0.8125rem; color: var(--ink-2); background:none; border:none; cursor:pointer; text-decoration: underline; font-family: var(--sans); padding:0; }
  .link-btn:hover { color: var(--accent); }

  .legend { display:flex; flex-wrap:wrap; gap: 1.1rem; margin: 0.2rem 0 1.4rem; }
  .legend-item { display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; color: var(--ink-2); }
  .legend-swatch { width:12px; height:12px; border-radius:2px; flex:none; }

  .rank-list { display:flex; flex-direction:column; }
  .rank-row {
    display:grid; grid-template-columns: 2rem minmax(160px,280px) minmax(0,1fr) 4.4rem; gap:1rem; align-items:center;
    padding: 0.85rem 0; border-top:1px solid var(--border); text-decoration:none; color:inherit;
  }
  .rank-row:hover .rank-name { color: var(--accent); }
  .rank-row:first-child { border-top:1px solid var(--border); }
  .rank-num { font-family: var(--serif); font-size:1.3rem; color: var(--ink-3); text-align:right; }
  .rank-meta { min-width:0; }
  .rank-name { font-weight:700; font-size:0.95rem; display:block; }
  .rank-sub { font-size:0.75rem; color: var(--ink-3); display:block; margin-top:0.1rem; }
  .rank-pct { text-align:right; }
  .rank-pct .big { font-family: var(--serif); font-size:1.2rem; font-weight:700; display:block; }
  .rank-pct .lbl { font-size:0.6875rem; color: var(--ink-3); }

  /* Tier breakdown bar: always visible, on every device. */
  .bar-wrap { display:flex; height:1.9rem; border-radius:3px; overflow:hidden; background:var(--surface-2); min-width:0; }
  .bar-seg { display:flex; align-items:center; justify-content:center; position:relative; border-right:2px solid var(--bg); font-size:0.75rem; font-weight:700; font-family:var(--mono); min-width:0; overflow:hidden; white-space:nowrap; }
  .bar-seg:last-child { border-right:none; }

  /* ---- offers-only "Best of the Rest" section ---- */
  .divider { border:none; border-top:1px solid var(--border); margin: 2.5rem 0 2rem; }
  .section-head { margin-bottom: 0.4rem; }
  .section-eyebrow { font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
  .section-head h2 { font-size: 1.4rem; margin-top: 0.25rem; color: var(--ink-2); }
  .section-dek { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.4rem; }

  .offer-list { display:flex; flex-direction:column; gap: 0.75rem; margin-top: 1.4rem; }
  .offer-card {
    background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px; padding: 0.95rem 1.1rem;
    display: grid; grid-template-columns: 1.4rem minmax(150px,220px) minmax(0,1fr) 4.6rem; gap: 1rem; align-items: center;
    text-decoration: none; color: inherit;
  }
  .offer-card:hover { border-style: solid; border-color: var(--ink-3); }
  .offer-card:hover .offer-name { color: var(--accent); }
  .offer-card .dash { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-3); text-align: right; }
  .offer-meta { min-width: 0; }
  .offer-name-row { display:flex; align-items:center; gap:0.45rem; flex-wrap: wrap; }
  .offer-name { font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
  .offer-full { font-size: 0.72rem; color: var(--ink-3); display:block; margin-top: 0.1rem; }
  .chip { display:inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.12rem 0.42rem; border-radius: 20px; }
  .chip-full { background: var(--surface); color: var(--ink-3); border: 1px solid var(--border); }
  .chip-partial { background: var(--warning-bg); color: var(--warning); }
  .offer-bar-wrap { display:flex; height: 1.5rem; border-radius: 3px; overflow: hidden; background: var(--surface); filter: saturate(0.6) opacity(0.88); min-width: 0; }
  .offer-bar-seg { display:flex; align-items:center; justify-content:center; border-right: 2px solid var(--surface-2); font-size: 0.68rem; font-weight: 700; font-family: var(--mono); overflow:hidden; white-space:nowrap; }
  .offer-bar-seg:last-child { border-right: none; }
  .offer-pct { text-align: right; }
  .offer-pct .big { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; display:block; color: var(--ink-2); }
  .offer-pct .lbl { font-size: 0.6rem; color: var(--ink-3); line-height:1.3; }

  .tooltip {
    position: fixed; pointer-events:none; background: var(--ink); color: var(--bg); font-size:0.75rem;
    padding: 0.4rem 0.55rem; border-radius:3px; z-index:50; line-height:1.4; max-width:220px; display:none;
    font-family: var(--sans);
  }
  table.data-table { width:100%; border-collapse: collapse; font-size: 0.85rem; }
  table.data-table th, table.data-table td { text-align:left; padding: 0.5rem 0.7rem; border-bottom:1px solid var(--border); }
  table.data-table th { font-size:0.6875rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-3); cursor:pointer; user-select:none; white-space:nowrap; position: sticky; top: 0; background: var(--bg); z-index: 2; }
  table.data-table th:hover { color: var(--accent); }
  table.data-table th .arrow { font-size:0.7em; opacity:0.6; }
  table.data-table tbody tr:hover { background: var(--surface-2); }
  .table-scroll { overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:4px; }
  .table-scroll table { min-width: 560px; }
  .chip { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; padding:0.2rem 0.55rem; border-radius:3px; font-weight:600; white-space:nowrap; }
  .chip-good { background: var(--good-bg); color: var(--good); }
  .chip-warning { background: var(--warning-bg); color: var(--warning); }
  .chip-critical { background: var(--critical-bg); color: var(--critical); }
  .chip-neutral { background: var(--surface-2); color: var(--ink-2); }
  .tier-chip { display:inline-block; font-size:0.7rem; font-weight:700; padding: 0.12rem 0.5rem; border-radius:3px; font-family:var(--mono); }

  .divider { border:none; border-top:1px solid var(--border); margin: 2.75rem 0 2rem; }
  .section-head { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:1.25rem; }
  .section-head h2 { font-size:1.35rem; }
  .section-head p { color: var(--ink-2); font-size:0.875rem; max-width:62ch; margin:0; }


  .card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1px; background: var(--border); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-bottom:1.5rem; }
  .card { background: var(--surface); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem; }
  .card .card-label { font-size:0.6875rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-3); font-weight:600; }
  .card .card-value { font-family: var(--serif); font-size:1.7rem; font-weight:700; }
  .card .card-note { font-size:0.78rem; color: var(--ink-2); }

  .rule-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin: 1.25rem 0 2rem; }
  .rule-card { background: var(--surface); padding:1rem 1.15rem; }
  .rule-card .rule-title { font-weight:700; font-size:0.85rem; margin-bottom:0.35rem; }
  .rule-card p { margin:0; font-size:0.82rem; color: var(--ink-2); }

  .callout { border-left: 3px solid var(--ink-3); padding: 0.9rem 1.1rem; background: var(--surface-2); border-radius: 0 3px 3px 0; margin: 1.1rem 0; font-size:0.875rem; color: var(--ink-2); }
  .callout.warn { border-left-color: var(--warning); }
  .callout strong { color: var(--ink); }
  .callout ul { margin:0.4rem 0 0 1.1rem; padding:0; }
  .callout li { margin-bottom:0.35rem; }

  .tier-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin:1.25rem 0 2rem; }
  .tier-table th, .tier-table td { text-align:left; padding:0.6rem 0.8rem; border-bottom:1px solid var(--border); vertical-align:top; }
  .tier-table th { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-3); }
  .tier-table td.tier-name { font-weight:700; white-space:nowrap; }

  .prose h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
  .prose p { color: var(--ink-2); font-size:0.9rem; }
  .prose ul { color: var(--ink-2); font-size:0.9rem; padding-left:1.2rem; }
  .prose li { margin-bottom: 0.4rem; }

  .search-input {
    font-family: var(--sans); font-size:0.85rem; padding:0.45rem 0.7rem; border:1px solid var(--border);
    border-radius:4px; background: var(--surface); color: var(--ink); width: 220px;
  }
  .search-input:focus { outline: 2px solid var(--accent); outline-offset:1px; }

  .school-head { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin: 0.6rem 0 1.6rem; }
  .back-link { font-size:0.8125rem; color: var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; gap:0.3rem; margin-bottom:1rem; }
  .back-link:hover { color: var(--accent); }

  footer.site-footer { margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--border); font-size:0.75rem; color: var(--ink-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }

  button:focus-visible, a:focus-visible, th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (prefers-reduced-motion: no-preference) {
    main { animation: fade-in 0.18s ease-out; }
  }
  @keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity:1; transform:none; } }
  /* ---- Consolidated mobile overrides — kept LAST so they win the cascade
     regardless of where their matching base rules sit earlier in this
     stylesheet (equal-specificity selectors resolve by source order). ---- */
  @media (max-width: 640px) {
    .rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.9rem 1.1rem; }
    .wordmark .sub { display: none; }
    .nav-group { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
    .nav-group + .nav-group { display: none; }
    .page-head .eyebrow, .page-head .dek, .legend { display: none; }
    .page-head { margin-bottom: 1.2rem; }
    .page-head h1 { font-size: 1.5rem; }

    .offer-card { grid-template-columns: 1.2rem minmax(0,1fr); grid-template-areas: "dash meta" "dash bar" "dash pct"; row-gap: 0.5rem; }
    .offer-card .dash { grid-area: dash; }
    .offer-meta { grid-area: meta; }
    .offer-bar-wrap { grid-area: bar; }
    .offer-pct { grid-area: pct; text-align: left; }

    .rank-row {
      grid-template-columns: 1.6rem 1fr auto;
      grid-template-areas: "num meta pct" "bar bar bar";
      row-gap: 0.5rem;
    }
    .rank-num { grid-area: num; font-size:1.1rem; }
    .rank-meta { grid-area: meta; }
    .rank-pct { grid-area: pct; }
    .bar-wrap { grid-area: bar; }
    .bar-seg { font-size: 0.625rem; }
    .offer-bar-seg { font-size: 0.6rem; }

    .col-optional { display:none; }
    .table-scroll table { min-width: 0; }
  }