/*
 * Today scenes (2026-10-23) - Today's look on top of the shared scene
 * system (analyze_scenes.css/js: scene shell, kicker/title/lede, reveals,
 * the cue). Loaded only by today.html.
 *
 * Unlayered, like analyze_scenes.css: rules target today-* hooks only,
 * never bare utility classes. Secondary text is slate-400 or brighter
 * (7:1 on the panel; slate-500 would miss WCAG AA at these sizes).
 *
 * Motion policy, as Analyze: anything that hides or moves waits for
 * `scenes-ready` (never set under reduced motion), or is a transform-only
 * keyframe the reduced-motion block below switches off. First-viewport
 * content (the pulse) never fades - it must read on its first frame.
 */

/* ------------------------------------------------------------------
   Story shell
   ------------------------------------------------------------------ */
/* Today has no horizon dock: jump targets and the full-height pulse
   only clear the nav. */
:root:has(.today-story) { --dock-space: 0px; }

/* The brand accent carries the chapters; the market's mood (the tape
   headline's state) colours only the headline and the light behind it,
   so a red day never turns every kicker red. */
.today-story {
    --scene-accent: var(--color-accent);
    --today-mood: rgb(203 213 225);
    position: relative;
    isolation: isolate;
}
.today-story[data-tape="up"] { --today-mood: var(--color-bull); }
.today-story[data-tape="down"] { --today-mood: var(--color-bear); }
.today-story[data-tape="mixed"] { --today-mood: var(--color-neutral-score); }
.today-story ::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); color: #fff; }
.today-story::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(56rem 32rem at 10% -12%, color-mix(in srgb, var(--today-mood) 13%, transparent), transparent 70%),
        radial-gradient(44rem 28rem at 104% 106%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 70%);
}

/* ------------------------------------------------------------------
   Shared pieces - cards, lists, chips, pills
   ------------------------------------------------------------------ */
/* Every Today grid starts as ONE minmax(0, 1fr) column. Left implicit,
   that column is an auto track, and an auto track grows to its widest
   item's min-content (an <input>'s intrinsic width, say) - pushing the
   page past a phone's edge. The wider layouts below override this. */
.today-pulse-grid, .today-watch-grid, .today-watch-side, .today-deck-grid, .today-movers-grid,
.today-horizons, .today-reads, .today-steps, .today-timeline, .today-news, .today-mover-list,
.today-money, .today-list { grid-template-columns: minmax(0, 1fr); }
.today-card {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--color-panel) 92%, transparent);
}
.today-card-title {
    margin-bottom: 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(226 232 240);
}
.today-card-note { font-size: 0.85rem; line-height: 1.55; color: rgb(148 163 184); }
.today-note { margin-top: 0.75rem; font-size: 0.72rem; color: rgb(148 163 184); }
.today-list { display: grid; gap: 0.5rem; }
.today-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.today-list-meta { font-size: 0.75rem; color: rgb(148 163 184); }

.today-picks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.today-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-base) 60%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgb(226 232 240);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.today-chip:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); }
.today-chip-move, .today-chip-meta { font-family: var(--font-mono); font-size: 0.72rem; color: rgb(148 163 184); }
.today-chip-move[data-dir="up"] { color: var(--color-bull); }
.today-chip-move[data-dir="down"] { color: var(--color-bear); }
.today-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(203 213 225);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.today-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.today-chip:focus-visible, .today-pill:focus-visible, .today-mover:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   01 Pulse - headline, session, the four proxies, the ask
   ------------------------------------------------------------------ */
.today-pulse-grid {
    display: grid;
    gap: clamp(1.25rem, 3vh, 2rem);
    grid-template-areas: "head" "tape" "ask";
}
.today-pulse-grid > .scene-header { grid-area: head; margin-bottom: 0; }
.today-pulse-tape { grid-area: tape; min-width: 0; }
.today-ask { grid-area: ask; align-self: start; } /* hug content, never stretch to the tiles' height */
@media (min-width: 1024px) {
    .today-pulse-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        grid-template-areas: "head tape" "ask tape";
        column-gap: clamp(2rem, 4vw, 4rem);
    }
    .today-pulse-tape { align-self: center; }
}
.today-mood-ink { color: var(--today-mood); }

