/* ─── Sansar, the sky-glass pass (2026-10) ─────────────────────────────────────────────────────────────────────
   Loaded after site.css, which keeps the tokens, layout and components. This file makes the pages sit *in* the sky:
   translucent glass surfaces with a hairline edge and depth, Poppins headings on a firmer type scale, tabular figures,
   and purposeful motion (a load sequence on page heads, sections rising in on scroll, live elements that glow and draw
   themselves in). Everything is scoped to body.rd (every page but Daily, which gets its own pass), works in both themes
   (html.light / html.dark, prefers-color-scheme without a class) and at phone width, and stands still under
   prefers-reduced-motion. Content is visible at rest without JavaScript: reveals only ever hide what motion.js has
   marked, or what a CSS scroll timeline is actively animating. */

:root {
  --display: "Poppins", var(--sans);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
  /* Glass, day: frosted white over the blue. */
  --glass: oklch(1 0 0 / 0.62);
  --glass-strong: oklch(1 0 0 / 0.8);
  --glass-hover: oklch(1 0 0 / 0.74);
  --glass-edge: oklch(0.35 0.03 255 / 0.12);
  --glass-hi: inset 0 1px 0 oklch(1 0 0 / 0.7);
  --glass-shadow: 0 1px 2px oklch(0.3 0.04 255 / 0.06), 0 14px 36px -18px oklch(0.3 0.06 255 / 0.32);
  --glass-blur: blur(18px) saturate(1.5);
  --light: oklch(1 0 0 / 0.55);                        /* the pointer's light on a card */
  --live: var(--series-2);
  --hairline: oklch(0.35 0.03 255 / 0.12);
  --glow-mix: 45%;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --glass: oklch(0.22 0.025 266 / 0.52);
    --glass-strong: oklch(0.2 0.025 266 / 0.78);
    --glass-hover: oklch(0.26 0.03 266 / 0.6);
    --glass-edge: oklch(0.9 0.02 260 / 0.11);
    --glass-hi: inset 0 1px 0 oklch(1 0 0 / 0.07);
    --glass-shadow: 0 1px 2px oklch(0 0 0 / 0.25), 0 20px 44px -22px oklch(0 0 0 / 0.75);
    --light: oklch(0.85 0.05 260 / 0.09);
    --hairline: oklch(0.9 0.02 260 / 0.1);
    --glow-mix: 75%;
  }
}
:root.dark {
  --glass: oklch(0.22 0.025 266 / 0.52);
  --glass-strong: oklch(0.2 0.025 266 / 0.78);
  --glass-hover: oklch(0.26 0.03 266 / 0.6);
  --glass-edge: oklch(0.9 0.02 260 / 0.11);
  --glass-hi: inset 0 1px 0 oklch(1 0 0 / 0.07);
  --glass-shadow: 0 1px 2px oklch(0 0 0 / 0.25), 0 20px 44px -22px oklch(0 0 0 / 0.75);
  --light: oklch(0.85 0.05 260 / 0.09);
  --hairline: oklch(0.9 0.02 260 / 0.1);
  --glow-mix: 75%;
}

/* ─── Type ─── */
.rd { --card-title: 600 15px/1.35 var(--display); --card-num: 600 1.05rem/1.35 var(--sans); --card-num-lg: 600 1.85rem/1.15 var(--sans); }
.rd h1, .rd h2, .rd h3, .rd h4 { font-family: var(--display); }
.rd h1 { font-weight: 600; letter-spacing: -0.025em; }
.rd h2 { font-weight: 600; letter-spacing: -0.015em; }
.rd h3, .rd h4 { letter-spacing: -0.01em; }
.rd .page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
.rd .page-head h1 .deva { font-family: var(--deva); }
.rd .lede { text-wrap: pretty; line-height: 1.6; }
.rd .section { padding: 40px 0; }
.rd .section-head { margin-bottom: 18px; }
.rd .section-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
/* A track's reference table: the one-line method above it (Voice: how the bake-off was scored). */
.rd .ref-method { margin: -6px 0 14px; max-width: 52rem; font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }
.rd .ref-method strong { color: var(--foreground); font-weight: 600; }
.rd .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--sansar); letter-spacing: .12em; font-size: 11.5px; }
.rd .kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent); }
.rd .stats dd, .rd .mini-stats dd, .rd .headline .v, .rd .track-card .best .v, .rd .glance dd, .rd table, .rd .facts dd,
.rd .progress-label, .rd .cap, .rd .count, .rd time { font-variant-numeric: tabular-nums; }

