/* Home hero scenes (radar | station board | notice printing) and the phone live strip.
   Loaded only on the home page (pageData.Styles); tokens come from design.css. */
/* ==== hero scenes ==== */
/* Everything the home hero's animated scenes and the phone live strip need (scenes.js).
   Kept in one block so it can move, unchanged, to scene.css loaded on the home page only.
   Performance rule (round 1): only opacity and transform animate; no animated box-shadow
   or filter, so a budget phone keeps the compositor busy and the main thread free. */

/* the kicker's live dot: a ring that pings three times, then the dot just stays lit */
.rx-kicker i { position: relative; animation: none; }
.rx-kicker i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); opacity: 0; animation: rx-ping2 2.4s cubic-bezier(0, 0, .2, 1) .6s 3; }
@keyframes rx-ping2 { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }

/* scene frame */
.rx-scene { --phos: 79 227 166; position: relative; justify-self: center; width: min(100%, 440px, 60vh); min-width: 0; container-type: inline-size; }
@media (max-width: 960px) { .rx-scene { width: min(100%, 420px); } }
@media (max-width: 640px) { .rx-scene { width: min(100%, 360px); } }
.sc-switch { margin: 0 0 14px; text-align: center; }
.sc-switch[hidden] { display: none; }
.sc-switch p { margin: 0 0 8px; font-size: .8125rem; color: var(--ink-3); }
.sc-switch div { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--raised); max-width: 100%; overflow-x: auto; }
.sc-switch button { border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-2); padding: 7px 14px; min-height: 36px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.sc-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(16 38 31 / .12); }
.sc-box { position: relative; }
.sc-stage { position: relative; }
/* a paused scene stops everything, pseudo-elements included */
.sc-paused *, .sc-paused *::before, .sc-paused *::after { animation-play-state: paused !important; }

/* pause / play (WCAG 2.2.2): 32×32, top-right of the scene */
.sc-pause { position: absolute; top: 4px; right: 4px; z-index: 6; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 3px rgb(16 38 31 / .12); }
.sc-pause[hidden] { display: none; }
.sc-pause:hover { color: var(--ink); border-color: var(--ink-3); }
.sc-pause:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sc-pause svg { width: 14px; height: 14px; fill: currentColor; }
.sc-pause .i-play, .sc-pause.is-paused .i-pause { display: none; }
/* G30: never on the art. The board's header keeps 40px free for it, on a dark disc that belongs
   on the black panel; the notice scene moves it under the paper, beside "See all" */
