/* The design system: every colour, radius and shadow on the site comes from these tokens.
   Radii: --r-s 8px (chips, inputs, small buttons), --r 14px (cards, panels), --r-l 20px
   (hero and sheets), --r-pill. Shadows: --shadow-1 (a resting card), --shadow-2 (something
   floating: popovers, sheets, a hovered card). Type: 12/13/14/15/17/20/24/32/48px, weights
   400/600/700; Anek (650) for English display text, system-ui for reading text.
   Component structure lives in app.css; this file loads after it and wins. */
:root {
  --page: #F7F8F5; --surface: #FFFFFF; --raised: #EEF2ED;
  --ink: #24332E; --ink-2: #52645C; --ink-3: #596B62;
  --rule: #DFE6DF; --rule-2: #BFCEC3;
  --brand: #17665f; --brand-2: #12524c; --brand-fill: #17665f; --brand-fill-2: #12524c; --action-bg: #17665f; --action-hover: #12524c; --action-ink: #ffffff;
  --brand-tint: #E7F0EC; --on-brand: #fff;
  --hero-bg: #F2F6F0; --hero-accent: #17665f;
  --shadow-1: 0 1px 3px rgb(23 43 77 / .04);
  --shadow-2: 0 2px 6px rgb(23 43 77 / .04), 0 16px 32px -16px rgb(23 43 77 / .22);
  --focus: 0 0 0 4px rgb(7 89 133 / .16);
  --r-s: 8px; --r: 14px; --r-l: 20px; --r-pill: 999px;
  --display: "Anek", var(--sans);
  --top-h: 66px;
}
@media (min-width: 820px) { :root { --top-h: 78px; } }
:root[data-theme="dark"] {
  --page: #121817; --surface: #1B2422; --raised: #26312D;
  --ink: #E8EFEB; --ink-2: #BCCAC2; --ink-3: #9CACa2;
  --rule: #34433C; --rule-2: #53675B;
  --brand: #8ccfc2; --brand-2: #b0e0d6; --brand-fill: #8ccfc2; --brand-fill-2: #b0e0d6; --action-bg: #8ccfc2; --action-hover: #b0e0d6; --action-ink: #102b27;
  --brand-tint: #233A33; --on-brand: #102b27; --hero-bg: #151E1A; --hero-accent: #8ccfc2;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .2); --shadow-2: 0 16px 32px -16px rgb(0 0 0 / .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121817; --surface: #1B2422; --raised: #26312D;
    --ink: #E8EFEB; --ink-2: #BCCAC2; --ink-3: #9CACa2;
    --rule: #34433C; --rule-2: #53675B;
    --brand: #8ccfc2; --brand-2: #b0e0d6; --brand-fill: #8ccfc2; --brand-fill-2: #b0e0d6; --action-bg: #8ccfc2; --action-hover: #b0e0d6; --action-ink: #102b27;
    --brand-tint: #233A33; --on-brand: #102b27; --hero-bg: #151E1A; --hero-accent: #8ccfc2;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .2); --shadow-2: 0 16px 32px -16px rgb(0 0 0 / .45);
  }
}
body { font-size: .9375rem; }
:lang(hi) { --sans: "AnekHi", "Anek", system-ui, sans-serif; --display: var(--sans); }
:lang(en) { --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", sans-serif; --display: "Anek", var(--sans); }
.wrap { max-width: 1240px; padding-inline: 36px; }
.top-in { min-height: 78px; gap: 24px; }
.brand { gap: 9px; }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
.logo { width: 35px; height: 35px; }
.logo-ring { fill: var(--brand-fill); stroke: var(--brand); }
.logo-ring2 { stroke: var(--on-brand); opacity: .55; }
.logo-core, .logo-sweep { fill: var(--on-brand); }
.nav { margin-left: auto; gap: 5px; }
.nav a { font-size: .8125rem; padding: 10px 14px; border-radius: var(--r-s); font-weight: 600; }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-tint); }
.lang-switch, .js .theme-btn { min-height: 38px; border-radius: var(--r-s); }
.js .theme-btn { width: 38px; }
button, .btn, .category-links a, .trows a, .opt span { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.btn { gap: 9px; border-radius: var(--r-s); font-size: .875rem; text-decoration: none; }
.btn-primary { box-shadow: var(--shadow-1); }
.btn-primary:hover { color: var(--on-brand); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.eyebrow { display: flex; gap: 8px; align-items: center; font-size: .75rem; line-height: 1.5; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.home { padding-top: 30px; padding-bottom: 48px; }
.section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-label h2 { font-size: .8125rem; font-weight: 600; }
.section-label > span { font-size: .75rem; color: var(--ink-3); }
.category-links { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.category-links a { display: flex; gap: 9px; align-items: center; padding: 16px 12px; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--surface); text-decoration: none; color: var(--ink); font-size: .75rem; font-weight: 600; box-shadow: var(--shadow-1); }
.category-links a > .ico:first-child { width: 22px; height: 22px; color: var(--brand); }
.category-links a > .ico:last-child { width: 13px; height: 13px; margin-left: auto; color: var(--ink-3); }
.category-links a:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-2); }
.tabs-row { top: 78px; padding: 7px 9px; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.ftabs { gap: 4px; }
.ftabs { position: relative; }
.ftabs a { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; font-size: .9375rem; font-weight: 600; border-radius: var(--r-s); transition: color .25s; }
.ftabs a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
.ftabs a[aria-current="page"]::after { display: none; }
.ftabs a:hover { background: var(--raised); }
.filters-panel { width: min(22rem, calc(100vw - 64px)); }
.filters summary { border-color: var(--rule); min-height: 40px; border-radius: var(--r-s); font-size: .875rem; }
.home-grid { grid-template-columns: minmax(0,1fr) 310px; gap: 28px; align-items: start; }
.home-main, .home-rail { display: grid; align-content: start; min-width: 0; }
.home-main > *, .home-rail > * { margin-top: 22px; }
.fy-setup { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--brand-tint); }
.fy-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--surface); color: var(--brand); }
.fy-setup .h-sec { font-size: .8125rem; font-weight: 600; }
.fy-setup p { font-size: .75rem; line-height: 1.6; }
.fy-setup .btn { font-size: .75rem; padding: 0 13px; min-height: 38px; }
.sec-head { margin: 7px 0 13px; }
.sec-head .h-sec { font-size: .9375rem; font-weight: 600; letter-spacing: -.025em; }
.feed-empty.list-box { padding: 36px 25px; gap: 13px; justify-items: center; text-align: center; border-style: dashed; background: var(--surface); }
.feed-empty h3 { color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.025em; }
.feed-empty p { max-width: 400px; font-size: .8125rem; line-height: 1.8; }
.feed-empty .btn { margin-top: 3px; font-size: .75rem; min-height: 40px; }
.feed-foot { font-size: .75rem; text-align: center; margin-top: 15px; }
.feed-foot a { color: var(--ink-3); }
.essentials-card { order: 7; padding: 22px 19px 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.essentials-card h2 { font-size: .9375rem; margin: 8px 0 12px; letter-spacing: -.025em; }
.essentials-card > a { display: grid; grid-template-columns: 35px 1fr 12px; gap: 10px; align-items: center; padding: 14px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule); }
.essential-icon { display: grid; place-items: center; width: 35px; height: 35px; background: var(--raised); border-radius: var(--r-s); color: var(--brand); }
.essentials-card a b { font-size: .75rem; font-weight: 600; display: block; }
.essentials-card a small { font-size: .75rem; color: var(--ink-3); display: block; margin-top: 3px; }
.essentials-card a > .ico { color: var(--ink-3); width: 12px; }
.essentials-card a:hover b { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.trust-card { order: 8; padding: 22px; background: var(--brand-tint); border: 1px solid var(--rule); border-radius: var(--r); }
.trust-icon { color: var(--brand); display: block; margin-bottom: 12px; }
.trust-icon .ico { width: 25px; height: 25px; }
.trust-card h2 { font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; }
.trust-card p { margin-top: 9px; font-size: .75rem; color: var(--ink-2); line-height: 1.8; }
.trust-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 40px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.jr { padding-block: 22px; }
.jr:hover, .dr:hover { background: var(--brand-tint); }
.jr-title { line-height: 1.45; }
.jr-tile, .dr-tile { border-radius: var(--r-s); }
.page-head, .band { background: var(--hero-bg); border-bottom: 1px solid var(--rule); }
.page-head { padding-block: 38px; }
.h-page, .h-band { font-size: clamp(1.75rem,3vw,2.4rem); letter-spacing: -.045em; font-weight: 600; }
.lede { color: var(--ink-2); line-height: 1.8; max-width: 680px; font-size: .9375rem; margin-top: 12px; }
.panel, .list-box, .fsheet { box-shadow: var(--shadow-1); }
.panel { padding: 24px; border-radius: var(--r); }
.tools-page .trows { margin-top: 13px; }
.trows a { padding: 23px; }
.trows a:hover { background: var(--brand-tint); }
.tr-ico { background: var(--brand-tint); color: var(--brand); border-radius: var(--r); }
.week { top: 78px; }
.foot { background: var(--surface); padding-top: 35px; font-size: .75rem; }
.foot-in { grid-template-columns: 1fr auto; gap: 10px 40px; }
.foot-brand { grid-column: 1; font-size: .9375rem; }
.disclaimer, .foot-note { grid-column: 1; max-width: 660px; font-size: .75rem; line-height: 1.8; }
.foot-note { color: var(--ink-3); }
.foot-nav { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 13px 26px; font-size: .75rem; padding-top: 7px; }
.tabbar a[aria-current="page"] { color: var(--brand); }
@media (min-width: 820px) { .nav { display: flex; } .tabbar { display: none; } body { padding-bottom: 0; } .foot { margin-bottom: 0; padding-bottom: 40px; } }
@media (max-width: 1100px) {
  .wrap { padding-inline: 28px; }
  .home-grid { grid-template-columns: minmax(0,1fr) 290px; gap: 22px; }
  .fy-icon { display: none; }
  .fy-setup { grid-template-columns: minmax(0,1fr) auto; }
  .category-links { gap: 7px; }
  .category-links a { padding: 14px 10px; gap: 6px; }
  .category-links a > .ico:last-child { display: none; }
  .top-in { gap: 14px; }
  .nav a { padding-inline: 10px; }
}
@media (max-width: 819px) {
  .wrap { padding-inline: 22px; }
  .top-in { min-height: 66px; }
  .top-act { margin-left: auto; }
  .category-links { grid-template-columns: repeat(3,1fr); gap: 9px; }
  .category-links a { padding: 15px; }
  .home-grid { grid-template-columns: 1fr; gap: 0; }
  .home-rail { grid-template-columns: 1fr 1fr; gap: 16px; }
  .home-rail .rail-card { grid-column: 1 / -1; }
  .tabs-row, .week { top: 66px; }
  .fy-icon { display: grid; }
  .fy-setup { grid-template-columns: 40px 1fr auto; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-nav { grid-column: 1; grid-row: auto; display: flex; }
}
@media (max-width: 540px) {
  .wrap { padding-inline: 20px; }
  .brand-name { font-size: 1.0625rem; }
  .brand .logo { width: 31px; height: 31px; }
  .top-in { gap: 8px; }
  .top-act { gap: 6px; }
  .lang-switch { padding-inline: 9px; }
  .home { padding-top: 23px; }
  .section-label > span { display: none; }
  .category-links a { font-size: .75rem; padding: 14px 10px; gap: 7px; }
  .category-links a > .ico:first-child { width: 18px; height: 18px; }
  .ftabs a { padding-inline: 13px; min-height: 40px; font-size: .875rem; }
  .tabs-row { padding: 5px; gap: 4px; }
  .filters summary { min-height: 40px; min-width: 40px; }
  .home-main > *, .home-rail > * { margin-top: 18px; }
  .fy-icon { display: none; }
  .fy-setup { grid-template-columns: 1fr; gap: 13px; padding: 18px; }
  .fy-setup .btn { justify-self: start; }
  .fy-setup .h-sec { font-size: .9375rem; }
  .fy-setup p { font-size: .75rem; }
  .home-rail { grid-template-columns: 1fr; gap: 0; }
  .feed-empty.list-box { padding: 30px 20px; }
  .page-head { padding-block: 28px; }
  .lede { font-size: .875rem; }
  .trows a { padding: 18px; }
  .foot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .page-head { background: white; color: black; }
  .theme-btn, .category-section, .home-rail, .page-aside, .verify-cta, .newsince, .feed-ins { display: none !important; }
  .home-grid, .page-grid { display: block; }
  .jr.card.rv { opacity: 1; transform: none; }
  .tabs-row { position: static; }
}

/* ---- Job cards (R3, G17): every job, admit card or result is its own card. A lead column
   holds the countdown ring (or the board's monogram when there is no last date); beside it
   board · state and the deadline line; then the title (2 lines) and one line of facts.
   ≤150px on a phone, ~120px on a laptop. "Compact list" (.dens-compact, app.js) turns
   them into 44px rows. */
.feed .list-box { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.feed .list-box .day-h + .list { background: none; }
.feed .day-h, .fy .day-h { padding: 16px 2px 8px; }
.feed .list-box > .day-h:first-child { padding-top: 0; }
.list + .day-h { border-top: 0; }
.feed .list, .fy .list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: stretch; background: none; border: 0; border-radius: 0; overflow: visible; }
.feed .list > li + li, .fy .list > li + li { border-top: 0; }
.feed .list > .more-same, .fy .list > .more-same { grid-column: 1 / -1; }
.list > li.jr.card.fold { display: none; }
.list > .more-same:has(input:checked) ~ li.jr.card.fold { display: grid; }

.jr.card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "lead eye bm" "lead due bm" "title title title" "facts facts facts";
  column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 4px 12px 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1);
  contain: layout paint;
  transition: border-color .18s, box-shadow .18s, transform .18s cubic-bezier(.3,.7,.2,1);
}
.jr.card:hover { background: var(--surface); border-color: var(--rule-2); box-shadow: var(--shadow-2); }
.jr.card:focus-within { border-color: var(--brand); }
.jr-lead { grid-area: lead; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; }
.jr.card .jr-av { width: 44px; height: 44px; margin: 0; border-radius: var(--r); background: var(--raised); color: var(--ink-2); font-size: .75rem; }
.jr-lead .ring { width: 44px; height: 44px; }
.jr-lead .ring > .ring-t { font-size: .875rem; }
.jr-lead .ring > .ring-t small { font-size: .6875rem; }
.jr.card .jr-eye { grid-area: eye; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 6px; min-width: 0; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.jr.card .jr-board { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.jr.card .jr-state::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
.jr.card .jr-new { color: var(--ink-3); }
.jr-pill-new { flex: none; align-self: center; padding: 1px 8px; border-radius: var(--r-pill); background: var(--brand-fill); color: var(--on-brand); font-size: .75rem; font-weight: 700; line-height: 1.4; }
.jr.card .jr-due, .jr.card .jr-kind { grid-area: due; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 8px; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.jr.card .jr-due b { color: var(--ink); font-weight: 600; }
.jr-dl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jr.card .jr-left { flex: none; padding: 0 8px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 700; line-height: 1.5; }
.jr.card .jr-due.closed .jr-left { padding: 0; }
.jr.card .jr-due.near .jr-left { background: var(--live-tint); }
.jr.card .jr-due.urgent .jr-left { background: var(--hot-tint); }
.jr.card .jr-due.open b, .jr.card .jr-due.open .jr-left { color: var(--ok); }
.jr.card .jr-due.near b, .jr.card .jr-due.near .jr-left { color: var(--live-ink); }
.jr.card .jr-due.urgent b, .jr.card .jr-due.urgent .jr-left { color: var(--hot); }
.jr.card .jr-due.walkin b { color: var(--brand); }
.jr.card .jr-due.closed, .jr.card .jr-due.closed b, .jr.card .jr-due.closed .jr-left { color: var(--ink-3); }
.jr.card .jr-due.none { color: var(--ink-3); }
.jr.card .jr-kind .k { font-weight: 600; }
.jr.card .jr-title { grid-area: title; margin: 8px 0 0; padding: 0 10px 0 0; font-size: 1rem; line-height: 1.35; max-width: none; letter-spacing: -.005em; }
.jr.card .jr-title:lang(hi), .jr.card .jr-title a:lang(hi) { line-height: 1.4; }
.jr.card .jr-title a { -webkit-line-clamp: 2; line-clamp: 2; }
/* one line of facts: chips that would wrap to a second line are clipped, not stacked */
.jr.card .jr-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 6px; max-height: 24px; overflow: hidden; margin: 8px 0 0; padding: 0 10px 0 0; font-size: .8125rem; }
.jr.card .jr-facts .sep { display: none; }
.jr.card .jr-facts > span { display: inline-block; height: 24px; line-height: 20px; padding: 2px 9px; margin: 0; border-radius: var(--r-pill); background: var(--raised); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.jr.card .jr-facts .tag { background: var(--brand-tint); color: var(--brand); }
.jr.card .jr-facts .soft { background: transparent; border: 1px solid var(--rule); line-height: 18px; }
.jr.card .jr-facts .fy-subj { background: var(--live-tint); color: var(--live-ink); }
.jr.card .bm { grid-area: bm; align-self: start; width: 44px; height: 44px; min-height: 44px; margin: -6px 0 0; }
.is-cat .jr-cat { display: none; }
@media (min-width: 760px) {
  /* laptop: the deadline line moves up beside the board, the title and facts sit indented */
  .jr.card { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "lead eye due bm" "lead title title bm" "lead facts facts bm"; column-gap: 14px; padding: 14px 6px 14px 16px; }
  .jr.card .jr-due, .jr.card .jr-kind { justify-content: flex-end; }
  .jr.card .jr-title { margin-top: 4px; font-size: 1.0625rem; }
  .jr-lead .ring > .ring-t { font-size: .9375rem; }
}

/* countdown ring: how much of the application window is left */
.ring { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .rt { stroke: var(--rule-2); }
.ring .ra { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1); }
.near .ring .ra, .ring.near .ra { stroke: var(--live-ink); }
.urgent .ring .ra { stroke: var(--hot); }
.ring > .ring-t { position: relative; display: grid; justify-items: center; gap: 1px; font: 700 .9375rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.ring > .ring-t small { font: 600 .75rem/1 var(--sans); color: var(--ink-2); }
.ring.r-today > .ring-t { font-size: .75rem; letter-spacing: -.02em; color: var(--hot); }
.ring.r-today::after { content: ""; position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 2px var(--surface); }
.rv .ring .ra { stroke-dashoffset: 88; }
.rv.in .ring .ra { stroke-dashoffset: var(--arc); }
/* cards appear once, in a short cascade (app.js adds .rv / .in) */
.jr.card.rv { opacity: 0; transform: translateY(14px); }
.jr.card.rv.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), border-color .18s, box-shadow .18s; transition-delay: var(--stagger, 0ms), var(--stagger, 0ms), 0ms, 0ms; }
.jr.card:hover { transform: translateY(-2px); }
.jr.card.rv.in:hover { transform: translateY(-2px); transition-delay: 0ms; transition-duration: .18s; }
@media (prefers-reduced-motion: reduce) { .jr.card, .jr.card.rv { opacity: 1; transform: none; transition: none; } .ring .ra { transition: none; } .jr.card:hover { transform: none; } }

/* Compact list (G17): 44px rows: ring · board · title · posts · bookmark. The deadline words
   stay for screen readers. */
.dens-compact .feed .list { gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.dens-compact .feed .list > li + li { border-top: 1px solid var(--rule); }
.dens-compact .feed .jr.card {
  grid-template-columns: 20px minmax(4rem, 10rem) minmax(0, 1fr) auto 44px; grid-template-areas: "lead eye title facts bm";
  min-height: 44px; padding: 0 0 0 12px; column-gap: 12px; align-items: center;
  border: 0; border-radius: 0; box-shadow: none;
}
.dens-compact .feed .jr.card:hover { transform: none; box-shadow: none; background: var(--brand-tint); }
.dens-compact .feed .jr-lead, .dens-compact .feed .jr-lead .ring, .dens-compact .feed .jr-lead .jr-av { width: 20px; height: 20px; align-self: center; }
.dens-compact .feed .jr-lead .ring circle { stroke-width: 5; }
.dens-compact .feed .jr-lead .ring-t, .dens-compact .feed .ring.r-today::after { display: none; }
.dens-compact .feed .jr-lead .jr-av { border-radius: 50%; font-size: 0; border: 3px solid var(--rule-2); background: none; }
.dens-compact .feed .jr-eye { font-size: .8125rem; }
.dens-compact .feed .jr-eye > :not(.jr-board) { display: none; }
.dens-compact .feed .jr-title { margin: 0; padding: 0; font-size: .9375rem; }
.dens-compact .feed .jr-title a { -webkit-line-clamp: 1; line-clamp: 1; }
.dens-compact .feed .jr-facts { margin: 0; padding: 0; max-height: none; }
.dens-compact .feed .jr-facts > :not(.f-posts) { display: none; }
.dens-compact .feed .jr-facts > .f-posts { background: none; padding: 0; color: var(--ink-2); font-weight: 400; }
.dens-compact .feed .jr-due, .dens-compact .feed .jr-kind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dens-compact .feed .bm { align-self: center; margin: 0; }
@media (max-width: 599px) {
  .dens-compact .feed .jr.card { grid-template-columns: 20px minmax(0, 1fr) auto 44px; grid-template-areas: "lead eye facts bm" "lead title facts bm"; padding: 4px 0 4px 12px; column-gap: 10px; }
  .dens-compact .feed .jr-eye { font-size: .75rem; line-height: 1.35; }
  .dens-compact .feed .jr-title { font-size: .875rem; line-height: 1.3; }
  .dens-compact .feed .jr-title:lang(hi), .dens-compact .feed .jr-title a:lang(hi) { line-height: 1.4; }
}

/* ---- Home hero, redesigned (16 Oct 2026): headline + search on the left, a live animated
   scene on the right (radar | station board | admit card; see scenes.js). */
.rx { padding-block: 52px 36px; overflow: hidden; }
.rx-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; }
.rx-copy { min-width: 0; }
.rx-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 13px 6px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: .9rem; font-weight: 600; }
.rx-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.rx-h { margin: 18px 0 16px; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.rx-h:lang(hi) { line-height: 1.22; letter-spacing: -.01em; }
.rx-h span { color: var(--ink-3); }
.rx-lede { margin: 0 0 24px; max-width: 36ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
.rx-search { display: flex; align-items: center; gap: 8px; max-width: 600px; padding: 6px 6px 6px 16px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 18px; box-shadow: 0 1px 2px rgb(16 38 31 / .05), 0 10px 28px -18px rgb(16 38 31 / .35); transition: border-color .2s, box-shadow .2s; }
.rx-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.rx-search > .ico { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.rx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 10px 0; }
.rx-search button { border: 0; background: var(--brand-fill, var(--brand)); color: var(--on-brand); font: inherit; font-weight: 650; padding: 12px 20px; border-radius: 13px; cursor: pointer; min-height: 44px; }
.rx-search button:hover { background: var(--brand-fill-2, var(--brand-2)); }
.rx-pop { margin-top: 18px; max-width: 600px; }
.rx-pop > span { display: block; margin: 0 0 8px; font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.rx-pop > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1180px) { .rx-pop > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rx-pop a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 550; transition: transform .15s, border-color .15s, color .15s; }
.rx-pop a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.rx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 16px; margin-top: 28px; }
.rx-stats p { margin: 0; }
.rx-stats b { display: block; font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-stats span { display: block; margin-top: 6px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 960px) {
  .rx { padding-block: 26px 22px; }
  .rx-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 640px) {
  .rx-lede { font-size: 1.02rem; }
  .rx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .rx-stats b { font-size: 1.55rem; }
  .rx-stats span { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) { .rx-pop a { transition: none !important; } }



/* ---- Closing soon: a tear-off calendar and a timeline of countdown rings */
.cl-tl .tear { margin: 6px 0 16px; }
.tear { position: relative; width: 116px; height: 124px; perspective: 600px; }
.tear-ring { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-around; padding: 0 26px; }
.tear-ring i { width: 8px; height: 16px; border-radius: var(--r-s); background: linear-gradient(#c9d3cf, #8a9893); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.tear-pg { position: absolute; left: 0; right: 0; top: 8px; bottom: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; overflow: hidden; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule-2); box-shadow: var(--shadow-2); transform-origin: 50% 0; }
.tear-pg small { width: 100%; padding: 9px 0 5px; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: #fff; background: var(--hot); }
.tear-pg b { align-self: center; font-size: 3rem; line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.tear-pg em { padding: 0 6px 8px; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ink-3); text-align: center; line-height: 1.2; }
.tear-under small { background: var(--brand-fill, var(--brand)); }
.tear-top { z-index: 2; }
.tear.go .tear-top { animation: tear-off 1.1s cubic-bezier(.5,0,.75,.2) forwards; }
@keyframes tear-off {
  0% { transform: rotate(0); }
  18% { transform: rotate(-4deg) translateY(2px); }
  100% { transform: rotateX(70deg) rotate(-16deg) translate(-26px, 140px); opacity: 0; }
}
.tear.done .tear-top { display: none; }
.ctl { list-style: none; margin: 0; padding: 0; position: relative; }
.ctl::before { content: ""; position: absolute; left: 24px; top: 10px; bottom: 10px; width: 2px; background: var(--rule); }
.ctl-i { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; }
.ctl-i .ring { background: var(--surface); border-radius: 50%; }
.ring-off { border: 3px solid var(--rule-2); border-radius: 50%; width: 50px; height: 50px; }
.ctl-m { display: grid; gap: 2px; min-width: 0; padding-block: 4px; }
.ctl-m a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.7em; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.ctl-m a:hover { color: var(--brand); }
.ctl-m small { font-size: .8125rem; color: var(--ink-3); }
.ctl-m small b { font-weight: 600; color: var(--ok); }
.ctl-i.near small b { color: var(--live-ink); }
.ctl-i.urgent small b { color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .tear.go .tear-top { animation: none; display: none; } }
.cal-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 16px; }
.cal-row .tear { margin: 0; flex: none; }
.cal-sum { margin: 0; display: grid; gap: 2px; color: var(--ink-2); font-size: .9375rem; line-height: 1.3; }
.cal-sum b { font-size: 2rem; line-height: 1; color: var(--ink); font-weight: 700; }
.tear.same .tear-under small { background: var(--hot); }

/* the current tab's highlight slides to the tab you pick (app.js), then the page changes */
.ftabs-pill { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: var(--r-s); background: var(--brand-tint); pointer-events: none; transition: transform .32s cubic-bezier(.3,.7,.2,1), width .32s cubic-bezier(.3,.7,.2,1); }
.ftabs.has-pill a[aria-current="page"] { background: transparent; }
.ftabs.has-pill a:hover { background: transparent; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .ftabs-pill { transition: none; } }

.brand { min-height: 44px; }

/* ---- Laptop fit (16 Oct 2026): the hero scales with the screen's height too, so a 1366×768 laptop
   sees the hero and the start of the feed; sections below use the same readable type scale. */
.rx { padding-block: clamp(20px, 4.5vh, 44px) clamp(14px, 3vh, 28px); }
.rx-in { gap: clamp(28px, 4vw, 56px); }
.rx-kicker { font-size: .875rem; }
.rx-h { margin: 14px 0 12px; font-size: clamp(2rem, min(3.4vw, 6.2vh), 3.25rem); }
.rx-lede { margin-bottom: 18px; font-size: 1.05rem; max-width: 40ch; }
.rx-pop { margin-top: 14px; }
.rx-stats { margin-top: 20px; }
.rx-stats b { font-size: 1.75rem; }
.section-label { margin-bottom: 12px; }
.section-label h2 { font-size: 1.0625rem; }
.section-label > span { font-size: .875rem; }
.category-links a { padding: 13px 14px; font-size: .9375rem; border-radius: var(--r); }
.fy-setup { padding: 16px 18px; border-radius: var(--r); }
.fy-setup .h-sec { font-size: 1.0625rem; }
.fy-setup p { font-size: .875rem; line-height: 1.5; }
.fy-setup .btn { font-size: .875rem; min-height: 42px; padding: 0 16px; }
.home-main > *, .home-rail > * { margin-top: 18px; }

/* ==== Round 1 review fixes: layout, accessibility and inner pages (workstream C) ==== */

h4 { margin: 0; }
/* the rail keeps its source order: tracked exams, tools, trust note, then the sticky Closing-soon card */
.home-rail > * { order: 0; }

/* type: Anek for English display text (headings, numbers), system-ui for reading text (F31) */
h1, h2, .h-page, .h-sec, .fband-h, .brand-name, .stats dd, .age-big, .tear-pg b, .cal-sum b { font-family: var(--display); }
.h-page, .fband-h, .h-setup { font-weight: 650; letter-spacing: -.02em; }
.h-sec, .section-label h2, .essentials-card h2, .trust-card h2 { font-weight: 650; letter-spacing: -.01em; }
/* Devanagari: no tracking (it splits conjuncts) and no forced capitals (F11) */
:lang(hi), :lang(hi) * { letter-spacing: 0 !important; }
:lang(hi) .eyebrow, :lang(hi) .day-h, :lang(hi) .tear-pg small, :lang(hi) .rx-live { text-transform: none; }
:lang(hi) .ctl-m a { line-height: 1.5; max-height: 3em; }
.sc-fields dt, .sc-note { color: #5b6d6a; } /* F12: the admit card's labels at 4.8:1 */

/* anchors and focus land clear of the sticky bars (F6, F15) */
html { scroll-padding-top: calc(var(--top-h) + 12px); }
html:has(.tabs-row), html:has(.week) { scroll-padding-top: calc(var(--top-h) + 84px); }
/* R7 (P11): #feed is the tabs row; it lands 6px under the header (the row's ::before paints the
   page over those 6px, so no sliver of the hero shows), and app.js keeps the phone header shown
   after the jump (QM N2: the header hid on landing and left an 83px band under the tabs) */
#feed.tabs-row { scroll-margin-top: -78px; }
#fy { scroll-margin-top: 8px; }
.dgroup { scroll-margin-top: 0; }
@media (max-width: 819px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html:has(body.p-exam) { scroll-padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
}

/* header: phones hide it while you scroll down and bring it back on the way up (F23) */
.top { transition: transform .2s ease; }
/* the header search on every page; on Home it waits until the page's own search scrolls away (F8) */
@media (min-width: 960px) {
  .top-search { display: flex; height: 40px; border-radius: var(--r-s); }
  body.p-latest:not(.srch-off) .top-search { visibility: hidden; }
}
@media (min-width: 960px) and (max-width: 1180px) {
  .top-search { flex-basis: 12rem; min-width: 9rem; }
  .nav a { padding-inline: 9px; }
}

/* focus you can see on every input (F45) */
.rx-search:focus-within, .search-field:focus-within, .top-search:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.dob input:focus, select:focus, textarea:focus, .pt input:focus, .report-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.dob input[aria-invalid="true"] { border-color: var(--hot); }

/* tap targets (F24) */
.lang-switch, .js .theme-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* M22: footer links are 40px-tall targets */
.foot-nav a, .foot-cols a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 8px; }
.sec-link, .feed-foot a, .see-all { display: inline-block; padding-block: 10px; }
.sec-head { align-items: center; }
.top-act { flex-wrap: wrap; justify-content: flex-end; }

/* bottom tab bar: one fixed height in both languages; labels never wrap (F22, F26) */
.tabbar { height: calc(64px + env(safe-area-inset-bottom)); align-items: start; }
.tabbar a { font-size: .75rem; min-height: 56px; padding-block: 6px 2px; }
.tabbar a .ico { box-sizing: border-box; height: 28px; padding-block: 3px; }
.tabbar a span { display: block; max-width: 100%; height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body { padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom)); }
@media (min-width: 820px) { body { padding-bottom: 0; } }
/* the keyboard covers the bottom bar anyway: hide it while typing (F55) */
@media (max-width: 819px) {
  body:has(:is(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), textarea, select):focus) .tabbar { display: none; }
}

/* verify call-to-action under the hero (F18) */
.verify-cta { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 0 18px; padding: 10px 16px 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.35; box-shadow: var(--shadow-1); transition: border-color .18s, color .18s; }
.verify-cta:hover { border-color: var(--brand); color: var(--brand); }
.vc-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-s); background: var(--brand-tint); color: var(--brand); }
.vc-ico .ico { width: 20px; height: 20px; }
.vc-t { min-width: 0; }
.verify-cta > .ico:last-child { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--brand); }
.home { padding-top: 20px; }

/* "new since your last visit" (O7) */
.newsince { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 6px 6px 14px; border-radius: var(--r); background: var(--live-tint); color: var(--ink); font-weight: 600; font-size: .9375rem; }
.newsince[hidden] { display: none; }
.newsince > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.newsince > span { min-width: 0; }
.newsince > a { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-weight: 700; }
.ns-x { flex: none; width: 40px; min-height: 40px; padding: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-s); }
.ns-x:hover { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--ink); }
.ns-x .ico { width: 16px; height: 16px; }

