/* Matriculate — an academic press, not a control panel.
 *
 * The frosted glass and moulded clay are gone. They cost legibility on a page
 * whose whole job is dense figures, and blur is the most expensive thing a
 * browser can be asked to keep repainting behind scrolling text.
 *
 * What replaced them is the vocabulary of a well-set journal:
 *   PAPER   a warm off-white ground, so white cards read as pages on a desk.
 *   CARD    flat white, one hairline rule, one soft shadow. Nothing tracks the
 *           pointer, nothing glows, nothing is translucent.
 *   RULE    hairlines do the dividing that shadows used to do.
 *   ACCENT  one confident indigo, used for what you can act on and nothing
 *           else. The four tier colours remain the only other saturation.
 * Brightness comes from contrast and colour placement, not from effects.
 *
 * The palette is neutral on purpose: warm greys carry the interface, and the
 * only saturated colour on the page is the four tier colours, which mean
 * something. Nothing decorative competes with them.
 *
 * Sizing is fluid rather than stepped. The page is as wide as the monitor
 * usefully allows, the type scales with it, and past 1500px the search panel
 * comes out of the drawer and sits beside the list.
 */

@property --ry { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --rx { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  /* paper */
  --ground: #F6F5F1;
  --ground-2: #EDEBE5;
  --wash-1: transparent;
  --wash-2: transparent;

  /* card — flat, opaque, one hairline and one shadow */
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;
  --glass-line: rgba(23, 25, 30, .10);
  --glass-edge: rgba(23, 25, 30, .07);
  --glass-shadow: 0 1px 2px rgba(23, 25, 30, .04), 0 8px 24px -18px rgba(23, 25, 30, .28);

  /* controls */
  --surface-solid: #FFFFFF;
  --clay: #FFFFFF;
  --clay-2: #F1EFE9;
  --clay-shadow: 0 1px 2px rgba(23, 25, 30, .07), 0 0 0 1px rgba(23, 25, 30, .09) inset;
  --clay-pressed: 0 0 0 1px rgba(23, 25, 30, .18) inset;

  /* ink */
  --ink: #17191E;
  --ink-2: #4B5058;
  --ink-3: #6A707A;
  --accent: #2B4ACF;
  --accent-ink: #FFFFFF;
  --accent-wash: #EEF1FE;

  /* tiers — the only saturated colour in the interface */
  --likely: #1D6A48;
  --target: #855400;
  --reach: #A23A36;
  --longshot: #64666C;
  --likely-fill: #2E9268;
  --target-fill: #C08519;
  --reach-fill: #C4544F;
  --longshot-fill: #9B9DA2;

  /* type */
  --display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
  --ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* motion */
  --swift: 180ms cubic-bezier(.32, .72, 0, 1);
  --glide: 420ms cubic-bezier(.32, .72, 0, 1);
  --settle: 560ms cubic-bezier(.16, 1, .3, 1);

  /* layout */
  --maxw: 1180px;
  --rail: 340px;

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1113;
    --ground-2: #16181B;
    --wash-1: transparent;
    --wash-2: transparent;
    --glass: #191C20;
    --glass-strong: #1E2126;
    --glass-line: rgba(255, 255, 255, .10);
    --glass-edge: rgba(255, 255, 255, .07);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -20px rgba(0, 0, 0, .8);
    --surface-solid: #191C20;
    --clay: #22262C;
    --clay-2: #1C2025;
    --clay-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    --clay-pressed: 0 0 0 1px rgba(255, 255, 255, .18) inset;
    --ink: #ECEDEB;
    --ink-2: #AEB3BB;
    --ink-3: #9CA2AB;
    --accent: #8CA2F8;
    --accent-ink: #11131A;
    --accent-wash: #1B2239;
    --likely: #61BC91;
    --target: #D4A455;
    --reach: #E4908A;
    --longshot: #9B9DA2;
    --likely-fill: #34A06E;
    --target-fill: #B4791A;
    --reach-fill: #B54F4B;
    --longshot-fill: #7C7E83;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .aurora b { opacity: .5; }
}
:root[data-theme="dark"] {
  --ground: #0F1113; --ground-2: #16181B; --wash-1: transparent; --wash-2: transparent;
  --glass: #191C20; --glass-strong: #1E2126;
  --glass-line: rgba(255,255,255,.10); --glass-edge: rgba(255,255,255,.07);
  --glass-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -20px rgba(0,0,0,.8);
  --surface-solid: #191C20; --clay: #22262C; --clay-2: #1C2025;
  --clay-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  --clay-pressed: 0 0 0 1px rgba(255,255,255,.18) inset;
  --ink: #ECEDEB; --ink-2: #AEB3BB; --ink-3: #9CA2AB;
  --accent: #8CA2F8; --accent-ink: #11131A; --accent-wash: #1B2239;
  --likely: #61BC91; --target: #D4A455; --reach: #E4908A; --longshot: #9B9DA2;
  --likely-fill: #34A06E; --target-fill: #B4791A; --reach-fill: #B54F4B; --longshot-fill: #7C7E83;
  color-scheme: dark;
}
:root[data-theme="dark"] .aurora b { opacity: .5; }

* { box-sizing: border-box; }

/* One knob for the whole page. Text and controls grow with the monitor
   instead of shrinking into the middle of a 4K screen, and stop growing
   before they turn into a poster. */
html { font-size: clamp(16px, 0.32vw + 14.4px, 19px); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
a { color: var(--accent); }
:where(button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- aurora */
.aurora { display: none; }
.aurora b {
  position: absolute;
  display: block;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .42;
  will-change: transform;
}
.aurora b:nth-child(1) { background: radial-gradient(circle at 40% 40%, var(--wash-1), transparent 68%); top: -10vmax; left: -8vmax; animation: drift-a 52s ease-in-out infinite alternate; }
.aurora b:nth-child(2) { background: radial-gradient(circle at 60% 50%, var(--wash-2), transparent 68%); bottom: -16vmax; right: -10vmax; animation: drift-b 64s ease-in-out infinite alternate; }
.aurora b:nth-child(3) { display: none; }
@keyframes drift-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-11vmax, -5vmax, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(6vmax, -9vmax, 0) scale(.92); } }

/* ----------------------------------------------------------- materials */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.clay {
  background: var(--clay);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--clay-shadow);
  color: var(--ink);
}

