/* --tan and --leaf exist so the episode strip can color-code its pill types
   without leaving the palette: tan sits between cream and yellow, leaf is a
   light tint of the sage ground. Both stay light enough to hold ink text and
   to read as chips against the sage page. */
:root { --sage:#7d9478; --ink:#1f1f1f; --cream:#f2ead8; --yellow:#f2b52b; --silver:#d6d6d6; --paper:#faf6ec; --muted:#5c5342; --tan:#e6d3ae; --leaf:#cfdcc9; }
* { box-sizing: border-box; }
body { margin:0; background:var(--sage); color:var(--ink); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
a { color:inherit; }
button { color:inherit; -webkit-appearance:none; appearance:none; border-radius:0; }
.wrap { max-width:1040px; margin:0 auto; padding:28px 20px 60px; }
.playerbar { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.pb-btn { width:34px; height:26px; background:var(--silver); border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; flex:none; }
.pb-btn::after { content:''; border-left:10px solid var(--ink); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.pb-track { flex:1; height:18px; background:var(--ink); position:relative; }
.pb-fill { position:absolute; left:3px; top:3px; bottom:3px; width:46%; background:var(--yellow); }
.pb-knob { position:absolute; left:46%; top:-7px; width:16px; height:32px; background:var(--silver); border:3px solid var(--ink); }
.rec { display:flex; align-items:center; gap:8px; background:var(--silver); border:3px solid var(--ink); padding:2px 10px; font-weight:700; font-size:14px; flex:none; }
.rec::before { content:''; width:11px; height:11px; border-radius:50%; background:#d0342c; }
header.site { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.chip { display:inline-block; background:var(--cream); border:4px solid var(--ink); padding:8px 22px; font-size:26px; font-weight:700; text-decoration:none; }
.handle { font-weight:600; color:var(--cream); text-decoration:none; font-size:16px; }
.tagline { color:var(--cream); font-size:17px; font-weight:600; margin:14px 0 34px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.ep { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); text-decoration:none; display:block; transition:transform .06s; }
.ep:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink); }
.ep img { width:100%; display:block; border-bottom:3px solid var(--ink); }
.ep .t { padding:14px 16px 4px; font-weight:700; font-size:16px; line-height:1.35; }
.ep .m { padding:0 16px 16px; font-size:13.5px; color:var(--muted); font-weight:600; }
.pill { display:inline-block; background:var(--yellow); border:3px solid var(--ink); padding:5px 14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0 10px 10px 0; color:var(--ink); text-decoration:none; }
.pill.lite { background:var(--cream); }
/* One fill per kind of fact, so the strip is readable before it is read.
   Yellow stays reserved for the actions row — it is the site's "do something"
   color in the header too, and spending it on a fact would blunt that. */
.pill.p-host { background:var(--tan); }
.pill.p-date { background:var(--cream); }
.pill.p-dur { background:var(--silver); }
.pill.p-parts { background:var(--paper); }
.pill.p-tag { background:var(--leaf); }
/* Grouped rows, each one flush edge to edge, each cell grown from its own
   words (Dan, 2026-09-14: "not very balanced").
   This was four equal columns, which is a column rhythm only when a row
   actually holds four pills. The meta row usually holds three, so a quarter of
   the width went to a two-character duration while the date beside it wrapped
   onto a second line, and the actions row stopped halfway across with two
   empty tracks after it. The rhythm the grid was reaching for was never the
   point; rows that read as one block were, and filling the row does that
   without pretending "53m" is the same size as a date.
   flex-basis:auto is what makes it proportional: every pill starts at its
   content width and only the leftover is shared, so the long label keeps its
   line and the short one stays short. */
.pillstack { display:flex; flex-direction:column; gap:9px; margin:22px 0 0; }
.pillrow { display:flex; flex-wrap:wrap; gap:9px; }
.pillrow .pill { margin:0; flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; }
article.recap { background:var(--paper); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:34px 38px; margin-top:24px; font-size:16.5px; line-height:1.65; overflow-x:auto; }
article.recap h1 { font-size:27px; line-height:1.25; margin:0 0 10px; }
article.recap h2 { font-size:19px; margin:30px 0 10px; display:inline-block; background:var(--yellow); border:3px solid var(--ink); padding:4px 12px; }
article.recap table { border-collapse:collapse; width:100%; font-size:15px; }
article.recap th, article.recap td { border:2px solid var(--ink); padding:7px 10px; text-align:left; }
article.recap blockquote { margin:0; padding:2px 16px; border-left:6px solid var(--yellow); }
.hero { border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); display:block; width:100%; }
.eq { display:flex; align-items:flex-end; gap:5px; height:44px; margin:44px 0 10px; border-bottom:3px solid var(--ink); padding-bottom:0; max-width:100%; overflow:hidden; }
.eq span { width:9px; background:#a8b5a4; }
.eq span.y { background:var(--yellow); }
.brandmark { display:flex; align-items:center; gap:14px; text-decoration:none; }
.avatar { width:54px; height:54px; border:3px solid var(--ink); display:block; background:var(--cream); }
.banner { width:100%; height:auto; display:block; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); margin:0 0 34px; }
/* Equal columns rather than content-width pills: four different sentence
   lengths ragged across a flex row never lines up, and these four numbers are
   a set — they should read as one block. Rows stretch to a common height, so
   a stat that wraps doesn't leave its neighbours short. */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 32px; }
@media (max-width:900px){ .stats { grid-template-columns:repeat(2,1fr); } }
.reacts { margin:18px 0 0; }
.rlead { display:block; font-size:12.5px; font-weight:700; color:var(--cream); text-transform:uppercase; letter-spacing:.04em; margin:0 0 7px; }
.rgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; }
/* Six is the usual count, and auto-fit put four on a phone and orphaned two.
   Three splits every common count cleanly: 3+3 for six, 3 for three. */
@media (max-width:560px){ .rgrid { grid-template-columns:repeat(3,1fr); } }
.rx { text-align:center; padding:7px 6px; }
.player { display:flex; align-items:center; gap:11px; margin:12px 0 4px; }
.player audio { display:none; }
.pl-play { flex:none; width:38px; height:38px; background:var(--silver); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); color:var(--ink); font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.pl-play:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.pl-play:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.pl-wave { flex:1; display:flex; align-items:center; gap:2px; height:38px; cursor:pointer; }
.pl-wave:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.pl-wave i { flex:1; min-width:2px; height:22%; background:#a8b5a4; transition:height .15s ease; }
.pl-wave i.on { background:var(--yellow); }
.pl-time { flex:none; font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; color:var(--muted); min-width:34px; text-align:right; }
.recap li:has(.player) { margin-bottom:18px; }
.stat { background:var(--cream); border:3px solid var(--ink); padding:7px 14px; font-size:14.5px; font-weight:600; }
.stat b { font-size:16.5px; }
.stats .stat { display:flex; flex-direction:column; justify-content:center; gap:1px; padding:9px 14px; }
.stats .stat b { font-size:20px; line-height:1.15; }
.stats .stat i { font-style:normal; font-size:13px; font-weight:600; color:var(--muted); line-height:1.25; }
.headright { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px 12px; }
.watchwrap { position:relative; }
.watchbtn { background:var(--yellow); border:3px solid var(--ink); padding:8px 14px; min-height:47px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:4px 4px 0 var(--ink); }
.watchbtn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.popover { position:absolute; right:0; top:calc(100% + 12px); width:min(430px, 86vw); background:var(--paper); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:18px; z-index:10; }
.pop-head { font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; }
.pop-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pop-chips .pill { margin:0; }
.pop-foot { margin-top:14px; font-size:13px; color:var(--muted); font-weight:600; }
.origin { color:var(--cream); font-size:15px; font-weight:600; margin:-22px 0 34px; }
.origin a { color:var(--cream); }
.origin-credit { opacity:.85; font-weight:500; display:block; margin-top:3px; font-size:13.5px; }
/* The footer, centred. The credit sat left at max-width 64ch, which left it
   hugging one edge under a full-width equaliser and reading as half a footer.
   Centring the column keeps the measure narrow for readability and puts it in
   the middle of the page rather than at the start of it. */
footer.site { color:var(--cream); display:flex; flex-direction:column; align-items:center;
  gap:18px; text-align:center; padding:4px 0 0; }
/* Three sentences, three lines. Wide enough that each is one line on a laptop
   and balanced when it does wrap, since a colophon reads worse ragged than a
   paragraph does. */
footer.site .credit { max-width:72ch; margin:0; font-weight:500; line-height:1.7;
  font-family:var(--font-voice, Georgia, serif); font-size:15.5px; font-style:italic; opacity:.92; }
footer.site .credit span { display:block; text-wrap:balance; }
footer.site .credit span + span { margin-top:9px; }
/* Links as a wrapping flex row rather than text glued together with
    · . The dot is drawn by CSS between items, so it can never
   strand alone at the start of a wrapped line. */
footer.site .credit-links { display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:8px 18px; font-size:14px; font-weight:600; }
footer.site .credit-links a { position:relative; text-decoration:none; padding-bottom:2px;
  border-bottom:2px solid transparent; }
footer.site .credit-links a:hover { border-bottom-color:var(--yellow); }
footer.site .credit-links a + a::before { content:'·'; position:absolute; left:-10px; opacity:.45; }
footer.site .credit-tag { margin:0; font-size:12.5px; font-weight:600; opacity:.6;
  display:flex; align-items:center; gap:10px; }
footer.site a { color:var(--cream); }
.verbadge { font-variant-numeric:tabular-nums; border:1.5px solid currentColor; padding:1px 7px;
  text-decoration:none; font-size:11.5px; opacity:.85; }
.verbadge:hover { opacity:1; border-color:var(--yellow); color:var(--yellow); }
@media (max-width:560px) {
  footer.site { gap:14px; }
  footer.site .credit { font-size:14px; line-height:1.6; }
  footer.site .credit span + span { margin-top:11px; }
  footer.site .credit-links { gap:6px 14px; font-size:13.5px; }
  /* The dot is absolutely positioned, so on a wrapped line it would float
     beside the first item. Drop it and let the gaps separate. */
  footer.site .credit-links a + a::before { content:none; }
}
.pagehead { background:var(--cream); border:4px solid var(--ink); display:inline-block; padding:8px 22px; font-size:26px; margin:0 0 6px; }
.pagesub { color:var(--cream); font-weight:600; margin:0 0 26px; }
.rel { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:22px 26px; margin:0 0 26px; }
.rel-head { display:flex; align-items:baseline; gap:12px; }
.rel-ver { background:var(--yellow); border:3px solid var(--ink); font-weight:700; padding:2px 10px; font-size:15px; font-variant-numeric:tabular-nums; }
.rel-date { color:var(--muted); font-size:13px; font-weight:600; }
.rel h2 { font-size:21px; margin:12px 0 12px; }
.rel-notes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rel-notes li { display:flex; gap:10px; align-items:baseline; font-size:15px; line-height:1.55; }
.rel-kind { flex:none; border:2px solid var(--ink); font-size:11px; font-weight:700; padding:1px 7px; letter-spacing:.4px; }
.rel-new { background:var(--yellow); }
.rel-improved { background:var(--cream); }
.rel-fixed { background:var(--silver); }
.rel-thanks { margin:16px 0 0; padding-top:12px; border-top:1px solid #e3e0d8; font-size:14.5px; line-height:1.55; font-style:italic; }
/* --- listener subscriptions --- */
.subscribe { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:20px 22px; margin:0 0 34px; }
.subscribe h2 { margin:0 0 4px; font-size:21px; }
.subscribe .sub-lead { margin:0 0 12px; font-size:14.5px; color:var(--muted); }
.sub-row { display:flex; gap:10px; flex-wrap:wrap; }
.sub-input { flex:1; min-width:220px; border:3px solid var(--ink); background:#fff; padding:10px 12px; font-size:15px; font-family:inherit; }
.sub-btn { background:var(--yellow); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:10px 20px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.sub-btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.hostpick { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2px; }
.hostpick .pickpill { display:inline-flex; align-items:center; gap:6px; border:2px solid var(--ink); background:#fff; padding:4px 10px; font-size:13.5px; font-weight:600; cursor:pointer; user-select:none; }
.hostpick .pickpill.sel { background:var(--yellow); }
.hostpick .pickpill .mini-pfp { margin:0; vertical-align:0; width:18px; height:18px; }
.sub-note { font-size:12.5px; color:var(--muted); margin:10px 0 0; }
/* Review card on the dashboard: a labelled status line, and the one-step-left
   callout. Built from the same parts as the buttons and pills (flat fill, ink
   border, hard shadow) so the thing a host has to do next reads as an action,
   not fine print. Dan's preview note, 2026-09-11. */
.rv-status { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px; margin:0 0 16px; font-size:15.5px; line-height:1.5; }
.rv-tag { display:inline-block; background:var(--ink); color:var(--cream); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; white-space:nowrap; }
.rv-callout { background:var(--yellow); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:14px 16px; margin:0 0 18px; color:var(--ink); }
.rv-callout h3 { margin:0 0 6px; font-size:17px; }
.rv-callout p { margin:0; font-size:15px; line-height:1.5; }
.rv-callout p + p { margin-top:8px; font-size:13.5px; }
/* "Waiting for you": the drafts a host has not decided on yet. Each post is
   shown as it would go out, numbered, so what is on screen and what lands on
   the timeline are obviously the same thing. */
.wq-item { border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--cream); padding:16px 18px; margin:0 0 18px; }
.wq-item h3 { margin:0 0 4px; font-size:18px; line-height:1.3; }
.wq-when { font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.wq-thread { list-style:none; margin:12px 0 0; padding:0; }
.wq-thread li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:2px dashed var(--ink); font-size:15px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.wq-num { flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; background:var(--ink); color:var(--cream); font-size:11px; font-weight:700; }
.wq-acts { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.wq-btn { font:700 14px/1 inherit; padding:11px 16px; border:3px solid var(--ink); background:var(--cream); color:var(--ink); cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.wq-btn:hover:not(:disabled) { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.wq-btn:disabled { opacity:.5; cursor:default; }
/* One colour per decision, so the three are told apart before they are read:
   go is the sage the site uses for anything published, a rewrite is the yellow
   accent, and the only destructive one is the only red one. */
.wq-go   { background:var(--sage); color:var(--cream); border-color:var(--ink); }
.wq-go:hover:not(:disabled) { background:#6d8468; }
.wq-edit { background:var(--yellow); color:var(--ink); }
.wq-no   { background:var(--cream); color:#8c2a1e; border-color:#8c2a1e; }
.wq-no:hover:not(:disabled) { background:#f6e3e0; }
.wq-yes { background:var(--yellow); }
.wq-no[data-armed="1"] { background:#c0392b; color:#fff; }
.wq-notebox { margin:14px 0 0; }
.wq-notebox label { display:block; font-size:13px; font-weight:700; margin:0 0 6px; }
/* Your words, or a mode. The divider is there to make it an either/or rather
   than two fields somebody has to guess the relationship between. */
/* The modes are buttons in the same kit as every other button here, and the
   chosen one is filled rather than outlined. Only one of the two routes is on
   screen at a time, so Send never has to guess which one was meant. */
/* A preview of someone else's page announces itself, and the disabled controls
   inside it read as inert rather than as broken. */
.pv-banner { border-color:var(--yellow); box-shadow:5px 5px 0 var(--yellow); }
.nb-modes { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.nb-mode, .nb-own { font-size:13px; padding:9px 12px; box-shadow:2px 2px 0 var(--ink); }
.nb-mode.nb-on, .nb-own.nb-on { background:var(--yellow); box-shadow:inset 2px 2px 0 rgba(0,0,0,.18); transform:translate(1px,1px); }
.nb-emoji { margin-right:6px; }
.nb-blurb { margin:0 0 10px; }
.wq-notebox textarea { width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px; border:3px solid var(--ink); background:var(--paper,#fff); margin:0 0 10px; }
/* State, in the corner, in the same place on every card. */
.wq-item h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wq-badge { margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border:2px solid var(--ink); white-space:nowrap; }
@media (max-width: 560px) { .wq-badge { margin-left:0; } }
.wq-badge-plain { background:var(--cream); color:var(--ink); }
.wq-badge-go    { background:var(--sage); color:var(--cream); }
.wq-badge-work  { background:var(--yellow); color:var(--ink); }
.wq-badge-new   { background:var(--yellow); color:var(--ink); animation:badgein 1s ease-out 1; }
.wq-badge-off   { background:var(--silver); color:var(--ink); }
.wq-badge-bad   { background:#c0392b; color:#fff; border-color:#8c2a1e; }
@keyframes badgein { from { transform:scale(.82); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .wq-badge-new { animation:none; } }
.wq-why { color:var(--muted); margin:10px 0 0; }
.wq-msg { margin:12px 0 0; font-size:14px; font-weight:700; }
.wq-msg.wq-err { color:#8c2a1e; }
.wq-ackbox { margin:16px 0 0; }
.wq-done { margin:0; font-size:14.5px; font-weight:700; border-left:5px solid var(--ink); padding:8px 0 8px 12px; }
.wq-undo { margin:12px 0 0; font-size:13px; padding:8px 12px; box-shadow:2px 2px 0 var(--ink); }

/* A recap still being made. Not a decision waiting to be taken, so it carries
   no buttons: it is there so the gap between "my Space ended" and "a recap
   appeared" stops being silent. */
.wq-working { background:var(--paper,#fff); }
.wq-stageline { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px; margin:8px 0 0; font-size:14.5px; line-height:1.5; }
.wq-stage { display:inline-block; background:var(--ink); color:var(--cream); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; white-space:nowrap; }
.wq-stage-live { background:#c0392b; }
.wq-stage-done { background:var(--sage); }
.wq-prog { height:10px; border:2px solid var(--ink); background:var(--cream); margin:12px 0 0; }
.wq-prog i { display:block; height:100%; background:var(--yellow); transition:width .6s ease; }
.wq-settled { opacity:.72; }

/* The archive list: quieter than the review cards, because nothing here is
   asking for attention. The one button on it destroys something, so it is the
   only red one on the page. */
.px-item { background:var(--cream); }
.px-item h3 { margin:0 0 2px; font-size:16.5px; }
.px-item .wq-acts { margin-top:12px; }
.px-item .wq-no { border-color:#8c2a1e; color:#8c2a1e; }
.px-item .wq-no[data-armed="1"] { background:#c0392b; color:#fff; border-color:#8c2a1e; }
.px-more { font-size:13px; }

/* The operator's panel. Denser than a host's view on purpose: it is a list to
   scan, not a page to read. */
.ops-tiles { margin:14px 0 0; }
.ops-item { background:var(--paper,#fff); padding:14px 16px; margin:0 0 14px; }
.ops-item h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; font-size:16px; }
.ops-item .wq-thread { margin-top:8px; }
.ops-item .wq-acts { margin-top:12px; }
#adsec code { background:var(--ink); color:var(--cream); padding:2px 6px; font-size:12.5px; }
/* The Sunday issue is Re:Cap's own writing, not a host's room, and it sits
   above a list of rooms. The cream ground is the one the digest card already
   uses, so the section looks like the thing it is about. */
.wq-digest { background:var(--cream); }
.wq-digest > .wq-more { margin-top:10px; }
.ops-h { margin:22px 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ops-row { border-left:4px solid var(--ink); padding:8px 0 8px 12px; margin:0 0 12px; }
.ops-row .wq-stageline { margin:0; font-size:14.5px; }
.ops-row .sub-note { margin:4px 0 0; }
.ops-bad { border-left-color:#c0392b; }
/* The watcher's console, as a window. Same ink, same hard shadow and square
   corners as every other panel here -- a terminal that ignored the house style
   would read as something pasted in from another site. */
.term { margin:18px 0 0; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:#14170f; overflow:hidden; }
/* The bar is the whole control: it opens the console, and when the console is
   shut it is also the console -- status, the newest line, and how long until
   the next pass. */
.term-bar { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:8px 12px;
  background:var(--ink); color:var(--cream); font-size:12px; border:0; cursor:pointer; text-align:left;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term-bar:hover { background:#2b2b2b; }
.term-shut { box-shadow:3px 3px 0 var(--ink); }
.term-last { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:rgba(242,234,216,.72); }
.term-eta { flex:0 0 auto; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--yellow); }
.term-eta-live { color:var(--yellow); }
.term-eta-work { color:#8fb8d8; }              /* busy inside a pass: normal, often long */
.term-eta-late { color:#ff9b8a; }              /* overdue with nothing arriving */
.term-eta-dead { color:rgba(242,234,216,.5); } /* no clock to show at all */
.term-meter { margin-right:8px; }
.term-caret { flex:0 0 auto; opacity:.7; }
.term-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.term-red { background:#e05a4a; } .term-amber { background:var(--yellow); } .term-green { background:#7fba6a; }
.term-title { margin-left:6px; font-weight:700; letter-spacing:.04em; opacity:.85; }
.term .ops-livedot { margin-left:0; }
.term .ops-pulse, .term .ops-count { color:rgba(242,234,216,.62); float:none; }

.ops-feed { list-style:none; margin:0; padding:8px 0; max-height:300px; overflow-y:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.5;
  color:#cfe0c2; scrollbar-width:thin; }
.ops-feed li { display:flex; gap:10px; padding:3px 12px; border:0; }
.ops-feed li::before { content:"\203A"; color:#5d6b52; flex:0 0 auto; }   /* U+203A, escaped for the template literal */
.ops-when { flex:0 0 58px; color:#7d8a71; font-variant-numeric:tabular-nums; }
.ops-feed li > span:last-child { flex:1 1 auto; overflow-wrap:anywhere; white-space:pre-wrap; }
.ops-feed-problem  { color:#ff9b8a; }
.ops-feed-problem::before { color:#ff9b8a; }
.ops-feed-posted   { color:#9ee08a; }
.ops-feed-live     { color:var(--yellow); }
.ops-feed-progress { color:#8fb8d8; }
.ops-feed-skipped  { color:#8a9480; }
.ops-feed-asked    { color:#d9c98f; }
.ops-new { animation:optermin .9s ease-out 1; }
@keyframes optermin { from { background:rgba(242,181,43,.28); } to { background:transparent; } }
@media (prefers-reduced-motion: reduce) { .ops-new { animation:none; } }

/* A phone. Three borders deep -- card, preview, post -- with 38px of padding
   between the text and the edge of the screen is what made this feel tight,
   so the nesting loosens rather than the type shrinking. */
@media (max-width: 560px) {
  .wq-item, .ops-item, .px-item { padding:12px 13px; }
  .wq-item h3, .ops-item h3 { font-size:16px; gap:6px; }
  .pv { margin-top:12px; }
  .pv-pane { padding:10px 11px; }
  .pv-tab { font-size:12px; padding:10px 6px; letter-spacing:-.01em; }
  /* The avatar is decoration on a 390px screen: it costs 46px of the line
     length that the words need. */
  .pv-avatar { display:none; }
  .pv-post { gap:0; padding:10px 0; }
  .pv-text { font-size:14.5px; line-height:1.5; }
  .pv-who { font-size:13px; }
  .wq-acts { gap:6px; }
  .wq-btn { flex:1 1 auto; padding:11px 8px; font-size:13px; }
  .nb-mode, .nb-own { flex:1 1 40%; }
  /* The dots and the word "watcher" are decoration; the newest line is the
     reason the bar exists. Drop the decoration, keep the line. */
  .term-dot, .term-title { display:none; }
  .term-bar { gap:6px; padding:8px 10px; font-size:11px; }
  .term-eta { font-size:11px; }
  /* The meter is the picture, the clock is the fact. On a phone the newest
     line needs those twelve characters more than the picture does. */
  .term-meter { display:none; }
  .ops-feed { font-size:11.5px; }
  .ops-when { flex-basis:46px; }
  article.recap { padding:16px 14px; font-size:15.5px; }
  .pv-page h2 { font-size:17px; }
  .hx-tiles { gap:8px; }
}
.ops-fresh { color:var(--muted); font-size:12.5px; }
.ops-find { width:100%; box-sizing:border-box; margin:0 0 8px; }
.ops-hosts { max-height:360px; overflow-y:auto; border:2px solid var(--ink); }
.ops-host { display:flex; align-items:center; gap:10px; padding:8px 10px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,.12); font-size:14px; }
.ops-host:last-child { border-bottom:0; }
.ops-host:hover { background:var(--yellow); }
.ops-hand { flex:1 1 auto; font-weight:700; }
.ops-host .cnt { flex:0 0 auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Liveness, stated quietly. The dot breathes while the feed is arriving and
   pings when a line lands; anything louder would be a page that shouts at an
   operator who is already watching a terminal. */
.ops-livedot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--sage);
  box-shadow:0 0 0 0 rgba(125,148,120,.7); animation:opsbreathe 2.4s ease-in-out infinite; vertical-align:1px; margin:0 6px 0 4px; }
.ops-ping { animation:opsping .9s ease-out 1, opsbreathe 2.4s ease-in-out infinite; }
@keyframes opsbreathe { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes opsping { 0% { box-shadow:0 0 0 0 rgba(125,148,120,.7); } 100% { box-shadow:0 0 0 12px rgba(125,148,120,0); } }
.ops-pulse { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ops-count { font-size:12px; color:var(--muted); float:right; font-weight:400; }

/* A stage that is genuinely working, shown as motion rather than a number that
   never moves. Indeterminate on purpose: we know what it is doing, not how far
   through it is, and a bar that pretends otherwise is a lie. */
.wq-prog.ops-working i { background-image:linear-gradient(90deg, var(--yellow) 0 40%, #f7d488 50%, var(--yellow) 60% 100%);
  background-size:220% 100%; animation:opsslide 1.8s linear infinite; }
@keyframes opsslide { from { background-position:120% 0; } to { background-position:-20% 0; } }

/* ---- the draft preview ---- */
.pv { margin:14px 0 0; border:3px solid var(--ink); background:var(--paper,#fff); }
.pv-tabs { display:flex; border-bottom:3px solid var(--ink); }
.pv-tab { flex:1 1 0; min-width:0; font:700 13px/1 inherit; padding:11px 10px; border:0;
  border-right:3px solid var(--ink); background:var(--cream); color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-tab:last-child { border-right:0; }
.pv-tab.pv-on { background:var(--yellow); }
.pv-pane { padding:14px 16px; }
.pv-post { display:flex; gap:12px; padding:12px 0; border-bottom:2px dashed rgba(0,0,0,.18); }
.pv-post:last-child { border-bottom:0; }
.pv-avatar { flex:0 0 auto; }
.pv-avatar .mini-pfp { border-radius:50%; border:2px solid var(--ink); }
.pv-body { flex:1 1 auto; min-width:0; }
.pv-who { margin:0 0 4px; font-size:14px; }
.pv-who span { color:var(--muted); font-weight:400; font-size:13px; }
.pv-text { margin:0; font-size:15px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.pv-count { margin:6px 0 0; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pv-over { color:#c0392b; font-weight:700; }
.pv-cardimg { display:block; width:100%; height:auto; border:2px solid var(--ink); }
.pv-page { font-size:15px; line-height:1.6; }
.pv-page h2 { font-size:19px; margin:0 0 8px; }
.pv-page h3 { font-size:16px; margin:18px 0 6px; }
.pv-page h4 { font-size:14.5px; margin:14px 0 4px; }
.pv-page p { margin:0 0 10px; }

.wq-spin { display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wqspin .7s linear infinite; }
@keyframes wqspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wq-spin { animation:none; }
  .wq-prog i { transition:none; }
}
.wq-more { margin:14px 0 0; font-size:13.5px; }
.wq-more summary { cursor:pointer; font-weight:700; }
.wq-more pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:14px; line-height:1.6; margin:10px 0 0; padding:12px 14px; border:2px solid var(--ink); background:var(--paper,#fff); }
.sub-msg { font-weight:700; margin:12px 0 0; font-size:14.5px; }
.subcta { display:block; background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:14px 18px; margin:0 0 34px; font-size:15.5px; font-weight:700; color:var(--ink); text-decoration:none; transition:transform .06s; }
.subcta:hover { transform:translate(-1px,-1px); }
.subcta .cta-sub { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:2px; }
.confirmbox { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:26px; margin:0 0 34px; font-size:16px; line-height:1.55; }
.step { margin:0 0 18px; }
.step h3 { font-size:15.5px; margin:0 0 8px; }
.stepnum { display:inline-block; background:var(--ink); color:var(--cream); font-weight:700; font-size:13px; width:22px; height:22px; line-height:22px; text-align:center; margin-right:8px; }
.step .howto { font-size:14px; color:var(--muted); margin:0 0 6px; line-height:1.55; }
.step .howto b { color:var(--ink); }
.picklabel { display:block; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; margin:14px 0 6px; }
.mini-pfp { border-radius:3px; vertical-align:-3px; margin-right:6px; border:1px solid var(--ink); }
.avatar-big { width:84px; height:84px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); flex:none; }
.hosthero { display:flex; gap:18px; align-items:center; margin:0 0 14px; }
.hosthero h2 { margin:0 0 2px; }
/* Public host page: the moments reel. Paper cards in the episode-card family
   (same border, same hover lift) — a quote is a doorway into an episode, so it
   should feel like the doorways everywhere else on the site. */
.moments { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .moments { grid-template-columns:1fr; } }
.moment { background:var(--paper); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:14px 16px; text-decoration:none; color:var(--ink); display:block; transition:transform .06s; }
.moment:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink); }
/* Quotes, wherever they appear: "In their own words" and "Heard in their
   rooms" on a public host page, and "Your biggest moments" on the private one.
   One rule, so the three cannot drift apart again the way they had. */
.moment .mq, .hx-mtext { display:block; font-size:17px; line-height:1.55; font-weight:600; }
.moment .mm, .hx-mmeta { display:block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--muted); }
.copyrow { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0; }
.copyrow input { flex:1; min-width:240px; border:3px solid var(--ink); background:#fff; padding:9px 11px; font-size:13.5px; font-family:ui-monospace,Menlo,monospace; }
/* --- host multi-select dropdown --- */
.msel { position:relative; margin:0 0 4px; }
.msel-trigger { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:48px; border:3px solid var(--ink); background:#fff; padding:7px 40px 7px 11px; cursor:pointer; font-size:14px; }
.msel-caret { position:absolute; right:13px; top:50%; transform:translateY(-50%); font-weight:700; pointer-events:none; }
.msel-placeholder { color:#8a8371; }
.msel-chip { display:inline-flex; align-items:center; gap:6px; border:2px solid var(--ink); background:var(--yellow); padding:3px 9px; font-size:12.5px; font-weight:700; }
.msel-chip img { border-radius:3px; border:1px solid var(--ink); }
.msel-chip .x { cursor:pointer; margin-left:2px; }
.msel-panel { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px); background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); max-height:280px; overflow-y:auto; }
.msel-opt { display:flex; align-items:center; gap:9px; padding:8px 12px; font-size:14px; font-weight:600; cursor:pointer; border-bottom:1px solid #e3e0d8; }
.msel-opt:last-child { border-bottom:none; }
.msel-opt:hover { background:#fff; }
.msel-opt.sel { background:var(--yellow); }
.msel-opt img { border-radius:3px; border:1px solid var(--ink); flex:none; }
.htable { width:100%; border-collapse:collapse; margin:6px 0 0; font-size:14px; background:#fff; }
.htable th, .htable td { border:2px solid var(--ink); padding:6px 11px; text-align:left; }
.htable th { background:var(--cream); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
.htable td.n { text-align:right; font-variant-numeric:tabular-nums; }
/* --- search (static, recap text only) --- */
.searchwrap { margin:0 0 22px; }
.searchwrap .sub-input { width:100%; box-sizing:border-box; box-shadow:4px 4px 0 var(--ink); }
#sresults { margin-top:18px; display:flex; flex-direction:column; gap:16px; }
#sresults[hidden] { display:none; }
.sr-card { background:var(--paper); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:14px 16px; }
.sr-title { font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; }
.sr-title:hover { text-decoration:underline; }
.sr-meta { color:var(--muted); font-size:13px; font-weight:600; margin-left:10px; }
.sr-hit { display:flex; gap:10px; align-items:baseline; margin:9px 0 0; font-size:14px; line-height:1.5; }
.sr-hit .tchip { flex:none; background:var(--yellow); border:2px solid var(--ink); padding:1px 8px; font-size:12px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.sr-hit .tchip:hover { transform:translate(-1px,-1px); }
.sr-hit mark { background:var(--yellow); padding:0 2px; }
.sr-card.re-in { animation:epIn .34s ease backwards; }
#nores { margin:0 0 22px; }
.tstamp { scroll-margin-top:110px; }
sup.lk { color:var(--muted); font-weight:700; cursor:help; margin-left:1px; }
.lk-note { color:var(--muted); font-size:12.5px; margin:22px 0 0; padding-top:12px; border-top:1px solid #e3e0d8; }
.pinned { margin:28px 0 0; background:#e4ebdd; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:20px 22px 16px; }
.pinned h2 { font-size:18px; font-weight:700; margin:0 0 3px; display:flex; align-items:center; gap:8px; }
.pin-ico { font-size:17px; }
.pin-sub { color:var(--muted); font-size:13px; margin:0 0 4px; }
.pinrail { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:18px 2px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pinrail::-webkit-scrollbar { display:none; }
.pin { position:relative; flex:0 0 clamp(224px, 74%, 282px); scroll-snap-align:start; text-decoration:none; color:inherit; background:var(--cream); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:24px 15px 13px; display:flex; flex-direction:column; gap:9px; transition:transform .08s, box-shadow .08s; }
.pin:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.pin::before { content:'📌'; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(8deg); font-size:22px; line-height:1; }
.pin-head { display:flex; align-items:baseline; gap:8px; }
.pin-who { font-weight:700; font-size:14px; }
.pin-t { font-variant-numeric:tabular-nums; font-weight:700; font-size:11.5px; color:var(--muted); margin-left:auto; }
.pin-text { font-size:13.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.pin-empty { color:var(--muted); font-style:italic; }
.pin-go { font-size:11.5px; font-weight:700; color:var(--muted); margin-top:auto; }
.pin:hover .pin-go { color:var(--ink); }
.pindots { display:flex; gap:8px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.pindot { width:9px; height:9px; border:2px solid var(--ink); background:transparent; padding:0; cursor:pointer; border-radius:0; }
.pindot.on { background:var(--yellow); }
.tstamp.flash { animation:tflash 1.4s ease-out 2; }
/* A deep-linked quote flashes as a unit — text and its player together. */
li.flash, blockquote.flash { animation:tflash 1.4s ease-out 2; }
@keyframes tflash { 0% { background:var(--yellow); } 100% { background:transparent; } }
/* --- topics --- */
.deck { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:16px 18px; margin:0 0 26px; display:flex; flex-direction:column; gap:14px; }
.deck-row { display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; }
.deck .sub-input { flex:1; min-width:230px; }
.deck-cta { flex:none; background:var(--yellow); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 16px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.deck-cta:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.deck-cta:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.deck-filters { width:100%; }
.filtergroup { display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.filtergroup .fsel { flex:1; min-width:0; }
@keyframes stamp { 0% { transform:translate(0,0); box-shadow:3px 3px 0 var(--ink); } 40% { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); background:var(--yellow); } 100% { transform:translate(0,0); box-shadow:3px 3px 0 var(--ink); } }
.fsel-trigger.stamp { animation:stamp .28s ease; }
@keyframes epIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.ep.re-in { animation:epIn .34s ease backwards; }
@media (prefers-reduced-motion: reduce) { .fsel-trigger.stamp, .ep.re-in, .sr-card.re-in { animation:none; } }
.filterlabel { flex:none; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.fsel { position:relative; }
.fsel-trigger { display:inline-flex; align-items:center; gap:8px; border:3px solid var(--ink); background:#fff; padding:7px 36px 7px 12px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; box-shadow:3px 3px 0 var(--ink); position:relative; width:100%; min-width:0; text-align:left; }
.fsel-trigger:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.fsel-caret { position:absolute; right:12px; font-weight:700; pointer-events:none; }
.fsel-cur { display:inline-flex; align-items:center; gap:7px; }
.fsel-cur .mini-pfp, .fsel-lab .mini-pfp { margin:0; vertical-align:0; }
.fsel-panel { position:absolute; left:0; top:calc(100% + 8px); min-width:100%; width:max-content; max-width:min(340px, 86vw); background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); max-height:320px; overflow-y:auto; overflow-x:hidden; z-index:20; }
.fsel-opt { display:flex; align-items:center; gap:9px; padding:8px 13px; font-size:13.5px; font-weight:600; cursor:pointer; border-bottom:1px solid #e3e0d8; white-space:nowrap; }
.fsel-opt:last-child { border-bottom:none; }
.fsel-opt:hover { background:#fff; }
.fsel-opt.sel { background:var(--yellow); }
/* min-width:0 + flex:1 lets a row COMPRESS inside the panel's width cap
   instead of overflowing it sideways: the ellipsis rules below can only
   engage once the flex chain is allowed to shrink. This is what removes the
   horizontal scrollbar, not the overflow-x above (that is just the belt). */
.fsel-lab { display:inline-flex; align-items:center; gap:7px; min-width:0; flex:1; }
.fsel-opt .cnt { color:var(--muted); font-weight:600; margin-left:auto; padding-left:16px; font-variant-numeric:tabular-nums; }
/* Name-and-handle rows, stacked: display name leads, handle understated on
   its own line beneath. The understatement is conditional — a name-less row
   keeps its @handle at full strength, so nobody reads as second-class for
   not having set a display name. Name capped so one long stage name can't
   stretch every row. */
.fsel-opt .mini-pfp { width:26px; height:26px; flex:none; }
.fsel-opt .cnt { flex:none; }
.fsel-id { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.fsel-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsel-name + .fsel-hand { color:var(--muted); font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.topicpill { background:var(--cream); border:2px solid var(--ink); padding:4px 13px; font-size:13.5px; font-weight:700; cursor:pointer; user-select:none; }
.topicpill.sel { background:var(--yellow); }
.ep .topics { display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 12px; }
.ep .topics span { border:1.5px solid var(--ink); background:#fff; font-size:11px; font-weight:700; padding:1px 8px; color:var(--ink); }
.tiers { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:0 0 34px; align-items:start; }
@media (max-width:720px){ .tiers { grid-template-columns:1fr; } }
/* display:grid is an AUTHOR rule and so beats the browser's [hidden] default,
   which is only a UA rule — without this, hiding the tier row does nothing and
   a freshly-paid subscriber still gets pitched Plus. */
.tiers[hidden] { display:none; }
/* One card left after the Plus pitch steps aside for an existing subscriber:
   a half-width card stranded beside empty space reads as a failed load. */
.tiers.solo { grid-template-columns:1fr; }
/* The post-checkout welcome. Yellow rule and a touch more air than a normal
   card, because arriving here is the best moment the site has. */
.welcome { border-top:8px solid var(--yellow); }
.welcome h2 { font-size:26px; margin:0 0 8px; }
.tiers .subscribe { margin:0; }
/* Paired doors on /support/: equal height, and the lead paragraph absorbs the
   slack so both buttons land on one baseline instead of floating at whatever
   height their own copy happens to end at. */
.tiers.doors { align-items:stretch; }
.tiers.doors .subscribe { display:flex; flex-direction:column; }
.tiers.doors .subscribe .sub-lead { flex:1; }
/* Column flex would otherwise stretch the button to the card's full width,
   which no other button on the site does. Keep it sized to its own label. */
.tiers.doors .subscribe .sub-btn { align-self:flex-start; }
/* The two trailing notes wrap to different line counts depending on width, and
   an unequal tail pushes the buttons off each other's baseline even when the
   cards themselves match. Reserving two lines in both makes the buttons land
   together at any width instead of only at the ones we happened to test.
   The generous top margin is deliberate: the terms line sat close enough to
   the button to read as attached to it. */
.tiers.doors .subscribe .plus-promo { min-height:2.9em; margin:18px 0 0; }
.tier-tag { display:inline-block; background:var(--ink); color:var(--cream); font-size:12px; font-weight:700; padding:2px 10px; letter-spacing:.5px; margin:0 0 8px; }
.tier-tag.plus { background:var(--yellow); color:var(--ink); border:2px solid var(--ink); }
.plusfeats { list-style:none; margin:0 0 16px; padding:0; }
.plusfeats li { font-size:14.5px; margin:0 0 8px; padding-left:24px; position:relative; }
.plusfeats li::before { content:'▸'; position:absolute; left:4px; color:var(--ink); font-weight:700; }
.plus-price { font-size:26px; font-weight:700; margin:0 0 2px; }
.plus-price small { font-size:14px; font-weight:600; color:var(--muted); }
.plus-promo { font-size:13px; color:var(--muted); margin:8px 0 0; }
/* Terms and the cancel link live in this note. Muted grey at 12.5px read as
   fine print, which is the wrong signal for the two things a payer most needs
   to find, so the links themselves carry ink and an underline. */
.plus-promo a { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.support-link, .host-link { flex:none; background:var(--cream); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 16px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.support-link:hover, .host-link:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.support-link:active, .host-link:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
/* Black on black. The shadow is deliberately the same ink as the fill, so the
   button reads as one solid chip rather than a sticker with a coloured edge —
   it is the only dark thing in the row and does not need help standing out.
   No shadow overrides here: the shared .support-link rule above already sets
   ink, so the whole nav row agrees by construction. */
.host-link { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:47px; background:var(--ink); color:var(--cream); }
.host-link svg { width:13px; height:13px; fill:currentColor; flex:none; }
.upwrap { display:flex; flex-direction:column; gap:10px; }
.upcard { display:flex; align-items:center; gap:14px; background:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 14px; flex-wrap:wrap; }
.upwhen { display:flex; flex-direction:column; min-width:118px; }
.upday { font-size:14px; font-weight:700; }
.uptime { font-size:12.5px; color:var(--muted); font-weight:600; }
.upbody { flex:1; min-width:180px; }
.uptitle { margin:0; font-size:15px; font-weight:700; line-height:1.35; }
.uphost { margin:3px 0 0; font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:5px; }
.upacts { flex:none; }
.calmonth { margin:0 0 26px; }
.calmonth-h { color:var(--cream); font-size:16px; margin:0 0 8px; letter-spacing:.02em; }
.calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.caldow { font-size:11px; font-weight:700; text-align:center; color:var(--cream); opacity:.75; padding:0 0 2px; }
.calday { background:var(--paper); border:2px solid var(--ink); min-height:58px; padding:3px 3px 4px; display:flex; flex-direction:column; gap:3px; }
.calday.empty { background:transparent; border:none; min-height:0; }
.calday.today { background:var(--yellow); }
.caldate { font-size:10px; font-weight:700; color:var(--muted); line-height:1; }
.calday.today .caldate { color:var(--ink); }
.calmarks { display:flex; flex-wrap:wrap; gap:2px; }
.calmark { display:block; line-height:0; border:2px solid var(--ink); }
.calmark img { display:block; width:20px; height:20px; object-fit:cover; }
.calmark:hover { transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--ink); }
/* Not-yet-aired: yellow ring and a softened face, so a glance separates what
   is still coming from what already has a recap behind it. */
.calmark.up { border-color:var(--yellow); box-shadow:0 0 0 2px var(--ink); margin:2px; }
.calmark.up img { opacity:.72; }
.calmark.up:hover img { opacity:1; }
.callegend { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:0 0 12px; font-size:12.5px; font-weight:600; color:var(--cream); }
.callegend span { display:flex; align-items:center; gap:6px; }
.legdot { width:16px; height:16px; background:var(--paper); border:2px solid var(--ink); display:block; }
.legdot.up { border-color:var(--yellow); box-shadow:0 0 0 2px var(--ink); }
.fuel { background:var(--cream); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:14px 18px; margin:26px 0 0; font-size:15px; font-weight:600; line-height:1.5; }
.fuel a { font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.fuel a:hover { background:var(--yellow); }
@media (max-width:640px){
  article.recap { padding:22px 18px; }
  .pinned { padding:16px 14px 12px; }
  .popover { position:fixed; left:12px; right:12px; top:86px; width:auto; max-height:72vh; overflow-y:auto; }
  .deck-row, .deck-filters { flex-direction:column; align-items:stretch; gap:12px; }
  .filtergroup { width:100%; }
  .deck .sub-input { min-width:0; }
  /* Header lockup on small screens: the two short utilities share a row at
     equal width, and the primary CTA anchors the row beneath at full width —
     a composed 2+1 block instead of buttons ragging off the right edge. */
  .headright { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .headright .watchbtn { width:100%; }
  .headright .support-link { text-align:center; }
  .headright .host-link { grid-column:1 / -1; justify-content:center; }
  .headright .deck-cta { grid-column:1 / -1; text-align:center; }
  /* Day cells fall to ~44px wide here. Slimmer marks fit two per row, which
     keeps a seven-room day from stretching a cell into a tower. */
  /* The two-column override and its height floor were both scaffolding for the
     four-column grid: half width forced most labels onto two lines, so every
     cell was pinned to two lines whether it needed them or not. Wrapping by
     content fits three topics to a row here and nothing breaks, so all that is
     left to say is how big a thing has to be to tap. */
  .pillrow .pill { min-height:44px; }
  /* Topics are the one row whose items are interchangeable and similar in
     length, so an odd one left on the last line reads as a mistake rather than
     as the end of a list: four went 3+1 here. A basis of 40% fits exactly two
     to a line, so four topics split 2+2 and three split 2+1.
     Deliberately NOT applied to the other rows. The meta row holds one long
     label and one very short one, and forcing those to 40% is how the date
     ended up on two lines with the duration alone underneath -- which is the
     layout this whole change is undoing. */
  .pillrow.even .pill { flex-basis:40%; }
  .calgrid { gap:3px; }
  .calday { min-height:46px; padding:2px; }
  .calmarks { gap:1px; }
  .calmark { border-width:1px; }
  .calmark img { width:15px; height:15px; }
  .calmark.up { margin:1px; box-shadow:0 0 0 1px var(--ink); }
  .caldow { font-size:10px; }
  .upwhen { min-width:0; }
  .upcard { gap:10px; }
}

/* ---------- host analytics (private /h/ pages only) ---------- */
/* Built from the same parts as the rest of the site: cream panels, hard ink
   edges, offset shadows, the equaliser motif as a real chart. No chart library
   — a stock one would read as a graft on a page made of flat fills. */
.hx { margin:22px 0 0; }
.hx-head { margin-bottom:14px; }
.hx-head h2 { margin:0 0 4px; }
.hx-fresh { margin:8px 0 0; font-size:11px; font-weight:700; color:var(--muted); }
.hx-me { margin:8px 0 0; font-size:11px; font-weight:700; color:var(--muted); }

/* The founding-host thank-you. Leaf rather than the brand yellow: yellow is the
   colour of an action we want taken, and the whole point of this card is that
   there is nothing they need to do. */
/* Leaf, not the brand yellow, for the card itself: yellow is the colour of an
   action, and the card's whole point is that nothing is required of them. The
   button inside it is yellow because that part IS an action. */
.founder { background:var(--leaf); display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap; }
.founder-text { flex:1 1 340px; min-width:0; }
.founder-tag { display:inline-block; background:var(--ink); color:var(--cream); font-size:11px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; margin:0 0 9px; }
.founder h2 { margin:0 0 7px; }
.founder-lead { margin:0; font-size:14.5px; line-height:1.6; }
.founder-cta { flex:0 1 240px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.founder-btn { display:block; width:100%; background:var(--yellow); color:var(--ink);
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 18px;
  font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap;
  transition:transform .08s, box-shadow .08s; }
.founder-btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.founder-fine { font-size:11.5px; color:var(--muted); line-height:1.45; }
.supporter { background:var(--tan); }
.supporter-tag { background:var(--yellow); color:var(--ink); }
.supporter-btn { background:var(--paper); }
.lapsed { background:var(--cream); }
.lapsed-tag { background:var(--warn, #a8622a); color:var(--paper); }

/* The pulse of one room. Bars scroll in their own container -- a long Panda
   room is 100+ buckets and the page body must never scroll sideways. Paired
   bars per bucket: reactions (sage, yellow when top-3) and distinct people
   (ink, thin) so volume and crowd read together. */
.pulse-scroll { overflow-x:auto; border:2px solid var(--ink); background:var(--paper); padding:10px 8px 4px; }
.pulse-chart { display:flex; align-items:flex-end; gap:2px; height:120px; min-width:100%; width:max-content; }
.pulse-col { display:flex; align-items:flex-end; gap:1px; height:100%; flex:none; }
.pulse-col i { display:block; width:7px; }
.pc-r { background:var(--sage); }
.pc-r.hot { background:var(--yellow); }
.pc-p { background:var(--ink); opacity:.45; width:4px; }
.pulse-legend { font-size:11.5px; color:var(--muted); margin:8px 0 0; }
.pulse-legend .pl-r { color:var(--sage); }
.pulse-legend .pl-p { color:var(--ink); opacity:.55; }

/* The audience clock: 7 rows x 6 bands, intensity by opacity on one sage so
   the eye reads "more people" without a legend. The single hottest cell takes
   the yellow, same rule as every other chart on this page. */
.hx-clock { display:flex; flex-direction:column; gap:3px; }
.hx-crow { display:flex; align-items:center; gap:3px; }
.hx-crow b { flex:none; width:34px; font-size:11px; font-weight:800; }
.hx-crow i { flex:1; height:20px; background:var(--sage); border:1px solid var(--ink); display:block; }
.hx-crow i.hot { background:var(--yellow); opacity:1 !important; }
.hx-chead span { flex:1; font-size:9.5px; font-weight:700; color:var(--muted); text-align:center; }

/* Lead book rows: the familiar voice row plus a meta line and topic pills. */
.hx-lead { margin:0 0 12px; }
.hx-leadmeta { margin:2px 0 0 30px; font-size:11.5px; color:var(--muted); line-height:1.6; }
.hx-leadtopics { display:inline-flex; gap:4px; margin-left:8px; vertical-align:1px; }
.hx-leadtopics i { font-style:normal; font-size:10px; font-weight:700; border:1px solid var(--ink);
  background:var(--paper); padding:0 6px; }
@media (max-width:640px) {
  .founder { flex-direction:column; align-items:stretch; gap:16px; }
  /* flex-basis follows the main axis: once this stacks, the 340px basis on
     .founder-text became a 340px minimum HEIGHT and opened a dead gap under
     the copy. Both bases go back to auto when the axis turns. */
  .founder-text, .founder-cta { flex:0 0 auto; }
}
.hx-me button { background:none; border:0; padding:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer; }
.hx-tag { display:inline-block; background:var(--ink); color:var(--yellow); font-size:11px;
  font-weight:800; letter-spacing:.14em; padding:4px 9px; margin-bottom:8px; }
.hx h2 { margin:0 0 4px; font-size:26px; line-height:1.15; }
.hx-sub { margin:0; color:var(--muted); font-size:14px; max-width:62ch; line-height:1.5; }
.hx-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.hx-tile { background:var(--cream); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  padding:12px 14px; }
.hx-tile b { display:block; font-size:26px; line-height:1; letter-spacing:-.01em; }
.hx-tile i { font-style:normal; font-size:12px; font-weight:600; color:var(--muted); }
.hx-card { background:var(--cream); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  padding:16px 18px; margin:0 0 14px; }
.hx-card h3 { margin:0 0 4px; font-size:17px; }
.hx-note { margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.5; }
/* Host sign-in. One centred column in the site's standard .subscribe panel,
   so the door is built from the same parts as every other page rather than
   inventing chrome for itself. The disclaimer sits INSIDE that panel, under a
   hairline, because it is a footnote to the button above it — floated loose on
   the sage it read as an afterthought nobody had placed. */
.si-wrap { max-width:640px; margin:0 auto; text-align:center; }
.si-panel { padding:26px 26px 20px; }
.si-panel h3 { margin:0 0 6px; font-size:19px; }
.si-lead { margin:0 auto 18px; font-size:16px; color:var(--muted); line-height:1.6; max-width:48ch; }
/* The disclaimer's own rule, drawn with a border rather than an <hr> so it
   inherits the panel's padding and stays out of the document outline. */
.si-why { margin:22px -26px 0; padding:16px 26px 0; border-top:2px solid var(--tan);
  text-align:left; line-height:1.6; }

/* Ink on cream for X's mark, because it is X's colour and not ours. The sage
   drop-shadow is the one place the page borrows from the background, which
   keeps the yellow free for the action that comes AFTER signing in. */
.si-x { display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--cream);
  border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:13px 24px; font-weight:700;
  font-size:15px; font-family:inherit; cursor:pointer; text-decoration:none;
  transition:transform .08s, box-shadow .08s; }
.si-x:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.si-x:active { transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.si-x[disabled] { opacity:.6; cursor:default; transform:none; box-shadow:5px 5px 0 var(--ink); }
.si-x svg { width:17px; height:17px; fill:currentColor; flex:none; }
.si-go { display:inline-block; background:var(--yellow); color:var(--ink); border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); padding:13px 24px; font-weight:700; font-size:15px; text-decoration:none;
  transition:transform .08s, box-shadow .08s; }
.si-go:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.si-who { display:flex; align-items:center; justify-content:center; gap:11px; margin:0 0 16px; text-align:left; }
.si-who img { width:52px; height:52px; border:3px solid var(--ink); border-radius:4px; flex:none; background:var(--tan); }
.si-who b { display:block; font-size:17px; line-height:1.25; }
.si-who i { font-style:normal; font-size:13px; color:var(--muted); }
.si-out { background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--muted);
  text-decoration:underline; cursor:pointer; }
.si-steps { margin:16px auto 0; padding:0; max-width:42ch; font-size:13.5px; color:var(--muted);
  line-height:1.7; text-align:left; list-style-position:outside; padding-left:20px; }
.si-busy { font-size:14px; color:var(--muted); margin:0; }
/* The three things a host is buying. Left-aligned and set at reading size:
   this is the part someone weighs $19 against, so it is the last place to be
   saving vertical space. */
.si-hd { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); text-align:left; margin:24px 0 0; }
.si-hd + .si-pillars { margin-top:10px; }
.si-pillars { display:flex; flex-direction:column; gap:14px; margin:22px 0 18px; text-align:left; }
.si-pillar { border-left:4px solid var(--sage); padding:2px 0 2px 14px; }
.si-pillar b { display:block; font-size:15.5px; margin:0 0 3px; }
.si-pillar span { display:block; font-size:15px; line-height:1.6; color:var(--muted); }

/* Proof, in the site's own numbers and its own emoji, so a host recognises
   these as the same counters they see on the front page. */
.si-proof { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--ink);
  border:2px solid var(--ink); margin:0 0 14px; }
.si-proof span { background:var(--paper); padding:12px 6px; display:block; }
.si-proof b { display:block; font-size:18px; line-height:1.15; letter-spacing:-.01em; }
.si-proof i { font-style:normal; display:block; font-size:10.5px; font-weight:600; color:var(--muted); margin-top:4px; line-height:1.25; }
@media (max-width:520px) { .si-proof { grid-template-columns:repeat(2,1fr); } }

.si-see { font-size:14px; color:var(--muted); margin:0 0 6px; }
.si-fine { margin:14px auto 0; max-width:56ch; font-size:13px; color:var(--muted); line-height:1.6; }
.si-active { display:inline-block; background:var(--yellow); color:var(--ink); font-weight:700;
  font-size:15px; padding:10px 22px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.si-buy { display:flex; flex-direction:column; align-items:center; gap:9px; margin:20px 0 4px; }
.si-alt { font-size:13px; color:var(--muted); text-decoration:underline; }
/* The one requirement, said before the money and said as an instruction. An
   unrecorded Space leaves nothing to work from, and a subscriber should learn
   that here rather than in their first week. */
.si-req { font-size:12.5px; color:var(--muted); line-height:1.55; max-width:46ch; margin-top:2px; }
.si-note { margin:14px auto 0; max-width:44ch; font-size:13px; color:var(--muted);
  line-height:1.6; background:var(--tan); border:2px solid var(--ink); padding:10px 13px; }

/* Admin roster. Built from the deck's host selector rather than a list of its
   own: an admin scanning 45 rooms is doing the same job as a reader picking a
   host, so it should be the same object. Only the placement differs -- this one
   is always open and sits in the flow instead of hanging off a trigger. */
.ad-panel { position:static; max-width:none; width:auto; box-shadow:none; border-width:2px;
  max-height:330px; margin:0; text-align:left; }
.ad-find { width:100%; margin:0 0 10px; }
.ad-count { margin:0 0 8px; font-size:11.5px; font-weight:700; color:var(--muted); text-align:left; }
.ad-row { text-decoration:none; color:var(--ink); }
/* The filter hides rows with [hidden], and .fsel-opt sets display:flex. An
   author rule beats the UA's [hidden] { display:none } no matter how specific
   the UA rule looks, so without this the rows stay on screen and the search
   appears to do nothing. It shipped that way once: the property was set, the
   pixels never moved, and a test that read el.hidden happily agreed. */
.fsel-opt[hidden], .ad-row[hidden], .ops-host[hidden] { display:none !important; }
.ad-row .ad-none, .ops-host .ad-none { color:var(--ink); background:var(--yellow); padding:1px 7px; font-weight:700; }
.ad-wait { margin:22px 0 0; padding:18px 0 0; border-top:2px solid var(--tan); }
.ad-wait h3 { margin:0 0 4px; }
@media (max-width:560px) {
  .si-panel { padding:20px 18px 16px; }
  .si-why { margin:20px -18px 0; padding:14px 18px 0; }
}
/* The heat map. Bars share the equaliser's silhouette; the hot ones take the
   brand yellow so a peak is findable at a glance rather than by reading. */
.hx-chart { display:flex; align-items:flex-end; gap:3px; height:104px;
  border-bottom:3px solid var(--ink); padding-bottom:2px; }
.hx-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.hx-fill { display:block; width:100%; background:var(--silver); border:2px solid var(--ink);
  border-bottom:0; min-height:4px; }
.hx-fill.hot { background:var(--yellow); }
.hx-axis { display:flex; justify-content:space-between; margin-top:5px;
  font-size:11px; font-weight:700; color:var(--muted); }
/* Moments read as quotes first and numbers second — the sentence is the story,
   the count is the evidence. */
.hx-moments { display:flex; flex-direction:column; gap:9px; }
.hx-moment { display:block; text-decoration:none; color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); padding:13px 15px; position:relative; transition:transform .08s; }
.hx-moment:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.hx-hits { display:inline-block; background:var(--yellow); border:2px solid var(--ink);
  font-size:12px; font-weight:800; padding:1px 7px; margin-bottom:6px; }
/* .hx-mtext and .hx-mmeta are set with .moment .mq / .mm above, so a quote
   reads the same on both surfaces. Only the card around it differs. */
.hx-two { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; align-items:start; }
.hx-voice { display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:13px; }
.hx-vname { flex:none; width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.hx-vtrack { flex:1; height:13px; background:var(--leaf); border:2px solid var(--ink); }
.hx-vtrack i { display:block; height:100%; background:var(--sage); }
.hx-vn { flex:none; width:24px; text-align:right; font-weight:800; font-size:12px; }
/* Cadence: one row per weekday, bar length is reactions per hour. */
.hx-day { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; }
.hx-dlabel { flex:none; width:32px; font-weight:800; }
.hx-dtrack { flex:1; height:13px; background:var(--leaf); border:2px solid var(--ink); }
.hx-dtrack i { display:block; height:100%; background:var(--yellow); }
.hx-dmeta { flex:none; width:104px; text-align:right; font-weight:700; color:var(--muted); font-size:11px; }
/* New voices: a small column chart, week by week, oldest left. */
.hx-growth { display:flex; align-items:flex-end; gap:6px; height:108px; }
.hx-gcol { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.hx-gcol i { display:block; width:100%; background:var(--sage); border:2px solid var(--ink); border-bottom:0; }
.hx-gcol b { font-size:12px; font-weight:800; margin-top:3px; }
.hx-gcol span { font-size:9px; font-weight:700; color:var(--muted); white-space:nowrap; }
/* Topics: a pill whose fill shows its share, so the mix reads without a legend. */
.hx-topics { display:flex; flex-wrap:wrap; gap:8px; }
.hx-topic { position:relative; display:inline-flex; align-items:center; gap:7px;
  background:var(--paper); border:2px solid var(--ink); padding:6px 11px; font-size:13px;
  font-weight:600; overflow:hidden; }
/* The fill sits BEHIND the label. Both children are wrapped in elements on
   purpose: a bare text node has no stacking context, so the topic name painted
   under the bar and the pills read as "47", "ent 35", "arkets 12". */
.hx-topic::before { content:''; position:absolute; inset:0 auto 0 0; width:var(--w);
  background:var(--leaf); z-index:0; }
.hx-topic > span, .hx-topic > b { position:relative; z-index:1; }
.hx-topic b { font-size:11px; color:var(--muted); }
/* Quiet regulars: a list, deliberately not a ranked chart. No bars, no
   position numbers — these are people to invite, not to score. */
.hx-quiets { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.hx-quiet { display:flex; align-items:center; gap:9px;
  background:var(--paper); border:2px solid var(--ink); padding:8px 11px; }
.hx-quiet .mini-pfp { flex:none; border:2px solid var(--ink); }
/* No handle resolved: a neutral glyph rather than the brand face, which would
   read as "this is Re:Cap" instead of "we do not know who this is". */
.hx-qblank { flex:none; width:26px; height:26px; display:flex; align-items:center;
  justify-content:center; background:var(--leaf); border:2px solid var(--ink); font-size:13px; }
.hx-qwho { min-width:0; }
.hx-qname { display:block; font-size:13px; font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hx-qmeta { display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--muted); }
.hx-emos { display:flex; flex-wrap:wrap; gap:8px; }
.hx-emo { display:inline-flex; align-items:center; gap:5px; background:var(--paper);
  border:2px solid var(--ink); padding:5px 9px; font-size:18px; }
.hx-emo b { font-size:12px; font-weight:800; color:var(--muted); }
@media (max-width:720px) {
  .hx-tiles { grid-template-columns:repeat(2,1fr); }
  .hx-two { grid-template-columns:1fr; }
  .hx-chart { height:82px; }
  .hx-vname { width:88px; }
  .hx-dmeta { width:82px; }
  .hx-growth { height:88px; }
  .hx-gcol span { font-size:8px; }
  .hx-quiets { grid-template-columns:1fr; }
}