.rx-scene[data-scene="board"] .sc-pause { top: 10px; right: 10px; background: rgb(0 0 0 / .35); color: #fff; border-color: rgb(255 255 255 / .25); box-shadow: none; }
.rx-scene[data-scene="board"] .sc-pause:hover { color: #fff; border-color: rgb(255 255 255 / .5); }
.rx-scene[data-scene="admit"] .sc-pause { top: auto; bottom: -40px; right: 0; }
.sc-pause.is-paused .i-play { display: inline; }

/* radar */
/* G21: no overflow clip or isolation here: the rounded clip forced every sweep frame through a
   masked offscreen surface (+10-14 fps at 1440 without it). The sweep is round itself, and
   the blips sit inside the disc. */
/* P20 (MO F5): the disc's vignette is a gradient, not a 60px inset blur, and its drop shadow
   sits on a static ::before behind it, so nothing the sweep passes over has a blur to
   re-rasterise (R6: radar 44 fps against /why's 55 at 4× CPU throttle). */
.sc-radar { position: relative; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0f2e26 0%, #0b241e 58%, #081b16 86%, #061511 100%);
  box-shadow: inset 0 0 0 1px rgb(120 220 180 / .18); }
.sc-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 30px 80px -30px rgb(10 34 28 / .55); }
.sc-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-grid circle, .sc-grid line { stroke: rgb(160 230 200 / .14); fill: none; }
/* the sweep turns on the compositor; its glow is a static gradient, not a filter. Only the
   trailing 90° of the beam is ever lit, so the turning layer is just that quarter of the disc
   (a quarter-circle pivoting on the centre): a quarter of the pixels to composite each frame */
/* P20: no will-change: the running animation promotes the quarter by itself, and a permanent
   layer kept a 3x-DPR backing store alive even while paused */
.sc-sweep { position: absolute; left: 0; top: 0; width: 50%; height: 50%; border-radius: 100% 0 0 0; z-index: 1; transform-origin: 100% 100%;
  background: conic-gradient(from 270deg at 100% 100%, rgb(var(--phos) / 0) 0deg 30deg, rgb(var(--phos) / .08) 60deg, rgb(var(--phos) / .45) 89deg, rgb(var(--phos) / 0) 90deg);
  animation: sc-spin var(--period, 6s) linear infinite; }
/* the beam on the quarter's right edge (12 o'clock): a bright 2px line and a soft glow, both
   fading towards the centre. The fade is in the gradients (no mask: a mask costs an extra
   offscreen pass every frame, G21) */
.sc-sweep::after { content: ""; position: absolute; right: -6px; top: 0; width: 12px; height: 100%;
  background: linear-gradient(to top, rgb(var(--phos) / 0), rgb(var(--phos) / .35) 40%, rgb(var(--phos) / .95)) 50% 0 / 2px 100% no-repeat,
              radial-gradient(50% 75% at 50% 0, rgb(var(--phos) / .22), rgb(var(--phos) / 0)) 0 0 / 100% 100% no-repeat; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
/* M27 (MO F5): the core's glow is a pre-blurred radial gradient, not a box-shadow blur the
   compositor re-rasterises over the turning sweep */
.sc-core { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgb(var(--phos)); z-index: 3; }
.sc-core::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--phos) / .55), rgb(var(--phos) / .18) 55%, rgb(var(--phos) / 0)); }
/* G30: 12px on a pill, so the count reads over a passing blip */
.sc-label { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgb(6 20 16 / .78); border: 1px solid rgb(var(--phos) / .28); font-size: .75rem; line-height: 1.3; letter-spacing: .12em; font-weight: 650; color: rgb(190 240 220 / .92); }
.sc-label:lang(hi) { letter-spacing: .02em; }
/* R8 (Q25, UF F5): the boards were last read over 6 hours ago: the pill is amber, not "LIVE" */
.sc-label.sc-stale { color: #fcd58a; border-color: rgb(245 165 36 / .55); }
/* a blip lights as the sweep passes (opacity and scale only); its glow is a static gradient
   on ::before, which is also the 24px pointer target; ::after is the ring.
   H10: nothing here animates by itself. scenes.js flares a blip once as the beam reaches it
   (and pings the ring of the one the log names), a couple at a time, instead of 24 infinite
   animations on 24 layers for the life of the page. No will-change either: a blip gets its
   own layer only while it flares. */
.sc-blip { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgb(var(--phos)); opacity: .24; }
/* a radar drawn still (paused on arrival) shows every blip clearly lit */
.sc-radar.sc-still .sc-blip { opacity: .85; }
.sc-blip.is-new { background: #f5a524; }
.sc-blip::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--phos) / .55), rgb(var(--phos) / 0)); }
.sc-blip.is-new::before { background: radial-gradient(closest-side, rgb(245 165 36 / .55), rgb(245 165 36 / 0)); }
.sc-blip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid; color: rgb(var(--phos)); opacity: 0; }
.sc-blip.is-new::after { color: #f5a524; }
.sc-blip.is-fresh { visibility: hidden; }
.sc-blip.is-fresh.found { visibility: visible; }
.sc-blip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }
.sc-tip { position: absolute; z-index: 5; width: 230px; padding: 10px 12px; border-radius: 14px; background: rgb(6 20 16 / .92); color: #e8f6ef; border: 1px solid rgb(var(--phos) / .35); font-size: .85rem; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.sc-tip.on { opacity: 1; transform: none; }
.sc-tip b { display: block; margin-bottom: 2px; color: rgb(var(--phos)); font-size: .75rem; letter-spacing: .04em; }
.sc-log { display: flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 18px; padding: 10px 14px; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgb(16 38 31 / .05), 0 10px 28px -18px rgb(16 38 31 / .3); font-size: .92rem; color: var(--ink); }
.sc-log[hidden] { display: none; }
/* J25 (MO F7): the radar fills its log line a moment after load, and showing the row then
   pushed "See all" and the verify card down (CLS 0.003). The radar's row is kept, empty and
   invisible, from the first paint; the board and the notice scenes have no log. */
.rx-scene[data-scene="radar"] .sc-log[hidden] { display: flex !important; visibility: hidden; }   /* beats the global [hidden] rule */
/* the station board is shorter than the radar drawn on the server (6 rows, 229px, under
   1024px) or taller (9 rows, about the scene's width + 64px, above it), so a board hero
   used to jump as it mounted: its stage keeps the board's height from the first paint
   instead of the radar placeholder's */
/* integ2 (g): only once scripts run (html.js); without them the radar drawn on the server stays */
:root.js .rx-scene[data-scene="board"] .sc-stage > .sc-radar[aria-hidden="true"] { display: none; }
.rx-scene[data-scene="board"] .sc-stage { min-height: 229px; }
.rx-scene[data-scene="board"]:lang(hi) .sc-stage { min-height: 234px; }
@media (min-width: 1024px) { .rx-scene[data-scene="board"] .sc-stage, .rx-scene[data-scene="board"]:lang(hi) .sc-stage { min-height: min(504px, calc(100cqw + 64px)); } }
.sc-log i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
.sc-msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; }
.sc-msg b { font-weight: 650; }
.sc-sep { margin: 0 .35em; color: var(--ink-3); }
.sc-msg .sc-found { color: var(--live-ink); }
.sc-when { margin-left: auto; flex: none; font-size: .8125rem; color: var(--ink-3); }
.sc-all { display: flex; justify-content: center; align-items: center; min-height: 32px; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.sc-all:hover { text-decoration: underline; }

/* station board: split-flap letters, amber on black, like an Indian railway station */
/* H19: on a laptop the board is as tall as the radar dial plus its log line (100cqi is the
   scene's width, i.e. the dial's diameter), and its nine rows share that height evenly */
.sc-board.sc-tall { display: flex; flex-direction: column; min-height: calc(100cqi + 64px); }
.sc-board.sc-tall .sc-brow { flex: 1; }
/* a 760-959px tablet gives a board scene 360px (not 320) so the post keeps 16 letter cells */
@media (min-width: 760px) and (max-width: 959px) { .rx-in:has(.rx-scene[data-scene="board"]) { grid-template-columns: minmax(0, 1fr) 360px; } }
/* R9 (R31, MO void8): at 760–959px the first visit's board column ended 167px above the copy
   beside it. The scene stretches over the copy's rows and its stage takes the room (the board
   then builds 9 rows, scenes.js): both columns end together. The radar already does. */
@media (min-width: 760px) and (max-width: 959px) {
  :root:not(.ret) .rx-scene[data-scene="board"] { align-self: stretch; display: flex; flex-direction: column; }
  :root:not(.ret) .rx-scene[data-scene="board"] > .sc-box { flex: 1 1 auto; display: flex; flex-direction: column; }
  :root:not(.ret) .rx-scene[data-scene="board"] .sc-stage { flex: 1 1 auto; display: flex; flex-direction: column; }
  :root:not(.ret) .rx-scene[data-scene="board"] .sc-board { flex: 1 1 auto; }
  :root:not(.ret) .rx-scene[data-scene="board"] .sc-board.sc-tall { min-height: 0; }
}
.sc-board { --cell: 11px; --gap: 9px; border-radius: 14px; padding: 14px 13px 12px; background: linear-gradient(#141614, #0b0c0b); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 2px 0 rgb(255 255 255 / .05); color: #f7c948; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; }
.sc-bh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 40px 10px 2px; border-bottom: 1px solid rgb(247 201 72 / .25); margin-bottom: 8px; }
.sc-bt { font-family: inherit; font-weight: 700; letter-spacing: .22em; font-size: clamp(.8rem, 3.2cqi, 1rem); }
.sc-clock { font-size: clamp(.75rem, 2.8cqi, .92rem); color: #ffd978; letter-spacing: .06em; }
.sc-bcols, .sc-brow { display: flex; gap: var(--gap); }
.sc-bcols { padding: 0 2px 6px; font-size: .6875rem; letter-spacing: .1em; color: rgb(247 201 72 / .6); font-weight: 700; }
.sc-bcols span, .sc-bgroup { width: calc(var(--w) * var(--cell) + (var(--w) - 1) * 1px); flex: none; }
.sc-bcols span { white-space: nowrap; overflow: hidden; }
.sc-brow { padding: 3px 2px; text-decoration: none; color: inherit; border-radius: 6px; align-items: center; }
.sc-brow:hover { background: rgb(247 201 72 / .07); }
/* P8: a group never paints past its column (a long plate overran the date at 1440 /hi) */
.sc-bgroup { display: flex; gap: 1px; overflow: hidden; }
/* contain: a letter change re-lays out only its own cell */
.sc-cell { width: var(--cell); height: calc(var(--cell) * 1.55); display: grid; place-items: center; position: relative; border-radius: 2px; contain: strict;
  background: linear-gradient(#232523 0 49%, #000 49% 51%, #1b1d1b 51%); font-size: calc(var(--cell) * 1.02); font-weight: 700; line-height: calc(var(--cell) * 1.55); text-align: center; overflow: hidden; }
/* no status column (G20): the last date itself is green for a new notice, red when closing */
.sc-brow.is-new .dt .sc-cell { color: #7ee2a8; }
.sc-brow.is-closing .dt .sc-cell { color: #ff8a7a; }
/* Hindi on the station board: whole words on a plate (letters of a joined script can't be split into tiles) */
.sc-bgroup.plate { position: relative; }
.sc-bgroup.plate .sc-cell { color: transparent; }
.sc-bgroup.plate::after { content: attr(data-text); position: absolute; inset: 0; display: block; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 2px; background: #1d1f1d; font-family: "Anek", system-ui, sans-serif; font-weight: 600; font-size: calc(var(--cell) * 1.1); line-height: calc(var(--cell) * 1.55); color: #f7c948; }
.sc-brow.is-new .dt.plate::after { color: #7ee2a8; }
.sc-brow.is-closing .dt.plate::after { color: #ff8a7a; }
.sc-bt:lang(hi), .sc-bcols:lang(hi) { letter-spacing: 0; font-family: "Anek", system-ui, sans-serif; }

/* the notice printer */
.sc-admit { position: relative; padding-top: 6px; }
.sc-printer { position: relative; z-index: 2; height: 44px; margin: 0 4%; border-radius: 14px 14px 8px 8px; background: linear-gradient(#3a4441, #232a28); box-shadow: 0 14px 30px -16px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .12); }
.sc-led { position: absolute; left: 16px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #4fe3a6; box-shadow: 0 0 8px #4fe3a6; animation: sc-led 1.6s ease-in-out infinite; }
@keyframes sc-led { 50% { opacity: .35; } }
.sc-slot { position: absolute; left: 7%; right: 7%; bottom: 7px; height: 6px; border-radius: 4px; background: #0b0f0e; box-shadow: inset 0 2px 3px rgb(0 0 0 / .8); }
.sc-tray { position: relative; z-index: 1; margin: -4px 9% 0; height: calc(100cqi * .86); overflow: hidden; }
.sc-ticket { position: absolute; left: 0; right: 0; top: 0; display: block; padding: 18px 18px 14px; border-radius: 0 0 10px 10px; background: #fff; color: #1d2826; text-decoration: none; transform: translateY(-104%); transition: transform 1.3s cubic-bezier(.35,.05,.25,1), opacity .5s; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .45); background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgb(23 99 79 / .04) 22px 23px); }
.sc-ticket.out { transform: translateY(0); }
/* done: torn off downwards, out of the tray */
.sc-ticket.gone { transform: translateY(115%); transition: transform .45s cubic-bezier(.5,0,.75,0); }
.sc-th { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid #17634f; }
.sc-th b { font-size: clamp(.95rem, 4cqi, 1.2rem); letter-spacing: .14em; color: #17634f; }
.sc-th b:lang(hi) { letter-spacing: .02em; }
.sc-no { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; color: #5b6b67; }
.sc-tb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 0 10px; }
.sc-photo { width: clamp(52px, 17cqi, 74px); aspect-ratio: 3 / 3.6; border: 1.5px dashed #9fb1ac; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .75rem; color: #17634f; background: #f2f7f5; }
.sc-fields { display: grid; gap: 7px; margin: 0; min-width: 0; }
.sc-fields div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; align-items: baseline; border-bottom: 1px dashed #d5dfdc; padding-bottom: 5px; }
.sc-fields dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6b67; }
.sc-fields dt:lang(hi) { text-transform: none; letter-spacing: 0; }
.sc-fields dd { margin: 0; min-height: 1.3em; font-size: clamp(.8rem, 3.2cqi, .95rem); font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; }
.sc-tf { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.sc-bars { width: 30%; flex: none; height: 26px; background: repeating-linear-gradient(90deg, #1d2826 0 2px, transparent 2px 4px, #1d2826 4px 5px, transparent 5px 8px, #1d2826 8px 11px, transparent 11px 12px); opacity: .85; }
.sc-note { min-width: 0; font-size: .75rem; color: #5b6b67; line-height: 1.3; }
.sc-stamp { position: relative; margin-left: auto; flex: none; display: grid; justify-items: center; padding: 5px 11px; border: 3px solid #17634f; border-radius: 10px; color: #17634f; transform: rotate(-8deg) scale(2.4); opacity: 0; mix-blend-mode: multiply; }
.sc-stamp small { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; }
.sc-stamp b { font-size: clamp(.95rem, 4.3cqi, 1.3rem); letter-spacing: .04em; line-height: 1.05; }
.sc-stamp.hot { color: #c0281b; border-color: #c0281b; }
.sc-stamp.in { opacity: .92; transform: rotate(-8deg) scale(1); transition: transform .28s cubic-bezier(.5,1.8,.6,1), opacity .12s; }
:root[data-theme="dark"] .sc-ticket { background-color: #f4f6f5; }

/* phones (<600px): a compact live strip instead of the scene: a small dial whose sweep turns
   on the compositor, and the newest notice as one tappable line (scenes.js cycles five) */
.rx-strip { display: none; }
@media (max-width: 599px) {
  .rx-scene { display: none; }
  .rx-strip { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 8px 8px 8px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-1); }
}
/* M27 (MO F4): the dial is 64×64 from the first paint and contains its own layout, so
   scenes.js adding the blip never re-lays out the strip */
.xs-dial { position: relative; flex: none; width: 64px; height: 64px; contain: size layout paint; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #0f2e26 0%, #0a221c 70%); box-shadow: inset 0 0 0 1px rgb(120 220 180 / .2); }
.xs-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xs-dial circle, .xs-dial line { stroke: rgb(160 230 200 / .2); stroke-width: 1.5; fill: none; }
.xs-sweep { position: absolute; inset: 0; border-radius: 50%; will-change: transform; background: conic-gradient(from 0deg, rgb(79 227 166 / 0) 0deg, rgb(79 227 166 / 0) 280deg, rgb(79 227 166 / .12) 320deg, rgb(79 227 166 / .6) 359deg, rgb(79 227 166 / 0) 360deg); animation: sc-spin 4s linear infinite; }
.xs-core { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgb(79 227 166); }
.xs-paused .xs-sweep { animation-play-state: paused; }
/* the blip the sweep "finds" as the line changes (scenes.js places it, then fades it) */
.xs-blip { position: absolute; left: 50%; top: 50%; z-index: 2; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgb(79 227 166); opacity: 0; will-change: transform, opacity; }
.rx-strip:has(.xs-fresh) .xs-blip { background: #f5a524; }
.xs-ping { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(79 227 166); opacity: 0; }
.rx-strip:has(.xs-fresh) .xs-ping { border-color: #f5a524; }
/* which of the five is showing */
/* the five dots arrive with scenes.js: they sit in the item's bottom padding and the strip's,
   absolutely, so a two-line title plus the dots never makes the strip taller (M27) */
.xs-dots { position: absolute; left: 0; bottom: -3px; display: flex; gap: 5px; }
.xs-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); transition: background-color .2s, transform .2s; }
/* H25: amber means "new" everywhere (the radar's new blips, the banner); a strip line that
   is only the latest uses the brand green, and turns amber when it is truly new */
.xs-dots i.on { background: var(--brand); transform: scale(1.3); }
.xs-fresh .xs-dots i.on { background: var(--live); }
.xs-item { position: relative; flex: 1; min-width: 0; display: grid; gap: 2px; padding-block: 2px 5px; color: var(--ink); text-decoration: none; }
.xs-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8125rem; color: var(--ink-2); }
.xs-ago { font-variant-numeric: tabular-nums; }
.xs-meta b { color: var(--brand); font-weight: 700; }
.xs-fresh .xs-meta b { color: var(--live-ink); }
.xs-board { font-weight: 600; color: var(--ink); }
.xs-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.xs-item:active .xs-title { color: var(--brand); }
.rx-strip .xs-pause { position: static; flex: none; align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .rx-kicker i::after, .sc-sweep, .sc-led, .xs-sweep { animation: none !important; }
  .xs-dots i { transition: none; }
  .sc-blip { opacity: .85; }
  .sc-blip.is-fresh { visibility: visible; }
  .sc-ticket, .sc-stamp, .sc-tip { transition: none !important; }
}
/* ==== end hero scenes ==== */

/* dark page: give the radar dial an edge so it doesn't melt into the background */
:root[data-theme="dark"] .sc-radar { box-shadow: 0 0 0 1px rgb(166 217 187 / .18); }
:root[data-theme="dark"] .sc-radar::before { box-shadow: 0 30px 80px -24px rgb(40 118 89 / .45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-radar { box-shadow: 0 0 0 1px rgb(166 217 187 / .18); }
  :root:not([data-theme="light"]) .sc-radar::before { box-shadow: 0 30px 80px -24px rgb(40 118 89 / .45); }
}

/* FIXES-R6 step 0: the returning-visitor hero layout (html.ret, M19/OD30) moved here from
   design.css so one workstream (B) owns the hero composition: scene size, columns, the gap
   above the tabs. scene.css loads after design.css and shared.css, so the cascade is unchanged. */
/* -- M19 (OD30) and P9 (OD47): a returning visitor on a tablet or laptop sees a job on the
   first screen. The headline and the kicker are for first-timers: both stay for screen
   readers only (the stats line names the boards instead, and the dial's pill says LIVE). The
   left column is search, Your exams and the stats line; the scene is a 240px column holding
   a 180px dial and its log line, so both columns end within a few px of each other and the
   tabs follow 12px under them (R6: a 320px dial left a 115px band and the tabs at y479).
   "Closing this week" gives way to the feed's own Closing soon list. Top-aligned columns:
   centring the shorter one opened a band above it. First-timers unchanged. */
@media (min-width: 768px) {
  :root.ret .rx { padding-block: 12px 0; }
  :root.ret .rx-h { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.ret .rx-kicker { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.ret .rx-kicker i::after { animation: none; }
  :root.ret .rx-in { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
  :root.ret .rx-scene { width: 240px; justify-self: end; }
  :root.ret .rx-scene .sc-radar { width: 180px; margin-inline: auto; }
  :root.ret .rx-scene .sc-label { padding: 2px 8px; font-size: .6875rem; letter-spacing: .08em; }
  /* the search spans the column, so Your exams (100% of it, P10) shares its right edge */
  :root.ret .rx-search { max-width: none; }
  :root.ret .rx-copy > .cw, :root.ret .vc-hero, :root.ret .rx-scene .sc-all { display: none; }
  :root.ret .rx-stats { margin-top: 12px; }
  :root.ret .rx-stats .rx-st-boards { display: inline-flex; }
  :root.ret .rx-scene .sc-log { margin-top: 10px; padding: 8px 12px; gap: 8px; }
  :root.ret .rx + .home { padding-top: 12px; }
}
/* a tablet's 492px column takes the short labels ("19 open") and leaves the board count to
   the dial's "LIVE · 463 BOARDS", so the stats stay one line and the columns end together */
@media (min-width: 768px) and (max-width: 1023px) {
  :root.ret .rx-stats .rx-st-boards { display: none; }
  :root.ret .rx-stats .l-long { display: none; }
  :root.ret .rx-stats .l-short { display: inline; }
}
@media (min-width: 1024px) {
  :root.ret .rx-in { gap: 40px; }
}