/* ---------------------------------------------------------------- shell */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 auto;
  width: min(100% - 32px, var(--maxw));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 0;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .mark {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -.04em;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: var(--clay-shadow);
  transform: none;
}
.brand h1 { font-size: 1.0625rem; line-height: 1.15; }
.brand p { margin: 1px 0 0; font-size: 0.75rem; color: var(--ink-3); }

.counts { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); letter-spacing: .02em; }

.shell {
  width: min(100% - 32px, var(--maxw));
  margin: 22px auto 0;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}


.pane { animation: pane-in var(--settle) both; }
/* The top bar is sticky, so a pane scrolled to the top of the viewport would
   put its own heading underneath it. */
.pane { scroll-margin-top: 96px; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

/* ----------------------------------------------------------- record rail */
#pane-record { position: sticky; top: 92px; padding: 20px; }

.rail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rail-head h2 { font-size: 1.1875rem; }
.saved { margin-left: auto; font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); }

fieldset { border: 0; margin: 18px 0 0; padding: 0; }
legend {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 0 6px;
}
.field { margin-top: 12px; }
.field > label { display: block; font-size: 0.7812rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--clay-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--clay-pressed);
  transition: box-shadow var(--swift), border-color var(--swift);
}
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%),
    linear-gradient(var(--clay-2), var(--clay-2));
  background-position: calc(100% - 17px) center, calc(100% - 12px) center, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 32px;
}
input:focus, select:focus { border-color: var(--accent); outline: none; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* clay chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.7812rem; font-weight: 600; color: var(--ink-2);
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  cursor: pointer;
  user-select: none;
  transition: transform var(--swift), box-shadow var(--swift), color var(--swift);
}
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(1px); box-shadow: var(--clay-pressed); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--glass-edge); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.chip:has(input:checked) { color: var(--accent-ink); background: var(--accent); box-shadow: var(--clay-shadow); }
.chip:has(input:checked)::before { background: #fff; box-shadow: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* clay rating dial */
.rating { display: flex; gap: 6px; }
.rating button {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 12px;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  cursor: pointer;
  transition: transform var(--swift), box-shadow var(--swift), color var(--swift);
}
.rating button:hover { transform: translateY(-1px); }
.rating button:active { transform: translateY(1px) scale(.97); box-shadow: var(--clay-pressed); }
.rating button[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: var(--clay-shadow);
}

.btn {
  font-family: var(--ui); font-size: 0.8438rem; font-weight: 700;
  padding: 11px 16px;
  border: 0; border-radius: 14px;
  color: var(--ink);
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  cursor: pointer;
  transition: background var(--swift), box-shadow var(--swift), color var(--swift);
}
.btn:hover { background: var(--clay-2); }
.btn:active { box-shadow: var(--clay-pressed); }
.btn.primary { color: var(--accent-ink); background: var(--accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent); filter: brightness(1.12); }
.btn.sm { padding: 7px 12px; font-size: 0.7812rem; border-radius: 11px; }
/* Not opacity: blending a grey through 50% drops it below AA and leaves the
   real contrast dependent on whatever happens to be behind it. */
.btn[disabled] { cursor: default; color: var(--ink-2); background: var(--ground-2); box-shadow: var(--clay-pressed); }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.sharebox { margin-top: 14px; }
.sharebox label { display: block; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.sharebox input { font-family: var(--mono); font-size: 0.6875rem; }
.hint.shared { color: var(--ink-2); border-left: 3px solid var(--accent); padding-left: 10px; }
.hint.shared b { color: var(--ink); }
.hint { font-size: 0.7188rem; color: var(--ink-3); margin: 10px 0 0; }
.majornote { font-size: 0.7188rem; line-height: 1.5; color: var(--ink-2); margin: 7px 0 0; }
.majornote b { color: var(--ink); }
.majornote .warn { color: var(--reach); font-weight: 600; }

/* ------------------------------------------------------------- odds core */
.hero { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; margin-bottom: 20px; }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.core { width: 220px; height: 220px; perspective: 900px; justify-self: center; }
.core-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--settle);
}
.core-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 32px -24px rgba(22,23,26,.6);
}
.core-ring.r2 { inset: 18px; transform: translateZ(26px) rotateX(9deg); opacity: .8; }
.core-ring.r3 { inset: 36px; transform: translateZ(52px) rotateX(-7deg); opacity: .6; }
.core-dial { position: absolute; inset: 6px; transform: translateZ(66px); }
.core-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.core-dial circle { fill: none; stroke-linecap: round; }
.core-dial .track { stroke: var(--glass-edge); stroke-width: 9; }
.core-dial .arc { stroke-width: 9; transition: stroke-dashoffset var(--settle), stroke var(--glide); filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
.core-face {
  position: absolute; inset: 34px;
  transform: translateZ(84px);
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--clay);
  box-shadow: var(--clay-shadow);
}
.core-face .num { font-family: var(--display); font-weight: 700; font-size: 2.375rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.core-face .lab { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.hero-copy .eyebrow { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hero-copy h2 { font-size: clamp(22px, 3.4vw, 30px); margin: 6px 0 8px; }
.hero-copy p { margin: 0; color: var(--ink-2); font-size: 0.8438rem; max-width: 46ch; }

/* --------------------------------------------------------------- tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { padding: 14px 16px; border-radius: var(--radius); }
.tile .k { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.tile .v { font-family: var(--display); font-weight: 700; font-size: 1.6875rem; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 3px; }
.tile .s { font-size: 0.6875rem; color: var(--ink-3); }

/* ----------------------------------------------------------- deadlines */
.deadlines { padding: 16px 18px; margin-bottom: 20px; }
.deadlines h3 { font-family: var(--ui); font-size: 0.75rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); margin-bottom: 10px; }
.dllist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.dllist li { display: grid; grid-template-columns: minmax(0, 1fr) 62px 78px; gap: 10px; align-items: center; }
.dlname { font-size: 0.8438rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dldate { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.dldays {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; text-align: center;
  padding: 4px 0; border-radius: 999px;
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  color: var(--ink-2);
}
.dldays.soon { color: var(--reach); }
.dldays.near { color: var(--target); }
.dlnote { font-size: 0.75rem; color: var(--ink-3); margin: 8px 0 0; line-height: 1.5; }
.dlnote b { color: var(--ink-2); }
.dlline { font-size: 0.8125rem; color: var(--ink-2); margin: 0 0 4px; }
.dlline b { color: var(--ink); }
.dlline .dldays { display: inline-block; padding: 3px 10px; margin-left: 6px; }
.dlline small { display: block; font-size: 0.7188rem; color: var(--ink-3); margin-top: 4px; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sources a {
  display: block; flex: 1 1 180px;
  padding: 9px 12px; border-radius: 13px;
  font-size: 0.7812rem; font-weight: 700; color: var(--ink);
  text-decoration: none;
  background: var(--clay);
  box-shadow: var(--clay-shadow);
  transition: transform var(--swift);
}
.sources a:hover { transform: translateY(-2px); color: var(--accent); }
.sources small { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 560px) { .dllist li { grid-template-columns: minmax(0, 1fr) 70px; } .dllist .dldate { display: none; } }

/* --------------------------------------------------------- school cards */
.cards { display: grid; gap: 12px; }
.card { padding: 0; overflow: hidden; border-radius: var(--radius); }
.card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 92px;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.card > summary::-webkit-details-marker { display: none; }
.card .name { font-family: var(--display); font-weight: 600; font-size: 0.9688rem; line-height: 1.25; }
.card .meta { font-family: var(--mono); font-size: 0.6562rem; color: var(--ink-3); margin-top: 3px; }
.track { position: relative; height: 10px; border-radius: 999px; background: var(--glass-edge); box-shadow: inset 0 2px 5px rgba(10,16,45,.30); overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transform-origin: left center; transition: width var(--settle); box-shadow: inset 0 3px 6px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.2); }
.track u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink-3); opacity: .55; text-decoration: none; }
.pctwrap { text-align: right; }
.pct { font-family: var(--display); font-weight: 700; font-size: 1.5625rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.tier { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 700px) {
  .card > summary { grid-template-columns: minmax(0, 1fr) 84px; }
  .card .track { display: none; }
}
.t-likely { color: var(--likely); } .f-likely { background: var(--likely-fill); }
.t-target { color: var(--target); } .f-target { background: var(--target-fill); }
.t-reach { color: var(--reach); } .f-reach { background: var(--reach-fill); }
.t-longshot { color: var(--longshot); } .f-longshot { background: var(--longshot-fill); }

.detail { padding: 2px 18px 20px; }
.detail h4 {
  font-family: var(--ui); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin: 22px 0 9px; font-weight: 700;
  padding-bottom: 6px; border-bottom: 1px solid var(--glass-line);
}
.detail h4::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--accent); vertical-align: middle; margin-right: 8px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--glass-edge); color: var(--ink-2); }
.flag.warn { color: var(--reach); box-shadow: inset 0 0 0 1px currentColor; background: none; }
.flag.good { color: var(--likely); box-shadow: inset 0 0 0 1px currentColor; background: none; }
.policyline { font-size: 0.8125rem; color: var(--ink-2); margin: 0 0 10px; }
.policyline b { color: var(--ink); }
.policyline .flag { margin-left: 6px; vertical-align: 1px; }
.policy { margin: 0 0 10px; font-size: 0.78125rem; }
.policy dt { font-weight: 600; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--glass-edge); }
.policy dt:first-child { border-top: 0; padding-top: 0; }
.policy dd { margin: 3px 0 8px; color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
@media (min-width: 621px) {
  .policy { display: grid; grid-template-columns: 190px 1fr; column-gap: 12px; align-items: start; }
  .policy dt { grid-column: 1; }
  .policy dd { grid-column: 2; margin: 0 0 8px; padding-top: 8px; border-top: 1px solid var(--glass-edge); }
  .policy dt:first-child + dd { border-top: 0; padding-top: 0; }
}
.policyline small { display: block; font-size: 0.7188rem; color: var(--ink-3); margin-top: 4px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.7812rem; }
.ledger td { padding: 8px 0; vertical-align: top; border-top: 1px solid var(--glass-edge); }
.ledger tr:first-child td { border-top: 0; }
.ledger td.g { width: 190px; padding-right: 12px; font-weight: 600; color: var(--ink); }
.ledger td.d { width: 62px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ledger td.n { color: var(--ink-2); padding-left: 14px; font-size: 0.75rem; }
.gauge { display: block; height: 6px; margin-top: 5px; border-radius: 999px; background: var(--glass-edge); position: relative; }
.gauge i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.pos { color: var(--likely); } .neg { color: var(--reach); }
.gauge i.pos { background: var(--likely-fill); } .gauge i.neg { background: var(--reach-fill); }
.levers { margin: 0; padding-left: 18px; font-size: 0.7812rem; color: var(--ink-2); }
.levers b { font-family: var(--mono); color: var(--likely); }
@media (max-width: 620px) { .ledger td.n { display: none; } .ledger td.g { width: auto; } }

/* ------------------------------------------------------------- explore */
.tools { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 18px 4px; }
.tools input[type="search"] { flex: 1 1 220px; }
.tools select { flex: 0 1 auto; width: auto; min-width: 140px; }
.results { list-style: none; margin: 0; padding: 8px; max-height: 620px; overflow-y: auto; }
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 74px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background var(--swift);
}
.result:hover { background: var(--glass-edge); }
.result .name { font-size: 0.8438rem; font-weight: 600; }
.result .meta { font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); margin-top: 2px; }
/* Shared by the search results and the program rankings. */
.odds { text-align: right; font-family: var(--mono); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.odds small { display: block; font-size: 0.5312rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.empty { padding: 26px 16px; color: var(--ink-3); font-size: 0.8125rem; text-align: center; }

/* -------------------------------------------------------------- method */
.method { padding: 24px; }
.method h2 { font-size: 1.375rem; margin-bottom: 14px; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 26px; }
.method h3 { font-family: var(--ui); font-size: 0.875rem; font-weight: 700; margin-bottom: 4px; }
.method p { margin: 0 0 14px; font-size: 0.8125rem; color: var(--ink-2); max-width: 60ch; }
/* Inline code reads the same wherever it appears. */
/* An explicit colour: inline code sits on a tint, and inheriting the muted
   --ink-3 from a hint drops it to 4.2:1. */
.method code,
.legaldoc code,
.hint code { font-family: var(--mono); font-size: 0.7188rem; padding: 1px 5px; border-radius: 6px; background: var(--glass-edge); color: var(--ink-2); }
.caution { border-left: 3px solid var(--reach); padding-left: 12px; }


/* ------------------------------------------------------------- sidebar */
/* The handle. It is the visible edge of the drawer — the drawer is one object
   that lives mostly off-screen, and this is the part that sticks out. It rides
   on the drawer's left edge, so when the drawer slides in the handle travels
   with it; nothing needs to be kept in sync because nothing is separate.
   Its right side meets the screen edge square, because that side is a cut, not
   an edge: the rest of the object continues past it. */
.menubtn {
  position: absolute;
  left: calc(var(--handle) * -1);
  top: 88px;
  width: var(--handle);
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--ink);
  background: var(--surface-solid);
  box-shadow: -6px 0 18px -10px rgba(22, 23, 26, .45);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--swift), color var(--swift);
}
.menubtn:hover { background: var(--clay-2); }
.menubtn:active { background: var(--glass-edge); }
.menubtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--radius) 0 0 var(--radius); }
.bars { display: grid; gap: 4px; width: 16px; }
.bars i { height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--glide), opacity var(--swift); }
.menubtn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menubtn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menubtn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 9, 22, .5);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.32, .72, 0, 1);
}
.scrim.open { opacity: 1; }