/* ─── Glass surfaces ─── */
.rd .card, .rd .lab-tabs, .rd .consent {
  background-color: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.rd .card { border-radius: 16px; transition: background-color .25s, border-color .25s, box-shadow .3s, transform .3s var(--ease-out); }
/* The pointer's light: a soft disc under the cursor (motion.js sets --mx/--my; no JS, no light). */
.rd .card:hover, .rd figure.chart:hover { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), var(--light), transparent 65%); }
.rd .table-wrap {
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 16px;
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.rd table.data thead th { background: color-mix(in oklch, var(--foreground) 4%, transparent); }
.rd table.data th, .rd table.data td { border-bottom-color: var(--hairline); }
.rd table.data tbody tr { transition: background-color .15s; }
.rd table.data tbody tr:hover { background: color-mix(in oklch, var(--foreground) 4.5%, transparent); }
.rd .tip, .rd .info-pop, .rd .menu-pop {
  background: var(--glass-strong); border-color: var(--glass-edge); border-radius: 10px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--glass-shadow);
}
.rd .badge-outline { border-color: var(--hairline); background: color-mix(in oklch, var(--foreground) 3%, transparent); }
.rd .input, .rd select.input, .rd textarea.input { background-color: color-mix(in oklch, var(--background) 45%, transparent); border-color: var(--glass-edge); }
.rd .input:hover { border-color: color-mix(in oklch, var(--foreground) 22%, transparent); }
.rd .btn-outline { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rd .btn-outline:hover { background: var(--glass-hover); }
.rd .seg { background: var(--glass); border-color: var(--glass-edge); }
.rd .mini-stats, .rd figure.chart .chart-box > .chart-table, .rd .live-card .lc-foot { border-color: var(--hairline); }
.rd .chart-box .dot { stroke: color-mix(in oklch, var(--background) 80%, transparent); }
.rd .chart-box .hollow { fill: color-mix(in oklch, var(--background) 80%, transparent); }
.rd .callout { background: color-mix(in oklch, var(--sansar-soft) 75%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Press and hover: buttons give a little under the finger; things that go somewhere lift. */
.rd .btn { transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s var(--ease-out); }
.rd .btn:active, .rd .chip:active, .rd .more-btn:active, .rd .lab-tabs a:active { transform: scale(.97); }
.rd .track-card:hover, .rd .chip:hover, .rd a.card:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--foreground) 18%, var(--glass-edge)); box-shadow: var(--glass-hi), var(--glass-shadow), 0 22px 40px -26px color-mix(in oklch, var(--accent, var(--sansar)) 55%, transparent); }
.rd .lab-entry a, .rd .scroll-cue, .rd .more-btn { transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ease-out); }
.rd .lab-entry a > span[aria-hidden], .rd .dt-more span[aria-hidden] { display: inline-block; transition: transform .25s var(--ease-out); }
.rd .lab-entry a:hover > span[aria-hidden], .rd a:hover .dt-more span[aria-hidden] { transform: translateX(3px); }
.rd .lab-entry a { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rd .lab-entry a:hover { border-color: color-mix(in oklch, var(--sansar) 45%, var(--glass-edge)); }
.rd .more-btn { background: var(--glass); border-color: var(--glass-edge); }

/* Track tabs: a glass pill; the current tab is a raised chip. */
.rd .lab-tabs { padding: 4px; }
.rd .lab-tabs a { transition: color .15s, background-color .2s; }
.rd .lab-tabs a[aria-current="page"] { background: color-mix(in oklch, var(--foreground) 9%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.rd .lab-tabs .dot { box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 70%, transparent); }

/* Header: the nav's current page gets the same raised chip. */
.rd .site-nav a[aria-current="page"] { background: color-mix(in oklch, var(--foreground) 8%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.rd .brand a span.site-name { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

/* ─── Load sequence: a page's head (and the overview's hero) rises in, line by line ─── */
@keyframes rd-rise { from { opacity: 0; translate: 0 14px; filter: blur(4px); } to { opacity: 1; translate: none; filter: none; } }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .rd .page-head > *, .rd .hero > *, .rd .fold > .lab-tabs, .rd .fold > .live-section, .rd .glance, .rd .scroll-cue {
    animation: rd-rise .8s var(--ease-out) both;
  }
  .rd .page-head > :nth-child(2), .rd .hero > :nth-child(2) { animation-delay: .07s; }
  .rd .page-head > :nth-child(3), .rd .hero > :nth-child(3) { animation-delay: .14s; }
  .rd .page-head > :nth-child(4), .rd .hero > :nth-child(4) { animation-delay: .21s; }
  .rd .page-head > :nth-child(n+5), .rd .hero > :nth-child(n+5) { animation-delay: .28s; }
  .rd .glance { animation-delay: .2s; }
  .rd .fold > .lab-tabs { animation-delay: .3s; }
  .rd .fold > .live-section { animation-delay: .38s; }
  .rd .scroll-cue { animation: rd-fade 1s .9s both; }
}

/* ─── Scroll reveals (motion.js tags .reveal) ───
   With scroll-driven animations, each element rises as it enters, tied to the scroll (and complete once 60% in or
   120px past the edge, whichever first, so tall ones never sit half-faded). Without them, .pre (set only on elements
   still below the screen at load) is lifted by an IntersectionObserver. */
@keyframes rd-reveal { from { opacity: 0; translate: 0 28px; scale: .985; } to { opacity: 1; translate: none; scale: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rd-sda .rd .reveal { animation: rd-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .rd-sda .rd .reveal.table-wrap, .rd-sda .rd .reveal.prose-tall { animation-range: entry 0% entry 120px; }
  .rd .reveal.pre { opacity: 0; translate: 0 24px; }
  .rd .reveal { transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(var(--rd-i, 0) * 70ms); }
}

/* ─── The overview's first fold: one screen, always ─── */
.rd .fold[data-hero] {
  position: relative; justify-content: center; gap: 0;
  min-height: calc(100vh - 56px); min-height: calc(100svh - 56px);
  padding: 20px 0 64px;                                   /* the bottom: room for the scroll cue */
}
.rd .fold[data-hero] > .live-section { margin-top: 0; padding: 28px 0 0; }
.rd .fold[data-hero] .lab-tabs { margin: 28px 0 0; }
/* The track pages: when something is live the fold is the screen less the header (no cap, so the next section never
   peeks in as a lone heading on a taller screen), its content centred. */
.rd .fold.has-live:not([data-hero]) { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); justify-content: center; padding-bottom: 24px; }
.rd .fold.has-live:not([data-hero]) > .live-section { margin-top: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr); gap: 24px 56px; align-items: end; }
.rd .hero-grid > .page-head { padding: 0; }
.rd .hero-grid h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); max-width: 14ch; }
.rd .hero-grid .lede { font-size: 1.125rem; max-width: 38rem; margin-top: 18px; }
.rd .hero-grid .lab-entry { margin-top: 24px; }

/* The log so far: four numbers on glass. */
.glance { padding: 22px 24px 18px; position: relative; overflow: hidden; }
.glance::before {                                          /* a faint saffron dawn in the corner */
  content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--sansar) 16%, transparent), transparent);
  opacity: .7;
}
.glance-h { position: relative; margin: 0 0 14px; font: 600 11.5px/1.4 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.glance dl { position: relative; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.glance dl > div { min-width: 0; }
.glance dt { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.glance dd { margin: 2px 0 0; font: 600 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.glance-foot { position: relative; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted-foreground); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; border-radius: 10px;
}
.scroll-cue:hover { color: var(--foreground); }
.scroll-cue svg { animation: rd-bob 2.4s ease-in-out infinite; }
@keyframes rd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ─── Live now: tiles that use the width ───
   One job: one wide card (the curve big on the right). Two: halves. Three or more: thirds, and the row scrolls sideways
   past three. Tablets: halves; phones: one card and a sliver of the next. */
/* The row bleeds into the page gutter and below, so the cards' shadow and glow are not cut by its scroll box. */
.rd .live-row { --bleed: 24px; --live-card-w: calc((100% - 32px) / 3); container-type: inline-size;
  padding: 4px var(--bleed) 36px; margin: -4px calc(-1 * var(--bleed)) -32px; scroll-padding-inline: var(--bleed); }
.rd .live-row > :only-child { --live-card-w: 100%; }
@media (min-width: 1024px) {
  .rd .live-row > :first-child:nth-last-child(2), .rd .live-row > :first-child:nth-last-child(2) ~ * { --live-card-w: calc((100% - 16px) / 2); }
}
.rd .live-grid { container-type: inline-size; }
.rd .live-grid > .live-card:only-child { grid-column: 1 / -1; }   /* one job on /runs or a run page: the wide card */
@media (max-width: 1023px) and (min-width: 641px) {
  .rd .live-row > * { --live-card-w: calc((100% - 16px) / 2); }
  .rd .live-row > :only-child { --live-card-w: 100%; }
}
.rd .live-row > .skeleton:only-child { height: 252px; }

.rd .live-card { position: relative; border-radius: 16px; }
.rd .live-card .spark .ln { stroke: var(--live); }      /* the curve in the track's colour (live.js sets --live per card) */
.rd .live-card h3 { font-size: 16px; }
.rd .live-card.is-running {
  border-color: color-mix(in oklch, var(--live) 30%, var(--glass-edge));
  box-shadow: var(--glass-hi), var(--glass-shadow), 0 0 0 1px color-mix(in oklch, var(--live) 10%, transparent),
              0 14px 40px -22px color-mix(in oklch, var(--live) var(--glow-mix, 70%), transparent);
}
/* A light that runs along the top edge of a running card, every few seconds. */
.rd .live-card.is-running::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; pointer-events: none; border-radius: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--live) 90%, white) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%; background-position: -60% 0; opacity: .9;
  animation: rd-edge 5s var(--ease-out) infinite 1.2s;
}
@keyframes rd-edge { 0% { background-position: -60% 0; } 45%, 100% { background-position: 160% 0; } }
.rd .badge.running { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--good) 25%, transparent); }
.rd .badge.running .dot { animation: rd-ping 1.8s ease-out infinite; }
@keyframes rd-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }
.rd .progress { height: 6px; background: color-mix(in oklch, var(--foreground) 9%, transparent); }
.rd .progress > span {
  position: relative; overflow: hidden; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in oklch, var(--live) 70%, transparent), var(--live));
  box-shadow: 0 0 12px color-mix(in oklch, var(--live) 60%, transparent);
  animation: rd-fill 1.4s var(--ease-out) both .3s;
}
.rd .progress > span::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(1 0 0 / .55), transparent);
  translate: -100% 0; animation: rd-sheen 3.2s ease-in-out infinite 2s;
}
@keyframes rd-fill { from { transform: scaleX(0); } }
@keyframes rd-sheen { 0% { translate: -100% 0; } 60%, 100% { translate: 100% 0; } }
.rd .stats dd { font-family: var(--sans); }
.spark-box { position: relative; }
.rd .live-card .spark { animation: rd-draw 1.6s var(--ease-out) both .45s; }
@keyframes rd-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rd .spark .area2 { fill: var(--live); fill-opacity: .12; }
.spark-end {
  position: absolute; left: 100%; top: calc(var(--ey, .5) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px color-mix(in oklch, var(--live) 25%, transparent), 0 0 14px var(--live);
  transition: top .9s var(--ease-out); pointer-events: none;
  animation: rd-fade .4s both 1.9s;
}
.spark-end[hidden] { display: none; }
.live-card.is-running .spark-end::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--live); animation: rd-halo 2s ease-out infinite 2.2s; opacity: 0; }
@keyframes rd-halo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.rd .spark-wrap.is-empty .spark { border-color: var(--hairline); background: color-mix(in oklch, var(--foreground) 3%, transparent); }

