/* Dark and desktop rules for every area (the dark tokens live in app.css's token blocks). Linked last, after every area's stylesheet. */
/* Matching overrides for an explicit pick, the device, and the report Night look. */
/* Number drawings use the kit's lighter gradient stops on dark reading panels. */
:root[data-theme="dark"] .rival-numbers, .look-night .rival-numbers {
  --numbers-orchid: #B69CDC; --numbers-jade: #8DBFAA;
  --numbers-error: #FF8C8C; --numbers-track: var(--wash);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rival-numbers {
    --numbers-orchid: #B69CDC; --numbers-jade: #8DBFAA;
    --numbers-error: #FF8C8C; --numbers-track: var(--wash);
  }
}
:root[data-theme="dark"] .reader.one .rcover, :root[data-theme="dark"] .reader.one .fyp { --ink: var(--cover-ink); }
:root[data-theme="dark"] .reader.one .top .rb { background: var(--on-cover); }
:root[data-theme="dark"] .reader.one .day .pill { background: var(--on-cover-2); }
:root[data-theme="dark"] .reader.one .hi p span, :root[data-theme="dark"] .reader.one .day span, :root[data-theme="dark"] .reader.one .quietl, :root[data-theme="dark"] .reader.one .fcw.quiet b { color: var(--cover-ink-2); }
:root[data-theme="dark"] .reader.one .fcw.quiet .ring { background: var(--on-cover) !important; }
:root[data-theme="dark"] .reader.one h1.v mark { background: rgba(255,255,255,.16); color: inherit; }
:root[data-theme="dark"] .reader.one .b-brief .bh .sti { background: var(--ember); }
:root[data-theme="dark"] .reader.one .b-guests .bh .sti { background: var(--jade); }
:root[data-theme="dark"] .reader.one .b-competitors .bh .sti { background: var(--orchid); }
:root[data-theme="dark"] .reader.one .b-you .bh .sti { background: var(--social-tile); }
:root[data-theme="dark"] .reader.one .b-market .bh .sti { background: var(--news-tile); }
:root[data-theme="dark"] .reader.one .b-brief .bh .eb { color: var(--ember-ink); }
:root[data-theme="dark"] .reader.one .b-guests .bh .eb { color: var(--jade-ink); }
:root[data-theme="dark"] .reader.one .b-competitors .bh .eb { color: var(--orchid-ink); }
:root[data-theme="dark"] .reader.one .b-you .bh .eb, :root[data-theme="dark"] .reader.one .sub-h h3 .tic { color: var(--social-ink); }
:root[data-theme="dark"] .reader.one .b-market .bh .eb { color: var(--text2); }
:root[data-theme="dark"] .reader.one .card:not(.own) .ch .nm, :root[data-theme="dark"] .reader.one .nc .by b { color: var(--name); }
:root[data-theme="dark"] .reader.one .card, :root[data-theme="dark"] .reader.one .nx, :root[data-theme="dark"] .reader.one .one-panel, :root[data-theme="dark"] .reader.one .ncw { box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .reader.one .card.pri { box-shadow: 0 0 0 2.5px var(--ember), var(--shadow-card); }
:root[data-theme="dark"] .reader.one .card.is-new { box-shadow: 0 0 0 3px var(--new-ring, var(--social-tile)), var(--shadow-card); }
:root[data-theme="dark"] .askb, :root[data-theme="dark"] .rival-ask-mark { border-color: var(--ask-edge); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); }
:root[data-theme="dark"] .reader.one .fcw .ring .pfp, :root[data-theme="dark"] .reader.one .fcw .ring .face { border-color: var(--ring-gap); }
:root[data-theme="dark"] .reader.one .sub-h h3 > .ic, :root[data-theme="dark"] .reader.one .stats .hot, :root[data-theme="dark"] .pfp.own.init { color: var(--ember-ink); }
:root[data-theme="dark"] .reader.one .fyb { color: var(--ember-ink) !important; }
:root[data-theme="dark"] .reader.one .soft:not(.new):not(.yours) { color: var(--jade-ink); }
:root[data-theme="dark"] .reader.one .chip.ink, :root[data-theme="dark"] .reader.one .soft.yours, :root[data-theme="dark"] .reader.one .top .av, :root[data-theme="dark"] .reader.one .fcw .n:not(.shut) { color: var(--page); }
:root[data-theme="dark"] .reader.one .cm .chip:not(.new):not(.yours):not(.dark):not(.cls):not(.collab):not(.run):not(.when):not(.paid) { background: var(--panel); color: var(--ink); }
:root[data-theme="dark"] .secbar { background: var(--glass-strong); }
:root[data-theme="dark"] .watch .w-sheet { background: var(--sheet); color: var(--ink); }
:root[data-theme="dark"] .watch .w-sheet p { color: var(--ink); }
:root[data-theme="dark"] .watch .w-sheet h4, :root[data-theme="dark"] .watch .w-sheet .w-who b { color: var(--orchid-ink); }
:root[data-theme="dark"] .watch .w-sheet .w-who > span, :root[data-theme="dark"] .watch .w-sheet .iv-line, :root[data-theme="dark"] .watch .iv-nums span, :root[data-theme="dark"] .watch .iv-say span:first-child, :root[data-theme="dark"] .watch .iv-kv dt { color: var(--text2); }
:root[data-theme="dark"] .watch .iv-kv dt, :root[data-theme="dark"] .watch .iv-kv dd { border-color: var(--rule); }
:root[data-theme="dark"] .watch .w-grab::before { background: var(--line-strong); }
:root[data-theme="dark"] .watch .w-end { color: var(--cover-ink); }
:root[data-theme="dark"] .watch .w-end p { color: var(--cover-ink-2); }
:root[data-theme="dark"] .bubble { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .bubble .kbd a, :root[data-theme="dark"] .bubble .kbd button { background: rgba(255,255,255,.06); color: #6AB3F3; }
:root[data-theme="dark"] .rt-chip, :root[data-theme="dark"] .shell.with-rail .ini, :root[data-theme="dark"] .reader .ini { color: var(--ink); }
:root[data-theme="dark"] .srctile .st-dot { border-color: var(--panel); }
:root[data-theme="dark"] .inbox:focus-within { box-shadow: 0 0 0 3px rgba(241,242,243,.16); }
:root[data-theme="dark"] .toggle[aria-checked="true"]::after { background: #FFFFFF; }
:root[data-theme="dark"] .check path { stroke: var(--on-marker); }
:root[data-theme="dark"] .btn.danger { color: var(--page); }
:root[data-theme="dark"] .own-cite { color: var(--orchid-ink); }
/* the competitor's profile: its read sits on the night Orchid gradient */
:root[data-theme="dark"] .rival-end > .ic { color: var(--ember-ink); }
/* onboarding's faint words (the email footer, sources, hints) keep AA on its dark surfaces */
:root[data-theme="dark"] .ob, :root[data-theme="dark"] .ob-coach { --o-faint: #9195A0; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .reader.one .rcover, :root:not([data-theme="light"]) .reader.one .fyp { --ink: var(--cover-ink); }
:root:not([data-theme="light"]) .reader.one .top .rb { background: var(--on-cover); }
:root:not([data-theme="light"]) .reader.one .day .pill { background: var(--on-cover-2); }
:root:not([data-theme="light"]) .reader.one .hi p span, :root:not([data-theme="light"]) .reader.one .day span, :root:not([data-theme="light"]) .reader.one .quietl, :root:not([data-theme="light"]) .reader.one .fcw.quiet b { color: var(--cover-ink-2); }
:root:not([data-theme="light"]) .reader.one .fcw.quiet .ring { background: var(--on-cover) !important; }
:root:not([data-theme="light"]) .reader.one h1.v mark { background: rgba(255,255,255,.16); color: inherit; }
:root:not([data-theme="light"]) .reader.one .b-brief .bh .sti { background: var(--ember); }
:root:not([data-theme="light"]) .reader.one .b-guests .bh .sti { background: var(--jade); }
:root:not([data-theme="light"]) .reader.one .b-competitors .bh .sti { background: var(--orchid); }
:root:not([data-theme="light"]) .reader.one .b-you .bh .sti { background: var(--social-tile); }
:root:not([data-theme="light"]) .reader.one .b-market .bh .sti { background: var(--news-tile); }
:root:not([data-theme="light"]) .reader.one .b-brief .bh .eb { color: var(--ember-ink); }
:root:not([data-theme="light"]) .reader.one .b-guests .bh .eb { color: var(--jade-ink); }
:root:not([data-theme="light"]) .reader.one .b-competitors .bh .eb { color: var(--orchid-ink); }
:root:not([data-theme="light"]) .reader.one .b-you .bh .eb, :root:not([data-theme="light"]) .reader.one .sub-h h3 .tic { color: var(--social-ink); }
:root:not([data-theme="light"]) .reader.one .b-market .bh .eb { color: var(--text2); }
:root:not([data-theme="light"]) .reader.one .card:not(.own) .ch .nm, :root:not([data-theme="light"]) .reader.one .nc .by b { color: var(--name); }
:root:not([data-theme="light"]) .reader.one .card, :root:not([data-theme="light"]) .reader.one .nx, :root:not([data-theme="light"]) .reader.one .one-panel, :root:not([data-theme="light"]) .reader.one .ncw { box-shadow: var(--shadow-card); }
:root:not([data-theme="light"]) .reader.one .card.pri { box-shadow: 0 0 0 2.5px var(--ember), var(--shadow-card); }
:root:not([data-theme="light"]) .reader.one .card.is-new { box-shadow: 0 0 0 3px var(--new-ring, var(--social-tile)), var(--shadow-card); }
:root:not([data-theme="light"]) .askb, :root:not([data-theme="light"]) .rival-ask-mark { border-color: var(--ask-edge); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); }
:root:not([data-theme="light"]) .reader.one .fcw .ring .pfp, :root:not([data-theme="light"]) .reader.one .fcw .ring .face { border-color: var(--ring-gap); }
:root:not([data-theme="light"]) .reader.one .sub-h h3 > .ic, :root:not([data-theme="light"]) .reader.one .stats .hot, :root:not([data-theme="light"]) .pfp.own.init { color: var(--ember-ink); }
:root:not([data-theme="light"]) .reader.one .fyb { color: var(--ember-ink) !important; }
:root:not([data-theme="light"]) .reader.one .soft:not(.new):not(.yours) { color: var(--jade-ink); }
:root:not([data-theme="light"]) .reader.one .chip.ink, :root:not([data-theme="light"]) .reader.one .soft.yours, :root:not([data-theme="light"]) .reader.one .top .av, :root:not([data-theme="light"]) .reader.one .fcw .n:not(.shut) { color: var(--page); }
:root:not([data-theme="light"]) .reader.one .cm .chip:not(.new):not(.yours):not(.dark):not(.cls):not(.collab):not(.run):not(.when):not(.paid) { background: var(--panel); color: var(--ink); }
:root:not([data-theme="light"]) .secbar { background: var(--glass-strong); }
:root:not([data-theme="light"]) .watch .w-sheet { background: var(--sheet); color: var(--ink); }
:root:not([data-theme="light"]) .watch .w-sheet p { color: var(--ink); }
:root:not([data-theme="light"]) .watch .w-sheet h4, :root:not([data-theme="light"]) .watch .w-sheet .w-who b { color: var(--orchid-ink); }
:root:not([data-theme="light"]) .watch .w-sheet .w-who > span, :root:not([data-theme="light"]) .watch .w-sheet .iv-line, :root:not([data-theme="light"]) .watch .iv-nums span, :root:not([data-theme="light"]) .watch .iv-say span:first-child, :root:not([data-theme="light"]) .watch .iv-kv dt { color: var(--text2); }
:root:not([data-theme="light"]) .watch .iv-kv dt, :root:not([data-theme="light"]) .watch .iv-kv dd { border-color: var(--rule); }
:root:not([data-theme="light"]) .watch .w-grab::before { background: var(--line-strong); }
:root:not([data-theme="light"]) .watch .w-end { color: var(--cover-ink); }
:root:not([data-theme="light"]) .watch .w-end p { color: var(--cover-ink-2); }
:root:not([data-theme="light"]) .bubble { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); }
:root:not([data-theme="light"]) .bubble .kbd a, :root:not([data-theme="light"]) .bubble .kbd button { background: rgba(255,255,255,.06); color: #6AB3F3; }
:root:not([data-theme="light"]) .rt-chip, :root:not([data-theme="light"]) .shell.with-rail .ini, :root:not([data-theme="light"]) .reader .ini { color: var(--ink); }
:root:not([data-theme="light"]) .srctile .st-dot { border-color: var(--panel); }
:root:not([data-theme="light"]) .inbox:focus-within { box-shadow: 0 0 0 3px rgba(241,242,243,.16); }
:root:not([data-theme="light"]) .toggle[aria-checked="true"]::after { background: #FFFFFF; }
:root:not([data-theme="light"]) .check path { stroke: var(--on-marker); }
:root:not([data-theme="light"]) .btn.danger { color: var(--page); }
:root:not([data-theme="light"]) .own-cite { color: var(--orchid-ink); }
/* the competitor's profile: its read sits on the night Orchid gradient */
:root:not([data-theme="light"]) .rival-end > .ic { color: var(--ember-ink); }
/* onboarding's faint words (the email footer, sources, hints) keep AA on its dark surfaces */
:root:not([data-theme="light"]) .ob, :root:not([data-theme="light"]) .ob-coach { --o-faint: #9195A0; }
}
.look-night .reader.one .rcover, .reader.one.look-night .rcover, .look-night .reader.one .fyp, .reader.one.look-night .fyp { --ink: var(--cover-ink); }
.look-night .reader.one .top .rb, .reader.one.look-night .top .rb { background: var(--on-cover); }
.look-night .reader.one .day .pill, .reader.one.look-night .day .pill { background: var(--on-cover-2); }
.look-night .reader.one .hi p span, .reader.one.look-night .hi p span, .look-night .reader.one .day span, .reader.one.look-night .day span, .look-night .reader.one .quietl, .reader.one.look-night .quietl, .look-night .reader.one .fcw.quiet b, .reader.one.look-night .fcw.quiet b { color: var(--cover-ink-2); }
.look-night .reader.one .fcw.quiet .ring, .reader.one.look-night .fcw.quiet .ring { background: var(--on-cover) !important; }
.look-night .reader.one h1.v mark, .reader.one.look-night h1.v mark { background: rgba(255,255,255,.16); color: inherit; }
.look-night .reader.one .b-brief .bh .sti, .reader.one.look-night .b-brief .bh .sti { background: var(--ember); }
.look-night .reader.one .b-guests .bh .sti, .reader.one.look-night .b-guests .bh .sti { background: var(--jade); }
.look-night .reader.one .b-competitors .bh .sti, .reader.one.look-night .b-competitors .bh .sti { background: var(--orchid); }
.look-night .reader.one .b-you .bh .sti, .reader.one.look-night .b-you .bh .sti { background: var(--social-tile); }
.look-night .reader.one .b-market .bh .sti, .reader.one.look-night .b-market .bh .sti { background: var(--news-tile); }
.look-night .reader.one .b-brief .bh .eb, .reader.one.look-night .b-brief .bh .eb { color: var(--ember-ink); }
.look-night .reader.one .b-guests .bh .eb, .reader.one.look-night .b-guests .bh .eb { color: var(--jade-ink); }
.look-night .reader.one .b-competitors .bh .eb, .reader.one.look-night .b-competitors .bh .eb { color: var(--orchid-ink); }
.look-night .reader.one .b-you .bh .eb, .reader.one.look-night .b-you .bh .eb, .look-night .reader.one .sub-h h3 .tic, .reader.one.look-night .sub-h h3 .tic { color: var(--social-ink); }
.look-night .reader.one .b-market .bh .eb, .reader.one.look-night .b-market .bh .eb { color: var(--text2); }
.look-night .reader.one .card:not(.own) .ch .nm, .reader.one.look-night .card:not(.own) .ch .nm, .look-night .reader.one .nc .by b, .reader.one.look-night .nc .by b { color: var(--name); }
.look-night .reader.one .card, .reader.one.look-night .card, .look-night .reader.one .nx, .reader.one.look-night .nx, .look-night .reader.one .one-panel, .reader.one.look-night .one-panel, .look-night .reader.one .ncw, .reader.one.look-night .ncw { box-shadow: var(--shadow-card); }
.look-night .reader.one .card.pri, .reader.one.look-night .card.pri { box-shadow: 0 0 0 2.5px var(--ember), var(--shadow-card); }
.look-night .reader.one .card.is-new, .reader.one.look-night .card.is-new { box-shadow: 0 0 0 3px var(--new-ring, var(--social-tile)), var(--shadow-card); }
.look-night .askb { border-color: var(--ask-edge); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); }
.look-night .reader.one .fcw .ring .pfp, .reader.one.look-night .fcw .ring .pfp, .look-night .reader.one .fcw .ring .face, .reader.one.look-night .fcw .ring .face { border-color: var(--ring-gap); }
.look-night .reader.one .sub-h h3 > .ic, .reader.one.look-night .sub-h h3 > .ic, .look-night .reader.one .stats .hot, .reader.one.look-night .stats .hot, .look-night .pfp.own.init { color: var(--ember-ink); }
.look-night .reader.one .fyb, .reader.one.look-night .fyb { color: var(--ember-ink) !important; }
.look-night .reader.one .soft:not(.new):not(.yours), .reader.one.look-night .soft:not(.new):not(.yours) { color: var(--jade-ink); }
.look-night .reader.one .chip.ink, .reader.one.look-night .chip.ink, .look-night .reader.one .soft.yours, .reader.one.look-night .soft.yours, .look-night .reader.one .top .av, .reader.one.look-night .top .av, .look-night .reader.one .fcw .n:not(.shut), .reader.one.look-night .fcw .n:not(.shut) { color: var(--page); }
.look-night .reader.one .cm .chip:not(.new):not(.yours):not(.dark):not(.cls):not(.collab):not(.run):not(.when):not(.paid), .reader.one.look-night .cm .chip:not(.new):not(.yours):not(.dark):not(.cls):not(.collab):not(.run):not(.when):not(.paid) { background: var(--panel); color: var(--ink); }
.look-night .secbar { background: var(--glass-strong); }
.look-night .watch .w-sheet { background: var(--sheet); color: var(--ink); }
.look-night .watch .w-sheet p { color: var(--ink); }
.look-night .watch .w-sheet h4, .look-night .watch .w-sheet .w-who b { color: var(--orchid-ink); }
.look-night .watch .w-sheet .w-who > span, .look-night .watch .w-sheet .iv-line, .look-night .watch .iv-nums span, .look-night .watch .iv-say span:first-child, .look-night .watch .iv-kv dt { color: var(--text2); }
.look-night .watch .iv-kv dt, .look-night .watch .iv-kv dd { border-color: var(--rule); }
.look-night .watch .w-grab::before { background: var(--line-strong); }
.look-night .watch .w-end { color: var(--cover-ink); }
.look-night .watch .w-end p { color: var(--cover-ink-2); }
.look-night .bubble { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-card); }
.look-night .bubble .kbd a, .look-night .bubble .kbd button { background: rgba(255,255,255,.06); color: #6AB3F3; }
.look-night .rt-chip, .look-night .sring .ini, .look-night .ini { color: var(--ink); }
.look-night .srctile .st-dot { border-color: var(--panel); }
.look-night .inbox:focus-within { box-shadow: 0 0 0 3px rgba(241,242,243,.16); }
.look-night .toggle[aria-checked="true"]::after { background: #FFFFFF; }
.look-night .check path { stroke: var(--on-marker); }
.look-night .btn.danger { color: var(--page); }
.look-night .own-cite { color: var(--orchid-ink); }
/* the competitor's profile: its read sits on the night Orchid gradient */
.look-night .rival-end > .ic { color: var(--ember-ink); }

/* The same switch appears in either theme and shares its radio state. */
.tsw, .rail .tsw { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fill); }
.tsw button, .rail .tsw button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; padding: 0 9px; border-radius: 999px; color: var(--text2); font-size: 12px; font-weight: 600; }
.tsw button[aria-checked="true"], .rail .tsw button[aria-checked="true"] { background: var(--panel); box-shadow: var(--shadow-card); color: var(--ink); }
.tsw button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rail-theme { margin-top: auto; padding: 12px 0; }
.rail-theme .cap { margin: 0 12px 8px; }
.logo-motion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; font-size: 13.5px; color: var(--text2); }
.rail .logo-motion-row .toggle { height: 28px; padding: 0; border-radius: 999px; }
#sheet .logo-motion-row { padding: 12px 4px; font-size: 15px; color: var(--ink); }
.rail-theme + .foot { margin-top: 0; }
/* switchHtml("rail") uses a context class, not another navigation rail. */
.shell.with-rail .rail .tsw.rail { position: static; inset: auto; width: auto; min-height: 0; flex-direction: row; gap: 2px; padding: 4px; border: 0; z-index: auto; background: var(--fill); }
/* In the rail the three share its width, so every word shows. */
.shell.with-rail .rail .tsw.rail { display: flex; width: 100%; }
.shell.with-rail .rail .tsw.rail button { flex: 1 1 0; min-width: 0; padding: 0 4px; gap: 4px; }
.shell.with-rail .rail .tsw.rail button .ic { width: 14px; height: 14px; }

/* ---------- desktop: the shell at 980, the report and the viewer at 1024, two columns at 1280 (the phone keeps its layout) ---------- */
:root {
  --rt-brief: var(--ember); --rt-offers: var(--jade); --rt-ads: var(--orchid);
  --rt-social: var(--social-tile, #C65A64); --rt-news: var(--news-tile, var(--charcoal));
  --desktop-arrow-shadow: 0 6px 18px rgba(17,18,20,.16);
}
:root[data-theme="dark"] {
  --rt-brief: var(--g-brief); --rt-offers: var(--g-offers); --rt-ads: var(--g-ads);
  --rt-social: var(--g-social); --rt-news: var(--g-news);
  --desktop-arrow-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-brief: var(--g-brief); --rt-offers: var(--g-offers); --rt-ads: var(--g-ads);
    --rt-social: var(--g-social); --rt-news: var(--g-news);
    --desktop-arrow-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.5);
  }
}
.rail-secs, .w-amb, .w-drail, .w-nav, .w-picture-nav, .w-key-hint { display: none; }
.watch .w-drail.w-rail { display: none; }
@media (min-width: 980px) {
  .shell.with-rail .rail { overflow-y: auto; }
  .shell.with-rail .rail > * { flex-shrink: 0; }
  .rail-secs { display: grid; gap: 2px; }
  .rail-secs:empty { display: none; }
  .rail-secs a { text-decoration: none; }
  .rail-secs .rs { display: flex; align-items: center; height: 44px; border-radius: 14px; padding: 0 10px; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 500; }
  .rs-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--wash); }
  .rs-tile .tic { width: 20px; height: 20px; color: var(--text2); }
  .rs-label { min-width: 0; }
  .rs-badge { display: grid; place-items: center; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ember); color: #fff; font-size: 12px; font-weight: 700; }
  .rail-secs .rs.on { background: var(--panel); box-shadow: var(--shadow-card, 0 1px 0 var(--rule)); font-weight: 600; }
  .rs.on .rs-tile { background: var(--rt); }
  .rs.on .rs-tile .tic { color: #fff; }
  .rail-secs .rail-sub { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 54px; border-radius: 10px; font-size: 14px; color: var(--text2); }
  .rail-sub span { margin-left: auto; font-variant-numeric: tabular-nums; }
  .rail-secs a:hover { background: var(--wash); }
  .rail-secs a:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
  /* KB 49 2.3.5: a pop-up is a dialog centred on the screen, 440 px, up to 80 % high. The days and search lists and Ask Tellz
     keep the tall side sheet on the right (lists to browse and a conversation, not a message). */
  #sheet, #sheet.open { left: 50%; width: 440px; max-width: calc(100% - 32px); max-height: 80vh; max-height: 80dvh; border-radius: 24px; }
  #sheet:is(:has(.gp-days), :has(.gp-search), :has(> .ask-kit)), #sheet.open:is(:has(.gp-days), :has(.gp-search), :has(> .ask-kit)) {
    position: fixed; top: 16px; right: 16px; bottom: 16px; left: auto;
    width: 440px; max-width: calc(100% - 32px); height: auto; max-height: none;
    border-radius: 24px; overflow-y: auto; opacity: 1;
    transition: transform 320ms var(--ease-drawer);
  }
  #sheet:is(:has(.gp-days), :has(.gp-search), :has(> .ask-kit)) { transform: translateX(calc(100% + 32px)); }
  #sheet.open:is(:has(.gp-days), :has(.gp-search), :has(> .ask-kit)) { transform: none; }
  /* Ask Tellz is a conversation beside the report, not a message over it (owner, 25 Oct 2026: "the ask tellz coming in the
     middle on the screen"): the full-height panel on the right, its thread scrolling inside. Decided under KB 49. */
  #sheet:has(> .ask-kit) { display: flex; height: auto; max-height: none; overflow: hidden; }
  #sheet .handle { display: none; }
  #sheet[data-name="share"] { top: 50%; bottom: auto; border-radius: 24px; transform: translate(-50%, -46%) scale(0.98); opacity: 0; transition: transform 240ms var(--ease-out), opacity 200ms ease; }
  #sheet[data-name="share"].open { transform: translate(-50%, -50%); opacity: 1; }
  .toast, html.watching .toast { top: auto; bottom: 32px; }
  body:has(.shell.with-rail) .toast { left: calc(50% + 116px); }
}
@media (min-width: 1024px) {
  html.one-page .col:has(> .reader.one) { --col: 100%; width: 100%; max-width: none; padding: 0; margin-inline: auto; }
  html.one-page .shell.with-rail .col:has(> .reader.one) { width: calc(100% - var(--rail)); margin-left: var(--rail); margin-right: 0; }
  html.one-page .reader.one { max-width: 1104px; padding-inline: 40px; margin-inline: auto; }
  html.one-page #secbar { display: none; }
  .reader.one .askb { right: 32px; bottom: 32px; }
  .reader.one .band { padding: var(--spacing-48, 48px) 0 0; scroll-margin-top: 24px; }
  .reader.one .band:first-child { padding: 24px 0 0; }
  .reader.one .band:last-child { padding-bottom: 120px; }
  .reader.one .rinner { padding-inline: 0; }
  .reader.one .rcover {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "hi top" "day day" "verdict verdict" "faces faces";
    column-gap: 48px; align-items: start; margin-top: 24px; border-radius: 28px; padding: 40px 44px 36px;
  }
  .reader.one .rcover > * { min-width: 0; }
  .reader.one .rcover .top { grid-area: top; margin-bottom: 0; justify-content: flex-end; }
  .reader.one .rcover .top .lockup { display: none; }
  .reader.one .rcover .hi { grid-area: hi; margin-top: 0; }
  .reader.one .rcover .day { grid-area: day; }
  .reader.one .rcover h1.v { grid-area: verdict; font-size: 44px; line-height: 52px; font-weight: 600; letter-spacing: -.035em; max-width: 16em; }
  .reader.one .rcover .cover-faces { grid-area: faces; min-width: 0; }
  .reader.one .rcover .faces { gap: 16px; margin-inline: 0; padding-inline: 0; }
  /* Four faces or fewer: one column, the faces under the headline; the buttons share the greeting's row in their own cell
     (an absolute top bar sat under the day pill and lost its clicks). */
  .reader.one .rcover.few {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "hi top" "day day" "verdict verdict" "faces faces";
    padding: 24px 32px 28px;
  }
  .reader.one .rcover.few .top { margin: 0; align-self: start; }
  .reader.one .rcover.few .hi p { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .reader.one .rcover.few .hi b { font-size: 18px; line-height: 24px; }
  .reader.one .rcover.few h1.v { max-width: none; font-size: 32px; line-height: 38px; }
  .reader.one .bh h2 { font-size: 40px; line-height: 48px; letter-spacing: -.03em; }
  .reader.one .bh p { font-size: 18px; line-height: 28px; }
  .reader.one .sub-h { margin-top: 40px; scroll-margin-top: 24px; }
  .reader.one .one-row { margin: 20px 0 0; }
  .reader.one .one-row .track { display: flex; gap: 20px; padding: 4px 2px 14px; margin-inline: -2px; scroll-padding: 0; }
  .reader.one .one-row .card { flex: none; width: var(--report-card-width-desktop, 296px); max-width: none; min-width: 0; }
  .reader.one .nx { width: 48px; height: 48px; right: -24px; top: 38%; background: var(--panel); }
  #reader.one .nx { box-shadow: var(--desktop-arrow-shadow); }
  .reader.one .nx.pv { left: -24px; right: auto; }
  .reader.one .b-brief .one-row:nth-child(1 of .one-row) .track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; }
  .reader.one .b-brief .one-row:nth-child(1 of .one-row) .card { width: auto; }
  .reader.one .b-brief .one-row:nth-child(1 of .one-row) .nx { display: none; }
  .reader.one .b-brief .one-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
  .reader.one :is(.card.story, .card.reel) .acts2 [data-details] { width: 36px; height: 36px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
  .reader.one :is(.card.story, .card.reel) .acts2 [data-details] .ic { flex: none; }
  .reader.one .b-market .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .reader.one .full { width: 100%; }
  .reader.one .end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "check share" "heading share" "line pills"; column-gap: 32px; align-items: start; }
  .reader.one .end .mk { grid-area: check; }
  .reader.one .end h2 { grid-area: heading; }
  .reader.one .end > p:not(.coverage) { grid-area: line; }
  .reader.one .end .blk { grid-area: share; margin-top: 0; align-self: end; }
  .reader.one .end .two { grid-area: pills; flex-wrap: wrap; }
  .reader.one .end .coverage { grid-column: 1; }

  .watch { --ph: calc(100vh - 48px); --pw: calc(var(--ph) * 9 / 16); background: #0E0E0D; }
  .watch .w-amb { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  .w-amb img { width: 100%; height: 100%; object-fit: cover; filter: blur(64px) brightness(.38) saturate(1.25); transform: scale(1.15); }
  .watch .w-feed { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); height: var(--ph); width: var(--pw); max-width: none; margin: 0; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.55); transition: transform 320ms var(--ease-drawer); }
  .watch .w-top, .watch .w-prog { position: fixed; top: 24px; width: var(--pw); max-width: none; transition: transform 320ms var(--ease-drawer), opacity 160ms ease; }
  .watch .w-prog { top: 84px; width: calc(var(--pw) - 28px); }
  .watch .w-slide .w-rail { display: none; }
  .watch .w-meta { right: 16px; }
  /* the copy carries .w-rail too, so every rule for the slide's own actions (the face's caret, a hold) holds beside the panel */
  .watch .w-drail.w-rail { position: fixed; right: auto; top: auto; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 16px; left: calc(50% + var(--pw) / 2 + 20px); bottom: 48px; transition: transform 320ms var(--ease-drawer), opacity 160ms ease; }
  .w-drail button { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 70px; padding: 0; border: 0; background: none; color: #fff; font-size: 11.5px; line-height: 1.5; }
  .watch .w-drail .w-icon { width: 52px; height: 52px; }
  .watch .w-nav { position: fixed; z-index: 5; right: 32px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; }
  .w-nav button, .w-picture-nav button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .w-nav button:disabled, .w-picture-nav button:disabled { opacity: .35; cursor: default; }
  .watch .w-picture-nav { display: flex; justify-content: space-between; position: fixed; z-index: 4; top: calc(50% - 20px); left: 50%; width: var(--pw); padding-inline: 10px; transform: translateX(-50%); transition: transform 320ms var(--ease-drawer); pointer-events: none; }
  .w-picture-nav button { width: 40px; height: 40px; pointer-events: auto; }
  .watch .w-key-hint { display: block; position: fixed; bottom: 24px; left: 32px; font-size: 13px; color: rgba(255,255,255,.62); }
  .watch :is(.w-amb, .w-drail, .w-picture-nav)[hidden] { display: none; }
  .watch :is(.w-drail, .w-nav, .w-picture-nav) button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
  .watch .w-sheet { position: fixed; left: auto; right: 24px; top: 24px; bottom: 24px; width: 400px; max-width: calc(100% - 48px); max-height: none; border-radius: 28px; padding-top: 70px; transform: translateX(calc(100% + 48px)); }
  .watch .w-sheet.on { transform: none; }
  /* Retain the existing close control and focus target, with a desktop icon. */
  .watch .w-grab { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; margin: 0; background: var(--wash); color: var(--ink); }
  #watch .w-grab::before { content: "×"; position: static; display: block; width: auto; height: auto; transform: none; background: none; font-size: 28px; line-height: 40px; }
  .watch:has(.w-sheet.on) :is(.w-feed, .w-top, .w-prog, .w-picture-nav) { transform: translateX(calc(-50% - 220px)); }
  .watch:has(.w-sheet.on) .w-drail { transform: translateX(-220px); }
  .watch .w-scrim { background: rgba(0,0,0,.25); }
  .watch:has(.w-sheet.on) .w-key-hint, html:has(.watch .w-sheet.on) .askb,
  .watch.clean :is(.w-drail, .w-nav, .w-picture-nav, .w-key-hint) { visibility: hidden; pointer-events: none; }
}
@media (min-width: 1280px) {
  /* the archive is the pages area's own layout now (css/pages.css); these three take two columns of panels */
  html:is([data-screen="manage"], [data-screen="help"], [data-screen="usage"]) .shell.with-rail .col { --col: 960px; }
  html:is([data-screen="manage"], [data-screen="help"], [data-screen="usage"]) #view > .stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  html:is([data-screen="manage"], [data-screen="help"], [data-screen="usage"]) #view > .stack > * { min-width: 0; }
  html:is([data-screen="manage"], [data-screen="help"], [data-screen="usage"]) #view > .stack > :not(.panel),
  html[data-screen="manage"] #view > .stack > .setcard { grid-column: 1 / -1; }
}
@media (min-width: 1440px) { html.one-page .reader.one { padding-inline: 44px; } }
@media (min-width: 980px) and (prefers-reduced-motion: reduce) {
  #sheet, #sheet.open, .watch *, .watch *::before { transition: none !important; scroll-behavior: auto !important; }
}

/* Meta's own button is neutral, separate from Tellz's Ember action. */
:root { --ad-button: #E2E4E8; }
:root[data-theme="dark"], .look-night { --ad-button: rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ad-button: rgba(255,255,255,.12); } }

/* Graphite night (owner, 22 Oct 2026: the dark report looked AI-made; picked A Graphite). A neutral page with no section
   wash, a graphite cover instead of the burgundy one, cards lifted by shade with a top light edge and no hairline, no
   highlighter or left stripe; colour stays on actions, competitors, dates and pictures. KB 33 section Dark. */
html.one-page[data-theme="dark"] body { background: var(--page); }
:root[data-theme="dark"] .reader.one .rcover, .look-night .reader.one .rcover, .reader.one.look-night .rcover { background: linear-gradient(170deg, #2A2A2E 0%, var(--cover-bg) 55%, #161618 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
:root[data-theme="dark"] .reader.one .rcover .top .rb, .look-night .reader.one .rcover .top .rb, .reader.one.look-night .rcover .top .rb { background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .reader.one .rcover .day .pill, .look-night .reader.one .rcover .day .pill, .reader.one.look-night .rcover .day .pill { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .reader.one h1.v, .look-night .reader.one h1.v, .reader.one.look-night h1.v { font-size: 30px; line-height: 37px; letter-spacing: -0.02em; }
:root[data-theme="dark"] .reader.one :is(.pen-swipe, .pen-you), .look-night .reader.one :is(.pen-swipe, .pen-you), .reader.one.look-night :is(.pen-swipe, .pen-you) { background-image: none; color: inherit; font-weight: 700; padding: 0; margin: 0; }
:root[data-theme="dark"] .reader.one :is(.pen-one, .pen-two)::after, .look-night .reader.one :is(.pen-one, .pen-two)::after, .reader.one.look-night :is(.pen-one, .pen-two)::after { display: none; }
:root[data-theme="dark"] .reader.one :is(.notice, .mk-up, .one-panel, .ncw), .look-night .reader.one :is(.notice, .mk-up, .one-panel, .ncw), .reader.one.look-night :is(.notice, .mk-up, .one-panel, .ncw) { border: 0; box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .shell.with-rail .rail { background: #141416; border-right-color: #1F1F22; }
@media (prefers-color-scheme: dark) {
  html.one-page:not([data-theme="light"]) body { background: var(--page); }
  :root:not([data-theme="light"]) .reader.one .rcover { background: linear-gradient(170deg, #2A2A2E 0%, var(--cover-bg) 55%, #161618 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .reader.one .rcover .top .rb { background: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .reader.one .rcover .day .pill { background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .reader.one h1.v { font-size: 30px; line-height: 37px; letter-spacing: -0.02em; }
  :root:not([data-theme="light"]) .reader.one :is(.pen-swipe, .pen-you) { background-image: none; color: inherit; font-weight: 700; padding: 0; margin: 0; }
  :root:not([data-theme="light"]) .reader.one :is(.pen-one, .pen-two)::after { display: none; }
  :root:not([data-theme="light"]) .reader.one :is(.notice, .mk-up, .one-panel, .ncw) { border: 0; box-shadow: var(--shadow-card); }
  :root:not([data-theme="light"]) .shell.with-rail .rail { background: #141416; border-right-color: #1F1F22; }
}
@media (min-width: 980px) {
  :root[data-theme="dark"] .reader.one .rcover h1.v { font-size: 36px; line-height: 43px; letter-spacing: -0.02em; } .look-night .reader.one .rcover h1.v { font-size: 36px; line-height: 43px; letter-spacing: -0.02em; } .reader.one.look-night .rcover h1.v { font-size: 36px; line-height: 43px; letter-spacing: -0.02em; }
}
@media (min-width: 980px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reader.one .rcover h1.v { font-size: 36px; line-height: 43px; letter-spacing: -0.02em; } }

/* The view switcher on a dark cover (owner, 23 Oct 2026): the same quiet glass as the round buttons beside it. */
:root[data-theme="dark"] .reader.one .top .viewsw, .look-night .reader.one .top .viewsw, .reader.one.look-night .top .viewsw { background: rgba(255,255,255,.07); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader.one .top .viewsw { background: rgba(255,255,255,.07); color: var(--ink); }
}