.sidebar {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 82vw);
  --handle: 46px;
  /* Parked one full width to the right: everything but the handle is past the
     edge of the screen. Opening slides the whole object, handle included. */
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 380ms cubic-bezier(.32, .72, 0, 1);
}
.sidebar.open { transform: translateX(0); transition: transform 420ms cubic-bezier(.22, 1, .3, 1); }

.drawer-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface-solid);
  border-left: 1px solid var(--glass-line);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar.open .drawer-body { pointer-events: auto; }

.sidebar-head { display: flex; align-items: center; gap: 12px; }
.sidebar-head b { display: block; font-family: var(--display); font-size: 0.9375rem; font-weight: 600; }
.sidebar-head small { display: block; font-family: var(--mono); font-size: 0.625rem; color: var(--ink-3); margin-top: 2px; }
.navlist { display: grid; gap: 7px; }
.navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  font-family: var(--ui);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: transform var(--swift), background var(--swift), color var(--swift), box-shadow var(--swift);
}
.navitem:hover { background: var(--ground-2); color: var(--ink); }
.navitem .navicon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--glass-edge); }
.navitem svg { width: 19px; height: 19px; }
.navtext b { display: block; font-size: 0.875rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.navtext small { display: block; font-size: 0.7188rem; color: var(--ink-3); margin-top: 2px; }
.navitem[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 0 12px 12px 0;
}
.navitem[aria-current="page"] .navtext b { color: var(--accent); }
/* --ink-3 on the accent wash lands at 4.42:1 — a shade under AA — so the
   current item's subtitle steps up to --ink-2. */
.navitem[aria-current="page"] .navtext small { color: var(--ink-2); }
.navitem[aria-current="page"] .navicon { background: var(--accent); color: var(--accent-ink); }
.sidebar-foot { margin: auto 0 0; font-size: 0.7188rem; color: var(--ink-3); line-height: 1.5; }

/* ---------------------------------------------------------- legal pane */
.docnav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.docnav .chip { text-decoration: none; }
.legaldoc { padding-top: 18px; border-top: 1px solid var(--glass-line); margin-top: 26px; scroll-margin-top: 90px; }
.legaldoc:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.legaldoc h3 { font-family: var(--display); font-size: 1.3125rem; margin-bottom: 4px; }
.legaldoc h4 { font-family: var(--ui); font-size: 0.8438rem; font-weight: 700; color: var(--ink); margin: 18px 0 5px; }
.legaldoc .updated { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.legaldoc p, .legaldoc li { font-size: 0.8125rem; color: var(--ink-2); max-width: 68ch; }
.legaldoc p { margin: 0 0 11px; }
.legaldoc ul { margin: 0 0 11px; padding-left: 20px; }
.legaldoc li { margin: 3px 0; }
.legaldoc b { color: var(--ink); }

/* ---------------------------------------------------------- walkthrough
 *
 * The one modal in the app. It is clay rather than glass: you are pushing
 * through it, not looking past it, and a frosted panel over a frosted page
 * reads as mush. It rises 10px and settles — no bounce, nothing spinning.
 */

.wt-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 9, 22, .46);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.32, .72, 0, 1);
}
.wt-scrim.open { opacity: 1; }