/* One live job: the wide card, three columns on a wide row (who and how far | the numbers | the curve, large), two on
   a narrower one (facts | curve). */
@container (min-width: 820px) {
  .rd .live-card:only-child {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 32px; row-gap: 12px;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "head spark" "chips spark" "prog spark" "stats spark" "foot spark";
    padding: 20px 24px;
  }
  .rd .live-card:only-child > .lc-head { grid-area: head; }
  .rd .live-card:only-child > .chips-row { grid-area: chips; }
  .rd .live-card:only-child > .lc-progress { grid-area: prog; }
  .rd .live-card:only-child > .stats { grid-area: stats; align-self: start; padding-top: 2px; }
  .rd .live-card:only-child > .lc-foot { grid-area: foot; }
  .rd .live-card:only-child > .spark-wrap { grid-area: spark; display: flex; flex-direction: column; min-height: 0; }
  .rd .live-card:only-child .spark-box { flex: 1; min-height: 0; display: flex; }
  .rd .live-card:only-child .spark { height: 100%; min-height: 110px; }
  .rd .live-card:only-child h3 { font-size: 18px; }
}
@container (min-width: 1000px) {
  .rd .live-card:only-child {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 1.2fr); column-gap: 0; row-gap: 10px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head stats spark" "chips stats spark" "prog stats spark" "foot stats spark";
  }
  .rd .live-card:only-child > .lc-head, .rd .live-card:only-child > .chips-row,
  .rd .live-card:only-child > .lc-progress, .rd .live-card:only-child > .lc-foot { margin-right: 28px; }
  .rd .live-card:only-child > .stats {
    align-self: stretch; align-content: center; padding: 0 24px; gap: 16px 12px;
    border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  }
  .rd .live-card:only-child > .lc-foot { align-self: end; }
  .rd .live-card:only-child > .spark-wrap { padding-left: 28px; }
  .rd .live-card:only-child .stats dd { font-size: 1.3rem; }
  .rd .live-card:only-child .spark { min-height: 120px; }
}

