/* home.css — the candidate homepage (dashboard). Layout from the approved mock,
   motion = "Theatrical", red mode rebuilt to three tones. Loaded only by home.html. */

/* ============================================================================
   THE ASSEMBLED LAYOUT, as approved.

   Assembled from: profile card = B · nav cards = A · radar = A (unboxed) ·
   correspondence = A · newsletter = A's structure at one line · radar ABOVE the
   newsletter · analytics unboxed. Dual-tone throughout: ink for what matters,
   muted for support, crimson for the one accent. Heritage v2 laws hold.
   ========================================================================== */

/* ---- the three themes -------------------------------------------------- */
:root, html[data-theme="light"]{
  --paper:#F6F2E9; --ink:#16150F; --muted:#5C5849;
  --hair:#DAD3C2; --hair-soft:#E7E1D2;
  --crimson:#9E1B32; --on-crimson:#F6F2E9;
  --verified:#1A7A5E; --on-verified:#F6F2E9;
  --owner:#3E5C8A; --pending:#8C6212; --danger:#B23A2E; --gold:#94762F;
  /* cards are MATERIAL, not outline: a warmer sheet of the same paper, lifted
     off the page by a soft shadow instead of ruled off it by a hairline. */
  --card:#F0EBDC;
  --card-sh:0 1px 2px rgba(22,21,15,.05), 0 6px 18px rgba(22,21,15,.07);
}
/* crimson mode. These are the corrected three-tone values (see the note further
   down); the older flat pair that lived here set --crimson to the same parchment
   as --ink, and although the block below already overrode it, leaving the dead
   values here invited them back the next time a selector was touched. */
html[data-theme="dark"]{
  --paper:#7E1428; --ink:#F6F2E9; --muted:#E0B3BC;
  --hair:rgba(246,242,233,.30); --hair-soft:rgba(232,200,119,.22);
  --crimson:#E8C877; --on-crimson:#4A0D18;
  --verified:#8FD9B6; --on-verified:#4A0D18;
  --owner:#A9C4E8; --pending:#F0C25E; --danger:#FFB29F; --gold:#E8C877;
  --card:#6B0F20;                                  /* a deeper oxblood sheet */
  --card-sh:0 1px 3px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.18);
}
html[data-theme="dark"][data-dark="noir"]{
  --paper:#141110; --ink:#F6F2E9; --muted:rgba(246,242,233,.74);
  --hair:rgba(246,242,233,.20); --hair-soft:rgba(246,242,233,.10);
  --crimson:#F23645; --on-crimson:#F6F2E9;
  --verified:#8FD9B6; --on-verified:#0E2A20;
  --owner:#A9C4E8; --pending:#E6C06A; --danger:#FFB29F; --gold:#D8B455;
  /* a lifted charcoal, one step off the near-black page. Oxblood cards were
     tried here and read as an alarm rather than as a surface. */
  --card:#221E1C;
  --card-sh:0 1px 3px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.26);
}
:root{
  --display:'Libre Caslon Display',Georgia,serif;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-nav:100; --z-panel:400;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-weight:400;font-family:var(--serif);line-height:1.15;text-wrap:balance}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;color:var(--crimson)}