.wt {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
}
.wt-card {
  pointer-events: auto;
  width: min(460px, 100%);
  /* A floor under the card so the four steps do not jump the dialog around
     as their contents change height; the footer stays pinned to the bottom. */
  min-height: 342px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--glass-line);
  box-shadow: 0 2px 6px rgba(22, 23, 26, .08), 0 40px 70px -32px rgba(22, 23, 26, .5);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(.22, 1, .3, 1);
}
.wt.open .wt-card { opacity: 1; transform: none; }

.wt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wt-count {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.wt-rail { height: 3px; margin: 10px 0 16px; border-radius: 2px; background: var(--clay-2); overflow: hidden; }
.wt-rail i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 320ms cubic-bezier(.22, 1, .3, 1); }

.wt-card h2 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.wt-lede { margin: 8px 0 0; font-size: 0.8438rem; line-height: 1.5; color: var(--ink-2); }
.wt-fields:not(:empty) { margin-top: 14px; }
.wt-err { margin: 12px 0 0; font-size: 0.7812rem; color: var(--reach); }
.wt-note { margin: 14px 0 0; font-size: 0.7188rem; line-height: 1.5; color: var(--ink-3); }
.wt-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 18px; }

@media (max-width: 420px) {
  .wt-foot .btn { flex: 1; }
}