/* ─── Track cards: the track's colour as a dawn at the top edge ─── */
.rd .track-card { border-top: 1px solid var(--glass-edge); position: relative; isolation: isolate; overflow: hidden; }
.rd .track-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 100% at 0% 0%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 70%);
}
.rd .track-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 0%, transparent));
}
.rd .track-card h3 { font-size: 1.15rem; }
.rd .track-card h3 .dot { box-shadow: 0 0 10px var(--accent); }
.rd .track-card .best .v { font-size: 2rem; letter-spacing: -0.025em; }

/* Headline score cards on a run page, facts, story: glass already; the headline gets the track's glow. */
.rd .headline .headline-main { background-image: radial-gradient(100% 120% at 0% 0%, color-mix(in oklch, var(--accent, var(--sansar)) 16%, transparent), transparent 70%); }
.rd .headline .v { font-family: var(--display); }

/* Daily teaser on the overview: glass with the saffron rule. */
.rd .daily-teaser { border-left: 3px solid var(--sansar); }

/* ─── Demo ─── */
.rd .hero { padding: 64px 0 32px; }
.rd .hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.rd .hero h1 .deva { text-shadow: 0 0 32px color-mix(in oklch, var(--sansar) 45%, transparent); }
.rd .composer { padding: 18px 20px 16px; }
.rd .composer .label { color: var(--muted-foreground); }
.rd .composer textarea { background: color-mix(in oklch, var(--background) 35%, transparent); }
.rd .out { margin-top: 14px; }
.rd .chip { background-color: var(--glass); border-color: var(--glass-edge); border-radius: 12px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--glass-shadow); transition: transform .25s var(--ease-out), border-color .2s, background-color .2s, box-shadow .25s; }
.rd .chip:hover { background-color: var(--glass-hover); }
.rd .tok-row .track { background: color-mix(in oklch, var(--foreground) 8%, transparent); }
.rd .tok-row .bar { border-radius: 0 999px 999px 0; }
.rd .published { margin-top: 16px; }