::selection{background:var(--crimson);color:var(--on-crimson)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.lbl{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- masthead ---------------------------------------------------------- */
.mast{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;gap:16px;padding:14px clamp(16px,3vw,32px)}
.wordmark{font-family:var(--display);font-size:1.3rem;line-height:1}
.wordmark b{color:var(--crimson);font-weight:400}
.mast .grow{flex:1}
.mockname{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);border-left:1px solid var(--hair);padding-left:16px}
.thsel{display:inline-flex;border:1px solid var(--hair)}
.thsel button{padding:7px 10px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.thsel button+button{border-left:1px solid var(--hair)}
.thsel button.on{background:var(--ink);color:var(--paper)}

/* ---- shell ------------------------------------------------------------- */
.shell{max-width:1360px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,32px) 80px;
  display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:clamp(14px,1.6vw,22px);align-items:start}
@media(max-width:1180px){.shell{grid-template-columns:280px minmax(0,1fr)}.col-3{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:inherit}}
@media(max-width:860px){.shell{grid-template-columns:1fr}.col-3{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
/* Sticky rails get their own scroll when they are taller than the viewport, so a
   short screen can never bury a card (e.g. "Build your resume") below the fold
   with no way to reach it but scrolling the whole page past the dispatch. */
.col-1,.col-3{position:sticky;top:78px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:thin}
.col-1::-webkit-scrollbar,.col-3::-webkit-scrollbar{width:6px}
.col-1::-webkit-scrollbar-thumb,.col-3::-webkit-scrollbar-thumb{background:var(--hair)}
@media(max-width:1180px){.col-1,.col-3{position:static}}

.plate{border:none;padding:22px;background:var(--card);box-shadow:var(--card-sh)}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:15px}
.sec-h .t{font-family:var(--serif);font-size:1.14rem}
.sec-h .grow{flex:1}

/* ---- PROFILE (from B): centred masthead block -------------------------- */
.pwho{text-align:center;border-bottom:1px solid var(--hair);padding-bottom:16px}
.mono{width:64px;height:64px;margin:0 auto 12px;border:1px solid var(--ink);display:grid;place-items:center;
  font-family:var(--display);font-size:1.55rem;color:var(--ink)}
.pwho .nm{font-family:var(--display);font-size:1.46rem;line-height:1.1;color:var(--ink)}
.pwho .rl{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--crimson);margin-top:5px}
.bio{font-family:var(--serif);font-size:15px;line-height:1.72;margin-top:16px;text-align:justify;hyphens:auto;color:var(--muted)}
/* the profile card's one action: the full ceremonial record */
.viewrec{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:11px 14px;
  border:1px solid var(--hair);background:none;cursor:pointer;color:var(--muted);
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:color .24s var(--ease),border-color .24s var(--ease)}
.viewrec svg{transition:transform .34s var(--ease)}
.viewrec:hover{color:var(--crimson);border-color:var(--crimson)}
.viewrec:hover svg{transform:translateX(5px)}

/* ---- NAV CARDS (from A): bordered plates ------------------------------- */
.nav-plate{display:flex;align-items:center;gap:13px;padding:17px 18px;border:none;background:var(--card);box-shadow:var(--card-sh);width:100%;text-align:left;position:relative;overflow:hidden}
.nav-plate .ic{width:18px;height:18px;color:var(--crimson);flex:none}
.nav-plate .tx{flex:1;min-width:0}
.nav-plate .tx b{display:block;font-family:var(--serif);font-weight:600;font-size:1.3rem;line-height:1.18;letter-spacing:-.005em;color:var(--ink)}
/* SCOPED TO .sub ON PURPOSE. The heading's text sits in <b><span class="ul">,
   so a bare `.tx span` selector also matched the title's own span and rendered
   it at the caption's 13px, which is why the two lines looked identical no
   matter how large the <b> was set. */
.nav-plate .tx .sub{display:block;font-size:13px;font-weight:500;line-height:1.45;margin-top:3px;color:var(--muted)}
.nav-plate .go{color:var(--muted);flex:none}

/* ---- RADAR (from A) sits ABOVE the newsletter, figures UNBOXED --------- */
.figs{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--hair-soft)}
.figs .n{font-family:var(--display);font-size:2.3rem;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.figs .l{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.radarwrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.radar .ring,.radar .spoke{fill:none;stroke:var(--hair);stroke-width:1}
/* two shapes on one axis: everything CLAIMED, drawn duller and dashed, with the
   VERIFIED shape solid on top of it. The gap between them is the honest picture
   of how much of the record is still unproven. */
.radar .shape-all{fill:color-mix(in srgb,var(--muted) 9%,transparent);stroke:var(--muted);stroke-width:1.1;
  stroke-dasharray:3 3;opacity:.62}
.radar .shape{fill:color-mix(in srgb,var(--crimson) 14%,transparent);stroke:var(--crimson);stroke-width:1.6}
.radar .dot{fill:var(--paper);stroke:var(--crimson);stroke-width:1.5}
.radar .axl{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)}
.rkey{flex:1;min-width:168px;display:flex;flex-direction:column;gap:8px}
.rkey .r{display:flex;align-items:baseline;gap:10px;font-size:14px}
.rkey .r b{flex:1;font-weight:400;font-family:var(--serif);color:var(--ink)}
.rkey .r i{font-family:var(--display);font-style:normal;font-variant-numeric:tabular-nums;color:var(--crimson);min-width:14px;text-align:right}
.rkey .r u{font-family:var(--display);text-decoration:none;font-variant-numeric:tabular-nums;color:var(--muted);min-width:22px;text-align:right}
.rkey .r u::before{content:'/ ';opacity:.5}
/* which line is which */
.rlegend{display:flex;align-items:center;gap:7px;margin-top:6px;padding-top:10px;border-top:1px solid var(--hair-soft);
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rlegend .sw{width:14px;height:0;border-top:2px solid var(--crimson);display:inline-block}
.rlegend .sw.all{border-top:1px dashed var(--muted);margin-left:9px}

/* ---- NEWSLETTER: heading + ONE teaser line, the tail of it blurred ----- */
.dispatch-h{font-family:var(--serif);font-style:italic;font-size:2.05rem;font-weight:500;line-height:1.05;letter-spacing:-.012em;color:var(--ink)}
.dispatch-s{font-size:13.5px;color:var(--muted);margin-top:3px}
/* The dispatch is now a running log rather than four items, so the card is
   capped and scrolls inside itself. Without this the middle column grew past
   the length of the whole page. */
/* The dispatch card extends to fit ALL its entries: no inner cap and no inner
   scrollbar. The page itself is what scrolls, and because the middle column is
   the tall one, the left and right columns are sticky and only the middle keeps
   going, which is the 'only the middle section scrolls' behaviour asked for. */
#news{overflow:visible}
.news{border-top:1px solid var(--hair-soft);padding:15px 0}
.news:first-of-type{border-top:none;padding-top:4px}
.news:last-of-type{padding-bottom:0}
.news .meta{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.news .tag{color:var(--crimson)}
.news h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.22;color:var(--ink)}
/* the single teaser line: a few words legible, the rest of THAT LINE blurred */
.teaser{display:flex;align-items:baseline;gap:0;margin-top:5px;font-size:13.5px;line-height:1.5;
  white-space:nowrap;overflow:hidden;color:var(--muted)}
.teaser .lead{flex:none}
.teaser .rest{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;filter:blur(2.6px);opacity:.6}
/* opened: the full story, unblurred */
.teaserwrap{display:grid;grid-template-rows:1fr}
.teaserwrap>.teaser{overflow:hidden;min-height:0}
.fullwrap{display:grid;grid-template-rows:0fr}
.fullwrap>.full{overflow:hidden;min-height:0;font-size:14.5px;line-height:1.68;color:var(--ink);max-width:64ch}
.news.open .teaserwrap{grid-template-rows:0fr}
.news.open .fullwrap{grid-template-rows:1fr}
.more{margin-top:7px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);display:inline-flex;gap:6px;align-items:center}

/* the drawn underline (from E), available to any title */
.ul{display:inline;background-image:linear-gradient(var(--crimson),var(--crimson));background-repeat:no-repeat;
  background-size:0% 1px;background-position:0 100%}

/* ---- ANALYTICS: no boxes, bigger and bolder numbers -------------------- */
.antop{display:flex;gap:20px}
.antop>div{flex:1}
.antop .n{font-family:var(--display);font-size:3rem;font-variant-numeric:tabular-nums;line-height:.98;color:var(--ink)}
.antop .l{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.antop .s{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--muted)}
.anmore{display:grid;grid-template-rows:0fr}
.anmore>.list{overflow:hidden}
.an.open .anmore{grid-template-rows:1fr}
.anmore .list{margin-top:6px}
.anmore .list div{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--hair-soft)}
.anmore .list .n{font-family:var(--display);font-size:1.9rem;font-variant-numeric:tabular-nums;color:var(--crimson);min-width:56px}
.anmore .list .l{flex:1;font-family:var(--serif);font-size:15px;color:var(--ink)}
.anx{margin-top:14px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);display:inline-flex;gap:7px;align-items:center}

