/* realtalk — Apple-inspired design */
:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#424245;
  --muted:#6e6e73;
  --faint:#aeaeb2;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --accent:#e4572e;
  --accent-dark:#c2431f;
  --accent-soft:#fdeee5;
  --up:#248a3d;
  --up-soft:#e5f4e8;
  --down:#d70015;
  --down-soft:#fdebec;
  --gold:#9a6700;
  --gold-soft:#fbf3df;
  --info:#0066cc;
  --info-soft:#e8f1fc;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-sm:0 1px 6px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
/* keyboard focus: one clear accent ring on every interactive element
   (inputs, textareas and selects carry their own ring further down) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* frosted header, Apple-style */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(251,251,253,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .28s ease;
}
.topbar-inner{
  max-width:1080px;margin:0 auto;width:100%;
  display:flex;align-items:center;gap:20px;
  min-height:56px;padding:8px 22px;
}
.topbar.scroll-hide{transform:translateY(-102%)}
.logo{
  font-weight:700;font-size:20px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;flex:none;
  display:inline-flex;align-items:center;gap:9px;
}
.logo:hover{text-decoration:none}
.logo img{width:30px;height:30px;border-radius:8px;display:block}
.logo-back{display:none;width:34px;height:34px;align-items:center;justify-content:center;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background .15s ease,border-color .15s ease}
.logo-back svg{width:17px;height:17px;display:block}
.talk-bar{display:none}
body.talk-page .talk-bar,body.search-page .talk-bar{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
body.talk-page .logo,body.talk-page #themeToggle,body.talk-page .nav-center,body.talk-page #navRow2,body.talk-page #nav,
body.search-page .logo,body.search-page #themeToggle,body.search-page .nav-center,body.search-page #navRow2,body.search-page #nav{display:none}
.talk-x{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--field);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:0}
.talk-x svg{width:15px;height:15px;display:block}
.talk-x:hover{background:var(--line-soft)}
.talk-bar input{flex:1;min-width:0;border-radius:980px;padding:9px 16px;background:var(--line-soft);border:1px solid transparent}
.talk-bar input:focus{background:var(--field);border-color:var(--line);outline:none}
.talk-user{flex:none;font-weight:600;font-size:13.5px;color:var(--accent-dark);background:var(--accent-soft);border-radius:980px;padding:7px 12px;white-space:nowrap}
a.talk-user:hover{text-decoration:none;background:var(--accent);color:#fff}
.comment.cs-hide{display:none}
.logo.in-space:hover .logo-back{background:var(--line-soft);border-color:var(--muted)}
.logo.in-space img{display:none}
.logo.in-space .logo-back{display:inline-flex}
.logo .wordmark{color:var(--ink)}
.logo .wordmark span{color:var(--accent)}
.logo .wordmark .subname{color:#e5484d}
#nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* logged-in header second line: an explicit row container so mobile ordering
   doesn't depend on flex `order` across flattened containers.
   NOTE: keep these base rules ABOVE the max-width:640px block below —
   equal-specificity rules later in the file would override the mobile ones. */
#navRow2{display:contents}
#navRow2[hidden]{display:none}
.nav-center{flex:1;display:flex;justify-content:center;min-width:0}
.nav-center .searchbox{width:min(460px,100%)}
.nav-center .searchbox input{flex:1;width:auto;min-width:0}
body.in-space .nav-center{display:none}
.inspace-search{flex:1;min-width:0}
.inspace-search input{flex:1;width:auto;min-width:0;font-size:16px}
.inspace-search .char-count{display:none}
.searchbox .char-count{display:none}
html body.talk-page #nav,html body.search-page #nav{display:none}
body.in-space.is-logged-out #nav .nav-row2{display:none}
.nav-icons{display:flex;align-items:center;gap:6px}
#nav a,#nav button{font-size:14px}

/* pill buttons, Apple-style */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;background:var(--line-soft);color:var(--ink);
  padding:8px 18px;border-radius:980px;cursor:pointer;
  font-size:14px;font-weight:500;line-height:1.4;
  transition:background .18s,transform .1s;
  white-space:nowrap;
}
.btn:hover{background:#dcdce0;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.small{padding:6px 14px;font-size:13px}
.btn.ghost{background:transparent}

/* badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:4px 11px;border-radius:980px;
  background:var(--up-soft);color:var(--up);
  white-space:nowrap;
}
.badge svg{width:12px;height:12px}
.badge.unverified{background:var(--gold-soft);color:var(--gold)}
.tea-badge{display:inline-flex;vertical-align:-3px;margin-left:0;color:#e5484d}
.founder-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--gold-soft);color:var(--gold);
  border:1px solid var(--gold);
  vertical-align:1px;white-space:nowrap;
}
.cake-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--accent-soft);color:var(--accent-dark);
  border:1px solid var(--accent);
  vertical-align:1px;white-space:nowrap;
}
.new-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--accent-soft);color:var(--accent-dark);
  border:1px solid var(--accent-soft);
  vertical-align:1px;white-space:nowrap;
}
.new-replies-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;
  background:var(--accent-soft);color:var(--accent-dark);
  border:1px solid var(--accent-soft);
  white-space:nowrap;flex:none;
}
.op-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);
  vertical-align:1px;white-space:nowrap;
}
.top-reply-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--gold);color:#fff;
  border:1px solid var(--gold);
  vertical-align:1px;white-space:nowrap;
}
.featured-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--gold);color:#fff;
  border:1px solid var(--gold);
  vertical-align:1px;white-space:nowrap;
}
.featured-talk{margin:0 0 12px}
.featured-talk-head{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:2px 0 6px;
}
.post.is-featured{border-color:var(--gold)}
.creator-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:transparent;color:var(--accent-dark);
  border:1px solid var(--accent);
  vertical-align:1px;white-space:nowrap;
}
.member-row .muted{margin-left:auto;font-size:13px;white-space:nowrap}
.member-row .follow-name a{color:inherit;font-weight:600}
.member-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35}
.member-talk-count{font-size:12.5px}
.member-sortbar{margin:14px 0 6px}
.member-row.member-hide{display:none}
.flair-badge{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;line-height:1.25;
  padding:2px 8px;border-radius:980px;margin-left:4px;
  background:var(--accent-soft);color:var(--accent-dark);
  border:1px solid var(--accent-soft);
  vertical-align:1px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
}
.tag-chip{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;line-height:1.25;
  padding:2px 8px;border-radius:980px;margin-left:4px;
  background:var(--panel-2, #f0f0f3);color:var(--ink-soft);
  border:1px solid var(--line);
  vertical-align:1px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;cursor:pointer;
}
a.tag-chip:hover{border-color:var(--accent);color:var(--accent-dark)}
.tag-chip.static{cursor:default}
.poll{margin:10px 0 4px;display:flex;flex-direction:column;gap:6px}
.poll-opts{display:flex;flex-direction:column;gap:6px}
.poll-opt{position:relative;display:block;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;overflow:hidden}
.poll-opt .poll-bar{position:absolute;top:0;bottom:0;left:0;background:var(--accent-soft);pointer-events:none}
.poll-opt .poll-label{position:relative;font-weight:600;overflow-wrap:anywhere}
.poll-opt .poll-pct{position:relative;float:right;margin-left:10px;color:var(--muted);font-weight:600}
.poll-opt.mine{border-color:var(--accent)}
.poll-opt:disabled{cursor:default}
.poll-meta,.poll-note{font-size:12px}
.poll-compose{margin:10px 0}
.poll-toggle{display:flex;gap:8px;align-items:flex-start;margin:0}
.poll-toggle input{margin-top:3px}
.poll-fields{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.poll-fields[hidden]{display:none}
.scope-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.search-clear-all{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:3px 2px}
.search-clear-all:hover{color:var(--accent-dark);text-decoration:underline}
.scope-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;line-height:1.25;
  padding:3px 6px 3px 10px;border-radius:980px;
  background:var(--accent-soft);color:var(--accent-dark);
  border:1px solid var(--accent-soft);white-space:nowrap;
}
.scope-chip .scope-clear{color:inherit;text-decoration:none;font-size:15px;line-height:1;padding:1px 5px;border-radius:980px}
.scope-chip .scope-clear:hover{background:var(--card)}
mark{background:rgba(255,197,0,.38);color:inherit;border-radius:3px;padding:0 1px}
.recent-searches{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.recent-searches-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.recent-search-chip{font-size:12.5px;font-weight:500;line-height:1.25;padding:4px 11px;border-radius:980px;background:var(--card);color:var(--ink);border:1px solid var(--line);text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-search-chip:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
.recent-pin.on{color:var(--accent-dark);font-weight:600}
.recent-search-entry{display:inline-flex;align-items:center;gap:2px}
.recent-search-remove{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:1px 5px;border-radius:980px;cursor:pointer}
.recent-search-remove:hover{background:var(--line-soft);color:var(--ink)}
.saved-searches{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.saved-searches-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.saved-search-entry{display:inline-flex;align-items:center;gap:2px}
.saved-search-chip{font-size:12.5px;font-weight:500;line-height:1.25;padding:4px 11px;border-radius:980px;background:var(--card);color:var(--ink);border:1px solid var(--line);text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-search-chip:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
.saved-search-remove{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:1px 5px;border-radius:980px;cursor:pointer}
.saved-search-remove:hover{background:var(--line-soft);color:var(--ink)}
.muted-words-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.muted-word-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;line-height:1.25;padding:4px 6px 4px 11px;border-radius:980px;background:var(--card);color:var(--ink);border:1px solid var(--line);max-width:260px}
.muted-word-remove{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:1px 5px;border-radius:980px;cursor:pointer}
.muted-word-remove:hover{background:var(--line-soft);color:var(--ink)}
.tag-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px;font-size:13px}
.sub-flair-pick{display:flex;align-items:center;gap:10px;margin-top:10px}
.sub-flair-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.flair-select-wrap{position:relative;display:inline-flex;max-width:min(240px,70vw)}
.flair-select-wrap::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.flair-select{appearance:none;-webkit-appearance:none;width:auto;max-width:100%;padding:7px 32px 7px 13px;font-size:13px;font-weight:600;line-height:1.25;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:980px;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer}
.flair-select-wrap.has-flair .flair-select{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
.flair-select-wrap.has-flair::after{border-color:var(--accent-dark)}
.flair-select:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px;border-color:var(--accent)}
.mod-sec{margin:14px 0 6px;font-size:14px}

/* subtalk header polish */
.subtalk-meta{font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.subtalk-desc{margin:12px 0 8px}
.subtalk-desc:empty{display:none}
.pinned-badge{
  position:absolute;top:14px;right:16px;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 5px;border-radius:980px;margin-left:0;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent);
  vertical-align:1px;white-space:nowrap;
}
.pinned-badge svg{width:13px;height:13px;display:block}
.pinned-reply-box{border:1px solid var(--accent);border-radius:12px;padding:10px 12px;margin:0 0 14px;background:var(--accent-soft)}
/* Sticky pinned reply (talk pages): the slot sticks under the talk
   header once you scroll past it (app.js keeps the top offset honest
   and toggles .is-stuck); stuck, the box caps its height with inner
   scroll and a lift shadow so a long pinned reply stays one glance
   away without covering the thread. At rest, nothing changes. */
.pinned-reply-slot{position:sticky;top:106px;z-index:6}
.pinned-reply-slot.is-stuck .pinned-reply-box{max-height:208px;overflow-y:auto;box-shadow:var(--shadow)}
html.dark .pinned-reply-slot.is-stuck .pinned-reply-box{background:#2a1a14}
.pinned-reply-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:6px}
.pinned-reply-head svg{width:13px;height:13px;display:block}
.pinned-reply-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:980px;margin-left:4px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent);
  vertical-align:1px;white-space:nowrap;
}
.post.has-pin .post-head{padding-right:36px}
.pinned-section{margin-bottom:14px;border-bottom:1px solid var(--line-soft);padding-bottom:14px}
.more-from{margin-top:18px}
.more-from-title{font-size:15px;margin:0 0 10px;color:var(--ink)}
.next-talk{margin-top:18px}
.next-talk-link{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.next-talk-link:hover{border-color:var(--accent);text-decoration:none}
.next-talk-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark);white-space:nowrap}
.next-talk-title{font-weight:600;min-width:0;overflow-wrap:anywhere}
.next-talk-arrow{margin-left:auto;color:var(--faint)}
.new-since-row{margin:0 0 12px}
.new-since-pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:980px;background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent);font-size:13.5px;font-weight:600;text-decoration:none}
.new-since-pill:hover{background:var(--accent);color:#fff;text-decoration:none}
.discussed-strip{margin:0 0 12px}
.discussed-title{font-size:15px;margin:0 0 6px;color:var(--ink)}
.discussed-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:3px 0}
.discussed-link{font-weight:600;color:var(--ink);text-decoration:none}
.trending-strip{margin:0 0 12px}
.trending-title{font-size:15px;margin:0 0 6px;color:var(--ink)}
.trending-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 0}
.trending-link{font-weight:600;color:var(--ink);text-decoration:none}
.trending-meta{flex:1;min-width:0}
.trending-row .follow-btn{margin-left:auto}
.pinned-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin:2px 0 8px}
.pinned-head svg{width:14px;height:14px}
.pinned-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pinned-row::-webkit-scrollbar{display:none}
.pinned-row>.pin-cell{flex:0 0 min(86%,340px);scroll-snap-align:start;display:flex;flex-direction:column}
.pinned-row>.pin-cell:only-child{flex-basis:100%}
.pinned-row .post-body{max-height:2.9em;overflow:hidden}
.pinned-row .pinned-badge{display:none}
.pinned-row .post.has-pin .post-head{padding-right:6px}
.pin-cell>.post{flex:1;display:flex;margin-bottom:0}
.pinned-row .post-main{display:flex;flex-direction:column;flex:1;min-width:0}
.pinned-row .post-actions{margin-top:auto;padding-top:8px}
.pinned-head .pin-rearrange-btn{margin-left:auto}
.pin-move{display:none;gap:8px;justify-content:center;padding-top:8px}
.pinned-section.rearranging .pin-move{display:flex}
.pin-move-btn{width:38px;height:30px;border-radius:980px;border:1px solid var(--line);background:var(--field);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pin-move-btn svg{width:16px;height:16px;display:block}
.pin-move-btn:disabled{opacity:.3;cursor:default}

/* layout */
#app{max-width:860px;margin:0 auto;padding:20px 14px 64px}
.card{
  background:var(--card);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.muted{color:var(--muted);font-size:13.5px}
h1{font-size:30px;font-weight:700;letter-spacing:-.022em;line-height:1.15;margin:0 0 12px}
h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}

/* posts */
.post{display:block;position:relative}
.votes{display:flex;flex-direction:column;align-items:center;gap:0;min-width:28px}
.votes button{
  border:none;background:none;cursor:pointer;color:var(--faint);
  padding:3px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;line-height:0;
  transition:color .15s,background .15s,transform .1s;
}
.votes button svg{width:15px;height:15px}
.votes .score{min-width:24px;text-align:center}
.votes button:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.votes button:active{transform:scale(.9)}
.votes button.on-up{color:var(--up)}
.votes button.on-down{color:var(--down)}
.votes .score{font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.post h3{margin:1px 0 5px;font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--accent-dark);text-decoration:none}
.post .body{white-space:pre-wrap;font-size:14.5px;color:var(--ink-soft)}
.meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta a{color:var(--muted)}
.meta a:hover{color:var(--accent-dark)}
.meta .handle{font-weight:600;color:var(--ink-soft)}

.subtalk-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.subtalk-head h2{margin:0;font-size:28px}
.subtalk-head>.btn{margin-left:auto}
/* Header action rows (Follow / New talk, profile actions): only direct-child
   buttons auto-push right; grouped actions wrap instead of overflowing. */
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.subtalk-head>div{min-width:0}
.subtalk-desc{color:var(--muted);font-size:15px;margin:-4px 0 10px}
.mod-tools-slim{padding:10px 16px;font-size:13.5px}
.sub-ava{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:none}
.subtalk-head h2{font-size:21px}
.sub-id{flex:1 1 0;min-width:0}
.sub-id h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-created{font-size:12px;margin-top:8px}
.subtalk-card .head-actions{margin-left:auto}
.subtalk-card .head-actions .btn{flex:none}
.wordmark{display:inline-block;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.sub-strip{padding:6px 2px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.sub-strip:has(~ #pinned-slot:not(:empty)){border-bottom:none;margin-bottom:4px}
.sub-strip-line{font-size:15px;line-height:1.35;margin-bottom:3px}
.sub-strip-line strong{font-weight:600;letter-spacing:-.01em}
.nav-follow{flex:none}
#subNewBtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 15px;font-size:13.5px}
#subNewBtn svg{width:14px;height:14px}
.sub-strip-line{display:flex;align-items:center;gap:10px}
.sub-strip-id{min-width:0}
.sub-strip .follow-btn{margin-left:auto;flex:none}
.sub-strip .btn.follow-btn.on{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.sub-strip .subtalk-desc{margin:0 0 5px;font-size:13.5px;line-height:1.45;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.sub-strip .subtalk-desc.desc-open{display:block;overflow:visible}
.sub-strip .subtalk-desc[hidden]{display:none}
.sub-strip .sub-created{margin-top:5px;font-size:12px;line-height:1.4;color:var(--faint)}
.sub-strip .sub-rules{margin-top:8px;font-size:13.5px;color:var(--ink-soft)}
.sub-strip .sub-rules summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:13px}
.sub-strip .sub-rules-body{margin-top:6px;line-height:1.5}
.sub-strip .sub-rules[hidden]{display:none}
/* Talk-page rules reminder (worker run #218): the info strip's collapsed
   rules block in its own slim card above the reply box. */
.talk-rules-card{padding:12px 20px}
.talk-rules{font-size:13.5px;color:var(--ink-soft)}
.talk-rules summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:13px}
.talk-rules .sub-rules-body{margin-top:6px;line-height:1.5}
.talk-rules[hidden]{display:none}
.sub-strip .sub-created a{color:var(--muted);font-weight:500}
.sub-strip .link-btn{font-size:12px;color:var(--muted);font-weight:500;padding:0}
.sub-strip .link-btn:hover{color:var(--accent-dark)}
.sub-strip .sub-mod-note::before{content:"· ";color:var(--line)}
.sub-strip .sub-created{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.sub-strip .more-wrap{margin-left:auto;align-self:center}
.sub-strip .sub-wiki-line{margin-top:6px;font-size:13.5px}
.sub-strip .sub-wiki-line a{font-weight:600;color:var(--ink);text-decoration:none}
.sub-strip .sub-wiki-line a:hover{text-decoration:underline}
.wiki-card .wiki-head{margin-bottom:10px}
.wiki-body{line-height:1.6;font-size:15px;color:var(--ink-soft)}
.wiki-body h1,.wiki-body h2,.wiki-body h3{color:var(--ink);line-height:1.3}
.wiki-body[hidden]{display:none}
.sub-mod-tools{margin-bottom:14px}
.sub-composer{margin-bottom:14px}
.sortbar{margin-top:2px}

/* comments */
.comment{position:relative;padding:4px 0 10px 4px;margin:4px 0}
.comment.top{margin:10px 0}
.comment.top:first-child{margin-top:4px}
/* Only nested replies (which render a thread bar) get left indent. */
.comment:has(> .thread-bar){padding-left:18px}
.thread-bar{position:absolute;left:0;top:6px;bottom:6px;width:18px;background:none;border:none;padding:0;cursor:pointer}
.thread-bar::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;border-radius:1px;background:var(--ink);opacity:.85}
.thread-bar:hover::before{opacity:1}
.comment.collapsed > .thread-bar::before{background:var(--accent)}
.comment .replies{margin-top:2px}
.comment .body{white-space:pre-wrap;font-size:14px;margin:3px 0;color:var(--ink-soft)}
/* Alternating shade on top-level threads so they visually separate. */

/* Collapsed replies shrink to a single slim line: handle · time. */
.comment.collapsed{padding-top:3px;padding-bottom:3px;margin:5px 0}
.comment.collapsed .votes{display:none}
.comment.collapsed .comment-meta{font-size:12px;opacity:.75}
.comment-meta{cursor:pointer;display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.comment-author{display:inline-flex;flex-direction:column;gap:1px;min-width:0}
.comment-author-line{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.comment-flair{font-size:11px;line-height:1.2;font-weight:600;color:var(--accent-dark)}
.post-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
/* Shield + report tuck into the header's top-right. */
/* mod/report tools float at the header's right edge without taking layout
   space, so the header is the same height whether they're shown or not */
.hdr-tools{position:absolute;right:0;display:inline-flex;align-items:center;gap:8px}
.post-head .hdr-tools{bottom:-3px}
.comment-meta .hdr-tools{top:50%;transform:translateY(-50%)}
.post-head:has(> .hdr-tools),.comment-meta:has(> .hdr-tools){padding-right:72px}
.hdr-tools .report-icon-btn{margin-left:0}
/* shield matches the report button's box in the header tools */
.hdr-tools .shield-btn{padding:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:0}
.hdr-tools .shield-btn svg{width:19px;height:19px}
.hdr-tools .report-icon-btn{width:24px;height:24px;font-size:12px}
.hdr-tools .more-wrap{margin-left:0}
/* keep the wrapped shield button box the same 20px as the report button (the inline-block span's line box is 26px and pushes it up) */
.hdr-tools .more-wrap{display:inline-flex;align-items:center}
.reply-form{margin-top:10px}
.reply-form textarea{min-height:44px}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled{cursor:not-allowed}
.link-btn{background:none;border:none;color:var(--accent-dark);font-size:13px;font-weight:500;cursor:pointer;padding:6px 0}
.link-btn:hover{text-decoration:underline}
.link-btn.read-more-btn{font-size:12.5px;padding:2px 0;margin:1px 0 3px}
.link-btn.reply-toggle{color:var(--muted);font-size:11px;font-weight:400;padding:0;opacity:.7}
.link-btn.reply-toggle:hover{opacity:1}
.link-btn.save-comment-btn{color:var(--muted);font-size:11px;font-weight:400;padding:0;opacity:.7}
.link-btn.save-comment-btn:hover{opacity:1}
.link-btn.save-comment-btn.on{opacity:1;color:var(--accent-dark)}
.link-btn.edit-comment-btn,.link-btn.delete-comment-btn{color:var(--muted);font-size:11px;font-weight:400;padding:0;opacity:.7}
.link-btn.edit-comment-btn:hover,.link-btn.delete-comment-btn:hover{opacity:1;text-decoration:underline}
/* Report is a quiet circled "!" tucked at the far edge, never a loud button. */
.report-icon-btn{background:none;border:1px solid var(--line);color:var(--muted);
  width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;line-height:1;
  cursor:pointer;opacity:.55;padding:0;flex:none;margin-left:auto}
.report-icon-btn:hover{opacity:1;border-color:var(--muted);color:var(--ink)}

/* forms */
input,textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:16px;background:var(--field,#fff);color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
input[type=checkbox],input[type=radio]{width:auto;flex:none;padding:0;margin:0}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
textarea{min-height:140px;resize:vertical}
form[data-form="comment"] textarea{min-height:42px;transition:min-height .18s ease}
form[data-form="comment"] textarea:focus{min-height:140px}
label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px;color:var(--ink-soft)}
form .btn{margin-top:18px}
.error{background:var(--down-soft);color:#a3121f;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:12px;font-size:14px}
.notice{background:var(--info-soft);color:var(--info);padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:12px;font-size:14px}
.draft-notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.draft-notice[hidden]{display:none}
.draft-notice .link-btn{color:var(--info);font-size:13px;padding:0}

/* tabs + sort */
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tabs .btn.on{background:var(--ink);color:var(--bg)}
/* toggle buttons (follow / save) */
.btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.me-title{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.me-follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:28px}
.me-follow-grid .card{margin-bottom:0}
@media (max-width:700px){.me-follow-grid{grid-template-columns:1fr}}
.status-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-dark);background:var(--line-soft);color:var(--muted);cursor:pointer;margin-left:6px;padding:0}
.status-ico svg{width:17px;height:17px}
.status-ico:hover{color:var(--ink)}
.status-ico.on{color:var(--ink);border-color:var(--muted)}
.status-ico--invite{color:var(--accent-dark);border-color:var(--accent)}
.status-ico--id,.status-ico--verified{color:var(--up);border-color:var(--up)}
.profile-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.profile-head h2{margin:0;font-size:28px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.profile-head .head-actions{margin-left:auto}
.profile-stats{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-soft)}
.profile-stats strong{color:var(--ink)}
.profile-stats .stats-private{font-size:12px;font-weight:600;color:var(--faint)}
.profile-bio{font-size:15px;color:var(--ink-soft);margin:0 0 8px;overflow-wrap:anywhere}
.profile-band{margin-left:8px}
.profile-started{margin-top:16px}
.profile-started h3{margin:0 0 4px;font-size:16px}
.started-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft);color:var(--ink)}
.started-row:hover{text-decoration:none}
.started-row:hover .started-name{text-decoration:underline}
.started-main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.started-name{font-weight:700}
.started-title{color:var(--ink-soft)}
.started-meta{flex:none;font-size:13px}
.started-empty{margin:8px 0 2px}
@media (max-width:640px){.profile-head .head-actions{margin-left:0}}
.follow-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.follow-name{font-weight:600;flex:none;white-space:nowrap}
.follow-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.follow-row .btn{flex:none;margin-left:auto}
.btn.follow-btn{padding:4px 12px;font-size:12.5px}
.btn.follow-btn.on{background:transparent;color:var(--down);border-color:var(--line-dark)}
.btn.watch-btn{flex:none}
.btn.watch-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.invite-row{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.invite-row:last-child{border-bottom:none}
.invite-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.invite-label{font-weight:600;font-size:14px}
.invite-status{font-size:13px;color:var(--ink-soft)}
.invite-sub{display:flex;align-items:center;gap:14px;margin-top:2px;flex-wrap:wrap}
.invite-code{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
.meta-row .btn{margin-left:auto}
.meta-row .btn:first-child{margin-left:0}
.sortbar{display:flex;gap:4px;margin-bottom:16px;font-size:13.5px}
.sortbar a{color:var(--muted);padding:6px 14px;border-radius:980px;font-weight:500}
.sortbar a:hover{background:#fff;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.sortbar a.on{background:var(--ink);color:#fff}
.sortbar a.on:hover{background:var(--ink);color:#fff}
.windowbar{display:flex;gap:2px;margin:-10px 0 16px;font-size:12.5px}
.windowbar a{color:var(--muted);padding:4px 10px;border-radius:980px;font-weight:500}
.windowbar a:hover{background:#fff;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.windowbar a.on{background:var(--line-soft);color:var(--ink)}
.sortbar a .count{font-size:11px;font-weight:700;background:var(--line-soft);color:var(--muted);border-radius:999px;padding:1px 8px;margin-left:2px}
.sortbar a.on .count{background:rgba(255,255,255,.22);color:#fff}
.sortbar button{font:inherit;background:none;border:none;cursor:pointer;color:var(--muted);padding:6px 14px;border-radius:980px;font-weight:500}
.sortbar button:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.sortbar button.on{background:var(--ink);color:#fff}
.sortbar button.on:hover{background:var(--ink);color:#fff}
.sortbar.feed-tools{display:flex;align-items:center;gap:12px;margin:-4px 0 16px;font-size:12.5px;flex-wrap:wrap}
.feed-tools:empty{display:none}
.surprise-btn{font:inherit;background:none;border:none;cursor:pointer;color:var(--muted);padding:5px 12px;border-radius:980px;font-weight:500}
.surprise-btn:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.surprise-btn:disabled{opacity:.45;cursor:not-allowed}
.feed-display-wrap{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.density-sep{width:1px;height:16px;background:var(--line)}
.density-label{color:var(--muted);font-weight:500}
.seg{display:inline-flex;background:var(--line-soft);border-radius:980px;padding:2px;gap:2px}
.seg button{font:inherit;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px 11px;border-radius:980px;font-weight:500;font-size:12.5px}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.card.post.compact{padding:10px 14px;margin-bottom:6px}
.post.compact h3{font-size:15.5px;margin:0}
.post.compact .post-body,.post.compact .read-more-btn{display:none}
.post.compact .post-actions{margin-top:4px}
.post.compact .post-head{margin-bottom:2px}

/* verified hero — deep gradient card */
.verified-hero{
  background:linear-gradient(140deg,#2b2118 0%,#14100b 60%,#0c0a07 100%);
  color:#f5f5f7;border-radius:22px;
  padding:30px;margin-bottom:20px;box-shadow:var(--shadow);
}
.verified-hero h2{margin:0 0 10px;display:flex;align-items:center;gap:12px;font-size:22px;color:#fff}
.verified-hero p{margin:6px 0;color:#aeaeb2;font-size:15px}
.verified-hero .check-ring{
  display:inline-flex;width:34px;height:34px;border-radius:50%;
  background:var(--up);color:#fff;align-items:center;justify-content:center;flex:none;
}
.verified-hero .check-ring svg{width:18px;height:18px}

/* footer */
.foot{text-align:center;color:var(--faint);font-size:12.5px;padding:32px 16px}
.foot .mark{font-weight:700;color:var(--muted)}
.foot .foot-links{white-space:nowrap}

/* empty states */
.empty{text-align:center;color:var(--muted);padding:56px 12px}.empty .empty-icon{
  width:56px;height:56px;border-radius:18px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--faint);
  box-shadow:var(--shadow-sm);
}
.empty .empty-icon svg{width:26px;height:26px}
.empty h3{color:var(--ink);margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.01em}

/* landing — Apple marketing style */
.hero{text-align:center;padding:56px 16px 30px;position:relative;overflow:hidden}
.hero-bubbles{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero .real-hero,.hero .tagline{position:relative;z-index:1}
.hb{position:absolute;color:var(--accent)}
.hb1{width:150px;top:0;left:3%;opacity:.10;transform:rotate(-12deg)}
.hb2{width:96px;top:6%;right:5%;opacity:.08;transform:rotate(9deg)}
.hb3{width:60px;top:46%;left:9%;opacity:.07;transform:rotate(6deg)}
.hb4{width:118px;bottom:4%;right:8%;opacity:.09;transform:rotate(-7deg)}
.hb5{width:68px;bottom:8%;left:6%;opacity:.07;transform:rotate(12deg)}
.hb6{width:46px;top:54%;right:15%;opacity:.5;transform:rotate(-4deg)}
.hb.fill{fill:var(--accent-soft);stroke:none}
.hero::before{
  content:"";position:absolute;inset:-60px 0 0;z-index:-1;
  background:radial-gradient(560px 260px at 50% 0%,var(--accent-soft),transparent 70%);
  pointer-events:none;
}
.hero-logo{border-radius:26px;box-shadow:var(--shadow)}
.hero h1{
  font-size:56px;font-weight:700;letter-spacing:-.028em;line-height:1.05;
  margin:20px 0 12px;
}
/* giant REAL + rotating word */
.real-hero{margin:6px 0 10px}
.real-big{
  font-size:clamp(120px,30vw,230px);
  font-weight:800;letter-spacing:-.045em;line-height:.95;
  white-space:nowrap;
}
.real-rot{
  font-size:clamp(44px,11.5vw,100px);
  font-weight:700;letter-spacing:-.03em;line-height:1.15;
  color:var(--accent);
  min-height:1.25em;
  margin-top:8px;
  white-space:nowrap;
}
#realRotator{display:inline-block;transition:opacity .09s ease-in}
#realRotator.rot-out{opacity:0}
#realRotator.rot-land{animation:rotLand .4s cubic-bezier(.2,.9,.25,1.2)}
@keyframes rotLand{
  0%{opacity:0;transform:scale(.92)}
  55%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  #realRotator{transition:none}
  #realRotator.rot-land{animation:none}
}
.tagline{
  color:var(--muted);font-size:19px;line-height:1.5;
  max-width:560px;margin:0 auto 8px;
}
.beta-note{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13.5px;margin-top:10px;position:relative;z-index:1}
.beta-badge{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-soft);border:1px solid var(--accent);border-radius:980px;padding:2px 8px}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0;text-align:center}
.path{
  transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;align-items:center;
  padding:34px 24px;
}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.path-icon{
  width:64px;height:64px;border-radius:20px;flex:none;
  background:var(--accent-soft);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.path-icon svg{width:30px;height:30px}
.path-icon.alt{background:var(--info-soft);color:var(--info)}
.path h3{margin:0 0 8px;font-size:22px}
.path p{flex:1;font-size:16px}
.path .btn{margin-top:20px;padding:12px 30px;font-size:15px}
.deal-card{
  text-align:center;padding:44px 32px;color:#f5f5f7;
  background:linear-gradient(140deg,#2b2118 0%,#14100b 60%,#0c0a07 100%);
}
.deal-card h3{margin-top:0;font-size:26px;color:#fff}
.deal-card p{font-size:16px;max-width:620px;margin-left:auto;margin-right:auto;color:#d8d4cc}
.deal-card .muted{color:#aeaeb2}
.deal-card strong{color:#fff}

/* hero entrance motion */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .real-hero{animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both}
.hero .tagline{animation:riseIn .7s .12s cubic-bezier(.2,.7,.3,1) both}
.paths{animation:riseIn .7s .22s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .hero .real-hero,.hero .tagline,.paths{animation:none}
}
.learn-more{text-align:center;margin:4px 0 36px}
.learn-more a{font-size:17px;font-weight:600;color:var(--accent-dark)}
.learn-more a:hover{text-decoration:none;color:var(--accent)}
.learn-more .chev{font-weight:700}
.about-cta{text-align:center;margin:24px 0 4px}
.about-cta .btn{padding:12px 30px;font-size:15px}

/* lurk banner */
.lurk-banner{
  background:#1d1d1f;color:#f5f5f7;padding:12px 48px 12px 16px;
  font-size:14px;text-align:center;position:relative;
}
.lurk-banner a{color:#ff8a5c;font-weight:600}
.lurk-banner button{
  background:none;border:none;color:#f5f5f7;font-size:18px;cursor:pointer;
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:10px;line-height:1;
}
.lurk-banner button:hover{background:rgba(255,255,255,.14)}

/* search */
.searchbox{display:flex;gap:6px;align-items:center}

/* u/ mention autocomplete dropdown */
.mention-ac{
  position:fixed;z-index:60;min-width:240px;max-width:300px;max-height:320px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);padding:4px;
}
.mention-ac button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;color:var(--ink);
}
.mention-ac button.on,.mention-ac button:hover{background:var(--line-soft)}
.mention-ac button strong{font-weight:600}.searchbox input{
  width:190px;padding:8px 14px;font-size:16px;border-radius:980px;
  background:var(--line-soft);border-color:transparent;
}
.searchbox input:focus{background:#fff;border-color:var(--accent)}
.searchbox .btn{margin-top:0}
.search-cancel{display:none}
.search-meta{color:var(--muted);font-size:13.5px;margin-bottom:14px}

/* admin */
.table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:10px;border-bottom:1px solid var(--line);
}
.admin-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.admin-table tr:hover td{background:#fafafc}
.admin-table code{background:var(--bg);padding:3px 9px;border-radius:8px;font-size:13px;border:1px solid var(--line-soft);font-family:ui-monospace,SF Mono,Menlo,monospace}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-form .btn{margin-top:0}
.inline-form label{margin:0}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:18px}
label.check input{width:auto;margin-top:5px;accent-color:var(--accent)}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:980px;background:var(--line-soft);color:var(--ink-soft)}
.pill.ok{background:var(--up-soft);color:var(--up)}
.pill.warn{background:var(--gold-soft);color:var(--gold)}
.code-row{display:flex;align-items:center;gap:8px}

/* mobile */
@media (max-width:640px){
  .topbar-inner{flex-wrap:wrap;gap:10px;padding:8px 14px;min-height:52px}
  #nav{display:contents}
  #navRow2{display:flex;order:3;width:100%;gap:8px;align-items:center}
  .avatar-btn{height:34px;font-size:13px;padding:0 11px;max-width:112px}
  #searchToggle{display:inline-flex;margin-left:auto}
  .nav-icons{order:1;margin-left:auto;gap:2px}
  .nav-center{order:5;width:100%}
  body:not(.is-logged-out) .nav-center{display:none}
  /* search becomes a full popout sheet under the header, not an inline bar.
     Anchored to .topbar (the positioned ancestor); 16px input keeps iOS from
     auto-zooming when the field is focused. */
  body:not(.is-logged-out) .topbar.search-open .nav-center{
    display:block;position:absolute;top:100%;left:0;right:0;
    height:calc(100dvh - 100%);
    background:var(--bg);
    padding:16px 14px;
    border-bottom:1px solid var(--line);
    box-shadow:0 28px 32px rgba(0,0,0,.14);
  }
  .nav-center .searchbox input{font-size:16px}
  body:not(.is-logged-out) .search-cancel{display:inline-flex}
  /* logged-out: explicit grid so login sits top-right without relying on auto margins */
  body.is-logged-out .topbar-inner{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px 10px;align-items:center}
  body.is-logged-out .logo{grid-column:1;grid-row:1}
  body.is-logged-out #themeToggle{grid-column:2;grid-row:1;justify-self:start}
  body.is-logged-out #nav{display:contents}
  body.is-logged-out #nav .nav-icons{grid-column:4;grid-row:1;justify-self:end;margin-left:0}
  body.is-logged-out #nav>.btn{grid-row:2;justify-self:start}
  body.is-logged-out #nav .nav-row2{grid-column:1/-1;grid-row:2;display:flex;gap:8px;justify-self:start}
  body.is-logged-out #navRow2{grid-column:1/-1;grid-row:2}
  body.is-logged-out .nav-center{grid-column:1/-1;grid-row:3;flex:none;width:100%;order:0}
  body.is-logged-out .nav-center:empty{display:none}
  .nav-center .searchbox{width:100%}
  .searchbox input{flex:1;width:auto}
  #app{padding:12px 4px 48px}
  .card{padding:12px 8px;border-radius:14px}
  .post{gap:6px}
  .votes{min-width:24px}
  h1{font-size:26px}
  .hero{padding:28px 10px 12px}
  /* landing paths: compact 3-across on mobile, no swipe */
  .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0;padding:0}
  .path{padding:18px 10px}
  .path-icon{width:68px;height:68px;border-radius:20px;margin-bottom:10px}
  .path-icon svg{width:32px;height:32px}
  .path h3{font-size:14px;margin-bottom:6px}
  .path p{font-size:11.5px;line-height:1.35}
  .path .btn{padding:9px 6px;font-size:12.5px;width:100%}
  .path .btn-col{display:flex;flex-direction:column;width:100%;margin-top:auto;padding-top:10px}
  .path .btn-col .btn{margin-top:0}
  .path .or{display:flex;align-items:center;gap:6px;margin:8px 0;color:var(--muted);font-size:10.5px}
  .path .or::before,.path .or::after{content:"";flex:1;height:1px;background:var(--line)}
  .path .fine{font-size:10.5px;margin:8px 0 0}
  /* footer block sits higher so the landing fits one screen */
  #app{padding:18px 12px 24px}
  .learn-more{margin:0 0 14px}
  .learn-more a{font-size:15px}
  .foot{padding:14px 10px;font-size:10.5px}
  .foot .foot-links{white-space:normal}
  .real-big{font-size:clamp(84px,24vw,120px)}
  .real-rot{font-size:clamp(32px,9vw,44px);min-height:1.2em;margin-top:4px}
  .tagline{font-size:15.5px;margin-bottom:4px}
  .paths{margin:24px 0}
  .path{padding:26px 20px}
  .path .btn{margin-top:16px}
  .hb1{width:92px}
  .hb2{width:64px}
  .hb4{width:76px}
  .hb3,.hb5{display:none}
  .hero h1{font-size:38px}
  .tagline{font-size:17px}
  .post{gap:12px}
  .card{padding:18px}
  /* nested replies: shallower indent so deep threads keep a readable column */
  .comment{padding:4px 0 10px 4px;margin:4px 0}
  .comment:has(> .thread-bar){padding-left:14px}
  .thread-bar{width:14px}
  .thread-bar::before{left:6px}
  .comment-actions{flex-wrap:wrap;row-gap:6px;column-gap:16px}
  /* tab/sort rows wrap instead of squeezing */
  .sortbar,.tabs,.profile-tabs{flex-wrap:wrap;row-gap:6px}
  .subtalk-head h2{font-size:24px}
  .verified-hero{padding:22px 20px}
  .deal-card{padding:36px 20px}
  .code-row{flex-wrap:wrap}
  .form-row input{min-width:0}
  /* larger touch targets for votes and the compose formatting bar */
  .votes button{min-width:40px;min-height:40px;padding:8px}
  .fmt-bar button{padding:8px 12px;font-size:13px}
  /* dropdown menus scroll on short screens instead of clipping */
  .menu{max-height:calc(100dvh - 76px);overflow-y:auto}
  /* modals fit short/landscape screens */
  #reportModal .modal,#shortcutsModal .modal{max-height:calc(100dvh - 40px);overflow-y:auto}
  /* subtalk/profile headers stack on phones: title full width, actions below */
  .subtalk-head{flex-direction:row;align-items:center;gap:12px}
  .subtalk-head h2{font-size:24px}
  .subtalk-head>.founder-badge,.subtalk-head>.tea-badge{align-self:flex-start}
  .head-actions{margin-left:0;width:100%}
  .head-actions .btn{flex:1 1 auto}
}
/* long unbreakable strings (URLs, pasted tokens, long handles) wrap
   instead of pushing cards and rows off-screen — all widths, not just mobile */
.post h3,.post .body,.comment .body,.subtalk-desc,.notif-text,.byline,
.comment-ref .body,.subtalk-head h2,.menu-head .handle-row,.notif-preview{
  overflow-wrap:anywhere;
}
.sub-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-row input{flex:1;min-width:180px}

/* comment structure */
.comment-main{min-width:0;flex:1}
/* Reply votes sit inline in the actions row (Reddit-style), not in a left column. */
.comment-actions .votes{flex-direction:row;align-items:center;gap:0;min-width:0}
.comment-actions .votes button{width:auto;height:28px;padding:0 3px}
.comment-actions .votes button svg{width:20px;height:20px}
.comment-actions .votes .score{min-width:0;font-size:15px;padding:0 3px}
.comment-actions .report-icon-btn{margin-left:6px}
/* Talk-detail votes go inline too. */
.post-actions .votes{flex-direction:row;align-items:center;gap:0;min-width:0}
.meta-row .votes{flex-direction:row;align-items:center;gap:0;min-width:0}
/* the shield menu hugs the dots menu instead of splitting the row's free space */
.meta-row .more-wrap + .more-wrap{margin-left:0}
.meta-row .votes button{width:auto;height:28px;padding:0 3px}
.meta-row .votes button svg{width:20px;height:20px}
.meta-row .votes .score{min-width:0;font-size:15px;padding:0 3px}
.post-actions .votes button{width:auto;height:28px;padding:0 3px}
.post-actions .votes button svg{width:20px;height:20px}
.post-actions .votes .score{min-width:0;font-size:15px;padding:0 3px}
.post-actions .report-icon-btn{margin-left:6px}
.post-actions .more-wrap{margin-left:0}
.comment-actions{display:flex;gap:8px;align-items:center;margin-top:4px}

/* post … menu + admin tag */
.more-wrap{position:relative;display:inline-block;margin-left:auto}
.more-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;letter-spacing:2px;padding:2px 8px;border-radius:6px;line-height:1.2}
.more-btn:hover{background:var(--line-soft);color:var(--ink)}
.more-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:180px;background:var(--card);border:1px solid var(--line-soft);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:60;padding:4px;display:flex;flex-direction:column;gap:2px}
.more-btn svg{width:15px;height:15px;display:block}
.shield-btn{color:#2ea043}
.shield-btn:hover{color:#2ea043}
.mod-ban-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line-soft)}
.mod-ban-row .btn{margin-left:auto}
.mod-report-row{flex-wrap:wrap}
.mod-report-row .mod-report-dismiss-btn{margin-left:auto}
.removed-kind{flex:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-soft);border-radius:999px;padding:2px 8px}
.removed-snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.more-menu[hidden]{display:none}
.more-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;padding:9px 12px;font-size:14px;color:var(--ink);border-radius:6px;cursor:pointer}
.mi-icon{display:inline-flex;width:22px;height:22px;flex:none;color:var(--ink-soft)}
.mi-icon svg{width:100%;height:100%}
.more-item:hover{background:var(--line-soft)}
.comment-actions .link-btn{margin:0}
.comment.collapsed .cbody{display:none}
.comment .low-score-bar{display:none}
.comment.collapsed .low-score-bar{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);padding:3px 0;cursor:pointer}
.comment.removed.collapsed .replies{display:none}
.thread-tools{display:flex;align-items:center;gap:10px;margin:-8px 0 12px}
.thread-tools .thread-tool-btn{font-size:12.5px;font-weight:500;color:var(--muted);padding:2px 0}
.thread-tools .thread-tool-btn:hover{color:var(--accent-dark)}
.thread-tools .thread-tool-btn.on{color:var(--accent-dark);font-weight:700}
.thread-tools-sep{color:var(--faint);font-size:12px}
.comment.op-hidden{display:none}
@keyframes flashBg{0%{background:var(--accent-soft)}100%{background:transparent}}
.comment.flash{animation:flashBg 1.8s ease-out;border-radius:12px}
.jump-new-btn{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 16px;border:none;border-radius:980px;cursor:pointer;
  background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);
}
.jump-new-btn:hover{background:var(--accent-dark)}
.jump-new-count{background:rgba(255,255,255,.25);border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700}
.back-to-top-btn{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 16px;border:1px solid var(--line);border-radius:980px;cursor:pointer;
  background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);
}
.back-to-top-btn:hover{background:var(--line-soft)}
.back-to-top-btn[hidden]{display:none}
.back-to-top-btn svg{width:16px;height:16px}
/* Talk pages: lift Back to top clear of the Jump to newest reply pill
   when both floating buttons are on screen (feeds never carry the pill). */
body:has([data-jump-new]) .back-to-top-btn{bottom:calc(76px + env(safe-area-inset-bottom))}

/* post detail */
.post-main{min-width:0;flex:1}
.edit-form{margin-top:14px}

/* char counters */
.char-count{text-align:right;font-size:12px;margin-top:4px}
.char-count.char-count-near{color:#b45309;font-weight:600}

/* nav icon buttons + notification badge */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid transparent;
  background:transparent;color:var(--ink-soft);cursor:pointer;
}
.icon-btn:hover{background:var(--line-soft);text-decoration:none}
.icon-btn svg{width:19px;height:19px}
#nav .icon-btn{font-size:14px}
.notif-badge{
  position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;
  background:var(--down);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;
  border-radius:9px;text-align:center;
}
a.icon-btn{color:var(--ink-soft)}
a.icon-btn:hover{color:var(--ink)}
@media (min-width:641px){#searchToggle{display:none}}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(280px,84vw);background:var(--card);z-index:41;transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;padding:12px 14px 20px;box-shadow:0 0 40px rgba(0,0,0,.18);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px;font-size:17px}
.drawer-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);margin:14px 8px 4px}
.drawer-link{display:block;padding:7px 8px;border-radius:8px;color:var(--ink);font-size:14.5px;text-decoration:none}
.drawer-link:hover{background:var(--line-soft);text-decoration:none}
.drawer-sub{margin-left:8px;font-size:13px}
.drawer-empty{padding:4px 8px;font-size:13.5px;color:var(--muted)}
.drawer-recent-title{display:block;overflow-wrap:anywhere}
.drawer-recent-sub{display:block;font-size:12.5px;margin-top:1px}
.drawer-foot{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:8px}

/* header dropdown menus */
.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:220px;z-index:80;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;
}
.menu[hidden]{display:none}
.menu a,.menu button.item{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border-radius:9px;color:var(--ink);font-size:14px;text-decoration:none;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
}
.menu a:hover,.menu button.item:hover{background:var(--line-soft);text-decoration:none}
.menu a svg,.menu button.item svg{width:17px;height:17px;color:var(--muted);flex:none}
.menu-sep{border-top:1px solid var(--line);margin:6px 0}
.menu button.tea-switch .muted{margin-left:auto;font-size:12px}
.info-btn{
  width:18px;height:18px;border-radius:50%;border:1px solid var(--line-dark);
  background:var(--line-soft);color:var(--muted);font-size:11px;font-style:italic;
  font-weight:700;cursor:pointer;vertical-align:2px;margin-left:2px;line-height:1;
}
.info-btn:hover{color:var(--ink);border-color:var(--muted)}
.info-btn.on{color:var(--ink);border-color:var(--muted)}
.pop-wrap{position:relative;display:inline-block}
.pop-bubble{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:min(270px,70vw);
  background:var(--card);border:1px solid var(--line-dark);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 14px;text-align:left;font-weight:400;
}
.pop-bubble[hidden]{display:none}
.pop-bubble p{font-size:13px;color:var(--ink-soft);margin:0 0 8px;line-height:1.5}
.pop-bubble p:last-child{margin-bottom:0}
.handle-preview{
  position:fixed;z-index:90;width:min(280px,calc(100vw - 16px));
  background:var(--card);border:1px solid var(--line-dark);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 14px;text-align:left;
}
.handle-preview[hidden]{display:none}
.hp-head{display:flex;align-items:center;gap:6px;min-width:0}
.hp-handle{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-bio{font-size:13px;color:var(--ink-soft);line-height:1.45;margin-top:6px;overflow-wrap:anywhere}
.hp-meta{font-size:12px;margin-top:6px}
.hp-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.hp-actions .follow-btn{flex:none}
.hp-profile{font-size:13px;font-weight:600}
.tea-list{display:flex;flex-direction:column;gap:8px}
.tea-row{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);
}
.tea-row.is-current{border-color:var(--accent);background:var(--accent-soft)}
.tea-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.tea-meta{display:flex;align-items:center;min-width:0;font-size:14px}
.tea-meta .tea-badge{margin-left:2px;flex:none}
.tea-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tea-current{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);flex:none}
.tea-row .switch-persona-btn{margin-left:auto;flex:none}
.tea-del{
  width:28px;height:28px;border-radius:50%;border:none;background:transparent;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;flex:none;padding:0;
}
.tea-del:hover{color:#e5484d;background:var(--line-soft)}
.menu-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu-head .handle-row{display:flex;align-items:center;gap:8px;font-size:15px}
.menu-status{margin-top:8px}
.avatar-btn{
  height:36px;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-weight:700;font-size:14px;padding:0 14px;
  display:flex;align-items:center;justify-content:center;
  max-width:150px;overflow:hidden;white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}
.avatar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nav-icons .menu-wrap{min-width:0}
.nav-icons{flex:none}
.avatar-btn:hover{transform:scale(1.06);box-shadow:var(--shadow-sm)}
#createBtn{display:inline-flex;align-items:center;gap:6px}
#createBtn svg{width:15px;height:15px}

/* profile tabs — talks and replies as separate scrollable lists */
.profile-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:20px 0 0}
.ptab{
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:10px 18px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;
}
.ptab:hover{color:var(--ink)}
.ptab.active{color:var(--ink);border-bottom-color:var(--accent)}
.ptab .count{
  font-size:12px;font-weight:700;background:var(--line-soft);color:var(--muted);
  border-radius:999px;padding:2px 9px;
}
.ptab.active .count{background:var(--accent-soft);color:var(--accent-dark)}
.profile-list{max-height:72vh;overflow-y:auto;padding:14px 2px 40px}
.profile-list[hidden]{display:none}
@media (max-width:640px){
  .menu{position:fixed;top:60px;right:12px;left:12px;min-width:0}
  /* the collection picker stays anchored under Save instead of sheet-ing */
  .save-wrap .menu{position:absolute;top:calc(100% + 6px);left:0;right:auto}
  /* Overflow menus become bottom sheets so they never get cut off. */
  .more-menu{position:fixed;top:auto;bottom:0;right:0;left:0;min-width:0;border-radius:16px 16px 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:100}
  .more-item{padding:14px 16px;font-size:16px}
}

/* notifications */
.notif-group{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:18px 2px 8px}
.notif-group:first-child{margin-top:6px}
.notif.unread{border-left:3px solid var(--accent);cursor:pointer}
.notif-text{font-size:15px;margin-bottom:6px}
.notif-preview{font-size:14px;color:var(--ink-soft);margin:6px 0;white-space:pre-wrap}
.notif-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dm-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.dm-actions[hidden]{display:none}
.notif-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.notif-actions[hidden]{display:none}
.notif-actions-btns{display:flex;gap:8px}
.notif-actions-btns [hidden]{display:none}
.comment-ref{padding:16px 20px}
.comment-ref .body{white-space:pre-wrap;margin-top:6px;font-size:14.5px;color:var(--ink-soft)}

/* ------------------------------------------------ dark mode */
html.dark{
  color-scheme:dark;
  --bg:#0b0b0d;
  --card:#141417;
  --ink:#f5f5f7;
  --ink-soft:#d7d7db;
  --muted:#9a9aa0;
  --line:#2e2e33;
  --line-soft:#1e1e22;
  --accent-dark:#ff6b3d;
  --accent-soft:rgba(228,87,46,.18);
  --up:#30d158;
  --up-soft:rgba(48,209,88,.15);
  --down:#ff453a;
  --down-soft:rgba(255,69,58,.15);
  --gold:#ffd60a;
  --gold-soft:rgba(255,214,10,.14);
  --info:#0a84ff;
  --info-soft:rgba(10,132,255,.16);
  --field:#1c1c1f;
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --shadow-sm:0 1px 6px rgba(0,0,0,.35);
}
html.dark .topbar{background:rgba(14,14,16,.82)}
html.dark .votes button:hover{background:var(--line-soft);color:var(--ink)}
html.dark .admin-table tr:hover td{background:rgba(255,255,255,.03)}
html.dark .empty .empty-icon{background:var(--card)}
html.dark .sortbar a:hover{background:var(--line-soft);color:var(--ink)}
html.dark .windowbar a:hover{background:var(--line-soft);color:var(--ink);box-shadow:none}
html.dark .windowbar a.on{background:rgba(255,255,255,.14)}
html.dark .surprise-btn:hover{background:var(--line-soft);color:var(--ink);box-shadow:none}
html.dark .seg button.on{background:var(--card);color:var(--ink)}
html.dark .sortbar a.on{color:#0b0b0d}
html.dark .sortbar a.on:hover{background:var(--ink);color:#0b0b0d}
html.dark .sortbar a.on .count{background:rgba(0,0,0,.14);color:#0b0b0d}
html.dark .sortbar button:hover{background:var(--line-soft);color:var(--ink)}
html.dark .sortbar button.on{color:#0b0b0d}
html.dark .sortbar button.on:hover{background:var(--ink);color:#0b0b0d}
html.dark .searchbox input{background:var(--line-soft)}
html.dark .searchbox input:focus{background:var(--field)}

/* text formatting */
.fmt-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:8px;cursor:pointer}
.fmt-toggle:hover{background:var(--line-soft)}
.fmt-toggle.on{background:var(--line-soft);color:var(--ink)}
.fmt-bar[hidden]{display:none}
.fmt-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.fmt-bar button{font-size:12px;font-weight:600;padding:4px 10px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:8px;cursor:pointer}
.fmt-bar button:hover{background:var(--line-soft)}
.fmt-bar button:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
.under-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;min-height:22px}
.under-row .char-count{margin-top:0;margin-left:auto}
.under-actions{display:inline-flex;align-items:center;gap:8px}
.preview-toggle{background:none;border:none;color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0}
.preview-toggle:hover{color:var(--ink-soft)}
.preview-toggle.on{color:var(--accent-dark)}
.preview-toggle[hidden]{display:none}
.fmt-preview-card{margin:8px 0}
/* submit buttons sharing the under-row with char count + preview: match their size */
.under-actions .btn{padding:3px 14px;font-size:12px;font-weight:600;margin-top:0}
/* roomier edit forms, less chrome */
.edit-form input[name="title"]{margin-bottom:10px}
form[data-form="editComment"] textarea{min-height:170px}
/* Full-screen talk editor: actions + title + toolbar stay pinned, body fills the screen. */
.edit-full{
  position:fixed;inset:0;z-index:300;
  background:var(--bg);
  display:flex;flex-direction:column;gap:10px;
  margin:0;padding:calc(10px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.edit-full-head{
  position:sticky;top:0;z-index:2;
  background:var(--bg);
  display:flex;flex-direction:column;gap:10px;
  padding:2px 0 10px;
}
.edit-full-actions{display:flex;justify-content:space-between;align-items:center}
.edit-full-actions .btn{margin-top:0}
.edit-full textarea{
  flex:1 0 auto;min-height:55vh;
  font-size:16px;line-height:1.65;resize:none;
}
.edit-full .under-row{
  position:sticky;bottom:0;
  background:var(--bg);padding:10px 0 2px;
}
.post .body,.comment .body{white-space:normal}
.body h2,.body h3,.body h4{margin:14px 0 6px;line-height:1.3;color:var(--ink)}
.body h2{font-size:19px}
.body h3{font-size:17px}
.body h4{font-size:15px}
.body p{margin:8px 0}
.body p:first-child{margin-top:0}
.body p:last-child{margin-bottom:0}
.body ul,.body ol{margin:8px 0;padding-left:24px}
.body li{margin:3px 0}
.body blockquote{border-left:3px solid var(--line);margin:10px 0;padding:2px 0 2px 12px;color:var(--ink-soft)}
.body blockquote p{margin:4px 0}
.body pre{background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:10px 0;font-size:13px}
.body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.body p code,.body li code{background:var(--bg);padding:1px 5px;border-radius:5px}
.body hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.body a{color:var(--info)}

/* talk header: subtalk chip, quiet byline, tiered actions */
.sub-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 11px;border-radius:980px;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
a.sub-chip:hover{text-decoration:none;filter:brightness(.96)}
.byline{flex-basis:100%;color:var(--muted);margin-top:1px}
.byline a{color:var(--ink-soft);font-weight:600}
.byline a:hover{color:var(--accent-dark)}
.post-time{color:var(--muted)}
.post-actions{display:flex;align-items:center;gap:8px 12px;flex-wrap:nowrap;margin-top:10px}
.post-detail .post-actions{flex-wrap:wrap}
.post-actions .more-wrap{display:inline-flex;align-items:center}
.post-actions .more-btn{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 8px;line-height:0}
.post-actions>a{flex:none;white-space:nowrap}
.rep-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border:1px solid var(--line);border-radius:980px;color:var(--ink-soft);font-size:13px;font-weight:600;background:var(--card);text-decoration:none;flex:none}
.rep-pill:hover{color:var(--accent-dark);border-color:var(--accent);text-decoration:none}
.rep-pill svg{width:15px;height:15px;flex:none}
.more-wrap>.save-menu{min-width:240px;max-height:320px;overflow-y:auto}
.more-item.on{color:var(--accent-dark)}
.post-actions .more-wrap{margin-left:0}
.post-actions .votes{margin-left:auto;flex:none}
.views-count{font-size:12px;white-space:nowrap}

/* report modal */
#reportModal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
#reportModal .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#reportModal .modal{position:relative;max-width:420px;width:100%;margin:0}
.report-reasons{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}

/* post header: chip + byline close together, air before the title */
.post-head{row-gap:2px;margin-bottom:6px}
.post-head .byline{margin-top:0}
.inline-select{font:inherit;font-size:.85rem;padding:2px 6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--field,#fff);color:var(--ink);width:auto}

/* keyboard shortcuts */
.kbd-selected{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
kbd{font-family:inherit;font-size:12.5px;font-weight:600;background:var(--accent-soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 7px;white-space:nowrap}
#shortcutsModal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
#shortcutsModal .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#shortcutsModal .modal{position:relative;max-width:400px;width:100%;margin:0}
.sc-table{width:100%;border-collapse:collapse}
.sc-table td{padding:7px 4px;border-top:1px solid var(--line);font-size:14px;vertical-align:top}
.sc-table td:first-child{width:84px}
.sc-table tr:first-child td{border-top:0}

/* save collections */
.save-wrap{position:relative;display:inline-flex;align-items:center;gap:2px}
.save-col-btn{border:none;background:none;cursor:pointer;color:var(--muted);padding:6px 5px;border-radius:6px;line-height:1;font-size:11px}
.save-col-btn:hover{color:var(--ink);background:var(--line-soft)}
.save-wrap .menu{left:0;right:auto;min-width:240px;max-height:320px;overflow-y:auto}
.save-menu{max-width:min(300px,82vw);text-align:left}
.col-menu-item .col-check{width:18px;flex:none;color:var(--accent);display:inline-flex;align-items:center}
.col-menu-item .col-check svg{width:15px;height:15px}
.col-menu-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-menu-new{padding:8px 6px 6px;border-top:1px solid var(--line);margin-top:4px}
.col-menu-new .form-row{margin:0}
.col-menu-new input{flex:1;min-width:0}
.col-rename-input{flex:1;min-width:0}
.nav-div{width:1px;align-self:stretch;margin:6px 2px;background:var(--line)}
.removed-note{color:var(--muted);font-style:italic;padding:8px 0}
/* invite tree (admin) */
.invite-tree,.invite-tree ul{list-style:none;margin:0;padding:0}
.invite-tree ul{margin-left:8px;padding-left:14px;border-left:1px solid var(--line)}
.invite-tree .tree-node{padding:5px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.invite-tree code{background:var(--accent-soft);padding:2px 6px;border-radius:6px;font-size:12px}
/* NSFW (18+) */
.nsfw-badge{font-size:11px;font-weight:700;color:#fff;background:#7a1f1f;border-radius:4px;padding:1px 6px;white-space:nowrap}
.nsfw-hidden{cursor:pointer}
.nsfw-hidden .nsfw-text{filter:blur(8px);user-select:none;display:block;pointer-events:none}
.nsfw-hidden.revealed{cursor:default}
.nsfw-hidden.revealed .nsfw-text{filter:none;user-select:text;pointer-events:auto}
.nsfw-hint{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.nsfw-hidden.revealed .nsfw-hint{display:none}
/* Spoiler: title and body blurred until tapped, same reveal pattern as 18+. */
.spoiler-badge{font-size:11px;font-weight:700;color:#fff;background:#3f3f46;border-radius:4px;padding:1px 6px;white-space:nowrap}
.spoiler-hidden{cursor:pointer}
.spoiler-hidden .spoiler-text{filter:blur(8px);user-select:none;display:block;pointer-events:none}
.spoiler-hidden.revealed{cursor:default}
.spoiler-hidden.revealed .spoiler-text{filter:none;user-select:text;pointer-events:auto}
.spoiler-hint{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.spoiler-hidden.revealed .spoiler-hint{display:none}
.post-title .spoiler-hidden .spoiler-text{display:inline}
.post-title a.spoiler-hidden{text-decoration:none}
.post-title a.visited{color:var(--muted)}
.post-title a.visited:hover{color:var(--ink)}
/* Locked talks: no new replies; existing replies stay readable. */
.locked-badge{font-size:11px;font-weight:700;color:#fff;background:#78716c;border-radius:4px;padding:1px 6px;white-space:nowrap}
/* Poll talks: small chip in the card/talk head. */
.poll-badge{font-size:11px;font-weight:700;color:#fff;background:#2563eb;border-radius:4px;padding:1px 6px;white-space:nowrap}
.locked-note{margin-bottom:12px}
/* Crossposts: linked card to the original talk. */
.crosspost-line{font-size:12px;color:var(--muted);margin:2px 0 0}
.crosspost-line a{color:var(--muted);font-weight:600}
.crosspost-via{margin-bottom:12px}
/* clickable post cards */
article.post[data-talk]{cursor:pointer}
article.post[data-talk] a,article.post[data-talk] button{cursor:pointer}
/* DMs */
.dm-filter{margin-bottom:14px}
.dm-filter input{border-radius:980px;padding:9px 16px;background:var(--line-soft);border-color:transparent}
.dm-filter input:focus{background:var(--field,#fff);border-color:var(--accent)}
.thread.dm-hide{display:none}
.dm.dm-hide{display:none}
.dm-thread-filter{display:flex;gap:8px;align-items:center;margin:10px 0 0}
.dm-thread-filter input{flex:1;min-width:0}
.dm-search-count{font-size:12px;flex:none;white-space:nowrap}
.save-filter{margin-bottom:14px}
.save-filter input{border-radius:980px;padding:9px 16px;background:var(--line-soft);border-color:transparent}
.save-filter input:focus{background:var(--field,#fff);border-color:var(--accent)}
.post.save-hide{display:none}
.saved-reply-card.save-hide{display:none}
.profile-filter{margin-bottom:14px}
.profile-filter input{border-radius:980px;padding:9px 16px;background:var(--line-soft);border-color:transparent}
.profile-filter input:focus{background:var(--field,#fff);border-color:var(--accent)}
.post.profile-hide{display:none}
.comment-ref.profile-hide{display:none}
.featured-talk.profile-hide{display:none}
.discover-filter{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.discover-filter input{flex:1;min-width:0;border-radius:980px;padding:9px 16px;background:var(--line-soft);border-color:transparent}
.discover-filter input:focus{background:var(--field,#fff);border-color:var(--accent)}
.card.discover-hide{display:none}
.thread{display:flex;gap:10px;align-items:center;color:inherit;margin-bottom:10px}
.thread:hover{text-decoration:none}
.thread.unread{border-color:var(--accent)}
.thread.pinned{border-color:var(--accent)}
.thread-actions{display:flex;flex-direction:column;gap:4px;flex:none;align-items:stretch}
.thread-actions .btn.small{padding:4px 8px;font-size:12px}
.dm-pinned-badge{font-size:10.5px;font-weight:600;color:var(--accent-dark);background:var(--accent-soft);padding:1px 6px;border-radius:999px;flex:none;white-space:nowrap}
.dm-muted-badge{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--line-soft);padding:1px 6px;border-radius:999px;flex:none;white-space:nowrap}
.thread-main{flex:1;min-width:0;color:inherit;display:flex;gap:12px;align-items:center}
.thread-main:hover{text-decoration:none}
.thread-ava{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.thread-ava.gone{background:var(--line-soft);color:var(--muted)}
.thread-text{flex:1;min-width:0}
.thread-del{flex:none}
.thread-top{display:flex;align-items:center;gap:6px;min-width:0}
.thread-top strong{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:2.5em}
.thread-time{margin-left:auto;font-size:12px;flex:none}
.unread-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.thread-preview{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:14px}
.thread.unread .thread-preview{color:var(--ink);font-weight:600}
.dm-head{margin-bottom:14px}
.dm-title-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.dm-title{margin:0;font-size:20px}
.dm-title a{color:inherit;text-decoration:none}
.dm-title a:hover{text-decoration:underline}
.dm-title-row .dm-block-btn{margin-left:auto;flex:none}
.dm-title-row .thread-del-inline{flex:none}
.dm-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.dm-date-sep{align-self:center;display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dm-date-sep::before,.dm-date-sep::after{content:"";height:1px;width:36px;background:var(--line-soft)}
.dm-date-sep span{background:var(--card);border:1px solid var(--line-soft);border-radius:999px;padding:2px 10px}
.dm{max-width:75%}
.dm-same{margin-top:-8px}
.dm-bubble{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;border-bottom-left-radius:6px;padding:9px 13px;overflow-wrap:anywhere;font-size:15px;line-height:1.45}
.dm-bubble p:first-child{margin-top:0}
.dm-bubble p:last-child{margin-bottom:0}
.dm.mine{align-self:flex-end}
.dm.mine .dm-bubble{background:var(--accent);border-color:var(--accent);color:#fff;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.dm.mine .dm-bubble a{color:#fff}
.dm-read-marker{align-self:flex-end;color:var(--muted);font-size:11px;margin-top:-8px;padding-right:2px}
.dm-time{font-size:11px;margin-top:3px;display:flex;align-items:center;gap:6px}
.dm-time .report-icon-btn{margin-left:0}
.dm.mine .dm-time{justify-content:flex-end}
.dm-time .dm-msg-del{font-size:11px;font-weight:400;color:var(--muted);padding:0}
.dm-time .dm-msg-del:hover{color:var(--ink);text-decoration:none}
.dm-compose{display:flex;gap:8px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:6px 6px 6px 16px;position:sticky;bottom:10px;box-shadow:0 4px 18px rgba(30,20,5,.06)}
.dm-compose textarea{flex:1;resize:none;min-height:24px;border:0;background:transparent;padding:6px 0;font:inherit;font-size:15.5px;outline:none}
.dm-compose .char-count{font-size:11px;padding-bottom:9px}
.dm-compose .reply-submit{border-radius:999px;flex:none}
.load-more{text-align:center;margin:18px 0}
/* yammering: per-subtalk live chat */
.yammer-link{flex:none;display:inline-flex;align-items:center;gap:6px}
.yammer-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.chat-head{margin-bottom:12px}
.chat-title{margin:4px 0 2px;font-size:22px}
.chat-sub{margin:0;font-size:13.5px}
.chat-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.chat-msg{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:8px 12px;overflow-wrap:anywhere}
.chat-msg.mine{border-color:var(--accent-soft);background:var(--accent-soft)}
.chat-meta{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chat-meta a{color:var(--ink);font-weight:600;text-decoration:none}
.chat-del{margin-left:auto;font-size:12px;color:var(--muted)}
.chat-body{font-size:15px;line-height:1.45;margin-top:2px}
.chat-compose{margin-top:4px}
.chat-filter{display:flex;gap:8px;align-items:center;margin:10px 0 0}
.chat-filter input{flex:1;min-width:0;border-radius:980px;padding:9px 16px;background:var(--line-soft);border-color:transparent}
.chat-filter input:focus{background:var(--field,#fff);border-color:var(--accent)}
.chat-search-count{font-size:12px;flex:none;white-space:nowrap}
.chat-msg.chat-hide{display:none}
/* reader view: the talk alone on the page, set like an article */
.reader-exit{display:none}
#app:has(> .post-detail.reader) > *:not(.post-detail){display:none}
body:has(.post-detail.reader) .topbar,body:has(.post-detail.reader) .foot{display:none}
.post-detail.reader{max-width:680px;margin:26px auto 44px;padding:38px clamp(20px,6vw,36px) 30px}
.post-detail.reader .post-title{font-size:30px;line-height:1.25;margin-top:12px}
.post-detail.reader .post-body{font-size:19px;line-height:1.75;margin-top:16px}
.post-detail.reader .hdr-tools{display:none}
.post-detail.reader .post-actions{display:none}
.post-detail.reader .reader-exit{display:inline-flex;align-items:center;gap:7px;position:fixed;top:14px;right:14px;z-index:300;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;box-shadow:0 6px 24px rgba(30,20,5,.14)}
.post-detail.reader .reader-exit svg{width:14px;height:14px;flex:none}

/* reading progress: thin bar under the header on talk pages; app.js drives top/width */
.reading-progress{position:fixed;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .08s linear;pointer-events:none}
.reading-progress[hidden]{display:none}

/* sticky thread header: slim talk title + subtalk bar under the topbar on
   talk pages; app.js drives top + the .on fade once a long thread scrolls */
.thread-sticky{position:fixed;left:0;right:0;top:56px;z-index:9;display:block;width:100%;padding:8px 22px;border:none;border-bottom:1px solid var(--line-soft);background:rgba(251,251,253,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.thread-sticky.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s ease,transform .18s ease}
.thread-sticky:hover{background:var(--line-soft)}
html.dark .thread-sticky{background:rgba(14,14,16,.88)}
html.dark .thread-sticky:hover{background:var(--line-soft)}
body:has(.post-detail.reader) .thread-sticky{display:none}

/* Feed control line (Joel, 2026-10-07): one quiet line above the feed.
   Iteration 2 (run #220): label-free, borderless text selects (Sort,
   time window on windowed sorts, density at the right edge) plus the
   Filters text button; the toggles under it are plain text too, so the
   whole area reads as caption text, not a form or a pill bar.
   Iteration 3 (run #221): density leaves the resting line and joins
   the expanded Filters row as quiet text (Display Comfortable/Compact);
   the resting line is only Sort (+ Window) and Filters.
   Iteration 4 (run #222): the Window select leaves the resting line
   too and joins the expanded Filters row as a quiet labeled select;
   the resting line is always Sort + Filters on one line.
   Iteration 5 (run #223): the visible "Window"/"Display" labels leave
   the expanded row (aria-labels keep the accessible names) and the
   area tightens (smaller margins, 2px vertical padding), so the row
   reads as values only and the first card starts sooner.
   Iteration 6 (run #224): the resting line sits at caption weight:
   12.5px, quieter at rest (opacity .78) and full-strength on hover or
   keyboard focus, with no bottom margin so the first card starts
   immediately below it; the expanded row tightens the same way
   (tighter gaps, 6px bottom margin). No control is added, moved, or
   removed; sort/window/density state, URL params, and Load more are
   unchanged. Mobile selects stay 16px so iOS never zooms.
   Iteration 8 (run #226): the expanded row wrapped to two lines on
   mobile (toggles, then window/density), still reading as a stacked
   bar. It is now one horizontally scrollable line (nowrap, no visible
   scrollbar), so opening Filters adds exactly one quiet line; the idle
   Filters button drops to the same 400 weight as the sort value, and
   only an active filter count reads heavier. Nothing is added,
   moved, or removed; values, params, and handlers are unchanged.
   Iteration 9 (run #227): the single scrollable row still clipped
   mid-word at the right edge ("All time" cut off with no hint more
   follows), and its inactive values read heavier (500) than the
   resting line (400). The row now fades at the right edge so the
   overflow reads as scrollable, inactive filter/density values drop
   to 400 to match the resting whisper (active stays bold +
   underlined), the row's bottom margin tightens 6px to 4px, the
   resting gap tightens 6px to 5px, and the sort caret lightens.
   Nothing is added, moved, or removed; values, params, handlers,
   and Load more are unchanged. Mobile selects stay 16px.
   Iteration 10 (run #228, final): the quiet text controls were only
   ~20px tall, hard to tap on mobile despite reading well. Each feed
   control now carries 7px of vertical padding cancelled by -6px
   vertical margins, so the tap target grows to ~34px while the
   visual line, its spacing, and the first card's position are
   unchanged. Nothing is added, moved, or removed; values, params,
   handlers, and Load more are unchanged. */
.feed-controls{display:flex;align-items:center;gap:5px;margin:0;font-size:12.5px;flex-wrap:wrap;opacity:.78}
.feed-controls{position:relative;z-index:20}
.feed-controls:hover,.feed-controls:focus-within{opacity:1}
.fc-select{font:inherit;font-size:12.5px;color:var(--muted);font-weight:400;background:transparent;border:none;border-radius:6px;padding:7px 14px 7px 2px;margin:-6px 0;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23b8b0a6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.fc-select:hover{color:var(--ink)}
.fc-select:focus-visible{outline:2px solid var(--info);outline-offset:1px}
.fc-window{display:inline-flex;align-items:baseline}
/* One-button density control (Joel, 2026-10-07): an icon-only button
   at the quiet right edge of the feed line; its small menu lists
   Comfortable and Compact with icons, and stays anchored under the
   button on mobile instead of becoming a bottom sheet. */
.density-wrap{margin-left:auto}
.density-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:5px;margin:-6px 0;color:var(--muted);border-radius:6px;letter-spacing:0}
.density-btn:hover{color:var(--ink);background:var(--line-soft)}
.density-btn:focus-visible{outline:2px solid var(--info);outline-offset:1px}
.density-btn svg{width:17px;height:17px;display:block}
.density-menu{min-width:168px}
.density-item.on{font-weight:700}
.density-item .mi-icon svg{width:17px;height:17px;display:block}
@media (max-width:640px){.feed-controls{flex-wrap:nowrap}.fc-select{font-size:16px}.density-menu.more-menu{position:absolute;right:0;left:auto;top:calc(100% + 4px);bottom:auto;min-width:168px;border-radius:10px;padding:4px;z-index:60}.density-item.more-item{padding:9px 12px;font-size:14px}}