/* ------------------------------------------------------------- programs
 *
 * A ranked list whose rows carry four numbers each. The rank and the headline
 * figure are the only things sized to be read at a glance; the supporting
 * facts sit underneath at reading size, because the whole point of the pane is
 * that no single number decides anything.
 */

/* The record rail supplies its own padding; this pane is edge to edge, so its
   heading needs the gutter put back. */
#pane-programs > .rail-head { padding: 18px 18px 0; }
/* Below this width the pane reaches the edge of the screen, where the drawer
   handle is, so the heading row keeps clear of it. */
@media (max-width: 1000px) {
  #pane-programs > .rail-head { padding-right: 62px; }
}

.fieldcard {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 18px 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--clay-2);
}
.fc-main { flex: 1 1 260px; min-width: 0; }
.fc-main b { display: block; font-size: 0.9375rem; }
.fc-main span { display: block; margin-top: 3px; font-size: 0.7188rem; line-height: 1.5; color: var(--ink-2); }
.fc-main i { font-style: normal; color: var(--ink); }
.fc-num { text-align: right; }
.fc-num b { display: block; font-family: var(--mono); font-size: 1.125rem; font-weight: 600; }
.fc-num span { font-size: 0.6875rem; color: var(--ink-3); }

.proglist { list-style: none; margin: 8px 0 0; padding: 0 12px 12px; }
.progrow {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-top: 1px solid var(--glass-edge);
}
.progrow:first-child { border-top: 0; }
.progrow .rank {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  color: var(--ink-3); text-align: right;
}
.pr-main { min-width: 0; }
.pr-main .name { font-weight: 600; font-size: 0.8438rem; }
.pr-main .meta { font-size: 0.6875rem; color: var(--ink-3); margin-top: 1px; }
.pr-bits { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.pr-bits span { font-size: 0.6875rem; line-height: 1.45; color: var(--ink-2); }
.pr-bits span + span::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
.pr-lead { text-align: right; min-width: 7rem; padding-left: 8px; }
.pr-lead b { display: block; font-family: var(--mono); font-size: 1rem; font-weight: 600; }
.pr-lead small { font-size: 0.625rem; color: var(--ink-3); }
.pr-odds { display: flex; align-items: center; gap: 12px; padding-left: 14px; border-left: 1px solid var(--glass-edge); }

@media (max-width: 720px) {
  .progrow { grid-template-columns: 1.5rem 1fr auto; row-gap: 8px; }
  .pr-odds { grid-column: 2 / -1; justify-content: flex-end; }
  .pr-lead { min-width: 0; }
}

/* ------------------------------------------------------------ best fits
 *
 * Grouped by how likely you are to get in, because that is the decision the
 * list is for. Each row leads with the odds, because that is what sorts it,
 * and carries its reasons as plain sentences rather than a score — the whole
 * claim of the pane is that you can check its work.
 */

.fitband { margin: 14px 18px 0; }
.fitband h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: .01em;
}
.fitband h3 small { font-weight: 500; color: var(--ink-3); font-size: 0.6875rem; letter-spacing: 0; }
.fitband h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fitband ul { list-style: none; margin: 0; padding: 0; }