.today-session {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--color-border);
    /* A full pill on one row; two rows (or a wrapped phone row), a tidy rounded box. */
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--color-panel) 70%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(203 213 225);
}
/* Every line of the chip starts past the dot (0.45rem + the 0.5rem gap): the
   dot hangs into the padding, so a wrapped line lines up under the first. */
.today-session { --today-session-indent: 0.95rem; }
.today-session-now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-left: var(--today-session-indent); }
.today-session-now > .today-session-dot { flex: none; margin-left: calc(-1 * var(--today-session-indent)); }
/* What's next, under what's now. */
.today-session-next { padding-left: var(--today-session-indent); font-weight: 500; color: rgb(148 163 184); }
.today-session-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: rgb(148 163 184); }
.today-session[data-open="true"] { border-color: color-mix(in srgb, var(--color-bull) 40%, transparent); }
/* Breathes wherever the session is open: the session chip, and the lens's live read. */
[data-open="true"] .today-session-dot { background: var(--color-bull); animation: today-breathe 2.4s ease-in-out infinite; }
.today-session-sep { margin-right: 0.5rem; color: rgb(148 163 184); }  /* = the gap before it */
@keyframes today-breathe {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bull) 55%, transparent); }
    50% { box-shadow: 0 0 0 0.35rem transparent; }
}

.today-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) and (max-width: 1023.98px) {
    .today-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.today-tile {
    --tile-ink: rgb(148 163 184);
    position: relative;
    overflow: hidden;
    padding: 0.9rem 1rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tile-ink) 9%, var(--color-panel)), var(--color-panel) 65%);
    animation: scene-lift 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.today-tile:nth-child(2) { animation-delay: 0.07s; }
.today-tile:nth-child(3) { animation-delay: 0.14s; }
.today-tile:nth-child(4) { animation-delay: 0.21s; }
.today-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--tile-ink);
    opacity: 0.8;
}
.today-tile[data-dir="up"] { --tile-ink: var(--color-bull); }
.today-tile[data-dir="down"] { --tile-ink: var(--color-bear); }
.today-tile[data-lead="true"] { border-color: color-mix(in srgb, var(--tile-ink) 45%, var(--color-border)); }
.today-tile-name {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(203 213 225);
}
.today-tile-symbol { font-family: var(--font-mono); letter-spacing: 0.04em; color: rgb(148 163 184); }
/* The move is the headline number: an index ETF's change tracks its index,
   but its price is a fraction of it - "S&P 500 $769.66" read as the index
   itself. The price stays, small, beside the ETF symbol that trades at it. */
.today-tile-change {
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--tile-ink);
}
.today-tile-price {
    margin-top: 0.1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(203 213 225);
}
/* A last-good quote while the session is live (amber-300, ~11:1 on the tile). */
.today-tile-delayed { margin-top: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: rgb(252 211 77); }
.today-tile-spark { height: 2.5rem; margin-top: 0.5rem; }

.today-ask {
    container-type: inline-size; /* the picks below: four across, or two by two */
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    border-radius: 1.25rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-panel)), var(--color-panel) 60%);
    box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.today-ask-title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.today-ask-accent { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--color-accent); }
.today-ask-sub { margin-top: 0.25rem; font-size: 0.85rem; color: rgb(148 163 184); }
.today-ask-form { display: flex; gap: 0.5rem; margin-top: 1rem; }
.today-ask-input {
    flex: 1;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-base);
    font-family: var(--font-mono);
    font-size: 1rem; /* 16px: no iOS focus zoom */
    text-transform: uppercase;
    color: #fff;
}
.today-ask-input::placeholder { font-family: var(--font-sans); text-transform: none; color: rgb(148 163 184); }
.today-ask-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.today-ask-go {
    min-height: 2.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--color-accent);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-base);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.today-ask-go:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px var(--color-accent); }