/* ---- CORRESPONDENCE (from A) ------------------------------------------ */
.mailrow{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--hair-soft);width:100%;text-align:left}
.mailrow:first-of-type{border-top:none}
.mailrow .dot{width:7px;height:7px;flex:none;margin-top:7px;background:var(--crimson)}
.mailrow.read .dot{background:transparent;border:1px solid var(--hair)}
.mailrow .m{flex:1;min-width:0}
.mailrow .nm{display:block;font-family:var(--serif);font-size:1.04rem;line-height:1.25;color:var(--ink)}
.mailrow .sb{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailrow .wn{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none}
.readall{display:block;margin-top:14px;padding-top:13px;border-top:1px solid var(--hair);text-align:center;
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson)}

/* ---- side panel -------------------------------------------------------- */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 44%,transparent);opacity:0;pointer-events:none;z-index:var(--z-panel)}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,94vw);background:var(--paper);border-left:1px solid var(--ink);
  transform:translateX(100%);z-index:calc(var(--z-panel) + 1);display:flex;flex-direction:column}
.panel.on{transform:none}
.panel-h{padding:22px 24px 16px;border-bottom:1px solid var(--hair);display:flex;align-items:flex-start;gap:12px}
.panel-h .who{flex:1}
.panel-h .who .nm{font-family:var(--serif);font-size:1.3rem}
.panel-x{width:30px;height:30px;border:1px solid var(--hair);color:var(--muted);display:grid;place-items:center}
.panel-b{flex:1;overflow-y:auto;padding:20px 24px}
/* SENT is a plain outline; RECEIVED is the accented box, because a note from a
   recruiter is an opportunity arriving and should read as one. */