.fitrow {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--glass-edge);
}
.fitrow:first-child { border-top: 0; }
.fr-odds { text-align: center; padding-top: 2px; }
.fr-odds b {
  display: block; font-family: var(--mono); font-size: 1.0625rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.fr-odds small {
  display: block; font-size: 0.5625rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600;
}
.fr-main { min-width: 0; }
.fr-main .name { font-weight: 600; font-size: 0.875rem; }
.fr-main .meta { font-size: 0.6875rem; color: var(--ink-3); margin-top: 1px; }
.fr-why, .fr-caution { list-style: none; margin: 6px 0 0; padding: 0; }
.fr-why li, .fr-caution li {
  position: relative; padding-left: 14px; margin-top: 2px;
  font-size: 0.7188rem; line-height: 1.5; color: var(--ink-2);
}
.fr-why li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3);
}
.fr-caution li { color: var(--reach); }
.fr-caution li::before { content: "!"; position: absolute; left: 2px; font-weight: 700; }

.fitrecipe {
  margin: 12px 18px 0; padding: 16px 18px;
  border-radius: var(--radius); background: var(--clay-2);
}
.fitrecipe h4 { margin: 0 0 8px; font-size: 0.8125rem; }
.fitrecipe ol { margin: 0; padding-left: 18px; }
.fitrecipe li { font-size: 0.7188rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.fitrecipe li b { color: var(--ink); }
.fitrecipe .caution { margin: 8px 0 0; font-size: 0.6875rem; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 560px) {
  .fitrow { grid-template-columns: 3.5rem 1fr; row-gap: 8px; }
  .fitrow > .btn { grid-column: 2; justify-self: start; }
}

#pane-fits > .rail-head { padding: 18px 18px 0; }
@media (max-width: 1000px) {
  #pane-fits > .rail-head { padding-right: 62px; }
}

/* An action rather than a destination: it never carries the current-page mark,
   so it is set apart from the five items above it. */
.navaction { margin-top: 6px; border-top: 1px solid var(--glass-edge); padding-top: 14px; border-radius: 0 0 var(--radius) var(--radius); }

.field > label .optional { font-weight: 500; color: var(--ink-3); }

.linky {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-2);
  border-bottom: 1px solid var(--glass-line);
}
.linky:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .wt-card { transition: none; }
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .core-3d { transform: none; }
  .aurora b { animation: none; }
}