.today-ask-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.today-picks-label {
    margin: 1rem 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(148 163 184);
}
/* The first-screen proof: a quiet footnote that jumps to the lens, where
   the 22-year test is said in full (#today-evidence). */
.today-ask-proof { margin-top: 1rem; font-size: 0.8rem; line-height: 1.5; color: rgb(148 163 184); }
.today-ask-proof a { color: inherit; border-radius: 0.25rem; }
/* inline-block: the phrase moves to a new line whole ("See what held / up" read
   as broken), yet can still wrap inside itself if a line can't hold it. */
.today-ask-proof-go { display: inline-block; font-weight: 700; color: var(--color-accent); }
.today-ask-proof a:hover .today-ask-proof-go { text-decoration: underline; text-underline-offset: 0.2em; }
.today-ask-proof a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Four picks across, or two by two. With the watchlist rail open the card
   can't fit four, and a wrap stranding the fourth on a row of its own reads
   as a mistake. A chip too wide for half the card (200% text) takes a row. */
@container (max-width: 30rem) {
    .today-ask .today-picks > li { flex: 1 1 40%; min-width: fit-content; }
    .today-ask .today-chip { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   02 Your watch
   ------------------------------------------------------------------ */
.today-watch-count { margin: -0.5rem 0 1.25rem; font-size: 0.9rem; color: rgb(148 163 184); }
.today-watch-grid { display: grid; gap: 1rem; }
.today-watch-side { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 1024px) {
    .today-watch-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.today-money { display: grid; gap: 0.75rem; }
.today-money > div + div { padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.today-money dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(148 163 184); }
.today-money dd { margin-top: 0.2rem; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 800; }
.today-money-note { margin-top: 0.2rem; font-size: 0.7rem; color: var(--color-risk); }

/* ------------------------------------------------------------------
   03 On deck - the calendar as a timeline, beside the news
   ------------------------------------------------------------------ */
.today-deck-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
    .today-deck-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
    .today-deck-grid--solo { grid-template-columns: minmax(0, 40rem); }
}
.today-timeline { position: relative; display: grid; gap: 0.9rem; padding-left: 1.25rem; }
.today-timeline + .today-card-note { margin-top: 0.9rem; } /* the timeline's own rhythm */
.today-timeline::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.3rem;
    width: 1px;
    background: linear-gradient(var(--color-accent), transparent);
    opacity: 0.5;
}
.today-timeline-item { position: relative; display: grid; gap: 0.1rem; }
.today-timeline-item::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: -1.25rem;
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--color-accent);
    border-radius: 9999px;
    background: var(--color-base);
}
.today-timeline-item--open::before {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.today-timeline-when { font-family: var(--font-mono); font-size: 0.72rem; color: rgb(148 163 184); }
.today-timeline-what { font-size: 0.92rem; font-weight: 600; color: #fff; }
.today-timeline-symbols { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: rgb(148 163 184); }
.today-notes { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; line-height: 1.55; color: rgb(203 213 225); }
.today-notes summary { cursor: pointer; font-size: 0.75rem; color: rgb(148 163 184); }
.today-notes p { margin-top: 0.5rem; }
/* Under the pulse tiles they annotate: a quiet disclosure, no card divider. */
.today-pulse-tape .today-notes { margin-top: 0.4rem; padding-top: 0; border-top: 0; }

.today-news { display: grid; }
.today-news-item { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 0.8rem; }
.today-news-item + .today-news-item { border-top: 1px solid var(--color-border); }
.today-news-title { font-size: 0.92rem; font-weight: 600; color: #fff; transition: color 0.2s ease; }
a.today-news-title:hover { color: var(--color-accent); }

/* ------------------------------------------------------------------
   04 Movers - bars on one shared scale grow in with their card
   ------------------------------------------------------------------ */
.today-movers-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
    .today-movers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Content-driven, not a grid: most active and crypto sit side by side
   when both chip rows fit, and crypto drops below when they don't - so
   no chip is ever orphaned onto a second row to keep columns even. */
.today-movers-more { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 1.25rem; }
.today-movers-more > section { flex: 0 1 auto; min-width: 0; }
.today-mover-list { display: grid; gap: 0.35rem; container-type: inline-size; }
.today-mover {
    --ink: var(--color-bull);
    position: relative;
    isolation: isolate;
    /* No overflow: hidden. The bar rounds itself (border-radius: inherit),
       and clipping hid the change entirely at 200% text (WCAG 1.4.4). */
    display: grid;
    /* The name spans the symbol and price columns: an item spanning the 1fr
       column never widens the auto one, so prices stay aligned row to row.
       Its row keeps one name line even when empty (AMD), so every row in a
       list is one height. */
    --name-size: 0.75rem;
    --name-leading: 1.3;
    --name-line: calc(var(--name-size) * var(--name-leading));
    grid-template-columns: minmax(4.5rem, auto) 1fr auto;
    grid-template-rows: auto minmax(var(--name-line), auto);
    grid-template-areas: "symbol price change" "name name change";
    align-items: center;
    gap: 0.1rem 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.7rem;
    font-size: 0.9rem;
    color: #fff;
    transition: background-color 0.2s ease;
}
.today-mover[data-dir="down"] { --ink: var(--color-bear); }
.today-mover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: var(--move, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 6%, transparent));
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.today-mover:hover { background-color: color-mix(in srgb, #fff 4%, transparent); }
.scenes-ready .today-movers-grid:not(.is-revealed) .today-mover::before { width: 0; }
.today-mover-symbol { grid-area: symbol; font-family: var(--font-mono); font-weight: 800; }
/* Both sit over the bar, whose strongest stop is the row's left edge: the
   name always starts there, and the price does when rows stack. Slate-400
   falls under 4.5:1 there; slate-300 clears it. */
.today-mover-name, .today-mover-price { color: rgb(203 213 225); }
.today-mover-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; font-size: var(--name-size); line-height: var(--name-leading); }
.today-mover-price { grid-area: price; font-family: var(--font-mono); font-size: 0.8rem; }
.today-mover-change { grid-area: change; font-family: var(--font-mono); font-weight: 800; color: var(--ink); }
/* A row with a Risk read gives it the change's second line: the move and
   its risk, one above the other. Both hug the right edge, so changes line
   up with rows that have no read. */
.today-mover.has-read { grid-template-areas: "symbol price change" "name name risk"; }
.today-mover.has-read .today-mover-change { justify-self: end; }
.today-mover-risk { grid-area: risk; justify-self: end; font-size: 0.7rem; font-weight: 700; line-height: var(--name-leading); white-space: nowrap; }
.today-movers-note { margin-top: 1rem; }
/* Too narrow for symbol, price and change side by side (a 320px phone, or
   200% text, where every rem doubles), a row stacks: the change beside the
   symbol, then the name and the price, each with the row's full width.
   16rem = padding + the symbol's 4.5rem + a "$1,234.56" price + a "+12.34%"
   change + two gaps. */
@container (max-width: 16rem) {
    .today-mover {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(var(--name-line), auto) auto;
        grid-template-areas: "symbol change" "name name" "price price";
    }
    /* Its own row: beside the price, a 320px phone at 200% text overflowed. */
    .today-mover.has-read {
        grid-template-rows: auto minmax(var(--name-line), auto) auto auto;
        grid-template-areas: "symbol change" "name name" "price price" "risk risk";
    }
    .today-mover.has-read .today-mover-risk { justify-self: start; }
}
.today-stories { margin-top: 1.25rem; }
.today-stories .today-news-item { flex-direction: column; gap: 0.2rem; }

/* ------------------------------------------------------------------
   05 The lens - horizons, reads, the evidence note, the way in
   ------------------------------------------------------------------ */
.today-horizons { display: grid; gap: 1rem; }
.today-reads-title { margin: 2rem 0 1rem; }
.today-reads { display: grid; gap: 0.9rem 1.5rem; }
.today-steps { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 768px) {
    .today-horizons, .today-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .today-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.today-horizon {
    --h: var(--color-horizon-swing);
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--h) 35%, var(--color-border));
    border-radius: 1.1rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--h) 12%, var(--color-panel)), var(--color-panel) 70%);
}
.today-horizon[data-horizon="day"] { --h: var(--color-horizon-day); }
.today-horizon[data-horizon="invest"] { --h: var(--color-horizon-invest); }
.today-horizon-name { font-size: 1.15rem; font-weight: 800; color: var(--h); }
.today-horizon-span { margin-top: 0.15rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(203 213 225); }
.today-horizon-weighs { margin-top: 0.75rem; font-size: 0.88rem; line-height: 1.55; color: rgb(148 163 184); }
.today-read { display: flex; align-items: flex-start; gap: 0.85rem; }
.today-read-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; }
.today-read-name { display: block; font-weight: 800; color: #fff; }
.today-read-question { display: block; margin-top: 0.1rem; font-size: 0.85rem; line-height: 1.5; color: rgb(148 163 184); }
/* The lens, live: Analyze's own three-horizon card for one real stock,
   framed as a window onto the product. */
.today-live {
    margin-top: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--color-panel) 92%, transparent);
    box-shadow: 0 30px 80px -48px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.today-live-head { padding: 1.1rem 1.25rem 0; }