/* ─── Footer: a touch of glass under the links ─── */
.rd .site-footer h4 { font-family: var(--display); }

/* ─── Narrow screens ─── */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rd .hero-grid h1 { max-width: none; }
  .glance dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rd .section { padding: 28px 0; }
  .rd .fold[data-hero] { padding: 16px 0 52px; justify-content: flex-start; }
  .rd .hero-grid h1 { font-size: 2rem; }
  .rd .hero-grid .lede { font-size: 15px; margin-top: 10px; line-height: 1.55; }
  .rd .hero-grid .lab-entry { margin-top: 14px; }
  .hero-grid { gap: 16px; }
  .rd .glance { display: none; }                 /* phones: the hero and Live now share the screen; the numbers wait below */
  .rd .live-row { --bleed: 16px; }
  .rd .fold[data-hero] .lab-tabs { margin-top: 18px; }
  .rd .fold[data-hero] > .live-section { padding-top: 20px; }
  .rd .live-row > * { --live-card-w: calc(100% - 44px); }
  .rd .live-row > :only-child { --live-card-w: 100%; }
  .rd .hero { padding: 36px 0 20px; }
  .rd .composer { padding: 14px; }
  .rd .card { border-radius: 14px; }
}
/* Short laptop screens: a tighter hero so hero, tabs and the live card share one screen. */
@media (max-height: 860px) and (min-width: 641px) {
  .rd .fold[data-hero] { padding-top: 12px; padding-bottom: 52px; }
  .rd .hero-grid h1 { font-size: clamp(2.1rem, 3.7vw, 3rem); }
  .rd .hero-grid .lede { font-size: 1.0625rem; margin-top: 12px; }
  .rd .hero-grid .lab-entry { margin-top: 16px; }
  .rd .fold[data-hero] .lab-tabs { margin-top: 20px; }
  .rd .fold[data-hero] > .live-section { padding-top: 20px; }
  .glance { padding: 18px 20px 14px; }
  .glance dl { gap: 12px 18px; }
}

/* ─── Reduced motion: everything at rest ─── */
@media (prefers-reduced-motion: reduce) {
  .rd .live-card.is-running::before, .rd .progress > span::after, .live-card.is-running .spark-end::after, .scroll-cue svg { animation: none; display: none; }
  .scroll-cue svg { display: inline; }
  .rd .track-card:hover, .rd .chip:hover, .rd a.card:hover { transform: none; }
}