.letter{border:1px solid var(--hair);padding:15px 16px;font-family:var(--serif);font-size:15.5px;line-height:1.7;margin-bottom:14px}
.letter .from{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.letter.recv{border-color:var(--crimson);background:color-mix(in srgb,var(--crimson) 8%,transparent)}
.letter.recv .from{color:var(--crimson)}
.panel-f{border-top:1px solid var(--hair);padding:14px 24px}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 16px;background:var(--crimson);color:var(--on-crimson);border:1px solid var(--crimson)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ══ MOTION + RED-MODE CORRECTION (from the approved final mock) ══ */
/* ── 3 · RED MODE, REBUILT ────────────────────────────────────────────────
   The old crimson theme set --crimson to the same parchment as --ink, so accent
   and text were literally one colour and the page flattened into two tones. Here
   the oxblood field keeps THREE distinct voices, which is what gives it depth:
       parchment  #F6F2E9   what matters (headings, figures, names)
       rose       #E0B3BC   supporting text, meta, labels
       gold       #E8C877   the single accent: tags, numerals, rules, marks
   Oxblood and gold is the bound-ledger pairing the brand already implies, and it
   keeps green free to mean "vouched" and nothing else. All three clear AA on the
   oxblood field (8.6:1, 5.4:1, 6.0:1). */
html[data-theme="dark"]:not([data-dark="noir"]){
  --paper:#7E1428;
  --ink:#F6F2E9;
  --muted:#E0B3BC;
  --hair:rgba(246,242,233,.30);
  --hair-soft:rgba(232,200,119,.22);      /* sub-rules pick up the gold */
  --crimson:#E8C877;                       /* THE ACCENT, no longer parchment */
  --on-crimson:#4A0D18;                    /* deep oxblood, for text on gold */
  --verified:#8FD9B6; --on-verified:#4A0D18;
  --owner:#A9C4E8; --pending:#F0C25E; --danger:#FFB29F; --gold:#E8C877;
}
/* the wordmark period and the masthead rule carry the accent too */
html[data-theme="dark"]:not([data-dark="noir"]) .mast{border-bottom-color:var(--crimson)}
html[data-theme="dark"]:not([data-dark="noir"]) .mono{border-color:var(--crimson)}
html[data-theme="dark"]:not([data-dark="noir"]) .pwho .rl{color:var(--crimson)}
html[data-theme="dark"]:not([data-dark="noir"]) .thsel button.on{background:var(--crimson);color:var(--on-crimson)}
/* the radar reads as drawn gold on oxblood */
html[data-theme="dark"]:not([data-dark="noir"]) .radar .dot{fill:var(--paper);stroke:var(--crimson)}

/* ── MOTION ───────────────────────────────────────────────────────────────
   The staged ENTRANCE was removed 2026-07-19: this page no longer reveals
   itself over time, it is simply there on first paint. Everything below is
   motion the user causes by pointing at something, plus the analytics
   expand. Page-to-page movement lives in shell.css. */
.plate,.nav-plate{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.nav-plate:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.09), 0 16px 34px rgba(0,0,0,.10)}

/* the hover outline is now the shared one in shell.css, on every card */