.today-live-kicker { display: inline-flex; align-items: flex-start; gap: 0.5rem; margin: 0; color: var(--color-accent); }
/* Wrapped, the dot stays with the first line, as a bullet does (0.3rem: where lh isn't supported). */
.today-live-kicker > .today-session-dot { flex: none; margin-top: 0.3rem; margin-top: calc((1lh - 0.45rem) / 2); }
.today-live-move { white-space: nowrap; }
.today-live-title { margin-top: 0.35rem; }
/* Room for the card before it lands, so the scene jumps less when it does. */
.today-live-card { min-height: 18rem; }
.today-live-card > .today-card-note { padding: 1.25rem; }
.today-live-go { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 1.25rem 1.15rem; font-weight: 700; color: var(--color-accent); }
.today-live-go:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.today-evidence {
    max-width: 52rem;
    margin-top: 1.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-accent);
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgb(203 213 225);
    text-wrap: pretty;
}
.today-habit {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    border-radius: 1.1rem;
}
.today-habit-title, .today-live-title { font-size: 1.15rem; font-weight: 800; color: #fff; }
.today-habit-lede { max-width: 48rem; margin-top: 0.3rem; font-size: 0.9rem; color: rgb(148 163 184); }
.today-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; font-size: 0.85rem; color: rgb(148 163 184); }
.today-steps strong { grid-column: 2; color: #fff; }
.today-steps li > span:last-child { grid-column: 2; }
.today-step-num {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-accent);
}
.today-bridge { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: clamp(2rem, 6vh, 3.5rem); text-align: center; }
.today-bridge-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    padding: 0.85rem 1.9rem;
    border-radius: 9999px;
    background: var(--color-accent);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-base);
    box-shadow: 0 18px 50px -20px var(--color-accent);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.today-bridge-go:hover { transform: translateY(-2px); box-shadow: 0 22px 60px -18px var(--color-accent); }
.today-bridge-go:focus-visible, .today-live-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.today-bridge-note { font-size: 0.75rem; color: rgb(148 163 184); }

/* ------------------------------------------------------------------
   Reduced motion and print
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .today-tile, [data-open="true"] .today-session-dot { animation: none; }
    .today-mover::before, .today-chip, .today-ask-go, .today-bridge-go { transition: none; }
    .today-chip:hover, .today-ask-go:hover, .today-bridge-go:hover { transform: none; }
}
@media print {
    .today-story::before, .today-ask-form { display: none; }
}