/* ======================================================================
   /radar and the "your coins" block on /my-radar.

   One list, one line per coin, in the order a visitor asks:
     when it began · which coin, which way, how far above normal ·
     the price since it began · ONE reading of the last times
   Everything a line leaves out is on the coin's history page, which the
   whole line opens. (Succinct pass, 2026-10-12: the row was a three-by-three
   grid with two bars; it is now a line.)

   House look (terminal-tokens.css): near-black ground, one accent, and
   colour that means a state and nothing else:
     mint    whales bought, or the price went up
     coral   whales sold, or the price went down
     gold    how far above its normal hour
   Every direction also carries an arrow and a sign, and a figure we do not
   have is the words "no price": never a zero.

   Two type sizes in a row (14px and 12.5px), one weight for figures. Rows
   are separated by hairlines, not boxed. The row lays itself out from the
   width of its own list (container queries), so the same partial fits
   /radar and the narrower /my-radar column.
   ====================================================================== */

.rd-wrap, .rd-embed {
    --rd-up: var(--tt-up, #37D98A);
    --rd-down: var(--tt-down, #FA5772);
    --rd-down-text: var(--tt-down-text, #FF7E8E);
    --rd-gold: var(--tt-gold, #D8A33A);
    --rd-ink: var(--tt-text, #F4F1EC);
    --rd-mut: var(--tt-text-muted, #A8A29B);
    --rd-dim: var(--tt-text-dim-text, #8A847C);
    --rd-hair: var(--tt-border-soft, rgba(244,241,236,0.055));
    --rd-line: var(--tt-border, rgba(244,241,236,0.10));
    --rd-line-strong: var(--tt-border-strong, rgba(244,241,236,0.17));
    --rd-accent: var(--tt-accent, #EE5A2C);
    --rd-accent-text: var(--tt-accent-text, #FF8A5C);
    --rd-flat: rgba(244,241,236,0.34);
    --rd-mono: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
    --rd-sans: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
    --rd-display: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
    --rd-ease: var(--tt-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
    font-family: var(--rd-sans);
    color: var(--rd-ink);
}
.rd-wrap { max-width: 1180px; margin: 0 auto; padding: 4px 20px 24px; }
/* Room the corner widgets ask for (lib/dock-avoid.js): the column gives up a
   margin on that side when it can spare one, so no row passes under the
   checklist control; when it cannot, the list keeps a strip under its last row. */
main[data-dock-gutter] { padding-left: var(--cw-gut-l, 0px); padding-right: var(--cw-gut-r, 0px); }
.rd-wrap ::selection, .rd-embed ::selection { background: rgba(238,90,44,0.38); color: #fff; }

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

/* The live dot. One pulse on the page, and only on things that are still going. */
.rd-pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-dim); flex: none; }
.is-live > .rd-pip, .is-live .rd-when .rd-pip, .rd-h2 .rd-pip, .rd-chip.is-live .rd-pip { background: var(--rd-up); animation: rdPulse 2.4s ease-in-out infinite; }
@keyframes rdPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── the line under the title ─────────────────────────────────────────── */
.rd-status {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    margin: 14px 0 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--rd-mut);
}
.rd-status b { color: var(--rd-ink); font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-status.is-down b, .rd-status.is-no_history b { font-family: var(--rd-sans); }
.rd-status > i[class^="ri-"] { font-size: 18px; color: var(--rd-gold); }
.rd-checked { margin-left: auto; font-size: 12.5px; color: var(--rd-dim); white-space: nowrap; }
.rd-checked.is-stale { color: var(--rd-gold); }

/* Not confirmed for a while (src/assets/js/radar.js): the rows stay, dimmed. */
.rd-stale .rd-list, .rd-stale .rd-chips, .rd-stale .rd-also { opacity: 0.45; transition: opacity 0.4s var(--rd-ease); }
.rd-stale .rd-pip { animation: none; background: var(--rd-dim); }

/* ── sections ─────────────────────────────────────────────────────────── */
.rd-sec { margin-top: 26px; }
.rd-sec[hidden] { display: none; }
.rd-h2 {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-family: var(--rd-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--rd-ink);
}
.rd-none { margin: 10px 0 0; padding: 14px 0; border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-hair); font-size: 14px; color: var(--rd-mut); }
.rd-none a { color: var(--rd-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rd-line-strong); text-underline-offset: 3px; }
.rd-none a:hover { text-decoration-color: var(--rd-accent); }

/* ── chips: your coins, and the coins with no price ───────────────────── */
.rd-yours { margin-top: 14px; }
.rd-chips, .rd-also { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.rd-chips-l, .rd-also > span:first-child { font-size: 12.5px; color: var(--rd-dim); margin-right: 2px; }
.rd-also { margin-top: 12px; }
.rd-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
    border: 1px solid var(--rd-line); border-radius: 999px;
    font-size: 12.5px; color: var(--rd-mut); text-decoration: none; white-space: nowrap;
    transition: border-color 0.18s var(--rd-ease), color 0.18s var(--rd-ease);
}
.rd-chip:hover { border-color: var(--rd-line-strong); color: var(--rd-ink); }
.rd-chip b { font-family: var(--rd-mono); font-weight: 700; color: var(--rd-ink); }
.rd-chip.is-buy > i[class^="ri-"] { color: var(--rd-up); }
.rd-chip.is-sell > i[class^="ri-"] { color: var(--rd-down-text); }
.rd-chip.is-live { border-color: rgba(55,217,138,0.4); color: var(--rd-ink); }
.rd-chip-mv { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-chip-mv.is-up { color: var(--rd-up); }
.rd-chip-mv.is-down { color: var(--rd-down-text); }
.rd-chip.is-more { border-style: dashed; }

/* ── the list and one row ─────────────────────────────────────────────── */
.rd-list { container-type: inline-size; container-name: rdl; margin-top: 10px; border-top: 1px solid var(--rd-line); }
.rd-cols { display: none; }

/* A phone, and any narrow list: four short lines, the bell on the first. */
.rd-row {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "when size act" "who who who" "since since since" "past past past";
    gap: 5px 12px; padding: 12px 0 13px; border-bottom: 1px solid var(--rd-hair);
    font-size: 14px; line-height: 1.35; color: var(--rd-mut);
    scroll-margin-top: 88px;
    transition: background-color 1.4s var(--rd-ease);
}
.rd-row:hover { background-color: rgba(244,241,236,0.025); transition-duration: 0.15s; }
.rd-row:target, .rd-row.is-flash { background-color: rgba(244,241,236,0.06); transition-duration: 0s; }
.rd-when { grid-area: when; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--rd-mut); white-space: nowrap; }
.rd-who { grid-area: who; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
/* The whole row is the link: its hit area is stretched over the line, and the
   bell sits above it. */
.rd-coin { font-family: var(--rd-mono); font-size: 14px; font-weight: 700; color: var(--rd-ink); text-decoration: none; }
.rd-coin::after { content: ""; position: absolute; inset: 0; }
.rd-row:hover .rd-coin { color: var(--rd-accent-text); }
.rd-coin:focus-visible { outline: none; }
.rd-coin:focus-visible::after { outline: 2px solid var(--tt-focus-ring, #EE5A2C); outline-offset: -2px; border-radius: 4px; }
.rd-side { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.is-buy .rd-side { color: var(--rd-up); }
.is-sell .rd-side { color: var(--rd-down-text); }
.rd-flip { font-size: 12.5px; color: var(--rd-mut); white-space: nowrap; }
.rd-mine { font-size: 11px; color: var(--rd-accent-text); }
.rd-size { grid-area: size; white-space: nowrap; }
.rd-size b { font-family: var(--rd-mono); font-weight: 700; color: var(--rd-gold); font-variant-numeric: tabular-nums; }
.rd-size i { color: var(--rd-dim); font-size: 13px; }
.rd-lbl { font-size: 12.5px; color: var(--rd-dim); }
.rd-since { grid-area: since; white-space: nowrap; min-width: 0; }
.rd-mv { display: inline-flex; align-items: center; gap: 2px; font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-mv.is-up, .rd-past b.is-up { color: var(--rd-up); }
.rd-mv.is-down, .rd-past b.is-down { color: var(--rd-down-text); }
.rd-mv.is-flat, .rd-past b.is-flat { color: var(--rd-ink); }
.rd-mv.is-none { font-family: var(--rd-sans); font-weight: 400; color: var(--rd-dim); }
.rd-src { font-size: 12.5px; color: var(--rd-dim); }
.rd-past { grid-area: past; min-width: 0; font-size: 12.5px; color: var(--rd-mut); }
.rd-past b { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
/* The last earlier times, one dot each, oldest to newest: colour is which way the price went a day later. */
.rd-dots { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.rd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ink); opacity: .35; }
.rd-dot.is-up { background: var(--rd-up); opacity: 1; }
.rd-dot.is-down { background: var(--rd-down-text); opacity: 1; }
.rd-dot.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--rd-mut); opacity: .7; }
.rd-act { grid-area: act; justify-self: end; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.rd-bell {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -8px 0; padding: 0;
    border-radius: 50%; color: var(--rd-accent-text); font-size: 16px; cursor: pointer;
    transition: background-color 0.18s var(--rd-ease), color 0.18s var(--rd-ease);
}
/* The tint itself is the house rule for every "alert me" control
   (cl-refine.css body .sg-arm): tinted, no outline. On = a fuller tint and
   a filled bell, so the state is carried by shape as well as colour. */
body .rd-bell:hover { background: rgba(238,90,44,0.24); }
body .rd-bell.is-on { background: rgba(238,90,44,0.32); color: #FFB08C; }
.rd-bell:disabled { opacity: 0.55; cursor: default; }
.rd-note { font-size: 12.5px; color: var(--rd-mut); white-space: nowrap; }
.rd-note[hidden] { display: none; }

/* A list wide enough for one line per coin, under one row of column names. */
@container rdl (min-width: 760px) {
    .rd-cols, .rd-row {
        display: grid; align-items: center; gap: 0 20px;
        grid-template-columns: 78px minmax(200px, 1.3fr) 96px minmax(150px, 0.9fr) minmax(0, 2fr) 40px;
        grid-template-areas: "when who size since past act";
    }
    .rd-cols { padding: 8px 0 6px; font-size: 12.5px; color: var(--rd-dim); border-bottom: 1px solid var(--rd-hair); }
    .rd-row { min-height: 46px; padding: 6px 0; }
    .rd-size .rd-lbl, .rd-lbl--since, .rd-later { display: none; }
    .rd-who { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
    .rd-past { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-act { justify-self: end; }
    .rd-bell { margin: 0; }
    .rd-note { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 6px; background: var(--tt-raised, #1A1818); }
}

/* Earlier today: six rows, then the rest on request (script only). */
.rd-more { display: none; }
.rd-js [data-live="earlier"]:not([data-open]) .rd-row.is-folded { display: none; }
.rd-js [data-live="earlier"]:not([data-open]) .rd-more {
    display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px;
    border: 0; border-bottom: 1px solid var(--rd-hair); background: transparent;
    font-family: var(--rd-sans); font-size: 14px; font-weight: 700; color: var(--rd-accent-text); cursor: pointer;
}
.rd-more:hover { color: var(--rd-ink); }
.rd-more i { font-size: 18px; }

/* The paid-plan line: once, under the first list that holds a locked row. */
.rd-held { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rd-mut); }
.rd-held > i { color: var(--rd-dim); align-self: center; }
.rd-held-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--rd-accent-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rd-held-cta:hover { color: var(--rd-ink); }
.rd-held-note { color: var(--rd-dim); }

/* ── the ask: get told (one line) ─────────────────────────────────────── */
.rd-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; font-size: 14px; color: var(--rd-ink); }
.rd-ask-t { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; }
.rd-ask-t i { font-size: 16px; color: var(--rd-accent-text); }
.rd-ask-coin {
    display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 12px 0 8px;
    border-radius: 999px; color: var(--rd-ink);
    font-family: var(--rd-mono); font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background-color 0.18s var(--rd-ease);
}
body .rd-ask-coin:hover { background: rgba(238,90,44,0.24); }
body .rd-ask-coin.is-on { background: rgba(238,90,44,0.32); color: #FFB08C; }
.rd-ask-coin:disabled { opacity: 0.6; cursor: default; }
.rd-ask-n { font-size: 12.5px; color: var(--rd-dim); }

/* ── every time, every coin: one sentence, the counts behind a disclosure ─ */
.rd-all { padding-top: 22px; border-top: 1px solid var(--rd-line); }
.rd-verdict { margin: 8px 0 0; max-width: 78ch; font-size: 14px; line-height: 1.5; color: var(--rd-ink); text-wrap: pretty; }
.rd-more-d { margin-top: 8px; }
.rd-more-d > summary { display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; font-weight: 700; color: var(--rd-accent-text); cursor: pointer; list-style-position: inside; }
.rd-more-d > summary:hover { color: var(--rd-ink); }
.rd-more-d > summary::marker { color: var(--rd-dim); }
.rd-whole { display: grid; gap: 22px; margin-top: 14px; }
.rd-whole-side h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font-family: var(--rd-sans); font-size: 14px; font-weight: 700; color: var(--rd-ink); }
.rd-whole-side h3 i { align-self: center; }
.rd-whole-side.is-buy h3 i { color: var(--rd-up); }
.rd-whole-side.is-sell h3 i { color: var(--rd-down-text); }
.rd-whole-side h3 span { margin-left: 4px; font-size: 12.5px; font-weight: 400; color: var(--rd-dim); }
.rd-whole-legs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; }
.rd-whole-leg { display: grid; gap: 5px; align-content: start; min-width: 0; font-size: 12.5px; color: var(--rd-mut); }
.rd-whole-k { color: var(--rd-mut); }
.rd-whole-n b { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-whole-n b.is-up { color: var(--rd-up); }
.rd-whole-n b.is-down { color: var(--rd-down-text); }
.rd-whole-of, .rd-whole-none { color: var(--rd-dim); font-variant-numeric: tabular-nums; }
.rd-whole-def { margin: 0; max-width: 80ch; font-size: 12.5px; line-height: 1.5; color: var(--rd-mut); }
.rd-whole-link { margin: 0; font-size: 12.5px; }
.rd-whole-link a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--rd-accent-text); font-weight: 700; text-decoration: none; }
.rd-whole-link a:hover { color: var(--rd-ink); }
@media (min-width: 720px) { .rd-whole-legs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rd-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.rd-bar i { display: block; height: 100%; min-width: 2px; }
.rd-bar .is-up { background: var(--rd-up); }
.rd-bar .is-flat { background: var(--rd-flat); }
.rd-bar .is-down { background: var(--rd-down); }
.rd-bar--ghost { height: 4px; margin-top: 4px; opacity: 0.55; }

/* ── the foot: what this is, and (collapsed) how it is counted ────────── */
.rd-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rd-line); }
.rd-advice { margin: 0; font-size: 14px; color: var(--rd-ink); }
.rd-how { margin: 6px 0 0; padding: 0 0 0 18px; display: grid; gap: 5px; max-width: 80ch; font-size: 12.5px; line-height: 1.5; color: var(--rd-mut); }
.rd-links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 8px; }
.rd-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: 12.5px; font-weight: 700; color: var(--rd-mut); text-decoration: none; }
.rd-links a:hover { color: var(--rd-ink); }
.rd-links a i { color: var(--rd-dim); }

.rd-band {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px;
    max-width: 1140px; margin: 0 auto 24px; padding: 14px 20px;
    border: 1px solid var(--tt-border, rgba(244,241,236,0.10)); border-radius: var(--tt-r-lg, 10px); background: var(--tt-panel-solid, #121111);
    font-family: var(--tt-sans, system-ui, sans-serif); font-size: 14px; color: var(--tt-text, #F4F1EC); text-align: center;
}
.rd-band-cta {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
    background: var(--tt-accent, #EE5A2C); color: #140904; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
    transition: filter 0.18s var(--tt-ease-out, ease-out);
}
.rd-band-cta:hover { filter: brightness(1.08); color: #140904; }

/* /my-radar: the block sits in a column, under that page's own headings. */
.rd-embed { margin: 0 0 22px; }
.rd-embed .rd-chips { margin-top: 12px; }
.rd-embed-foot { margin: 10px 0 0; font-size: 12.5px; }
.rd-embed-foot a { color: var(--rd-accent-text); font-weight: 700; text-decoration: none; }
.rd-embed-foot a:hover { color: var(--rd-ink); }

@media (max-width: 640px) {
    .rd-wrap { padding: 0 16px 24px; }
    /* Your coins stay on one line: swipe for the rest. */
    .rd-yours .rd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
    .rd-yours .rd-chips::-webkit-scrollbar { display: none; }
    .rd-yours .rd-chip, .rd-chips-l { flex: none; }
    .rd-sec { margin-top: 22px; }
    .rd-status { font-size: 14px; }
    .rd-checked { margin-left: 0; }
    .rd-band { margin: 0 16px 20px; }
}
@media (pointer: coarse) {
    .rd-bell { width: 44px; height: 44px; margin: -10px 0; }
    .rd-ask-coin, .rd-chip { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-pip { animation: none !important; }
    .rd-row { transition: none; }
}

/* ── [G BUILD1] kinds of unusual ─────────────────────────────────────────
   A row of another kind has no direction, so no colour: its label is ink. */
.is-plain .rd-side { color: var(--rd-ink); }
.is-plain .rd-side > i { color: var(--rd-dim); }
/* What else happened on the coin around then: one quiet line under the row,
   only when there is one. Above the row's own stretched link. */
.rd-near { grid-column: 1 / -1; position: relative; z-index: 1; justify-self: start; font-size: 12.5px; color: var(--rd-mut); text-decoration: underline; text-decoration-color: var(--rd-line-strong); text-underline-offset: 3px; }
.rd-near:hover { color: var(--rd-ink); }
@container rdl (min-width: 760px) {
    .rd-near { grid-column: 2 / -1; margin: -4px 0 4px; }
}
/* The filter: All first, then one chip per kind. */
.rd-kinds { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.rd-kind {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--rd-line); border-radius: 999px;
    background: transparent; font: inherit; font-size: 12.5px; color: var(--rd-mut); cursor: pointer;
    transition: border-color 0.18s var(--rd-ease), color 0.18s var(--rd-ease), background-color 0.18s var(--rd-ease);
}
.rd-kind:hover { border-color: var(--rd-line-strong); color: var(--rd-ink); }
.rd-kind.is-on { border-color: var(--rd-ink); color: var(--rd-ink); background: rgba(244,241,236,0.06); }
.rd-kind-none { font-size: 12.5px; color: var(--rd-mut); }
.rd-kind-none[hidden] { display: none; }
/* One kind chosen: everything that says another kind steps aside, and the
   folded rows of the chosen kind come out (six rows of one kind is a short list). */
#radar-live[data-kf="whales"] [data-kind]:not([data-kind="whales"]),
#radar-live[data-kf="forced"] [data-kind]:not([data-kind="forced"]),
#radar-live[data-kf="fee"] [data-kind]:not([data-kind="fee"]) { display: none; }
#radar-live.rd-js[data-kf="whales"] [data-live="earlier"] .rd-row.is-folded[data-kind="whales"],
#radar-live.rd-js[data-kf="forced"] [data-live="earlier"] .rd-row.is-folded[data-kind="forced"],
#radar-live.rd-js[data-kf="fee"] [data-live="earlier"] .rd-row.is-folded[data-kind="fee"] { display: grid; }
#radar-live.rd-js[data-kf] [data-live="earlier"] .rd-more { display: none; }
/* The whole record, kind by kind. */
.rd-rec-k { margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--rd-mut); }
.rd-whole-kind + .rd-whole-kind { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rd-hair); }
.rd-whole-t { margin: 0 0 8px; font-size: 12.5px; color: var(--rd-mut); }
.rd-whole-t b { color: var(--rd-ink); }
.rd-whole-big { font-size: 12.5px; color: var(--rd-mut); }
.rd-whole-big b { font-family: var(--rd-mono); font-weight: 700; color: var(--rd-ink); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .rd-kind { min-height: 40px; } }
@media (max-width: 640px) {
    .rd-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
    .rd-kinds::-webkit-scrollbar { display: none; }
    .rd-kind { flex: none; }
}
/* A list with no row of the chosen kind steps aside too (its heading would
   otherwise sit over nothing). */
#radar-live[data-kf="whales"] .rd-sec[data-live="now"]:not(:has(.rd-row[data-kind="whales"])),
#radar-live[data-kf="forced"] .rd-sec[data-live="now"]:not(:has(.rd-row[data-kind="forced"])),
#radar-live[data-kf="fee"] .rd-sec[data-live="now"]:not(:has(.rd-row[data-kind="fee"])),
#radar-live[data-kf="whales"] .rd-sec[data-live="earlier"]:not(:has(.rd-row[data-kind="whales"])),
#radar-live[data-kf="forced"] .rd-sec[data-live="earlier"]:not(:has(.rd-row[data-kind="forced"])),
#radar-live[data-kf="fee"] .rd-sec[data-live="earlier"]:not(:has(.rd-row[data-kind="fee"])) { display: none; }
/* The "no price" names under Earlier today are whale times. */
#radar-live[data-kf="forced"] .rd-also, #radar-live[data-kf="fee"] .rd-also { display: none; }
.rd-priced { margin: 6px 0 0; max-width: 78ch; font-size: 12.5px; line-height: 1.5; color: var(--rd-mut); }

/* ── [E 2026-10-12 ANSWER] what stands out right now: up to three stories, in sentences ── */
/* [E ANSWER 3] The heading says which way whales lean, so on a phone it runs to two lines: it wraps
   beside its dot (not under it), and the dot stays on the first line. */
.rd-stand-h { color: var(--rd-ink); font-weight: 700; flex: 1 1 12ch; min-width: 0; }
.rd-status > .rd-pip { align-self: flex-start; margin-top: calc(0.7em - 3.5px); }
.rd-stand { margin: 10px 0 0; }
/* [M round 4] The read, then the stories behind "See the numbers". */
.rd-read { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--rd-ink); max-width: 68ch; }
.rd-fold { margin: 0; }
/* The rest of the read, inside the fold, above the stories. */
.rd-fold[open] > .rd-read-more { margin: 10px 0 0; }
.rd-fold-s { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--rd-mut); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.rd-fold-s::-webkit-details-marker { display: none; }
.rd-fold-s::before { content: "\25B8"; font-size: 11px; transition: transform .15s ease; }
.rd-fold[open] > .rd-fold-s::before { transform: rotate(90deg); }
.rd-fold-s:focus-visible { outline: 2px solid var(--tt-accent-text, #FF8A5C); outline-offset: 2px; border-radius: 4px; }
.rd-fold[open] > .rd-stories { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .rd-fold-s::before { transition: none; } }
.rd-stories { list-style: none; counter-reset: rd-story; margin: 0; padding: 0; display: grid; gap: 12px; }
.rd-story { counter-increment: rd-story; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.rd-story::before { content: counter(rd-story) "."; font-family: var(--rd-mono); font-size: 14px; font-weight: 700; color: var(--rd-mut); line-height: 1.5; }
.rd-story-t { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--rd-ink); max-width: 68ch; }
.rd-story-c { font-family: var(--rd-mono); font-weight: 800; color: var(--rd-ink); text-decoration: underline; text-decoration-color: rgba(244,241,236,0.25); text-underline-offset: 3px; margin-right: 2px; }
.rd-story-c:hover { text-decoration-color: currentColor; }
.rd-story-c:focus-visible, .rd-story-bell:focus-visible { outline: 2px solid var(--tt-accent-text, #FF8A5C); outline-offset: 2px; border-radius: 4px; }
.rd-story-a { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rd-story-bell { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; border: 1px solid rgba(244,241,236,0.14); border-radius: 999px; background: none; color: var(--rd-ink); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rd-story-bell i { color: var(--rd-gold); font-size: 14px; }
.rd-story-bell:hover, .rd-story-bell.is-on { border-color: var(--rd-gold); }
.rd-story-bell.is-on { color: var(--rd-gold); background: rgba(216,163,58,0.1); }
.rd-stand-none { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--rd-ink); max-width: 68ch; }
/* On a phone the bell is its icon beside the story (its words stay for a screen reader), so three stories and the first row of the list share the first screen. */
@media (max-width: 640px) {
    .rd-stand { margin-top: 4px; }
    .rd-stories { gap: 6px; }
    .rd-story { grid-template-columns: 16px minmax(0, 1fr) 34px; column-gap: 6px; }
    .rd-story-t { font-size: 14px; line-height: 1.38; }
    .rd-story-bell { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
    .rd-story-bell > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rd-story-a .rd-note { position: absolute; right: 16px; max-width: 60vw; }
}