/* Several live jobs on a laptop screen: compact cards, so the row still ends inside the first screen. */
@media (max-height: 1000px) and (min-width: 641px) {
  .rd .fold .live-row .live-card:not(:only-child) { --card-pad: 16px 18px; gap: 10px; }
  .rd .fold .live-row .live-card:not(:only-child) .spark { height: 42px; }
  .rd .fold .live-row .live-card:not(:only-child) .stats { gap: 6px 12px; }
  .rd .fold .live-row > .skeleton:not(:only-child) { height: 296px; }
}
@media (max-height: 1000px) and (min-width: 641px) {
  .rd .fold[data-hero]:has(.live-row > :nth-child(2)) .hero-grid h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
  .rd .fold[data-hero]:has(.live-row > :nth-child(2)) .hero-grid .lede { margin-top: 10px; }
  .rd .fold[data-hero]:has(.live-row > :nth-child(2)) .lab-tabs { margin-top: 18px; }
  .rd .fold[data-hero]:has(.live-row > :nth-child(2)) > .live-section { padding-top: 16px; }
  .rd .fold[data-hero]:has(.live-row > :nth-child(2)) > .live-section .section-head { margin-bottom: 10px; }
  .rd .fold .live-row .live-card:not(:only-child) .spark { height: 36px; }
}
/* The cue only when it fits on the screen with everything above it (motion.js); otherwise the fold just ends. */
.rd .fold[data-hero].cue-off { padding-bottom: 20px; }
.rd .fold[data-hero].cue-off .scroll-cue { display: none; }