/* ------------------------------------------------- pointer-driven depth */
.stage { min-width: 0; }
.core-sway { position: absolute; inset: 0; transform-style: preserve-3d; animation: sway 16s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotateY(-7deg) rotateX(3deg); } to { transform: rotateY(7deg) rotateX(-2deg); } }

@media (hover: hover) and (pointer: fine) {
  /* Cards lean toward the cursor. Hover-only, one card at a time, transform
     and opacity only — the list itself never animates on keystroke. */
  .card {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform var(--swift), box-shadow var(--glide);
  }
  .card:hover { box-shadow: 0 34px 70px -28px rgba(21, 32, 82, .55), 0 2px 8px -2px rgba(21, 32, 82, .14); }
}
.card[open] .detail { animation: detail-in 320ms cubic-bezier(.32, .72, 0, 1) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(-6px); } }

/* Cards animate in only when the LIST changes, never on a keystroke. */
.card.enter { animation: card-in var(--settle) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  .core-sway { animation: none; }
  .card { transform: none !important; }
}

/* --------------------------------------------------------------- legal */
.legal { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--glass-line); }
.legal h3 { font-family: var(--ui); font-size: 0.875rem; font-weight: 700; margin: 18px 0 5px; scroll-margin-top: 96px; }
.legal h3:first-child { margin-top: 0; }
.legal p { margin: 0 0 12px; font-size: 0.8125rem; color: var(--ink-2); max-width: 66ch; }
.legal b { color: var(--ink); }