/* ── 2 · the icon ENLARGES smoothly. No rotation. ───────────────────────── */
.nav-plate .ic{transition:transform .42s var(--ease),color .3s var(--ease);transform-origin:center}
.nav-plate:hover .ic{transform:scale(1.28);color:var(--crimson)}
.nav-plate .go{transition:transform .42s var(--ease),color .3s var(--ease)}
.nav-plate:hover .go{transform:translateX(8px);color:var(--crimson)}
.nav-plate .tx b{transition:color .3s var(--ease)}
.nav-plate:hover .tx b{color:var(--crimson)}

.ul{transition:background-size .5s var(--ease)}
.nav-plate:hover .ul,.news:hover h3 .ul,.mailrow:hover .nm .ul{background-size:100% 1px}

/* the dispatch: click a story to expand it, click again to collapse it.
   (No hover-to-read — the whole entry is a click target.) */
.news{cursor:pointer}
.teaserwrap,.fullwrap{transition:grid-template-rows .55s var(--ease)}
.teaser .rest{transition:filter .45s var(--ease),opacity .45s var(--ease)}
.news.open .teaser .rest{filter:none;opacity:1}
.more{transition:opacity .3s var(--ease)}
.more .chev{transition:transform .3s var(--ease)}
.news.open .more .chev{transform:rotate(90deg)}

.anmore{transition:grid-template-rows .55s var(--ease)}
.anmore .list div{opacity:0;clip-path:inset(0 100% 0 0)}
.an.open .anmore .list div{opacity:1;clip-path:inset(0 0 0 0);transition:opacity .26s var(--ease) calc(var(--d,0)*45ms),clip-path .34s var(--ease) calc(var(--d,0)*45ms)}

.mailrow{transition:transform .32s var(--ease)}
.mailrow:hover{transform:translateX(8px)}
.mailrow .dot{transition:transform .34s var(--ease)}
.mailrow:hover .dot{transform:scale(2)}
.scrim{transition:opacity .4s var(--ease)}
.panel{transition:transform .58s var(--ease)}

/* ---- THE TIP CARD ------------------------------------------------------
   Sits under Correspondence. One line from tips.js, redrawn at random on
   every load. Dual-toned the way the rest of the page is: the lead in ink,
   the remainder in muted. The star is DRAWN, never filled, per the Heritage
   law on ornament, and it turns slowly and continuously rather than on a
   trigger, so the card has a pulse without ever demanding attention. */
.tipcard{display:flex;flex-direction:column;gap:9px}
.tiphead{display:flex;align-items:center;gap:9px}
.tipstar{width:16px;height:16px;color:var(--crimson);flex:none}
.tipstar svg{width:100%;height:100%;display:block;overflow:visible}
.tipstar .s1,.tipstar .s2{transform-box:fill-box;transform-origin:center}
/* the four-point star is symmetric at 180deg, so the turn loops seamlessly */
.tipstar .s1{animation:tipturn 9s ease-in-out infinite}
.tipstar .s2{animation:tipspark 3.6s ease-in-out infinite}
@keyframes tipturn{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(90deg) scale(.84)}100%{transform:rotate(180deg) scale(1)}}
@keyframes tipspark{0%,100%{opacity:.32;transform:scale(.66)}50%{opacity:1;transform:scale(1.12)}}
.tiptext{font-family:var(--serif);font-size:14.5px;line-height:1.66;color:var(--muted);text-wrap:pretty}
.tiptext b{font-weight:400;color:var(--ink)}

/* the tip card's counter bubble. Only ever appears from the third press. */
.tipcard{position:relative}
.eggbubble{position:absolute;right:14px;bottom:12px;padding:6px 11px;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(6px) scale(.94);pointer-events:none;z-index:4;
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.eggbubble.on{opacity:1;transform:none}

/* the theme wipe's stacking, matching account/activity/application */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.vt-dark::view-transition-old(root){z-index:0}.vt-dark::view-transition-new(root){z-index:1}
.vt-light::view-transition-old(root){z-index:1}.vt-light::view-transition-new(root){z-index:0}

/* ── SCROLLBARS ─────────────────────────────────────────────────────────────
   The default bars are a bright grey slab that belongs to the OS, not to this
   page, and they were the one element that ignored the theme entirely. Styled
   for both engines: Firefox takes scrollbar-color, Chromium and Safari take the
   pseudo-elements. Track is the paper, thumb is a hairline-weight ink. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 26%,transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent);border:2px solid transparent;
  background-clip:content-box;border-radius:0}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--crimson) 62%,transparent);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}