@media print {
  .rd .reveal, .rd .page-head > *, .rd .hero > * { animation: none !important; opacity: 1 !important; translate: none !important; }
  .rd .card, .rd .table-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* A live card always fits what it holds, at any width: the step line wraps (the percentage drops below it if it must),
   the chips wrap to a second line instead of being cut, and a long value wraps rather than being truncated, whatever
   the run publishes (129,096 of 129,096; $133.40; 2 d 12 h; 0.60551 @128k; "≈ under a minute"). Phones also put the
   numbers in two columns, so no label is ever cut. */
.rd .live-card .progress-label { flex-wrap: wrap; white-space: normal; row-gap: 0; }
.rd .live-card .progress-label > span { white-space: nowrap; }
.rd .live-card .chips-row { flex-wrap: wrap; height: auto; overflow: visible; row-gap: 6px; }
.rd .live-card .chips-row.is-clipped { -webkit-mask-image: none; mask-image: none; }
.rd .live-card .stats dt, .rd .live-card .stats dd { overflow: visible; text-overflow: clip; }
.rd .live-card .stats dt { white-space: normal; line-height: 1.3; }
.rd .live-card .stats dd { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.rd .live-card .stats dd .at { white-space: nowrap; }
.rd .live-card .lc-foot { white-space: normal; }
.rd .live-card .spark-wrap .cap { flex-wrap: wrap; height: auto; white-space: normal; }
@media (max-width: 640px) {
  .rd .live-row .stats, .rd .live-grid .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}

/* ─── Daily Sanskrit (/daily): one screen per item ───────────────────────────────────────────────────────────────────
   The text beside the chant, the translation and the actions on a wide screen (stacked on a narrow one); the story,
   meaning, words, pronunciation and notes below as tabs (static/js/daily.js; stacked without it). Long texts and long
   translations are clamped to a few lines with a "show all" button once JS has measured them, and open by themselves
   when the chant plays. While the chant plays, the line being chanted lights up (line times from chant.json). */
.rd .daily-page { max-width: 74rem; }
.rd .daily-page.daily-wide { max-width: 72rem; }
.rd .daily-bar { padding: 22px 0 12px; }
.rd .daily-card { padding: 26px 32px 22px; }
.rd .daily-head h1 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.rd .daily-meta { margin-bottom: 8px; }
.rd .kind-chip { gap: 6px; border: 1px solid color-mix(in oklch, currentColor 22%, transparent); }
.rd .kind-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.rd .kind-dot::before { content: none; }

.daily-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px 36px; margin-top: 20px; align-items: start; }
.rd .daily-text { margin: 0; padding: 20px 0 16px 24px; border-left: 3px solid var(--sansar);
  background: linear-gradient(90deg, color-mix(in oklch, var(--sansar) 7%, transparent), transparent 70%); border-radius: 0 12px 12px 0; }
.rd .daily-text .verse-deva { font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.85; }
.rd .daily-text.is-long .verse-deva { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.85; }
.rd .daily-text .verse-iast { font-size: 1rem; }
.rd .script-toggle { top: -15px; right: 8px; background: var(--glass-strong); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.daily-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd .daily-side > * { margin: 0; }
.rd .daily-audio.chant { padding: 12px 14px; border-color: color-mix(in oklch, var(--sansar) 25%, var(--glass-edge)); border-radius: 14px;
  background: color-mix(in oklch, var(--sansar-soft) 45%, transparent); }
.rd .daily-audio.chant.is-playing { box-shadow: 0 0 0 1px color-mix(in oklch, var(--sansar) 25%, transparent), 0 12px 32px -18px color-mix(in oklch, var(--sansar) 70%, transparent); }
.rd .chant-play { box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--sansar) 70%, transparent); transition: transform .2s var(--ease-spring), background .15s; }
.rd .chant-play:hover { transform: scale(1.06); }
.rd .chant-play:active { transform: scale(.94); }
.rd .is-playing .chant-play { animation: rd-breathe 2.4s ease-in-out infinite; }
@keyframes rd-breathe { 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--sansar) 18%, transparent), 0 6px 18px -6px color-mix(in oklch, var(--sansar) 70%, transparent); } }
.rd .daily-translation p { font-size: 1.125rem; line-height: 1.6; }
.rd .daily-actions { gap: 8px; }
.rd .daily-actions .btn[data-daily="another"] svg { transition: transform .4s var(--ease-out); }
.rd .daily-actions .btn[data-daily="another"]:hover svg { transform: rotate(180deg); }
.rd .daily-actions .btn[aria-busy="true"] svg { animation: rd-spin .8s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* Clamp a long text or translation to a few lines (daily.js adds .is-clamped only when it overflows), with a fade and
   a button; never without JS. */
.rd .is-clamped > .verse:not([hidden]), .rd .daily-translation.is-clamped > p { max-height: var(--clamp, 14rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.2em), transparent); mask-image: linear-gradient(#000 calc(100% - 3.2em), transparent); }
.rd .daily-text.is-clamped { --clamp: 16.5rem; }
/* clamped, only the chosen script shows; the other comes back with the whole text */
.rd .daily-text[data-script="deva"].is-clamped > .verse-iast, .rd .daily-text[data-script="iast"].is-clamped > .verse-deva { display: none; }
.rd .daily-translation.is-clamped { --clamp: 11.5rem; }
.show-all { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 13px/1.4 var(--sans); color: var(--sansar); border-radius: 6px; }
.show-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.show-all:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Verse lines: in one by one on load; while the chant plays, the line being chanted lights up and the rest dim. */
.daily-text .vl { display: inline-block; border-radius: 8px; transition: opacity .35s ease, background-color .35s ease, text-shadow .35s ease; }
.daily-text.is-timed .vl { cursor: pointer; }
.daily-text.is-chanting .vl { opacity: .42; }
.daily-text.is-chanting .vl.is-now { opacity: 1; background: color-mix(in oklch, var(--sansar) 13%, transparent);
  box-shadow: 0 0 0 .14em color-mix(in oklch, var(--sansar) 13%, transparent); text-shadow: 0 0 22px color-mix(in oklch, var(--sansar) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .rd .daily-text .vl { animation: rd-rise .75s var(--ease-out) backwards; animation-delay: calc(.12s + min(var(--i, 0), 10) * .11s); }
  .rd .daily-side > *, .rd .daily-head > * { animation: rd-rise .7s var(--ease-out) both; }
  .rd .daily-head > :nth-child(2) { animation-delay: .06s; }
  .rd .daily-side > :nth-child(1) { animation-delay: .25s; }
  .rd .daily-side > :nth-child(2) { animation-delay: .33s; }
  .rd .daily-side > :nth-child(3) { animation-delay: .41s; }
  .rd .daily-card.is-leaving { opacity: 0; translate: 0 -8px; filter: blur(3px); transition: opacity .18s ease, translate .18s ease, filter .18s ease; }
}

/* The tabs: a glass pill row like the lab's track tabs; one panel at a time. */
.daily-more { margin-top: 26px; }
.rd .daily-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; width: fit-content; max-width: 100%;
  border: 1px solid var(--glass-edge); border-radius: 22px; background: var(--glass); }
.rd .daily-tabs::-webkit-scrollbar { display: none; }
.rd .daily-tabs button { all: unset; cursor: pointer; white-space: nowrap; padding: 6px 14px; border-radius: 999px; font: 500 13.5px/1.4 var(--sans); color: var(--muted-foreground); transition: color .15s, background-color .2s; }
.rd .daily-tabs button:hover { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 5%, transparent); }
.rd .daily-tabs button[aria-selected="true"] { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 9%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.rd .daily-tabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.rd .daily-more.is-tabbed > .daily-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.rd .daily-more.is-tabbed > .daily-sec > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd .daily-more.is-tabbed > .daily-fact { padding: 16px 18px; }
.rd .daily-more.is-tabbed > [role="tabpanel"]:not([hidden]) { animation: rd-fade .35s ease both; }
.rd .daily-sec p { max-width: 46rem; }
.rd .daily-words .table-wrap { margin-top: 0; }
.rd .daily-words h2 .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.rd .daily-source { margin-top: 22px; padding-top: 16px; border-top-color: var(--hairline); }
.rd .daily-pager a { transition: color .15s, transform .2s var(--ease-out); display: inline-block; }
.rd .daily-pager .pg-prev a:hover { transform: translateX(-3px); }
.rd .daily-pager .pg-next a:hover { transform: translateX(3px); }

/* Archive and collection */
.rd .kind-filter button { background: var(--glass); border-color: var(--glass-edge); transition: color .15s, background-color .2s, border-color .2s; }
.rd .kind-filter button[aria-pressed="true"] { background: color-mix(in oklch, var(--foreground) 9%, var(--glass)); }
.rd .archive-month h2 { font-size: 1.15rem; }
.rd .archive-card { border-radius: 14px; }
.rd .archive-card .ac-line { color: color-mix(in oklch, var(--foreground) 85%, transparent); }
.rd .saved-card { border-radius: 14px; }

@media (max-width: 900px) {
  .daily-main { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
}
@media (max-width: 640px) {
  .rd .daily-bar { padding: 14px 0 8px; }
  .rd .daily-card { padding: 20px 16px 18px; }
  .rd .daily-head h1 { font-size: 1.45rem; }
  .rd .daily-text { padding: 18px 0 12px 14px; }
  .rd .daily-text .verse-deva { font-size: 1.4rem; line-height: 1.75; }
  .rd .daily-text.is-long .verse-deva { font-size: 1.1rem; }
  /* phones: only the chosen script (the toggle switches; without JS both show, as there is no toggle) */
  .rd .daily-text.has-toggle[data-script="deva"] > .verse-iast, .rd .daily-text.has-toggle[data-script="iast"] > .verse-deva { display: none; }
  .rd .daily-text.is-clamped { --clamp: 8.6rem; }
  .rd .daily-translation.is-clamped { --clamp: 7.3rem; }
  .rd .daily-translation p { font-size: 1.0625rem; }
  .daily-side { gap: 12px; }
  .daily-more { margin-top: 20px; }
  .rd .daily-tabs { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd .is-playing .chant-play { animation: none; }
  .daily-text .vl { transition: none; }
}
.rd .daily-text .vl, .rd .sc-deva, .rd .ac-line, .rd .dt-line { text-wrap: pretty; }

/* Header on phones: with no "Lab" item there is room for Models again from 360px (the mark alone on the left). */
@media (max-width: 640px) and (min-width: 360px) {
  .rd .site-nav .hide-sm { display: inline-block; }
  .rd .site-nav { gap: 2px; }
  .rd .site-nav a { padding: 6px 8px; }
}
/* Phones: the track tabs wrap to a second row instead of scrolling some tracks out of sight. */
@media (max-width: 640px) {
  .rd .lab-tabs { flex-wrap: wrap; overflow: visible; border-radius: 22px; row-gap: 2px; }
  .rd .lab-tabs a { padding: 6px 12px; }
}

/* Live jobs past or before training (contract v1.6 phase): a distinct pill, never the green "Running".
   Rendering / evaluating in the info blue, setting up in amber; the card's glow follows. */
.badge.phase-render, .badge.phase-eval { background: var(--info-bg); color: var(--info); }
.badge.phase-setup { background: var(--warn-bg); color: var(--warn); }
.rd .badge.phase-render, .rd .badge.phase-eval { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--info) 28%, transparent); }
.rd .badge.phase-setup { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 28%, transparent); }
.badge[class*="phase-"] .dot { animation: rd-ping 1.8s ease-out infinite; }
.rd .live-card.is-phase { --phase-c: var(--info);
  border-color: color-mix(in oklch, var(--phase-c) 30%, var(--glass-edge));
  box-shadow: var(--glass-hi), var(--glass-shadow), 0 14px 40px -24px color-mix(in oklch, var(--phase-c) var(--glow-mix, 70%), transparent); }
.rd .live-card[data-phase="setup"] { --phase-c: var(--warn); }
@media (prefers-reduced-motion: reduce) { .badge[class*="phase-"] .dot { animation: none; } }
.rd .live-card.is-phase .progress-label > span:first-child { white-space: normal; min-width: 0; }
/* Home · Daily · Demo · Models · About and the theme toggle beside the mark, inside the 16px gutter down to 360px. */
@media (max-width: 400px) and (min-width: 360px) {
  .rd .site-nav { gap: 0; }
  .rd .site-nav a { padding: 6px 6px; }
}