/* filtered and search pages: a compact band with removable chips instead of the hero (F21) */
.fband { background: var(--hero-bg); border-bottom: 1px solid var(--rule); }
.fband-in { display: grid; gap: 12px; padding-block: 18px 16px; }
.fband-h { font-size: 1.5rem; line-height: 1.25; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.fband-h:lang(hi) { line-height: 1.45; }
.fband-n { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.fband-search .search-field { min-height: 48px; max-width: 40rem; box-shadow: none; }
.fband-search .search-field input { height: 44px; font-size: 1.0625rem; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .875rem; max-width: 100%; overflow-wrap: anywhere; }
.fchip .x-ico { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.fchip:hover { border-color: var(--brand); color: var(--brand); }
.fchip-clear { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; font-weight: 600; font-size: .875rem; }
@media (min-width: 960px) {
  .fband-in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; column-gap: 40px; padding-block: 28px 22px; }
  .fband-h { font-size: 2rem; grid-row: 1; }
  .fband-search { grid-column: 2; grid-row: 1; }
  .fchips { grid-column: 1 / -1; }
}

/* field tiles: one line at every width; 6, 3 or 2 across (F25, F35) */
.category-section { margin-bottom: 20px; }
.category-links { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.category-links a { min-height: 52px; line-height: 1.25; overflow-wrap: anywhere; }
.category-links a > span { min-width: 0; }
@media (max-width: 999px) { .category-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 399px) { .category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* phones: the tabs sit right above the feed; "For you" comes after 3 cards, fields after 5,
   closing soon after 10 (F5). The originals stay in place on wider screens. */
.feed-ins { display: none; }
@media (max-width: 599px) {
  .home > .category-section, .closing-sec.cs-mid, #fy-setup { display: none; }
  .fy:not(:has(#fy-list:not([hidden]))) { display: none; }
  .feed .list > .feed-ins { display: block; }
  .feed-ins .category-section { margin: 6px 0; }
  .feed-ins .fy-setup { margin: 0; }
  .feed-ins .closing-sec { padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
  .feed-ins .closing-sec .sec-head { margin: 0 0 4px; }
}

/* tabs keep the place; the filter sheet (F6, F10) */
.tabs-row { scroll-margin-top: var(--top-h); }
.filters-panel { display: flex; flex-direction: column; gap: 0; padding: 0; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow: hidden; border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.filters-head { display: none; align-items: center; justify-content: space-between; padding: 10px 10px 2px 20px; font-size: 1.0625rem; font-family: var(--display); }
.filters-x { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-s); }
.filters-x:hover { background: var(--raised); color: var(--ink); }
.filters-body { display: grid; gap: 16px; min-height: 0; padding: 18px 18px 16px; overflow: auto; overscroll-behavior: contain; }
.type-grid { max-height: none; overflow: visible; }
.filters-act { position: sticky; bottom: 0; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--rule); }
@media (max-width: 599px) {
  /* a bottom sheet over a scrim; the row loses its blur so the fixed sheet can cover the page */
  .tabs-row:has(.filters[open]) { z-index: 45; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .filters[open]::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .35); }
  .filters-panel { position: fixed; inset: auto 0 0 0; top: auto; z-index: 41; width: auto; max-height: 85vh; max-height: 85dvh; border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: 0; }
  .filters-head { display: flex; }
  .filters-body { padding-top: 8px; }
  .filters-act { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* home rail: only the Closing-soon card is sticky; the toolkit and trust note scroll by (F7) */
.home-rail { position: static; }
.rail-sticky { padding: 18px 18px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.rail-sticky .sec-head { margin: -4px 0 4px; }
@media (min-width: 960px) {
  .home-rail { align-self: stretch; }
  .rail-sticky { position: sticky; top: calc(var(--top-h) + 76px); }
}
@media (max-width: 959px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-rail { grid-template-columns: 1fr 1fr; gap: 16px; }
  .home-rail .rail-card { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .home-rail { grid-template-columns: 1fr; gap: 0; } }

/* toolkit and trust note (F49) */
.essentials-card { padding: 18px 18px 6px; }
.essentials-card h2 { margin: 0 0 8px; font-size: 1.0625rem; }
.essentials-card a b { font-size: .9375rem; }
.essentials-card a small { font-size: .8125rem; line-height: 1.4; }
.essentials-card > a { grid-template-columns: 36px minmax(0, 1fr) 14px; padding: 12px 0; }
.essential-icon { width: 36px; height: 36px; }
.trust-card { padding: 18px; }
.trust-card h2 { font-size: .9375rem; line-height: 1.5; font-weight: 600; font-family: var(--sans); }
.trust-card h2:lang(hi) { line-height: 1.7; }

/* For you (F37) */
#fy-more.btn { width: 100%; min-height: 44px; border-radius: var(--r-s); }
.fy-more-row #fy-more.btn { border: 1px solid var(--rule-2); }

/* countdown rings on /closing and /tracking (F34) */
.deadlines .dr { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 12px 16px 12px 12px; }
.deadlines .dr-tile { display: grid; }
.trow .jr-due { display: flex; align-items: center; gap: 12px; }
.trow .ring { flex: none; }

/* closing soon: the timeline clamp without a stray third line (F9) */
.ctl-m a { min-height: 0; padding: 0; margin: 0; }

/* calendar page in the dark: a deep red head at 7:1 (F40) */
:root[data-theme="dark"] .tear-pg small { background: #7f1d1d; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tear-pg small { background: #7f1d1d; color: #fff; } }

/* hero: the soft line in the brand colour (F42) */
.rx-h span { color: var(--brand); }

/* empty states: a still radar and one action (F41) */
.radar-glyph { display: block; width: 96px; height: 96px; margin: 0 auto 6px; }
.rg-bg { fill: #174d3e; }
.rg-ring { fill: none; stroke: #88b899; stroke-opacity: .55; stroke-width: 1.5; }
.rg-sweep { fill: #dbeaae; opacity: .32; }
.rg-dot { fill: var(--live); }
.rg-core { fill: #dbeaae; }
.empty-art-box { justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-style: dashed; }
.empty-art-box p { max-width: 26rem; }
.empty-h { font-size: 1.25rem; color: var(--ink); }

/* inner pages: task pages get a sticky aside, reading pages a centred 760px column (F33) */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-col { min-width: 0; }
.page-aside { display: none; }
@media (min-width: 960px) {
  .page-grid { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 48px; align-items: start; }
  .page-aside { display: block; align-self: stretch; padding-block: 24px 40px; }
  .page-aside-in { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 16px; }
  .page-col > .week { margin-inline: 0; }
}
.page-col .week ol { max-width: none; }
.aside-dl { display: grid; grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
.aside-dl b { display: block; font-size: .9375rem; font-weight: 600; }
.aside-dl small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--ink-3); }
.aside-dl > .ico { color: var(--ink-3); }
.aside-dl:hover b { color: var(--brand); }
.wrap.read { max-width: calc(760px + 72px); }
.wrap.read.narrow > * { max-width: none; }
.pub-sources { padding-top: 32px; padding-bottom: 40px; }
.bot-link { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bot-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.bot-link a:hover span { text-decoration: underline; }

/* /tracking: stage names may take two lines (F46) */
.steps li span { white-space: normal; overflow: visible; text-overflow: clip; font-size: .75rem; line-height: 1.2; }

/* /setup: every state on the page itself, no inner scroller; Next says why it waits (F20) */
.opts-states { display: grid; gap: 8px; }
@media (min-width: 1024px) {
  .setup-wrap { max-width: 52rem; }
  .opts-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts-states .opt span { min-height: 56px; line-height: 1.3; padding-block: 8px; }
}
#setup-next[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.setup-hint { display: none; margin-top: -8px; color: var(--ink-3); font-size: .875rem; text-align: right; }
.setup:has(#setup-next[aria-disabled="true"]) .setup-hint { display: block; }

/* the age tool: each date is a fieldset (F16) */
fieldset.age-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.dob input::placeholder { color: var(--ink-3); font-weight: 400; }
.age-row > legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.age-out .bad { color: var(--hot); font-weight: 600; }

/* Footer: readable introduction and three independent link groups. */
.foot { font-size: .875rem; background: var(--hero-bg, var(--raised)); }
.foot-in:has(.foot-cols) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); gap: 40px; }
.foot-in:has(.foot-cols) > .foot-about, .foot-in:has(.foot-cols) > .foot-cols { grid-column: auto; }
.foot-in:has(.foot-cols) > .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-content: start; }
.foot-cols > div { min-width: 0; }
.foot-cols h2 { margin: 0 0 8px; font-size: .875rem; font-weight: 700; color: var(--ink); }
.foot-cols ul { display: grid; margin: 0; padding: 0; list-style: none; }
.foot-cols a { min-height: 44px; padding-block: 8px; color: var(--ink-2); font-weight: 500; text-decoration: none; line-height: 1.5; }
.foot-cols a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.foot-about { display: grid; gap: 12px; align-content: start; }
.foot-about p { margin: 0; }
.disclaimer, .foot-note { max-width: 48ch; font-size: .8125rem; line-height: 1.75; }
@media (min-width: 600px) and (max-width: 1023px) {
 .foot-in:has(.foot-cols) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
 .foot-in:has(.foot-cols) > .foot-cols { display: contents; }
}
@media (max-width: 599px) {
 .foot-in:has(.foot-cols) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .foot-in:has(.foot-cols) > .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
 .foot-cols > div:first-child { grid-row: 1 / span 2; }
 .foot-cols > div:nth-child(2) { grid-column: 2; grid-row: 1; }
 .foot-cols > div:nth-child(3) { grid-column: 2; grid-row: 2; }
}

/* 200% text: nothing scrolls sideways (F25) */
.h-exam, .jr-title, .ctl-m a, .dr-title { overflow-wrap: anywhere; }
/* A deadline's role must remain readable, including on touch devices. */
.deadlines .dr-title, .xdates .dr-title {
 display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
}
.dr-title:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 759px) {
 .deadlines .dr-title, .xdates .dr-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
 }
}
.top-in { flex-wrap: wrap; }
.brand { min-width: 0; }

/* hero numbers are links (to Deadlines and the full feed) */
.rx-stats a { display: block; color: inherit; text-decoration: none; border-radius: var(--r-s, 8px); }
.rx-stats a:hover b { color: var(--brand); }
.rx-stats a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* ==== Round 3 (workstream C): home layout, feed and chrome ==== */

/* -- G24 tokens: radii on the scale, one card surface, rem type on the hero */
.rx-search { border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.rx-search button { border-radius: var(--r); font-size: .9375rem; }
.rx-search input { font-size: 1.0625rem; }
.rx-kicker { font-size: .875rem; }
.rx-h { font-size: 3rem; margin: 14px 0 12px; }
.rx-lede { margin: 0 0 16px; max-width: 46ch; font-size: 1.0625rem; line-height: 1.5; }
.verify-cta, .newsince, .cl-chip { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }

/* -- G3: one line of labelled numbers (G19) instead of three big ones */
.rx-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }
.rx-stats a { display: inline-flex; align-items: baseline; gap: 5px; min-height: 28px; padding: 2px 0; }
.rx-stats b { display: inline; font-size: 1.0625rem; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
.rx-stats span { display: inline; margin: 0; font-size: .875rem; }
.rx-stats .rx-st-boards, .rx-stats .l-short { display: none; }
.rx-stats a:hover span { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* popular searches: chips at their own width (G25), wrapping words at 200% text (G18) */
.rx-pop { margin-top: 14px; }
.rx-pop > span { font-size: .8125rem; margin-bottom: 6px; }
.rx-pop > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-pop a { flex: none; max-width: max-content; min-height: 40px; padding: 6px 14px; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; font-size: .875rem; font-weight: 600; }

/* -- G3 laptop: "Closing this week", three real open jobs under the hero search */
.cw { display: none; }
.cw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.cw-head h2 { margin: 0; font-size: .9375rem; font-weight: 650; color: var(--ink); }
.cw-head a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.cw-head a .ico { width: 14px; height: 14px; }
.cw-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.cw-i { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 48px; padding: 6px 14px 6px 10px; }
.cw-i + .cw-i { border-top: 1px solid var(--rule); }
.cw-i:hover { background: var(--brand-tint); }
.cw-i .ring, .cw-i .ring-off { width: 32px; height: 32px; }
.cw-i .ring-t, .cw-i .ring.r-today::after { display: none; }
.cw-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.cw-t::after { content: ""; position: absolute; inset: 0; }
.cw-t:focus-visible { outline: none; }
.cw-i:has(.cw-t:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
.cw-m { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: .8125rem; color: var(--ink-3); }
.cw-b { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.cw-m b { font-weight: 700; color: var(--ok); }
.cw-i.near .cw-m b { color: var(--live-ink); }
.cw-i.urgent .cw-m b { color: var(--hot); }
@media (min-width: 760px) { .cw { display: block; margin-top: 16px; max-width: 600px; } }

/* -- G25 tablet: a two-column hero from 760px with a 320px radar */
@media (min-width: 760px) and (max-width: 959px) {
  .rx-in { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .rx-h { font-size: 2rem; }
  .ftabs { gap: 2px; overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
  .ftabs a { padding-inline: 11px; }
}
@media (min-width: 960px) {
  .rx { padding-block: 24px 20px; }
  .rx-in { align-items: start; }
  .rx-h { margin-top: 12px; }
  .cw-i { min-height: 44px; padding-block: 4px; }
}
/* a 768px-tall laptop: the kicker already says how many boards; the lede gives its room to
   the three closing jobs (G3) */
@media (min-width: 960px) and (max-height: 820px) { .rx-lede { display: none; } }
/* "Verify the notice" link: under the radar on laptops and tablets, above the tabs on small tablets,
   inside the feed on phones (it never stands between the first screen and the first job) */
.verify-cta { margin: 0; }
.vc-hero { display: none; }
@media (min-width: 760px) {
  .vc-hero { display: flex; margin-top: 12px; min-height: 48px; font-size: .875rem; }
  .vc-top { display: none; }
}
.home > .verify-cta { margin-bottom: 12px; }

/* -- G4: the new-since banner, right under the header (phones: above the H1) */
.ns-wrap:not(:has(.newsince:not([hidden]))) { display: none; }
.newsince { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 2px 2px 2px 14px; min-height: 48px; color: var(--ink); font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.newsince > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.newsince > .ns-show { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px 12px; min-height: 44px; padding: 4px 0; color: var(--ink); text-decoration: none; }
.newsince > .ns-show > span:first-child { min-width: 0; }
.ns-go { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 10px; color: var(--brand); font-weight: 700; }
.ns-go .ico { width: 16px; height: 16px; }
.newsince > .ns-show:hover .ns-go { text-decoration: underline; text-underline-offset: 3px; }
.newsince > .ns-show:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-s); }
.ns-x { flex: none; width: 44px; min-height: 44px; }
.ns-wrap + .rx { padding-top: 12px; }

/* -- G14: popular exams, under Browse by field */
.pop-exams { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
.pe-h { font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.pop-exams ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pop-exams a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 600; text-decoration: none; }
.pop-exams a:hover { border-color: var(--brand); color: var(--brand); }
.pop-exams .pe-all { border-color: transparent; background: var(--brand-tint); color: var(--brand); }
.pop-exams .pe-all .ico { width: 14px; height: 14px; }
.feed-ins .pop-exams { margin: 10px 0 6px; }

/* -- where the inserts live: phones get them inside the feed; laptops keep Browse by field
   and popular exams there too (so the rail calendar sits on the first screen, G15) */
.home > .category-section { margin-bottom: 12px; }
@media (min-width: 600px) and (max-width: 959px) { .home > .pop-exams { margin-bottom: 4px; } }
@media (max-width: 599px), (min-width: 760px) { .home > .category-section, .home > .pop-exams { display: none; } }
@media (min-width: 600px) { .ins-verify { display: none !important; } }
@media (min-width: 600px) and (max-width: 759px) { .home > .vc-top { display: flex; } }
@media (max-width: 599px) { .home > .vc-top { display: none; } }
@media (min-width: 760px) {
  .feed .list > .feed-ins.ins-fields { display: block; }
  .ins-fields .category-section { margin: 4px 0 0; }
  .ins-fields .category-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dens-compact .feed .list > .feed-ins { padding: 4px 12px 12px; }

/* -- G15: closing soon. Phones: a chip under the tabs with a mini tear-off; the
   in-feed list after card 2. Laptops: the rail's first card, sticky. */
.cl-chip { display: none; }
@media (max-width: 599px) {
  .cl-chip { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 3px 12px 3px 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
  .cl-chip > .ico:last-child { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--brand); }
  .cl-chip-t i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--hot); vertical-align: 1px; }
  .cl-chip.is-today .cl-chip-t { color: var(--hot); }
}
.tear-mini { flex: none; width: 48px; height: 52px; }
.tear-mini .tear-ring { padding: 0 10px; }
.tear-mini .tear-ring i { width: 5px; height: 10px; }
.tear-mini .tear-pg { top: 5px; border-radius: var(--r-s); box-shadow: var(--shadow-1); grid-template-rows: auto 1fr; }
.tear-mini .tear-pg small { padding: 5px 0 2px; font-size: .75rem; letter-spacing: .04em; }
.tear-mini .tear-pg b { font-size: 1.25rem; }
@media (min-width: 960px) {
  .home-rail { display: flex; flex-direction: column; align-self: stretch; }
  .rail-stick { display: block; flex: 1 0 auto; }
  .rail-stick > .rail-sticky { margin: 0; }
}

/* -- the tabs: in the main column; a page-coloured band behind them while they stick, so
   cards never show around them (G24). The card look is ::after; ::before is the band. */
.tabs-row { background: none; border: 0; box-shadow: none; }
.tabs-row::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.tabs-row::before { content: ""; position: absolute; inset: -6px 0; z-index: -1; background: var(--page); box-shadow: 0 0 0 100vmax var(--page); clip-path: inset(0 -100vmax); }
@media (min-width: 960px) { .tabs-row::before { clip-path: inset(0 -24px 0 -100vmax); } }
.ftabs a[title] { text-decoration: none; }

/* -- the feed head: what the count covers (G19), and the Compact switch (G17) */
.feed .sec-head { flex-wrap: wrap; gap: 4px 12px; }
.sec-n { color: var(--ink-3); font-size: .8125rem; }
.dens-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.dens-btn:hover { background: var(--raised); color: var(--ink); }
.dens-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.dens-btn .ico { width: 16px; height: 16px; }
.feed .sec-head .sec-n { margin-right: auto; }

/* -- G6: For you never ticks a post that needs a particular degree */
.fy-subj { background: var(--live-tint); color: var(--live-ink); }

/* -- G12: the filter sheet on phones is a modal <dialog> (app.js) */
.type-grid span { min-height: 40px; }
.fsheet-dlg { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85vh; max-height: 85dvh; margin: 0; padding: 0; border: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); overflow: hidden; overscroll-behavior: contain; }
.fsheet-dlg[open] { display: flex; flex-direction: column; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1); }
.fsheet-dlg::backdrop { background: rgb(0 0 0 / .4); animation: scrim-in .2s ease; }
.fsheet-dlg .filters-panel { position: static; display: flex; flex-direction: column; width: auto; min-height: 0; max-height: 85vh; max-height: 85dvh; border: 0; border-radius: 0; box-shadow: none; }
.fsheet-dlg .filters-head { display: flex; }
.fsheet-dlg .filters-body { padding-top: 8px; }
.fsheet-dlg .filters-act { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
html.sheet-open, html.sheet-open body { overflow: hidden; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes scrim-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fsheet-dlg[open], .fsheet-dlg::backdrop { animation: none; } }

/* -- G13: /setup keeps Next on screen above the tab bar; a waiting Next is an outline */
#setup-next[aria-disabled="true"] { opacity: 1; background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--ink-3); box-shadow: none; transform: none; }
@media (max-width: 599px) {
  .setup-act { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; margin: 0 -20px; padding: 12px 20px; background: color-mix(in srgb, var(--page) 96%, transparent); border-top: 1px solid var(--rule); }
  body:has(:is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus) .setup-act { bottom: 0; }
  .setup-hint { margin-top: 0; }
}

/* -- OD1/G14: Exams in the nav; Profile is a header icon */
.me-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); }
.me-btn:hover { background: var(--raised); color: var(--ink); }
.me-btn[aria-current="page"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.me-btn .ico { width: 18px; height: 18px; }

/* -- G18: the tab bar at 200% text. Labels never truncate: they are capped by the screen's
   width; with large text (the em query trips when 1em is over ~19px) only the current tab
   keeps its word, the others keep their aria-label */
.tabbar a span { font-size: min(.75rem, 3.2vw); overflow: visible; text-overflow: clip; }
@media (max-width: 19em) {
  .tabbar a:not([aria-current="page"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* -- G27: phones scroll without blur work; the header hides itself (class on header.top) */
@media (max-width: 599px) {
  .top, .tabbar, .tabs-row, .week { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top { background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .tabbar { background: color-mix(in srgb, var(--surface) 96%, transparent); }
}

/* /hi: a real gap around the middot (Anek Devanagari's space is narrow, QD N7) */

/* -- G3 phones: the first job on the first screen. No lede, one scrolling row of chips,
   one line of numbers, a 12px rhythm. */
@media (max-width: 599px) {
  .rx { padding-block: 12px 0; }
  .rx-in { gap: 12px; }
  /* the board count moves into the numbers line, so the kicker goes */
  .rx-kicker { display: none; }
  .rx-stats .rx-st-boards { display: inline-flex; }
  .rx-stats .l-long { display: none; }
  .rx-stats .l-short { display: inline; }
  .rx-stats { column-gap: 14px; }
  .rx-h { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.06; }
  .newsince { padding-left: 12px; font-size: .875rem; }
  .newsince > i { display: none; }
  .ns-go { padding: 0 8px; }
  /* the arrow says "show"; the word stays for screen readers */
  .ns-go { font-size: 0; }
  .ns-go .ico { width: 18px; height: 18px; }
  .dens-btn { min-width: 44px; min-height: 36px; padding: 0 12px; justify-content: center; }
  .dens-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .feed .sec-head { margin: 0 0 4px; }
  .jr.card { padding-block: 11px; }
  .jr.card .jr-title { margin-top: 6px; }
  .jr.card .jr-facts { margin-top: 7px; }
  .rx-h:lang(hi) { font-size: 1.5rem; line-height: 1.35; }
  .rx-lede { display: none; }
  .rx-search { padding: 4px 4px 4px 14px; }
  .rx-search button { min-height: 44px; padding: 0 16px; }
  .rx-stats { margin-top: 8px; }
  .rx-stats .rx-st-new { display: none; }
  .rx-pop { display: flex; align-items: center; gap: 8px; margin: 8px -20px 0; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .rx-pop::-webkit-scrollbar { display: none; }
  .rx-pop > span { flex: none; margin: 0; }
  .rx-pop > div { flex-wrap: nowrap; }
  .rx-pop a { min-height: 40px; padding: 0 14px; display: inline-flex; }
  .home { padding-top: 12px; }
  .home-main > *, .home-rail > * { margin-top: 12px; }
  .home-main > .tabs-row { margin-top: 0; }
  .feed .day-h { padding-top: 12px; }
}

@media (max-width: 380px) {
  /* three header buttons and the brand on one line, in both languages */
  .top-in { gap: 6px; }
  .top-act { gap: 4px; }
  .me-btn, .js .theme-btn { min-width: 40px; width: 40px; }
  .lang-switch { min-width: 40px; padding-inline: 7px; }
  .brand { gap: 7px; }
  .brand-name { font-size: 1rem; }
  .newsince { font-size: .8125rem; }
  .rx-stats { column-gap: 10px; }
}

/* -- G26: printing Home prints the cards */
@media print {
  .rv, .jr.card.rv { opacity: 1 !important; transform: none !important; }
  .ns-wrap, .cl-chip, .dens-btn, .pop-exams, .rx-scene, .rx-strip, .rx-pop, .cw, .me-btn, .tabs-row::before, .tabs-row::after { display: none !important; }
  .jr.card { box-shadow: none; break-inside: avoid; }
  /* M22: every page prints without the footer's link columns (the disclaimer stays) */
  footer .foot-cols { display: none !important; }
}

/* ======== Round 4, workstream C ======== */

/* -- H4: the new-since banner. Only #newsince-t is live; Show and Dismiss sit beside it.
   html.ns-slot (themeJS: last visit over 6 h ago) keeps its line from the first paint, so
   the count never pushes the page; a zero count then says "You're up to date".
   R8 (Q3, M4): the .ns-over overlay is gone: it floated the pill over "Your exams" and the
   search. The banner is always in the flow above them; themeJS keeps the slot (ns-slot) for
   every returning visitor, whatever they follow or saved. */
/* flow-root: the banner's top margin stays inside the kept room instead of collapsing
   through it and pushing the hero down when the banner appears */
:root.ns-slot #newsince { display: flow-root; min-height: 62px; }
/* the banner lives only in its kept slot: with no slot (a first visit with follows, a visit
   within 6 h, or after Dismiss) it would push the hero down when it appears (CLS 0.04-0.07) */
:root:not(.ns-slot) #newsince { display: none; }
/* R9 (R12, QM banraf): the kept slot is never blank before app.js runs. The server prints
   "Checking what's new…" in #newsince-p (data-ns="wait", hidden until app.js); in the room
   themeJS keeps (ns-slot) that line shows from the first paint. It is in this sheet, with the
   slot's min-height, so a slow phone never paints the room without its words. No slide-in for
   it: app.js unhiding it later must not fade it out and in again; the next state animates. */
:root.ns-slot #newsince-p[data-ns="wait"] { display: flex; animation: none; }
.newsince > .ns-t { flex: 1; min-width: 0; padding-block: 4px; }
.newsince > .ns-t b { font-weight: 700; color: var(--ink); }
.newsince > .ns-show { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 10px; color: var(--brand); font-weight: 700; text-decoration: none; }
.newsince > .ns-show[hidden] { display: none; }
.newsince > .ns-show .ico { width: 16px; height: 16px; }
.newsince > .ns-show:hover { text-decoration: underline; text-underline-offset: 3px; }
.newsince.ns-quiet { background: var(--raised); border-color: transparent; box-shadow: none; color: var(--ink-2); font-weight: 400; }
.newsince.ns-quiet > i { background: var(--ok); }
/* R7 (P1, OD45): a check that failed says so quietly, with a Retry beside it (no number) */
.newsince.ns-err > i { background: var(--ink-3, var(--ink-2)); }
.newsince > .ns-r { flex: none; min-height: 44px; margin-left: auto; padding: 0 12px; background: transparent; border: 0; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.newsince > .ns-r[hidden] { display: none; }
.newsince > .ns-r:hover { text-decoration: underline; text-underline-offset: 3px; }
/* one "new" number at a time (OD10): the hero's stat steps aside while the banner shows */
:root.ns-on .rx-st-new { display: none; }

/* -- H5: the undated group's "Show N more" sits full width under its five cards */
.feed .list > .more-undated label { justify-content: center; border: 1px dashed var(--rule-2); border-radius: var(--r); }

/* -- H9: Compact list. A right-hand column with the last date ("26 Nov", red within 3
   days, "—" when the notice gives none); no inserts; a 44px toggle; a cross-fade. */
.jr-cd { display: none; }
.dens-compact .feed .jr.card { grid-template-columns: 20px minmax(4rem, 10rem) minmax(0, 1fr) auto 72px 44px; grid-template-areas: "lead eye title facts cd bm"; }
.dens-compact .feed .jr-cd { display: block; grid-area: cd; width: 72px; text-align: right; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--ink-2); white-space: nowrap; }
.dens-compact .feed .jr-cd.hot { color: var(--hot); }
.dens-compact .feed .list > .feed-ins, .dens-compact .feed .list > .feed-ins.ins-fields { display: none !important; }
@media (max-width: 599px) {
  .dens-compact .feed .jr.card { grid-template-columns: 20px minmax(0, 1fr) 56px 44px; grid-template-areas: "lead eye cd bm" "lead title cd bm"; }
  .dens-compact .feed .jr-facts { display: none; }
  .dens-compact .feed .jr-cd { width: 56px; }
}
.dens-btn { min-height: 44px; min-width: 44px; }
@media (min-width: 760px) { .feed .list > .feed-ins { margin-block: 12px; } }
:root.dens-swap *, :root.dens-swap *::before, :root.dens-swap *::after { transition: none !important; }
:root.vt-dens::view-transition-old(root), :root.vt-dens::view-transition-new(root) { animation-duration: .25s; }

/* -- H12: a picked chip is unmistakable: solid brand with a tick (≥3:1 against the others) */
.type-grid input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.type-grid input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 700; }
:root[data-theme="dark"] .type-grid input:checked + span { color: #10201a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .type-grid input:checked + span { color: #10201a; } }
/* H16: the two switches under the chips */
.fl-checks { gap: 2px; }
.fcheck { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: .875rem; color: var(--ink); cursor: pointer; }
.fcheck input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--brand-fill); }
.fchip-add { gap: 6px; padding: 0 14px 0 10px; border-style: dashed; color: var(--brand); }
.fchip-add .ico { width: 16px; height: 16px; }

/* -- H17: phones and tablets: a search button in the header opens the header search as a
   full-width row under it (themeJS; Esc closes it) */
.srch-btn { display: none; }
@media (max-width: 959px) {
  .js .srch-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); }
  .js .srch-btn:hover { background: var(--raised); color: var(--ink); }
  .js .srch-btn[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
  .srch-btn .ico { width: 18px; height: 18px; }
  .top-in { flex-wrap: wrap; }
  :root.srch-open .top-search { display: flex; align-items: center; gap: 8px; order: 10; flex: 1 0 100%; height: 44px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--brand); border-radius: var(--r-s); background: var(--surface); color: var(--ink-3); visibility: visible; }
  :root.srch-open .top-search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); }
  :root.srch-open .top-search .ico { width: 18px; height: 18px; }
}
@media (max-width: 380px) { .js .srch-btn { min-width: 40px; width: 40px; } }
/* Keep theme access on phones; the compact logo leaves room for utilities. */
@media screen and (max-width: 429px) {
  .top .brand-name { display: none; }
  .top .brand { flex-shrink: 0; }
  .top .top-act { flex-wrap: nowrap; }
  .js .top .theme-btn { min-width: 44px; width: 44px; }
}

/* -- H21: with a saved profile (html.fy-slot) the For-you list's room is kept from the first
   paint, so it fills in without pushing the feed down */
:root.fy-slot #fy-setup { display: none; }
:root.fy-slot #fy:not(.fy-ready) { display: block; position: relative; min-height: 870px; }
/* the skeleton floats in the kept room (absolute): the list's own heading, shown at once,
   stays where it is when the rows replace it */
:root.fy-slot #fy:not(.fy-ready)::before { content: ""; position: absolute; top: 72px; left: 0; right: 0; height: 300px; border-radius: var(--r); background: linear-gradient(var(--raised) 0 136px, transparent 136px 148px, var(--raised) 148px 284px, transparent 284px); opacity: .6; }
@media (min-width: 760px) { :root.fy-slot #fy:not(.fy-ready) { min-height: 700px; } }

/* -- H24: a pill or tab scrolled to with the keyboard is never under the strip's edge */
.ftabs, .rx-pop > div, .pop-exams ul, .fchips, .category-links { scroll-padding-inline: 16px; }

/* -- H26: type and chrome */
.h-page { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.rx-lede { text-wrap: pretty; }
.tabbar a span { font-size: max(12px, min(.75rem, 3.2vw)); }
.home-main > .sr-banner { padding: 12px 16px; margin-bottom: 12px; }
@media (min-width: 820px) {
}
@media (max-width: 399px) {
  /* the saffron edge says "new"; the word would crowd the board name */
  .jr.card .jr-pill-new { display: none; }
}
/* H9: in the Compact list the group headings are one short line, so a laptop screen holds 15+ rows */
.dens-compact .feed .day-h { padding: 10px 2px 4px; }
.dens-compact .feed .list-box > .day-h:first-child { padding-top: 0; }
/* H26: the hero's Search button is the header pills' height (44px), not 47 */
.rx-search button { height: 44px; min-height: 44px; padding-block: 0; }

/* ================================================================ round 5 (workstream C) */
/* -- J16: one heading scale. Page titles 40px, section headings 20px, card titles 16px, and
   eyebrows (small labels over a list) 13px, all in the display face; no heading falls back
   to system-ui or to an em-sized browser default. */
:root {
  --h1: 650 clamp(1.875rem, 1.2rem + 2.2vw, 2.5rem)/1.1 var(--display);
  --h1-exam: 32px;
  --h2: 650 1.25rem/1.3 var(--display);
  --h3: 650 1rem/1.35 var(--display);
  --eyebrow: 600 .8125rem/1.4 var(--display);
}
.h-page { font: var(--h1); letter-spacing: -.02em; }
.h-page:lang(hi) { line-height: 1.28; letter-spacing: 0; }
.h-sec, .sec-head .h-sec, .section-label h2, .section-label h3, .essentials-card h2, .feed-ins .closing-sec .h-sec { font: var(--h2); letter-spacing: -.01em; }
.fy-setup .h-sec, .ins-fy .fy-setup .h-sec { font: var(--h3); letter-spacing: 0; }
.cw-head h2, .rx-pop > span, .pe-h { font: var(--eyebrow); letter-spacing: .02em; text-transform: none; }
.day-h, .day-h:lang(hi), .feed .day-h, .fy .day-h { font: var(--eyebrow); letter-spacing: .02em; text-transform: none; }
.day-h a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.day-h a:hover { color: var(--brand); text-decoration-color: currentColor; }
/* the group heading repeated for screen readers after an insert (H24) */
.list > li.sr h3 { font: var(--eyebrow); margin: 0; }
.trust-card .trust-t { margin: 0; font: 600 .9375rem/1.5 var(--display); color: var(--ink); }
.trust-card .trust-t:lang(hi) { line-height: 1.7; }
/* /setup: the page title is the page's own, the question under it a section heading */
.setup-wrap > .h-page { margin: 20px 0 4px; }
.setup .h-setup { font: var(--h2); font-size: 1.5rem; letter-spacing: -.01em; }
/* Hindi: small text is never under 12.5px, and gets room for the matras */
:lang(hi) { --fs-xs: 12.5px; --fs-sm: 14px; }
/* the wordmark is Latin: the Latin face in Hindi too, so the header does not change between languages */
:lang(hi) .brand-name, :lang(hi) .foot-brand b { font-family: "Anek", system-ui, sans-serif; }
/* control heights: header links and the hero's Search button are one height in both languages */
.nav a { display: inline-flex; align-items: center; block-size: 40px; padding-block: 0; line-height: 1; }
.rx-search button, :lang(hi) .rx-search button { block-size: 44px; line-height: 1; padding-top: 0; padding-bottom: 0; }
/* the filter sheet's "+12 not stated" under its count (J1) */
#f-go .f-unk { display: block; font-size: .75rem; font-weight: 500; opacity: .9; }
#f-go:has(.f-unk) { flex-direction: column; gap: 0; line-height: 1.2; }

/* -- J12 (OD17, K9): returning visitors. html.ret (themeJS) collapses the hero to what they
   use: on phones the search and the live strip, from 600px no lede and no popular searches.
   html.yx-slot (they follow an exam or have a profile): Your exams leads the phone hero and
   sits under the search in the hero's left column from 600px (one element, moved by order). */
.rx-copy > .yourexams { margin: 14px 0 0; }
/* J14: setup lands on #yourexams; html's scroll padding keeps room for the tabs row, which is
   further down the page here, so the section comes to rest 12px under the header */
#yourexams { scroll-margin-top: -72px; }
@media (max-width: 599px) {
  :root.ret .rx-h, :root.ret .rx-lede, :root.ret .rx-stats, :root.ret .rx-pop { display: none; }
  :root.yx-slot .rx-copy { display: flex; flex-direction: column; }
  :root.yx-slot .rx-copy > .yourexams { order: -1; margin: 0 0 12px; }
}
@media (min-width: 600px) {
  :root.ret .rx-lede, :root.ret .rx-pop { display: none; }
}

/* -- J26: the middot between a heading and its count ("Latest jobs · 579") */
/* L6: the one rule for the separator span (markup has no spaces round it). The dot is drawn in
   the text face: the display face's middot sits at the right of its box, so "·49" looked glued */
.sep { margin-inline: .32em; font-family: var(--sans); }
.h-sec .sep, .sec-head .sep { color: var(--ink-3); font-weight: 500; }
.fy-n { margin-left: 0; }
.fy-n::before { content: none; }

/* M19 (OD30): the returning desktop hero (.rx*) moved to scene.css in FIXES-R6 step 0 (B owns
   it); the feed's part stays here (pages without a hero have no scene.css). */
@media (min-width: 1024px) {
  :root.ret .home-main > .tabs-row { margin-top: 0; }
  :root.ret .home-main > #feed-sec { margin-top: 12px; }
  /* the set-up prompt waits inside the feed after three cards, as on phones; a profile's own
     For-you list keeps its place (html.fy-slot reserves it) */
  :root.ret:not(.fy-slot) #fy { display: none; }
  :root.ret:not(.fy-slot) .feed .list > .feed-ins.ins-fy { display: block; }
  :root.ret .feed-ins .fy-setup { margin: 0; }
}

/* M13: "2 in Uttar Pradesh · 47 all-India" under the band's heading */
.fband-split { margin: 6px 0 0; font-size: .9375rem; color: var(--ink-2); }

/* ======== Round 7, workstream C ======== */

/* -- P2 (OD35): For you's undated rows sit under their own label; the list ends in a link to the
   whole filtered feed; an empty list names the exams of the reader's level */
.fy .list > .fy-undated { list-style: none; margin: 6px 0 0; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.fy .list > .fy-all-row { list-style: none; display: flex; justify-content: flex-end; }
.fy .list > .fy-all-row a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.fy .list > .fy-all-row .ico { width: 16px; height: 16px; }
.fy-exams { margin: 0 0 8px; font-size: .9375rem; color: var(--ink-2); }
.fy-exams a { display: inline-block; padding: 10px 2px; font-weight: 600; }

/* -- P7 (L11): a card whose title readers of the page may not read leads with its stand-in line;
   the original follows on one quiet line */
.jr-title .jr-orig { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--ink-2); }
.dens-compact .feed .jr-title .jr-orig { display: none; }

/* -- P25 (QM N4): a rail row is one target: its link stretches over the ring and the days left */
.ctl-m a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); }
.ctl-m a:focus-visible { outline: none; }
.ctl-m a:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; }
/* -- P25 (QD F7): every page prints the brand and the disclaimer (exam.css hides .foot on print) */
@media print {
  html body > footer.foot { display: block !important; margin: 16pt 0 0 !important; padding: 8pt 0 0 !important; border-top: 1px solid #999; background: #fff !important; color: #000 !important; }
  html body > footer.foot .foot-note, html body > footer.foot .foot-cols { display: none !important; }
  html body > footer.foot .foot-brand, html body > footer.foot .disclaimer { color: #000 !important; }
}

/* ======== Round 8, workstream B ======== */

/* -- Q21 (QD F3): For-you never moves the page when it fills. html.fy-slot (themeJS: a saved
   profile) keeps For-you's room from the first paint, but its height depends on the reader's
   matches (one row or four, an empty state, the "can't confirm" fold), so no fixed reserve fits
   every profile and whatever follows it in the column (the tablet Closing soon, the feed) moved
   when the rows came in (0.078 at 820, 0.011-0.030 at 1440/1920). Until For-you is ready
   (app.js adds .fy-ready in the frame the rows land, or when its request gives up), what
   follows it is laid out but not painted, so it first shows in its final place. A hidden box
   is not a layout shift. The hold lifts by itself after 1.5 s (a slow or failed request never
   hides the feed for long); under reduced motion the same 0-second step still runs (it is
   not motion), so the hold cannot outlive its cap there either. */
@keyframes sr-fy-hold { to { visibility: visible; } }
:root.fy-slot #fy:not(.fy-ready) ~ * { visibility: hidden; animation: sr-fy-hold 0s 1.5s forwards; }
@media (prefers-reduced-motion: reduce) {
  :root.fy-slot #fy:not(.fy-ready) ~ * { animation: sr-fy-hold 0s 1.5s forwards !important; }
}

/* -- Q28 (OD61, DS F4): tablets. A returning visitor's first job sits above y800 at 820x1180:
   Closing soon is the phone's one-line calendar bar ("16 Oct · 2 close today →") instead of the
   tear-off and its three rows, and a saved profile hides the "See the forms you can fill" box
   (:root.fy-slot #fy-setup, H21). All decided from the root classes at the first paint. The
   rail carries the full list from 960px. */
@media (min-width: 600px) and (max-width: 959px) {
  :root.ret .closing-sec.cs-mid { display: none; }
  :root.ret .cl-chip { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 16px 0 0; padding: 3px 14px 3px 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
  :root.ret .cl-chip > .ico:last-child { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--brand); }
  :root.ret .cl-chip-t i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--hot); vertical-align: 1px; }
  :root.ret .cl-chip.is-today .cl-chip-t { color: var(--hot); }
  :root.ret .cl-chip:hover .cl-chip-t { text-decoration: underline; text-underline-offset: 3px; }
}

/* -- Q16 (M4, AX): the home tabs row sticks right under the header's real height. app.js sets
   --hdr-h from a ResizeObserver on header.top (66/78px at normal text, more when 200% text
   wraps the header) and html.big-text above 90px: there the row stays in the flow, since a
   sticky header plus a sticky row would cover half a phone screen. */
.tabs-row { top: var(--hdr-h, var(--top-h)); }
html { scroll-padding-top: calc(var(--hdr-h, var(--top-h)) + 12px); }
html:has(.tabs-row), html:has(.week) { scroll-padding-top: calc(var(--hdr-h, var(--top-h)) + 84px); }
:root.big-text:has(.tabs-row) { scroll-padding-top: calc(var(--hdr-h, var(--top-h)) + 12px); }
:root.big-text #feed.tabs-row { scroll-margin-top: 0; }
/* Keep decorative layers anchored when the wrapped header disables sticky tabs. */
:root.big-text .tabs-row { position: relative; top: auto; }

/* -- Q24 (QM F3): the feed head is one grid, "heading · meta | button", so the 44px density
   button never drops to a row of its own (it left a 50px empty band before the first group at
   360). The meta wraps inside its own cell; with a long meta (data-long, M4) on a phone it sits
   under the heading instead, and the button spans both lines. The heading's line box is the
   button's height, so their tops meet. */
.feed .sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "h n b"; align-items: center; column-gap: 12px; row-gap: 0; }
.feed .sec-head > .h-sec { grid-area: h; display: flex; align-items: center; min-height: 44px; min-width: 0; }
.feed .sec-head > .sec-n { grid-area: n; margin: 0; min-width: 0; }
.feed .sec-head > .dens-btn { grid-area: b; margin: 0; }
@media (max-width: 599px) {
  .feed .sec-head[data-long] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h b" "n b"; align-items: start; }
  .feed .sec-head[data-long] > .h-sec { min-height: 0; padding-top: 9px; }
  .feed .sec-head[data-long] > .sec-n { padding-bottom: 4px; }
}

/* -- Q20 (DS F7, QD F6): type tokens and spacing left over. Section headings on /me and
   /tracking take the --h2 token whole (650 20px, -0.2px), not 15-17px/600 with no tracking; the
   /tracking empty card starts level with the aside (24px under the band, as on /closing); the
   first-visit hero lede balances its lines (no lone "real" on the last line). */
.me .h-panel, .tgroup .h-sec, .tgroup .h-sec.solo { font: var(--h2); letter-spacing: -.01em; }
#tracked-empty { margin-top: 16px; } /* + the column's own 8px: level with the aside (y263 at 1366) */
.rx-lede { text-wrap: balance; }

/* -- Q32 (AX F6): large text and small targets. The tab bar's word grows with the root text
   (12px at 100%, 18px at 200%; only the current tab keeps its word there, G18), its line box
   with it. Links stacked one per line (card titles, panel links, group headings) are at least
   24px tall: a card title (a clamped block) by its min-height, an inline link by a pixel of
   block padding, which moves nothing. */
.tabbar a span { font-size: clamp(12px, .375rem + 1.6vw, 18px); height: auto; min-height: 16px; line-height: 1.2; }
.jr-title > a { min-height: 24px; }
p > a.panel-link { padding-block: 1px; }
.day-h a { padding-block: 1px; }

/* -- Q29 (MO F6, QD F9): the 820 first-visit hero had a 380px void under the scene, because the
   left column (kicker, heading, lede, search, numbers, popular searches, "Closing this week")
   ran on long after it. From 760 to 959px the copy's own blocks join the hero grid
   (display: contents): the scene spans the copy's rows beside it, the last of them (1fr)
   taking any extra height, and "Closing this week" runs under both columns. Returning
   visitors keep their own collapsed hero (scene.css, :root.ret). */
@media (min-width: 760px) and (max-width: 959px) {
  :root:not(.ret) .rx-in { grid-template-rows: repeat(5, auto) 1fr auto; row-gap: 0; }
  :root:not(.ret) .rx-copy { display: contents; }
  :root:not(.ret) .rx-copy > * { grid-column: 1; }
  :root:not(.ret) .rx-copy > .rx-kicker { justify-self: start; }
  :root:not(.ret) .rx-scene { grid-column: 2; grid-row: 1 / 7; align-self: start; }
  :root:not(.ret) .rx-copy > .cw { grid-column: 1 / -1; grid-row: 7; max-width: none; margin-top: 20px; }
}
/* the hero's long placeholder ("Search an exam, role or board…") was cut at "…or b" in the
   tablet's narrower search; a size smaller there keeps it whole (the typed text stays 16px) */
@media (min-width: 440px) and (max-width: 1023px) { .rx-search input::placeholder { font-size: .875rem; } }

/* S5 (OD S5-12): on a phone a search's exam-page pills are one compact row that scrolls
   sideways, so the first result stays on the first screen */
@media (max-width: 819px) {
  .sr-banner .sr-pills { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-top: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sr-banner .sr-pills::-webkit-scrollbar { display: none; }
  .sr-banner .sr-pills > * { flex: none; }
  .sr-banner .sr-pills .btn { min-height: 32px; padding: 4px 10px; font-size: .8125rem; white-space: nowrap; }
  .home-main > .panel.sr-banner { padding: 0; margin-block: 0 8px; border: 0; background: none; box-shadow: none; }
  .panel.sr-banner p { margin: 0; }
  .sr-banner .sr-pills .muted { display: none; }
  .fband .fband-split { display: none; } /* the "In Bihar · N" group heading says it on a phone */
  .feed .sec-head:has(+ .list-box .day-h) { margin-bottom: 4px; }
}