.siteft {
  width: min(100% - 32px, var(--maxw));
  margin: 0 auto;
  padding: 0 0 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.siteft a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--glass-line); }
.siteft a:hover { color: var(--accent); }


/* ====================================================================
   SIZE LADDER
   Below 1000px the record panel is a drawer section like any other.
   Above it, the record stays up beside the results. Past 1500px the
   search panel comes out of the drawer too and sits in its own column,
   so a wide monitor shows the whole tool at once with no navigation.
   Past 1900px everything simply gets a little roomier rather than wider.
   ==================================================================== */

@media (max-width: 999px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: 60px; }
  #pane-record { position: static; }
}

@media (min-width: 1000px) {
  :root { --maxw: 1180px; --rail: 330px; }
  #pane-record { display: block !important; }
}

@media (min-width: 1280px) {
  :root { --maxw: 1320px; --rail: 350px; }
}

/* Three columns: record, results, search. */
@media (min-width: 1500px) {
  :root { --maxw: min(96vw, 1560px); --rail: 360px; }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px);
    gap: 22px;
    align-items: start;
  }
  /* The results column keeps a readable measure; the search column takes
     the rest and scrolls on its own. */
  #pane-explore {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 116px);
    display: flex;
    flex-direction: column;
  }
  #pane-explore .results { flex: 1; max-height: none; }
  /* Method and Terms are reading views: they take the whole stage. */
  #pane-method, #pane-legal { grid-column: 1 / -1; }
  .hero { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (min-width: 1900px) {
  :root { --maxw: min(94vw, 1800px); --rail: 380px; }
  .shell { gap: 26px; }
  .card > summary { padding: 17px 22px; }
  .detail { padding: 2px 22px 22px; }
  #pane-record { padding: 24px; }
  .hero { padding: 26px; }
  .tiles { gap: 14px; }
}

/* Ultrawide: stop growing, stay centred, let the margins be margins. */
@media (min-width: 2400px) {
  :root { --maxw: 1900px; }
}

/* A last guard for very short windows — the sticky panels must never
   become taller than the screen they are stuck to. */
@media (max-height: 760px) and (min-width: 1000px) {
  #pane-record { position: static; }
}

/* ---------------------------------------------------- paid tier ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The locked state is a statement, not a tease: no blur, no fake numbers
   behind a scrim. It says what the figures are and that they are not here. */
.locked {
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 8px;
}
.locked p { margin: 0 0 8px; font-size: 0.8125rem; color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
.locked p:last-child { margin-bottom: 0; }
.locked b { color: var(--ink); }
.lockwhy { font-size: 0.75rem !important; color: var(--ink-3) !important; }

.notice {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 12px);
  z-index: 60; max-width: min(92vw, 60ch); margin: 0;
  padding: 11px 16px; border-radius: 10px;
  background: var(--ink); color: var(--ground);
  font-size: 0.8125rem; line-height: 1.5;
  box-shadow: 0 8px 28px rgb(0 0 0 / .22);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.notice.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }

.plusgrid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 16px 0 24px; }
@media (min-width: 760px) { .plusgrid { grid-template-columns: 1fr 1fr; } }
.pluscol {
  border: 1px solid var(--glass-edge); border-radius: 12px; padding: 18px;
  background: var(--glass);
}
.pluscol.paid { border-color: var(--accent); background: var(--accent-wash); }
.pluscol h3 { margin: 0 0 12px; font-size: 0.9375rem; }
.ticks { list-style: none; margin: 0 0 12px; padding: 0; }
.ticks li {
  position: relative; padding: 0 0 8px 22px;
  font-size: 0.8125rem; color: var(--ink-2); line-height: 1.55; max-width: 52ch;
}
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 9px; height: 5px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ticks b { color: var(--ink); }
.plusnote { font-size: 0.75rem; color: var(--ink-3); max-width: 56ch; line-height: 1.55; }

.keyrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.keyrow input {
  flex: 1 1 22ch; min-width: 0; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .04em;
}