/* Humanish app design system. Rules marked 'reference' are copied verbatim
   from docs/redesign/reference.html (the source of truth); the rest adapt
   it to the real app. */

/* reference: tokens */
:root{
  --bg:#F6F6F8; --surface:#FFFFFF; --surface-2:#F1F1F4; --line:rgba(20,20,40,.08); --line-2:rgba(20,20,40,.14);
  --fg:#111114; --fg-2:#5B5B66; --fg-3:#8E8E99;
  --t-s:12px; --t-m:14px; --t-l:16px; --t-h2:20px; --t-h1:28px;
  --accent:#2F6BFF; --accent-soft:rgba(47,107,255,.10); --on-accent:#fff;
  --good:#1F9D55; --good-soft:rgba(31,157,85,.12); --warn:#B7791F;
  --shadow:0 1px 2px rgba(16,16,32,.04),0 8px 24px -8px rgba(16,16,32,.10);
  --shadow-lift:0 2px 4px rgba(16,16,32,.05),0 18px 40px -12px rgba(16,16,32,.18);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0B0D; --surface:#141417; --surface-2:#1B1B1F; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --fg:#F4F4F6; --fg-2:#A1A1AB; --fg-3:#6C6C76;
  --accent:#5B8CFF; --accent-soft:rgba(91,140,255,.14); --on-accent:#fff;
  --good:#3DD68C; --good-soft:rgba(61,214,140,.12); --warn:#F0B454;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lift:0 1px 0 rgba(255,255,255,.05) inset,0 20px 44px -14px rgba(0,0,0,.8);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0B0D; --surface:#141417; --surface-2:#1B1B1F; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --fg:#F4F4F6; --fg-2:#A1A1AB; --fg-3:#6C6C76;
  --accent:#5B8CFF; --accent-soft:rgba(91,140,255,.14); --on-accent:#fff;
  --good:#3DD68C; --good-soft:rgba(61,214,140,.12); --warn:#F0B454;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lift:0 1px 0 rgba(255,255,255,.05) inset,0 20px 44px -14px rgba(0,0,0,.8);
  color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
/* reference: buttons */
.btn{--h:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h);padding:0 14px;border-radius:10px;border:1px solid transparent;font:500 var(--t-m)/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),opacity .2s;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.icon-btn:focus-visible,.tab:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-primary:hover{box-shadow:0 6px 18px -6px var(--fg-3)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{filter:brightness(1.08);box-shadow:0 8px 20px -8px var(--accent)}
.btn-quiet{background:transparent;color:var(--fg-2);border-color:var(--line-2)}
.btn-quiet:hover{background:var(--surface-2);color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg-3);padding:0 8px}
.btn-ghost:hover{color:var(--fg);background:var(--surface-2)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-sm{--h:30px;font-size:var(--t-m);padding:0 11px;border-radius:9px}
.btn-lg{--h:44px;font-size:var(--t-l);padding:0 20px;border-radius:12px}
.btn svg,.icon-btn svg{width:15px;height:15px;flex:none}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;border:0;background:transparent;color:var(--fg-3);cursor:pointer;transition:background .15s,color .15s,transform .15s var(--ease)}
.icon-btn:hover{background:var(--surface-2);color:var(--fg)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.ok{color:var(--good)}
/* reference: app bar, tabs, meter, status */
.appbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;letter-spacing:-.03em;font-size:var(--t-l);display:flex;align-items:center;gap:8px}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.seg{position:relative;display:flex;padding:3px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:0;border-radius:8px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform .35s var(--ease),width .35s var(--ease)}
.tab{position:relative;z-index:1;border:0;background:none;padding:7px 13px;font:500 var(--t-m)/1 var(--sans);color:var(--fg-2);cursor:pointer;border-radius:8px;transition:color .2s}
.tab[aria-selected="true"]{color:var(--fg)}
.cursw{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line)}
.cursw a{padding:7px 13px;border-radius:8px;font:500 var(--t-m)/1 var(--sans);color:var(--fg-2);text-decoration:none}
.cursw a[aria-current="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cursw a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#9C6BFF);color:#fff;display:grid;place-items:center;font:600 var(--t-s) var(--sans)}
.view{max-width:680px;margin:0 auto;padding:36px 20px 56px;display:flex;flex-direction:column;gap:20px}
.view[hidden]{display:none}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vhead h2{font-size:var(--t-h1)}
.vhead p{margin-top:6px;font-size:var(--t-m)}
.meter{display:flex;align-items:center;gap:10px;font:500 13.5px var(--sans);color:var(--fg-2);font-variant-numeric:tabular-nums}
.bar{width:84px;height:4px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.bar b{display:block;height:100%;background:var(--accent);border-radius:9px;transition:width .6s var(--ease)}
.statusline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r);background:var(--surface-2);font-size:var(--t-m);color:var(--fg-2)}
.statusline strong{color:var(--fg);font-weight:500}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:8px;vertical-align:middle}
/* reference: card */
/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .35s var(--ease),border-color .3s;animation:rise .5s var(--ease) both}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}}
.card.done .draft{text-decoration:none}
.badge.mark{display:none;align-items:center;gap:5px;font:500 var(--t-s) var(--sans);color:var(--good)}
.card.done .badge.mark{display:inline-flex}
.card.opened:not(.done) .badge.mark{display:inline-flex;color:var(--mute)}
@keyframes rise{from{transform:translateY(8px);opacity:.001}to{transform:none;opacity:1}}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 var(--t-s) var(--sans);color:#fff}
.who .n{font-weight:600;font-size:var(--t-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .m{font-size:var(--t-s);color:var(--fg-3);font-variant-numeric:tabular-nums}
.chip{font:500 var(--t-s)/1 var(--sans);padding:4px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.chip.g{background:var(--good-soft);color:var(--good)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.quote{font-size:var(--t-m);color:var(--fg-2);padding-left:12px;border-left:2px solid var(--line-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.quote.open{-webkit-line-clamp:unset}
.draft{position:relative;background:var(--surface-2);border-radius:var(--r);padding:12px 44px 12px 14px;font-size:var(--t-l);color:var(--fg);line-height:1.5;border:1px solid transparent;transition:border-color .2s,background .2s}
.draft[contenteditable]:hover{border-color:var(--line-2)}
.draft:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.draft .icon-btn{position:absolute;top:6px;right:6px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.foot .l,.foot .r{display:flex;gap:6px;align-items:center}
.count{font:500 var(--t-s) var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}

/* reference: composer, empty, switch, skeleton, toast */
/* composer */
.composer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.composer textarea{width:100%;min-height:120px;resize:vertical;border:0;background:transparent;color:var(--fg);font:var(--t-l)/1.55 var(--sans);padding:16px 16px 8px;outline:none;display:block}
.composer textarea::placeholder{color:var(--fg-3)}
.composer .tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px;flex-wrap:wrap}
.hint{font-size:var(--t-s);color:var(--fg-3)}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:44px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty .glyph{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.empty p{text-align:center}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-m);color:var(--fg-2);cursor:pointer}
.switch input{appearance:none;width:32px;height:19px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(13px)}
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--line-2),var(--surface-2));background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:var(--t-m);font-weight:500;display:flex;gap:12px;align-items:center;transition:all .3s var(--ease);z-index:50;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{background:none;border:0;color:var(--accent);font:600 var(--t-m) var(--sans);cursor:pointer;padding:0}
/* reference: draft wrapper, tags, thread, menu, run screen */
/* draft wrapper keeps copy icon out of the editable text */
.dwrap{position:relative}
.dwrap .icon-btn{position:absolute;top:6px;right:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip.time{background:var(--surface-2);color:var(--fg-2);font-family:var(--mono);font-variant-numeric:tabular-nums}
.chip.next{background:var(--accent);color:var(--on-accent)}
.chip.fmt{background:transparent;color:var(--fg-3);border:1px solid var(--line-2)}
.sched-err{margin:8px 0 0;font:500 var(--t-s) var(--sans);color:var(--warn)}
.chip.warn{background:transparent;color:var(--warn);border:1px dashed currentColor}
.card.next{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.thread{display:flex;flex-direction:column;gap:10px;font-size:var(--t-m)}
.tmsg{display:grid;grid-template-columns:26px 1fr;gap:10px;position:relative}
.tmsg .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 var(--t-s) var(--sans);color:#fff}
.tmsg:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:30px;bottom:-8px;width:1px;background:var(--line-2)}
.tmsg .who2{font-size:var(--t-s);color:var(--fg-3)}.tmsg .who2 b{color:var(--fg);font-weight:600}
.tmsg p{font-size:var(--t-m);color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* avatar menu */
.menuwrap{position:relative}
.avatar{border:0;cursor:pointer;transition:box-shadow .2s}
.avatar:hover,.avatar[aria-expanded="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
.menu{position:absolute;right:0;top:40px;width:230px;padding:6px;border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);box-shadow:var(--shadow-lift);
  transform-origin:top right;transform:scale(.96) translateY(-4px);opacity:0;pointer-events:none;transition:all .18s var(--ease);z-index:20}
.menu.open{transform:none;opacity:1;pointer-events:auto}
.menu .me{padding:10px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .me b{display:block;font-size:var(--t-m)}.menu .me span{font-size:var(--t-s);color:var(--fg-3)}
.menu .grp{font:500 var(--t-s) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:8px 10px 4px}
.menu a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:var(--t-m)}
.menu a:hover{background:var(--surface-2)}
.menu a small{color:var(--fg-3);font-size:var(--t-s)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.menu a.out{color:var(--fg-2)}
/* run / waiting screen */
.run{display:flex;flex-direction:column;gap:16px}
.runhead h2{margin:0;font-weight:600}
.runhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.eta{font:500 var(--t-s) var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.segbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.segbar i{height:6px;border-radius:9px;background:var(--surface-2);overflow:hidden;position:relative}
.segbar i b{position:absolute;inset:0 auto 0 0;width:0;border-radius:9px;background:var(--accent);transition:width .35s var(--ease),background .4s}
.segbar i.on b{background:linear-gradient(90deg,var(--accent),#9C6BFF,var(--accent));background-size:200% 100%;animation:flow 1.6s linear infinite}
.segbar i.done b{width:100%!important}
.segbar.fin i b{background:var(--good)}
@keyframes flow{to{background-position:-200% 0}}
.stepline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:22px;font-size:var(--t-m);overflow:hidden}
.stepline .nm{display:flex;gap:10px;align-items:baseline;min-width:0}
.stepline .no{font:500 var(--t-s) var(--mono);color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
.stepline .tx{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.stepline .tx.swap{animation:stepin .4s var(--ease)}
@keyframes stepin{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
.stepline .ct{font:500 var(--t-s) var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.barwrap{position:relative;transition:padding .3s var(--ease)}
.barwrap.riding{padding-top:40px}
.rider{position:absolute;top:0;left:0;transform:translateX(-50%);font:500 var(--t-m) var(--mono);padding:6px 11px;border-radius:8px;background:var(--fg);color:var(--bg);white-space:nowrap;perspective:400px;transition:left .5s var(--ease),opacity .3s;pointer-events:none}
.rider::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:1px}
.verbline{min-height:24px;display:flex;align-items:center;gap:9px;font:500 var(--t-m) var(--mono)}
.rider span{display:inline-block;animation:flip .45s var(--ease)}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rider span{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.pond{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 60%),var(--surface);overflow:hidden;touch-action:none}
.pond canvas{display:block;width:100%;height:230px;cursor:grab}
.pond canvas:active{cursor:grabbing}
.pond .cap{position:absolute;left:14px;top:12px;right:90px;font-size:var(--t-m);font-weight:500;color:var(--fg-2);pointer-events:none}
.pond .score{position:absolute;right:14px;top:11px;font:600 var(--t-m) var(--mono);color:var(--fg-2);pointer-events:none}
.ready{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 14px;border-radius:var(--r);background:var(--accent-soft);color:var(--fg);font-size:var(--t-m);animation:rise .4s var(--ease)}
/* reference: mobile + reduced motion */
@media (max-width:640px){
  .appbar{padding:10px 12px}.appbar .avatar{display:none}
  .tab{padding:7px 10px;font-size:var(--t-s)}
  .view{padding:24px 14px 40px}
  .vhead h2{font-size:24px}
  .foot .btn-accent,.foot .btn-primary{flex:1}
  .foot .l{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ================= app additions (not in the reference mock) ================= */

/* old token names used by the secondary pages, mapped onto the new palette */
:root{--muted:var(--fg-3);--border:var(--line-2);--card:var(--surface);--ok:var(--good);--danger:#D64545}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#FF7A7A}}
:root[data-theme="dark"]{--danger:#FF7A7A}

body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:var(--t-l)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.container{max-width:680px;margin:0 auto;padding:28px 20px 56px}
h1,h2,h3{letter-spacing:-.02em}
/* the app bar replaces each page's old header row; secondary pages keep their title */
header.top{margin:0 0 16px}
header.top > nav{display:none}
.appbar{width:100%}
.appbar a{text-decoration:none;color:inherit}
.appbar .logo{color:var(--fg)}
.tab{text-decoration:none;display:inline-flex;align-items:center}
.icon-btn,.tab,.avatar,.menu button{padding:0}
.tab{padding:7px 13px}
.avatar{padding:0}
.menu form{margin:0}
.menu .out-btn{display:flex;width:100%;padding:8px 10px;border-radius:8px;background:none;border:0;color:var(--fg-2);font:var(--t-m) var(--sans);cursor:pointer;text-align:left}
.menu .out-btn:hover{background:var(--surface-2)}
@media (max-width:640px){.appbar .avatar{display:grid}.container{padding:24px 14px 40px}}

.vhead{margin-bottom:4px}
.vhead h2{font-size:var(--t-h1);font-weight:600;margin:0}
.vhead p{margin:6px 0 0;font-size:var(--t-m);color:var(--fg-2)}
@media (max-width:640px){.vhead h2{font-size:24px}}
.stack{display:flex;flex-direction:column;gap:14px}
.page{display:flex;flex-direction:column;gap:20px}
.statusline[title]{cursor:help}
.statusline .note{color:var(--fg-3)}
.banner{background:color-mix(in srgb,var(--warn) 12%,var(--surface));color:var(--fg);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r);padding:10px 14px;font-size:var(--t-m)}

/* card pieces the mock draws inline */
.card{margin:0}
.who{color:inherit;text-decoration:none}
.who:hover .n{text-decoration:underline;text-underline-offset:2px}
.card .draft{white-space:pre-wrap;word-wrap:break-word;margin:0}
.card .draft:empty::before{content:"\00a0"}
.foot .count{min-width:48px;text-align:right}
.count.over{color:var(--danger)}
.btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn svg.fill{fill:currentColor;stroke:none}
a.btn{text-decoration:none}
.card.next .chip.next{box-shadow:0 0 0 3px var(--accent-soft)}
.gate-warnings{font-size:var(--t-s);color:var(--warn)}
.card.leaving{opacity:0;transform:scale(.98);transition:opacity .25s var(--ease),transform .25s var(--ease)}

/* "Not my voice" popover */
.voice-pop{position:relative}
.voice-menu{position:absolute;right:0;bottom:38px;width:250px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lift);
  transform-origin:bottom right;transform:scale(.96) translateY(4px);opacity:0;pointer-events:none;transition:all .18s var(--ease);z-index:20;display:flex;flex-direction:column;gap:8px}
.voice-pop.open .voice-menu{transform:none;opacity:1;pointer-events:auto}
.voice-menu .vt{font-size:var(--t-m);font-weight:600;color:var(--fg)}
.voice-menu .vs{font-size:var(--t-s);color:var(--fg-3);line-height:1.4}
.voice-menu .opts{display:flex;flex-wrap:wrap;gap:6px}
.voice-menu .opt{font:500 var(--t-s) var(--sans);padding:6px 9px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.voice-menu .opt:hover{background:var(--surface-2);color:var(--fg)}
.voice-menu .opt[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.voice-menu input{margin:0;padding:7px 9px;font-size:var(--t-m);border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg)}
.voice-menu .go{align-self:flex-end}
@media (max-width:640px){.voice-menu{right:-4px;width:min(280px,calc(100vw - 40px))}}

/* toast undo spacing */
.toast button[hidden]{display:none}

/* run screen */
/* button loading: inline spinner + busy label (no sentences) */
.btn.loading{pointer-events:none}
.btn-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.8;flex:none;animation:spin .8s linear infinite}
.skel-stack{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.run .fail{color:var(--danger);font-size:var(--t-m)}

/* reply back */
.composer .preview{display:flex;align-items:center;gap:10px;padding:0 16px 8px}
.composer .preview[hidden]{display:none}
.composer .preview img{max-height:72px;max-width:120px;border-radius:8px;border:1px solid var(--line)}
.composer textarea{margin:0}
.form-error{font-size:var(--t-m);color:var(--danger)}
.form-error[hidden]{display:none}
.quote.thread-text{white-space:pre-wrap}

/* empty state */
.empty h3{margin:0}
.empty form{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}

.results summary{font-size:var(--t-s);color:var(--fg-3);cursor:pointer;list-style:none}
.results summary::-webkit-details-marker{display:none}
.results summary:hover{color:var(--fg)}
.results .results-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:flex-end}
.results label{display:flex;flex-direction:column;gap:2px;font-size:var(--t-s);color:var(--fg-3)}
.results input{width:84px;margin:0}
.results button{height:30px;padding:0 11px;border-radius:9px;background:var(--fg);color:var(--bg);border:0;font:500 var(--t-m) var(--sans)}
.results .hint{margin:6px 0 0}

/* our tab names are longer than the mock's: never wrap, tighten on phones */
.tab{white-space:nowrap}
.voice-menu{visibility:hidden;transition:all .18s var(--ease),visibility 0s .18s}
.voice-pop.open .voice-menu{visibility:visible;transition:all .18s var(--ease),visibility 0s}
.menu{visibility:hidden;transition:all .18s var(--ease),visibility 0s .18s}
.menu.open{visibility:visible;transition:all .18s var(--ease),visibility 0s}
@media (max-width:520px){
  .appbar{gap:8px;padding:10px 10px}
  .tab{padding:7px 9px;font-size:var(--t-s)}
  .avatar{width:28px;height:28px;font-size:var(--t-s)}
}
@media (max-width:380px){
  .appbar{gap:6px;padding:10px 8px}
  .logo{font-size:var(--t-m)}
  .tab{padding:7px 7px}
}
.badge.mark{border:0;padding:0;margin:0;border-radius:0;font-size:var(--t-s)}
/* anchor the "Not my voice" popover to the card so it never runs off-screen */
.card{position:relative}
.voice-pop{position:static}
.voice-menu{right:14px;bottom:62px}
@media (max-width:640px){.voice-menu{left:12px;right:12px;width:auto;bottom:60px}}
.toast{white-space:nowrap;max-width:calc(100vw - 32px)}.toast span{overflow:hidden;text-overflow:ellipsis}
/* "both" would pin opacity:1 after the rise and cancel the done fade */
.card{animation-fill-mode:backwards}

/* ================= reference: logo, footers, public site, check, legal, login ================= */
.logo{gap:0!important;letter-spacing:-.035em}
.ish{color:var(--accent)}
/* ---------- app footer ---------- */
.appfoot{max-width:680px;margin:0 auto;padding:18px 20px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;font-size:var(--t-s);color:var(--fg-3)}
.appfoot nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.appfoot a,.pfoot a{color:var(--fg-3);text-decoration:none;transition:color .15s}
.appfoot a:hover,.pfoot a:hover{color:var(--fg)}
/* ---------- public site ---------- */
.pbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.pnav{display:flex;align-items:center;gap:4px}
.pnav a{color:var(--fg-2);text-decoration:none;font-size:var(--t-m);font-weight:500;padding:7px 10px;border-radius:8px;transition:background .15s,color .15s}
.pnav a:hover,.pnav a.on{color:var(--fg);background:var(--surface-2)}
.pview{max-width:760px;margin:0 auto;padding:56px 20px 64px;display:flex;flex-direction:column;gap:56px}
.pview[hidden]{display:none}
.phero{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.phero h1,.phero h2{font-size:clamp(34px,6vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:600}
.phero h2 span{color:var(--fg-3)}
.phero p{font-size:var(--t-l)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.proof{display:flex;align-items:center;gap:10px;font-size:var(--t-m);color:var(--fg-3)}
.proof b{color:var(--fg);font-weight:600}
.demo{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:16px;display:flex;flex-direction:column;gap:12px}
.demo .draft{padding-right:14px}
.pscore{display:flex;gap:8px;align-items:center;font:500 var(--t-s) var(--mono);color:var(--good)}
.psec{display:flex;flex-direction:column;gap:18px}
.psec>h3{font-size:var(--t-h2);letter-spacing:-.02em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:s}
.flow li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover){.flow li:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}}
.flow li::before{content:counter(s);font:500 var(--t-s) var(--mono);color:var(--accent);width:22px;height:22px;border-radius:7px;background:var(--accent-soft);display:grid;place-items:center}
.flow li b{font-size:var(--t-m)}.flow li p{font-size:var(--t-m)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs .panel h3{display:flex;gap:8px;align-items:center}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:stretch}   /* two plans fill the row; a third would share it */
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.hi{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-lift)}
.plan .price{font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.plan .price small{font-size:var(--t-m);color:var(--fg-3);font-weight:500}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-m);color:var(--fg-2);flex:1}
.plan li{display:flex;gap:8px}.plan li::before{content:"✓";color:var(--good);font-weight:700}
.plan .flag{position:absolute;top:-11px;left:20px;font:600 var(--t-s) var(--sans);padding:4px 8px;border-radius:6px;background:var(--accent);color:var(--on-accent)}
.spots{font:500 var(--t-s) var(--mono);color:var(--fg-3)}.spots .bar{width:100%;margin-top:6px}
.billing{display:inline-flex}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:500;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--fg-3);font-size:var(--t-h2);line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px;font-size:var(--t-m)}
.join{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.field{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.input{flex:1 1 220px;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:var(--t-l) var(--sans);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pfoot{max-width:760px;margin:0 auto;padding:22px 20px 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--t-s);color:var(--fg-3)}
.pfoot .cols{display:flex;gap:40px;flex-wrap:wrap}
.pfoot .cols div{display:flex;flex-direction:column;gap:6px}
.pfoot .cols b{font:500 var(--t-s) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
/* check page */
.ring{--p:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--c,var(--good)) calc(var(--p)*1%),var(--surface-2) 0);display:grid;place-items:center;transition:--p 1s}
.ring div{width:96px;height:96px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center}
.ring b{font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}.ring span{font-size:var(--t-s);color:var(--fg-3)}
.result{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.flags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-m)}
.flags li{display:flex;gap:10px;align-items:baseline;color:var(--fg-2)}
.flags li i{font-style:normal;font:600 var(--t-s) var(--mono);padding:2px 6px;border-radius:5px;background:var(--surface-2);color:var(--warn)}
.flags li.okf i{color:var(--good)}
mark{background:color-mix(in srgb,var(--warn) 25%,transparent);color:inherit;border-radius:3px;padding:0 2px}
/* legal */
.legal{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:start}
.toc{position:sticky;top:70px;display:flex;flex-direction:column;gap:2px;font-size:var(--t-m)}
.toc a{color:var(--fg-3);text-decoration:none;padding:5px 10px;border-radius:7px;border-left:2px solid transparent}
.toc a:hover{color:var(--fg);background:var(--surface-2)}
.toc a.on{color:var(--fg);border-left-color:var(--accent);border-radius:0 7px 7px 0}
.prose{display:flex;flex-direction:column;gap:14px;min-width:0}
.prose h3{font-size:var(--t-l);margin-top:14px}
.prose p,.prose li{font-size:var(--t-l);color:var(--fg-2);line-height:1.65}
.prose ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}
.meta{font:500 var(--t-s) var(--mono);color:var(--fg-3)}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.copyline{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border-radius:10px;padding:6px 6px 6px 12px;font:500 var(--t-m) var(--mono);color:var(--fg)}
@media (max-width:720px){
  .two,.vs{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.plan.hi{order:-1}
  .legal{grid-template-columns:1fr;gap:16px}.toc{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px}.toc a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;border-radius:7px 7px 0 0}.toc a.on{border-bottom-color:var(--accent)}
  .pnav a.hide-m{display:none}.pview{padding:36px 16px 48px;gap:44px}
  .result{grid-template-columns:1fr;justify-items:start}
}

/* login */
.login{min-height:460px;display:grid;place-items:center;padding:56px 16px;background:radial-gradient(60% 50% at 50% 0%,var(--accent-soft),transparent 70%)}
.lcard{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:28px;display:flex;flex-direction:column;gap:16px}
.lcard h3{font-size:var(--t-h2);letter-spacing:-.02em}
.lcard label{font-size:var(--t-m);font-weight:500;color:var(--fg-2)}
.lcard .input{flex:none;width:100%}
.lcard .btn{width:100%}
.field .btn-lg,.lcard .btn-lg{--h:48px}
.lcard .fine{font-size:var(--t-s);color:var(--fg-3);text-align:center}
.lcard .fine a{color:var(--fg-2)}
.err{font-size:var(--t-s);color:#E5484D}
.mailglyph{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;animation:rise .5s var(--ease)}
.lcard .mono{font:500 var(--t-m) var(--mono);color:var(--fg);word-break:break-all}

/* ---- public-site additions (not in the mock) ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel p{font-size:var(--t-m);margin:0;color:var(--fg-2)}
.panel h3{margin:0}
.eyebrow{font:500 var(--t-s)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow .ish{letter-spacing:.12em}
.pbar .logo{color:var(--fg);text-decoration:none;font-weight:700;font-size:var(--t-l)}
.pbar .btn-primary{color:var(--bg)}
.pview p{margin:0;max-width:65ch;color:var(--fg-2)}
.pview h2,.pview h3{margin:0;letter-spacing:-.02em}
.phero p{max-width:60ch}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.join .note{font-size:var(--t-m);color:var(--good)}
.plan .btn{margin-top:auto}
.prose > p:first-child{margin-top:0}
.prose h2{font-size:var(--t-l);margin:14px 0 0;letter-spacing:-.01em}
.prose code{font:var(--t-m) var(--mono)}
.pview a:not(.btn):not(.toc a){color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.pview a:not(.btn):hover{text-decoration-color:var(--accent)}
.toc a{color:var(--fg-3)!important;text-decoration:none!important}
.toc a.on,.toc a:hover{color:var(--fg)!important}
.draft-note{font:500 var(--t-s) var(--mono);color:var(--warn)}
.ring{transition:none}
.flags li i.drop{color:#E5484D}
.lcard .err[hidden]{display:none}
.lcard p{margin:0;color:var(--fg-2)}
.lcard form{display:flex;flex-direction:column;gap:16px;margin:0}
.demo .who .m{white-space:normal}
/* numbered step lists inside policy/integration prose */
.prose section{display:flex;flex-direction:column;gap:14px}
.prose .step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prose .step-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.prose .step-num{font:500 var(--t-s) var(--mono);color:var(--accent);width:22px;height:22px;border-radius:7px;background:var(--accent-soft);display:grid;place-items:center}
.prose .step-list h3{margin:0 0 4px;font-size:var(--t-l)}
.prose .step-list p{font-size:var(--t-m);margin:0}
.prose .hint{font-size:var(--t-m);color:var(--fg-3)}
/* public header + hero on small phones */
.pnav a{white-space:nowrap}
.demo{min-width:0;max-width:100%}
.demo .row{flex-wrap:wrap}
.demo .who{min-width:0;flex:1}
@media (max-width:420px){
  .pbar{padding:10px 12px;gap:8px}
  .pnav{gap:2px}
  .pnav a{padding:7px 8px;font-size:var(--t-m)}
  .pbar .logo{font-size:var(--t-l)}
}

/* light / dark switch (sets data-theme on <html>; tokens above already
   handle :root[data-theme="dark"] and :not([data-theme="light"])) */
.theme-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.theme-btn:hover{background:var(--surface-2);color:var(--fg)}
.theme-btn svg{width:15px;height:15px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}
.appbar .right{display:flex;align-items:center;gap:8px}
@media (max-width:380px){.appbar .theme-btn{width:26px;height:26px}}
@media (max-width:380px){.pnav a.hide-s{display:none}}
@media (max-width:440px){.appbar .theme-btn{display:none}}
.menu .theme-menu{color:var(--fg)}
@media (max-width:360px){.appbar .logo{display:none}.appbar{justify-content:space-between}}
.phero .meta{max-width:100%;overflow-wrap:anywhere;line-height:1.5}
/* the rounded composer frame is the only focus ring: the textarea inside
   draws no border, ring or square corners of its own */
.composer textarea,.composer textarea:focus,.composer textarea:focus-visible{border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;border-radius:var(--r-lg) var(--r-lg) 0 0}
.composer{overflow:hidden}
.composer .tools{border-top:0}
/* every other text field on the site: rounded, soft focus ring, no square outline */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],textarea,select{
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font:var(--t-l) var(--sans);transition:border-color .2s,box-shadow .2s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,input[type=url]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.input{border-radius:12px}
/* done cards: fade less so they stay readable (was .45) */
/* Only a card we KNOW is out (locked: X shows it, found on X, or scheduled) fades, and only its content: Adjust, Skip this
   and Not me must never look switched off. A tapped or copied card (done, not locked) stays as it was. */
.card.locked > *:not(.foot){opacity:.62;transition:opacity .35s var(--ease)}
.card.locked:hover > *:not(.foot){opacity:.9}
.card.locked .foot .btn-accent,.card.locked .foot .btn-primary{opacity:.6}
/* Reply on X paused by the pacing guard: muted button with a draining ring */
.act-reply.paced{background:var(--surface-2);color:var(--fg-2);cursor:not-allowed;box-shadow:none;filter:none}
.pace-ring{width:14px;height:14px;border-radius:50%;flex:none;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line-2) 0);
  -webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px)}
.toast{white-space:normal;width:max-content;max-width:min(420px,calc(100vw - 32px));text-align:left;line-height:1.4}.toast span{overflow:visible}

/* logo lockup + favicon (HANDOFF.md section 13, final): bubble mark, 7px gap,
   "Human" in Geist 700, "ish" in Instrument Serif italic, accent blue */
.logo{display:inline-flex;align-items:center;gap:7px!important;letter-spacing:-.035em;font-weight:700;color:var(--fg)}
.logo .mk{width:24px;height:24px;color:var(--fg);flex:none}
.lcard .logo .mk{width:21px;height:21px}
.logo .ish,.eyebrow .ish{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:0;margin-left:.03em;color:var(--accent)}
.eyebrow .ish{text-transform:none}
@media (max-width:360px){.appbar .logo{display:inline-flex}.appbar .logo > span{display:none}}

/* one-tap tweaks under a draft */
.tweaks{display:flex;gap:6px;flex-wrap:wrap}
.tweak{font:500 var(--t-s)/1 var(--sans);padding:6px 10px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--fg-3);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tweak:hover:not(:disabled){background:var(--surface-2);color:var(--fg)}
.tweak:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.tweak:disabled{opacity:.45;cursor:not-allowed}
.tweak.busy{opacity:.6}

/* Your voice card on /voice */
.vcard{gap:12px}
.vc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vc-head h2{margin:0}
.vc-sum{margin:0;font-size:var(--t-l);color:var(--fg)}
.vc-bars{display:flex;flex-direction:column;gap:12px}
.vc-ends{display:flex;justify-content:space-between;font:500 var(--t-s) var(--sans);color:var(--fg-3);margin-bottom:5px}
.vc-row .bar{width:100%;height:6px}
.vc-lab{font:500 var(--t-s) var(--sans);color:var(--fg-3);margin-bottom:6px}
.vc-line{margin:0 0 6px;padding-left:12px;border-left:2px solid var(--line-2);font-size:var(--t-m);color:var(--fg-2);overflow-wrap:anywhere}
.vc-foot{margin:0}
.vc-track{position:relative}
.vc-mark{position:absolute;top:-3px;width:2px;height:12px;margin-left:-1px;background:var(--fg);border-radius:2px;opacity:.75}
.vc-adj{display:flex;flex-direction:column;gap:4px}
.vc-adjline,.vc-adjnote{margin:0}
.vc-tune summary{cursor:pointer;font:500 var(--t-m) var(--sans);color:var(--accent);padding:4px 0}
.vc-tune[open] summary{margin-bottom:6px}
.vc-slide{margin:14px 0}
.vc-slide label{display:block;font:500 var(--t-m) var(--sans);color:var(--fg);margin-bottom:6px}
.vc-slide input[type=range]{width:100%;accent-color:var(--accent);margin:0 0 4px}
.vc-tune-actions{display:flex;gap:10px;flex-wrap:wrap}

/* posting style picker (onboarding + settings) */
.stylepick{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.stylepick legend{font:600 var(--t-l) var(--sans);color:var(--fg);padding:0;margin-bottom:2px}
.stylepick .hint{margin:0}
.stylepick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stylecard{position:relative;display:block;cursor:pointer;min-width:0}
.stylecard input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.stylecard-body{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.stylecard:hover .stylecard-body{background:var(--surface-2)}
.stylecard input:checked + .stylecard-body{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.stylecard input:focus-visible + .stylecard-body{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.stylecard-title{font:600 var(--t-m) var(--sans);color:var(--fg)}
.stylecard-fit{font:400 var(--t-s)/1.4 var(--sans);color:var(--fg-2);overflow-wrap:anywhere}
@media (max-width:420px){.stylepick-grid{grid-template-columns:minmax(0,1fr)}}
/* phones: mark only + theme toggle lives in the avatar menu, so the avatar always fits */
@media (max-width:480px){
  .appbar .logo>span{display:none}
  .appbar .theme-btn{display:none}
  .appbar .seg{min-width:0;flex:0 1 auto}
}
/* one-time "Replying from your phone" sheet */
.sheet-back{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s var(--ease)}
.sheet-back.open{opacity:1}
.sheet{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lift);transform:translateY(24px);transition:transform .25s var(--ease)}
.sheet-back.open .sheet{transform:none}
.sheet h3{font-size:var(--t-h2);letter-spacing:-.02em;margin:0}
.sheet-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sheet-steps li{display:flex;gap:12px;align-items:center;font-size:var(--t-l);color:var(--fg)}
.sheet-steps b{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:600 var(--t-s) var(--mono)}
.sheet-steps em{font-style:normal;font-weight:600}
.sheet-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sheet-actions .btn{width:100%}
@media (min-width:640px){.sheet-back{align-items:center}.sheet{border-radius:var(--r-lg)}}
.lbl-mob{display:none}.is-mobile .lbl-mob{display:inline}.is-mobile .lbl-desk{display:none}

/* --- scheduling: due chip, Schedule row + nudge (posts page) --- */
.chip.time.due{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn)}
.statusline .chip.due{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn);margin-left:2px}
.sched-row{display:flex;justify-content:flex-end}
.sched-nudge{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--t-m);color:var(--fg-3);padding:0 4px}
.sched-nudge[hidden]{display:none}
.sched-nudge a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.sched-nudge .sched-x{background:none;border:0;color:var(--fg-3);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
/* the Buffer nudge shows on phones too (same things on every device) */
/* "Humanish" inside headings = the logo's wordmark (Human + italic serif ish) */
.wm{white-space:nowrap}
h1 .ish,h2 .ish,h3 .ish{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:0;margin-left:.03em;color:var(--accent)}
.phero h2 .wm{color:inherit}
.phero h2 .wm .ish,.psec h3 .wm .ish,.prose h3 .wm .ish{color:var(--accent)}
.bfmark{width:14px;height:14px;flex:none;margin-right:6px;vertical-align:-2px}
.sched-card .copy-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.sched-card .copy-row input{flex:1 1 220px;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.sched-card .howto{margin:8px 0 0;padding-left:18px;font-size:var(--t-m)}
.sched-card .pick{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.composer .tools .hint{margin:0;line-height:1}
/* page header: the action button stays on the right; long subtitles wrap inside their column */
.vhead{flex-wrap:nowrap;align-items:flex-end}
.vhead>div:first-child{min-width:0;flex:1 1 auto}
.vhead>form,.vhead>.btn,.vhead>button,.vhead>.meter{flex:none}

/* admin (founder only) */
.adm{max-width:980px;margin:0 auto;padding:28px 16px 56px;width:100%}
.adm-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adm-totals .panel{padding:12px 14px;gap:4px}
.adm-n{font:600 var(--t-h2)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fg)}
.adm-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adm-bar form{display:flex;gap:8px;flex:1 1 260px;flex-wrap:wrap}
.adm-bar input[type=text]{flex:1 1 180px;min-width:0;height:36px;padding:0 12px;font-size:var(--t-m)}
.adm-filters{display:flex;gap:6px;flex-wrap:wrap}
.adm-filters a{text-decoration:none;font:500 var(--t-s)/1 var(--sans);padding:8px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);min-height:32px;display:inline-flex;align-items:center}
.adm-filters a:hover{background:var(--surface-2);color:var(--fg)}
.adm-filters a[aria-current="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.adm-list{display:flex;flex-direction:column}
.adm-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.adm-row:first-child{border-top:0}
.adm-main{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.adm-main b{font-weight:500;font-size:var(--t-m);overflow-wrap:anywhere}
.adm-tags{display:flex;gap:6px;flex-wrap:wrap}
.adm-act{display:flex;gap:8px;align-items:center;flex:none}
.adm-act form{margin:0}
.adm-check{display:flex;gap:10px;align-items:flex-start;min-width:0;flex:1 1 auto}
.adm-check input{margin:3px 0 0;width:18px;height:18px;flex:none}
.adm-check .adm-gap{width:18px;flex:none}
.adm-bulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.adm-flash{padding:10px 14px;border-radius:var(--r);background:var(--good-soft);color:var(--good);font-size:var(--t-m)}
.adm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adm-links{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--t-m)}
.adm-who{color:var(--fg);font-weight:500}
.adm .invite-one{display:flex;gap:8px;flex-wrap:wrap}
.adm .invite-one input{flex:1 1 200px;min-width:0}
@media (max-width:640px){
  .adm-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-two{grid-template-columns:1fr}
  .adm-row{flex-direction:column}
  .adm-act{width:100%}
}

/* Admin: minimal header and passphrase forms */
.adm-head{display:flex;align-items:center;gap:14px;min-width:0}
.adm-word{font-weight:600;font-size:var(--t-m);color:var(--fg);padding-left:14px;border-left:1px solid var(--line)}
.appbar .adm-back{font-size:var(--t-m);color:var(--fg-3);text-decoration:none}
.appbar .adm-back:hover{color:var(--fg)}
.adm-gate{max-width:460px;margin:24px auto 0;display:flex;flex-direction:column;gap:16px}
.adm-gate-form{display:flex;flex-direction:column;gap:8px}
.adm-gate-form .btn{margin-top:8px}
.adm-remember{display:flex;gap:10px;align-items:center;font-size:var(--t-m);margin-top:6px}
.adm-remember input{width:18px;height:18px;margin:0}
.adm-lock{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm-lock form{margin:0}
.adm-pp .adm-gate-form{max-width:420px}
.adm-ok{color:var(--good);font-size:var(--t-s)}
@media (max-width:420px){.adm-head{gap:10px}.adm-word{padding-left:10px}}
.adm-gate-form .input{flex:none;width:100%}
.adm-gate-form label{font-size:var(--t-m);font-weight:500;color:var(--fg-2)}
.adm-lockform{margin:0}

.chip.bad{background:color-mix(in srgb,#c0392b 14%,var(--surface));color:#c0392b;font-weight:600}
.chip.warn-amber{background:color-mix(in srgb,#d68910 16%,var(--surface));color:#9a6200;font-weight:600}
.renew{margin:10px 0}
.renew summary{display:inline-block;cursor:pointer;list-style:none}
.renew summary::-webkit-details-marker{display:none}
.renew form{margin-top:10px}
.key-banner a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* blog (from docs/redesign/humanish-redesign.html) */
.kview{max-width:760px;margin:0 auto;padding:44px 20px 56px;display:flex;flex-direction:column;gap:28px}
.kview.narrow{max-width:620px}
.khead{display:flex;flex-direction:column;gap:10px}
.khead h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.03em;line-height:1.08;margin:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters .fbtn{border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:500 var(--t-s) var(--sans);padding:6px 11px;border-radius:99px;cursor:pointer;transition:all .15s}
.filters .fbtn.on,.filters .fbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.feat{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative}
.feat:hover,.post:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.feat h2,.post h2{margin:0}.feat h2 a,.post h2 a{color:var(--fg);text-decoration:none}
.feat h2 a::after,.post h2 a::after{content:"";position:absolute;inset:0}
.cover{aspect-ratio:16/10;border-radius:14px;max-width:100%;position:relative;overflow:hidden;display:grid;place-items:center;padding:18px;text-align:left}
.cover.c1{background:linear-gradient(135deg,var(--accent),#9C6BFF)}
.cover.c2{background:var(--fg)}
.cover.c3{background:var(--surface-2)}
.cover .q{font:italic 400 clamp(18px,2.6vw,26px)/1.2 "Instrument Serif",Georgia,serif;color:#fff;max-width:90%;position:relative;z-index:1}
.cover.c2 .q{color:var(--bg)}.cover.c3 .q{color:var(--fg)}
.cover.has-photo{background:var(--fg);isolation:isolate}
.cover .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cover.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,16,.10) 20%,rgba(8,8,16,.72))}
.cover.has-photo .q,.cover.c2.has-photo .q,.cover.c3.has-photo .q{color:#fff;align-self:end;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.cover.has-photo .glyph{color:#fff;opacity:.34}
.post .cover.has-photo{place-items:end start}
.credit{margin:-8px 0 0}.credit a{color:var(--fg-3)}
.cover .glyph{position:absolute;right:-10px;bottom:-18px;width:120px;height:120px;opacity:.15;color:#fff}
.cover.c3 .glyph{color:var(--fg)}.cover.c2 .glyph{color:var(--bg)}
.pmeta{display:flex;gap:8px;align-items:center;font-size:var(--t-s);color:var(--fg-3);flex-wrap:wrap}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post h2{font-size:var(--t-l);line-height:1.3}.post p{font-size:var(--t-m);margin:0}
.post .cover{aspect-ratio:16/9;padding:14px;place-items:start}.post .cover .q{font-size:var(--t-h2)}
.post .cover .glyph{width:64px;height:64px;right:-8px;bottom:-12px;opacity:.12}
.readbar{position:sticky;top:0;height:3px;background:var(--surface-2);z-index:3}.readbar b{display:block;height:100%;width:0;background:var(--accent);transition:width .1s}
.art{display:flex;flex-direction:column;gap:18px}
.art h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance}
.byline{display:flex;align-items:center;gap:10px;font-size:var(--t-m)}
.byline b{display:block;font-weight:600}.byline span{color:var(--fg-3);font-size:var(--t-s)}
.prose-art{display:flex;flex-direction:column;gap:14px;min-width:0}
.prose-art p,.prose-art h2,.prose-art h3,.prose-art ul,.prose-art ol{margin:0}
.prose-art p,.prose-art li{font-size:var(--t-l);line-height:1.7;color:var(--fg)}
.prose-art h2{font-size:var(--t-h2);margin:18px 0 0;letter-spacing:-.02em}
.prose-art h3{font-size:var(--t-l);margin-top:10px}
.prose-art ul,.prose-art ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose-art a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.prose-art figure{margin:6px 0}.prose-art img{max-width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.prose-art .tbl{overflow-x:auto}.prose-art table{border-collapse:collapse;width:100%;font-size:var(--t-m)}
.prose-art th,.prose-art td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}.prose-art th{font-weight:600}
.pull{font:italic 400 var(--t-h1)/1.3 "Instrument Serif",Georgia,serif;color:var(--fg);border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin:8px 0}
.share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.ctabox{background:var(--fg);color:var(--bg);border-radius:var(--r-lg);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ctabox h2{font-size:var(--t-h2);letter-spacing:-.02em;margin:0}.ctabox p{color:color-mix(in srgb,var(--bg) 70%,transparent);font-size:var(--t-m);margin:4px 0 0}
.ctabox .btn-accent{flex:none}
.crumbs{color:var(--fg-3);font-size:var(--t-s)}.crumbs a{color:var(--fg-3)}
.related h2{font-size:var(--t-h2);letter-spacing:-.02em}.related ul{padding-left:18px}.related a{color:var(--accent)}
@media (max-width:640px){.feat{grid-template-columns:1fr}}

/* quick tweaks: the same four buttons on every screen; on phones they sit in an even 2x2 grid with bigger tap targets */
@media (max-width:520px){.tweaks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tweak{padding:10px 12px;text-align:center;min-height:40px}}
/* appbar avatar: the X profile picture (32px, round) sits over the initials, which stay as the fallback */
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar.has-img{width:32px;height:32px}
@media (max-width:520px){.avatar.has-img{width:28px;height:28px}}

/* ===================== uniform UI layer (UI audit 2026-10-07) =====================
   One button system, one link style, one set of form controls, everywhere.
   Primary = accent fill; secondary = quiet outline; ghost = text; danger = red outline. */

/* ---- buttons ---- */
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 8px 20px -8px var(--accent)}
.pbar .btn-primary{color:var(--on-accent)}
.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn-quiet{background:var(--surface)}
.btn-quiet:hover{border-color:color-mix(in srgb,var(--fg) 22%,transparent)}
summary.btn{list-style:none;display:inline-flex}
summary.btn::-webkit-details-marker{display:none}
/* legacy .btn-x and bare <button> pick up the same metrics */
.btn-x,button:not([class]),input[type=submit]:not([class]),button.secondary,button.danger{
  --h:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h);padding:0 14px;border-radius:10px;
  border:1px solid transparent;background:var(--accent);color:var(--on-accent);font:500 var(--t-m)/1 var(--sans);cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.btn-x:hover,button:not([class]):hover,input[type=submit]:not([class]):hover{opacity:1;filter:brightness(1.08)}
.btn-x:active,button:not([class]):active{transform:scale(.97)}
.btn-x.secondary,button.secondary{background:var(--surface);color:var(--fg-2);border-color:var(--line-2)}
.btn-x.secondary:hover,button.secondary:hover{background:var(--surface-2);color:var(--fg);filter:none;border-color:color-mix(in srgb,var(--fg) 22%,transparent)}
.btn-x.danger,button.danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-x.danger:hover,button.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);filter:none}
.btn-x:focus-visible,button:not([class]):focus-visible,button.secondary:focus-visible,button.danger:focus-visible,
.theme-btn:focus-visible,.avatar:focus-visible,.chip-btn:focus-visible,.link-btn:focus-visible,summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.toast button:not([class]){height:auto;padding:0;background:none;border:0;color:var(--accent);font:600 var(--t-m) var(--sans)}
.results button{background:var(--accent);color:var(--on-accent)}
.chip-btn{border-radius:8px;border-color:var(--line-2);color:var(--fg-2);font:500 var(--t-s) var(--sans);padding:6px 9px}
.chip-btn:hover{background:var(--surface-2);color:var(--fg)}
.chip-btn.selected{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.link-btn{color:var(--accent);text-decoration:none;font:500 var(--t-s) var(--sans)}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
.adm-filters a[aria-current="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* ---- links: accent in both themes, underline on hover, never browser blue/purple ---- */
:where(a){color:var(--accent);text-decoration:none}
:where(a:hover){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:where(a:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.hint a,.sched-nudge a,.key-banner a,.plan-strip a,.post-body a,.post-card a,.related a{color:var(--accent);text-decoration:none}
.hint a:hover,.sched-nudge a:hover,.key-banner a:hover,.plan-strip a:hover,.related a:hover{text-decoration:underline;text-underline-offset:3px}
.post-body a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--accent)}

/* ---- form controls ---- */
input[type=date],input[type=time],input[type=search],input[type=tel],input[type=datetime-local]{
  padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font:var(--t-m) var(--sans);transition:border-color .2s,box-shadow .2s}
input[type=date]:focus,input[type=time]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=datetime-local]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select{padding:9px 12px;font-size:var(--t-m)}
textarea{padding:10px 12px;font-size:var(--t-m);line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
::placeholder{color:var(--fg-3);opacity:1}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;cursor:pointer}
.switch input[type=checkbox]{width:32px;height:19px;margin:0;vertical-align:middle;flex:none}
.switch input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
/* native widgets (date picker, scrollbars) follow the chosen theme */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
.card form > label,.card form > p > label:not(.pref),.field-label{display:block;font:500 var(--t-m) var(--sans);color:var(--fg);margin:4px 0 6px}
code{font:var(--t-s) var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:5px}

/* email preference rows: text left, switch right (reference .switch) */
.prefs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 12px}
.pref{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.pref + .pref{border-top:1px solid var(--line)}
.pref:hover{background:var(--surface-2)}
.pref-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pref-text b{font:500 var(--t-m) var(--sans);color:var(--fg)}
.pref-text .hint{margin:0;line-height:1.45}

/* ---- headings + cards on the secondary pages ---- */
header.top{margin:0 0 6px}
header.top h1,.container > h1{font-size:var(--t-h1);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0}
@media (max-width:640px){header.top h1,.container > h1{font-size:24px}}
.container > h2{font-size:var(--t-l);font-weight:600;margin:24px 0 10px}
.container > .hint,.container > p.hint{margin:0 0 14px;font-size:var(--t-m);color:var(--fg-2)}
.container > .card:not(:last-child),.container > section.card:not(:last-child),.container > .panel:not(:last-child){margin-bottom:14px}
.card > h2,.card > h3,.card > header h2{margin:0;font-size:var(--t-l);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.vc-head h2{font-size:var(--t-l);font-weight:600}
header.top + .hint,header.top + p.hint{margin-top:8px}
.card > p,.card > .hint{margin:0}
.card form{margin:0}
.card form .hint{margin:8px 0 0}
.card .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.card .actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.badge{display:inline-flex;align-items:center;font:500 var(--t-s)/1 var(--sans);padding:4px 7px;margin:0;border-radius:6px;border:0;background:var(--surface-2);color:var(--fg-2)}
.badge.state{background:var(--accent-soft);color:var(--accent)}
.badge.mark{background:none;padding:0}
.banner.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--fg)}
.empty-state{border-radius:var(--r);border-color:var(--line-2);color:var(--fg-2);font-size:var(--t-m)}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;font-size:var(--t-m)}
th{color:var(--fg-3);font:500 var(--t-s) var(--sans)}
/* wide data tables scroll inside their own box on phones instead of widening the page */
.container table{display:block;max-width:100%;overflow-x:auto}
.inline-form{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.inline-form select,.inline-form input[type=text]{margin:0}

/* settings: Buffer + calendar blocks */
.sched-card form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.sched-card form > label{flex-basis:100%;margin:6px 0 0}
.sched-card form > input[type=password],.sched-card form > input[type=text],.sched-card form > select{flex:1 1 260px;margin:0;width:auto}
.sched-card form > .hint{flex-basis:100%}
.sched-card .copy-row form{display:inline-flex}
.sched-card .renew{margin:0}
.sched-card .renew[open] summary{margin-bottom:10px}
.sched-card .renew form{margin-top:0}
.set-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.set-row .hint{margin:0}

/* ---- avatar + theme button: a matching 32px round pair ---- */
.appbar .right{gap:10px}
.theme-btn,.avatar{width:32px;height:32px;border-radius:50%;flex:none}
.theme-btn{border:0;background:var(--surface);color:var(--fg-2);box-shadow:0 0 0 1px var(--line-2)}
.theme-btn:hover{background:var(--surface-2);color:var(--fg);box-shadow:0 0 0 1px var(--line-2),0 0 0 4px var(--accent-soft)}
.avatar{background:var(--accent-soft);color:var(--accent);font:600 var(--t-s)/1 var(--sans);letter-spacing:.02em;box-shadow:0 0 0 1px var(--line-2)}
.avatar.has-img{background:var(--surface-2)}
.avatar:hover,.avatar[aria-expanded="true"]{box-shadow:0 0 0 1px var(--line-2),0 0 0 4px var(--accent-soft)}
@media (max-width:520px){.avatar,.avatar.has-img,.theme-btn,.appbar .theme-btn{width:30px;height:30px}}
/* menu header: X display name + @handle */
.menu .me{display:flex;align-items:center;gap:10px;padding:10px}
.menu .me-pic{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;position:relative;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font:600 var(--t-s)/1 var(--sans);box-shadow:0 0 0 1px var(--line-2)}
.menu .me-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menu .me-id{display:flex;flex-direction:column;min-width:0;gap:1px}
.menu .me b{font:600 var(--t-m)/1.3 var(--sans);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .me .h{font-size:var(--t-s);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .theme-menu{display:none}
@media (max-width:480px){.menu .theme-menu{display:flex}}

/* ---- billing ---- */
.bill .plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.bill .plan{gap:12px;padding:18px}
.bill .plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bill .plan-top b{font-size:var(--t-l)}
.bill .plan .price{font-size:30px}
.bill .plan-note{font-size:var(--t-s);color:var(--fg-3);margin:0}
.bill .plan-btns{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.bill .plan-btns .btn{width:100%;margin:0}
.bill .plan.soon ul{color:var(--fg-3)}
.bill .plan.soon li::before{color:var(--fg-3)}
.chip.soon{background:var(--surface-2);color:var(--fg-2)}
@media (max-width:720px){.bill .plans{grid-template-columns:1fr}}
.founder-tools{border:1px dashed var(--line-2);border-radius:var(--r);background:transparent}
.founder-tools > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font:500 var(--t-s) var(--sans);color:var(--fg-3)}
.founder-tools > summary::-webkit-details-marker{display:none}
.founder-tools > summary::after{content:"+";font-size:var(--t-l);line-height:1}
.founder-tools[open] > summary::after{content:"\2212"}
.founder-tools .ft-body{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px}
.founder-tools .ft-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.founder-tools .hint{margin:0}
.bill-pay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bill-pay li{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px 16px;font-size:var(--t-m)}
.bill-pay li + li{border-top:1px solid var(--line)}
.bill-pay .d{font:500 var(--t-s) var(--mono);color:var(--fg-3)}
.bill-pay .a{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:500}
.bill .bill-pay-panel{padding:0;gap:0;overflow:hidden}
@media (max-width:480px){.bill-pay li{grid-template-columns:1fr auto}}

/* 404 (from docs/redesign/humanish-redesign.html) */
.nf{position:relative;height:300px;border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(80% 70% at 50% 30%,var(--accent-soft),transparent 70%),var(--surface);overflow:hidden;touch-action:none}
.nf canvas{width:100%;height:100%;display:block;cursor:grab}
.nf .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* card footer: Tweak / Niche / Voice are small icon buttons (label shows on wide screens only) */
.ibtn{display:inline-flex;align-items:center;gap:5px}
.ibtn svg{width:15px;height:15px;flex:none}
@media (max-width:640px){.ibtn .ilbl{display:none}.ibtn{padding:0 9px}}
.tweak-menu{width:auto;min-width:176px;gap:2px}
.tweak-menu .tweak{display:block;width:100%;text-align:left;border:0;border-radius:8px;padding:9px 10px;font-size:var(--t-m);color:var(--fg-2)}
@media (max-width:640px){.tweak-menu{left:auto;right:12px;width:200px}}
/* one row on phones: the main button takes the space, the three small icon buttons sit beside it */
@media (max-width:640px){.foot{flex-wrap:nowrap}.foot .l{min-width:0}.foot .r{flex:none;gap:2px}.foot .count{display:none}}

.ibtn.act-tweak .ilbl{display:inline}

.trialcard{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--fg);font-size:var(--t-m)}
.trialcard span{color:var(--fg-2)}
/* reply back cards carry an extra "Try another" button: let the footer wrap so Tweak/Niche/Voice never get squeezed out */
@media (max-width:640px){.card[data-alt-root] .foot{flex-wrap:wrap}.card[data-alt-root] .foot .r{margin-left:auto}}

/* homepage: h1, one button, side-by-side example, comparison, founder note */
.phero h1{font-size:clamp(34px,6vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:600;margin:0}
.phero h1 span{color:var(--fg-3)}
.cta-note{margin:-6px 0 0;font-size:var(--t-m);color:var(--fg-3)}
.proof-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.proof a{color:var(--fg);text-decoration:underline}
.demo2{width:100%;display:grid;grid-template-columns:1fr 1.25fr;gap:12px;align-items:stretch}
.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.demo-card.hi{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow-lift)}
.demo-card p{margin:0;font-size:var(--t-l);color:var(--fg)}
.demo-card .who{display:flex;align-items:center;gap:10px}
.demo-tag{font:500 var(--t-s) var(--mono);color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em}
.demo-tag.acc{color:var(--accent)}
.rej{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--fg-3);border-top:1px dashed var(--line);padding-top:10px}
.rej span{font:500 var(--t-s) var(--mono);color:var(--danger)}
.demo-foot{margin:0;font-size:var(--t-s)}
@media (max-width:720px){.demo2{grid-template-columns:1fr}}
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:var(--t-m);min-width:520px}
@media (max-width:640px){.cmp{font-size:var(--t-s)}.cmp th,.cmp td{padding:10px 8px}}
.cmp th,.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-weight:600;color:var(--fg-3);font-size:var(--t-s)}
.cmp tbody th{font-weight:500;color:var(--fg);min-width:120px}
.cmp td{color:var(--fg-2)}
.cmp .us{color:var(--fg);background:var(--accent-soft);font-weight:500}
.founder-note{align-items:flex-start;padding:28px 0 8px;border-top:1px solid var(--line)}
.founder-note p{margin:0;font-size:clamp(22px,3.6vw,30px);line-height:1.25;letter-spacing:-.02em;font-weight:600;max-width:24ch}
.founder-note .proof-pic{width:56px;height:56px}

/* run screen: scanning page + checklist (docs/redesign/humanish-redesign.html "Loader D") */
/* loader D: page scan */
.scanwrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;padding:28px 24px;max-width:680px;width:100%;margin:0 auto;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.scanpage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 22px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);overflow:hidden;aspect-ratio:4/3;max-width:100%}
.scanpage .sk{height:9px;border-radius:5px}
.scanpage .sk.h{height:18px;border-radius:7px}
.scanpage .sk.b{height:14px;width:34%;border-radius:6px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 22%,var(--surface-2)) 30%,color-mix(in srgb,var(--accent) 38%,var(--surface-2)) 50%,color-mix(in srgb,var(--accent) 22%,var(--surface-2)) 70%);background-size:250% 100%}
.scanbeam{position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(180deg,transparent,var(--accent-soft) 70%,color-mix(in srgb,var(--accent) 35%,transparent));border-bottom:1.5px solid var(--accent);animation:beam 2.8s ease-in-out infinite alternate;pointer-events:none}
@keyframes beam{from{top:-30px}to{top:calc(100% - 44px - 17px)}}
.scanpage .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),#9C6BFF);transition:width .5s var(--ease)}
.scanpage.fin .scanbeam{opacity:0;transition:opacity .4s}
.scanright{display:flex;flex-direction:column;gap:16px;min-width:0}
.scanlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font:var(--t-m)/1.3 var(--mono)}
.scanlist li>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scanstatus{height:20px;padding-left:34px;font:italic 400 var(--t-m)/20px var(--sans);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scanstatus .vw{display:inline-block;vertical-align:top;white-space:nowrap}
.scanstatus .vw span{display:inline-block;animation:vfade 4.8s var(--ease) forwards}
.scanstatus .sep{margin:0 6px;opacity:.6}
.scanstatus .cnt{font-variant-numeric:tabular-nums}
.scanlist li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--fg-3);transition:color .3s}
.scanlist .ic{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;margin-top:-1px;transition:all .3s var(--ease)}
.scanlist li.on{color:var(--fg)}
.scanlist li.on .ic{border-color:var(--accent);border-right-color:transparent;animation:spin .8s linear infinite}
.scanlist li.warn{color:var(--fg-2)}
.scanlist li.warn .ic{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 18%,transparent)}
.scanlist li.warn .ic::after{content:"!";font:700 11px/1 var(--mono);color:var(--warn)}
.scanlist li.ok{color:var(--fg-2)}
.scanlist li.ok .ic{background:var(--fg);border-color:var(--fg);animation:pop .35s var(--ease)}
.scanlist li.ok .ic::after{content:"";width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.scanlist .vb{display:block;margin-top:5px;font:italic 400 var(--t-m)/1.2 var(--sans);color:var(--fg-3);min-height:18px}
.scanlist .vb span{display:inline-block;animation:vfade 2.6s var(--ease)}
.scanlist li:not(.on) .vb{display:none}
.scanlist .vb .cnt{animation:none;font-variant-numeric:tabular-nums}
.scanlist .vb .sep{animation:none;margin:0 6px;opacity:.6}
@keyframes vfade{0%{opacity:0;transform:translateY(5px)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.scanctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:680px;width:100%;margin:0 auto}
@media (max-width:640px){.scanwrap{grid-template-columns:1fr;gap:22px;padding:20px 16px}.scanpage{max-width:240px}.scanlist li>span:last-child{white-space:normal}}
@media (prefers-reduced-motion:reduce){.scanbeam{animation:none;opacity:.5}}

/* admin tabs */
.adm-tabs{margin:4px 0 2px}
.adm-tabs button{font:500 var(--t-s)/1 var(--sans);padding:9px 13px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);cursor:pointer}
.adm-tabs button:hover{background:var(--surface-2);color:var(--fg)}
.adm-tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.adm-tabs button .hint{margin-left:4px;color:inherit;opacity:.7}
.adm-pane[hidden]{display:none}

/* sent on X: Edit, Skip this and Not me are off */
/* a sent card only dims Adjust once its grace is over (the button is then disabled); Skip this and Not me stay tappable */

/* the launch video */
.vid{margin:0;display:flex;flex-direction:column;gap:10px}
.vid video{display:block;width:100%;height:auto;border-radius:var(--r-lg);background:#0E0F12;border:1px solid var(--line)}
.vid-tall{display:none;max-width:340px;margin:0 auto}
.vid figcaption{font-size:var(--t-s);margin:0}
.vid-text summary{font-size:var(--t-s);color:var(--fg-3);cursor:pointer}
.vid-text p{font-size:var(--t-m);color:var(--fg-2);margin:8px 0 0}
@media (max-width:720px){.vid-wide{display:none}.vid-tall{display:block;width:100%}}
.plink{font-size:var(--t-m);color:var(--fg-2);text-decoration:none;padding:6px 10px}.plink:hover{color:var(--fg)}
.hero-vid{width:100%;max-width:880px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:6px}
.stat b{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.02em}.stat span{font-size:var(--t-s);color:var(--fg-3)}
@media (max-width:720px){.stats{grid-template-columns:1fr}}
.vid-box{position:relative}
.vid-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 8px 40px rgba(91,140,255,.5);transition:transform .15s}
.vid-play:hover{transform:scale(1.06)}
.vid-play:after{content:"";position:absolute;left:50%;top:50%;margin:-14px 0 0 -9px;border-left:26px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;border-radius:2px}
.vid-box.playing .vid-play{display:none}
.vid-wide .vid-play{left:9%;top:15%}
.seg label.tab{cursor:pointer;position:relative}.seg label.tab input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label.tab:has(input:checked){background:var(--accent-soft);color:var(--fg)}
.seg label.tab:has(input:focus-visible){outline:2px solid var(--accent)}

/* admin Traffic charts: plain SVG and divs, theme colours */
.tf-range{display:flex;gap:6px;margin-bottom:6px}
.tf-card{background:var(--surface-2,var(--surface));border:1px solid var(--line);border-radius:var(--r-lg,14px);padding:14px 16px;margin-top:12px;min-width:0}
.tf-h{font-weight:600;margin-bottom:10px}
.tf-svg{width:100%;height:auto;display:block}
.tf-grid{stroke:var(--line);stroke-width:1}
.tf-axis{fill:var(--fg-3);font:11px var(--mono,monospace)}
.tf-bar{fill:var(--accent);opacity:.85}
.tf-bar:hover{opacity:1}
.tf-line{stroke:var(--fg-2);stroke-width:2;stroke-linejoin:round}
.tf-dot{fill:var(--bg);stroke:var(--fg-2);stroke-width:2}
.tf-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-s);color:var(--fg-2)}
.tf-legend-col{flex-direction:column;gap:6px;margin:0}
.tf-li{display:flex;align-items:center;gap:8px}
.tf-sw{width:10px;height:10px;border-radius:3px;flex:none}
.tf-sw-bar{background:var(--accent)}.tf-sw-line{background:var(--fg-2);height:3px;border-radius:2px;width:14px}
.tf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:720px){.tf-grid2{grid-template-columns:1fr}}
.tf-bars{display:flex;flex-direction:column;gap:8px}
.tf-row{display:grid;grid-template-columns:minmax(70px,34%) 1fr auto;gap:10px;align-items:center;font-size:var(--t-s)}
.tf-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2)}
.tf-track{position:relative;height:10px;background:var(--surface);border-radius:6px;overflow:hidden}
.tf-fill,.tf-fill-views{position:absolute;left:0;top:0;height:100%;border-radius:6px}
.tf-fill{background:var(--accent)}.tf-fill-views{background:var(--accent-soft,rgba(91,140,255,.3))}
.tf-num{font:500 var(--t-s) var(--mono,monospace);color:var(--fg-2);min-width:44px;text-align:right}
.tf-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tf-donut-svg{width:150px;height:150px;flex:none}
.tf-donut-n{fill:var(--fg);font:700 22px var(--sans,sans-serif)}
.tf-card.tf-wide{grid-column:1/-1}
/* admin Traffic: tooltips and interaction */
.tf-tip{position:fixed;z-index:60;background:var(--fg);color:var(--bg);padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.4;pointer-events:none;max-width:240px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.tf-tip[hidden]{display:none}
.tf-tip b{display:block;margin-bottom:2px}
.tf-hit{cursor:pointer}
.tf-hit:hover,.tf-hit.tf-hot{fill-opacity:.16}
.tf-slice{cursor:pointer;transition:stroke-width .12s}.tf-slice:hover,.tf-slice.tf-hot{stroke-width:24}
.tf-row{cursor:pointer;border-radius:8px;padding:3px 4px;margin:-3px -4px}
.tf-row:hover,.tf-row.tf-hot,.tf-row:focus-visible{background:var(--accent-soft,rgba(91,140,255,.12));outline:none}
.tf-legend .tf-li{cursor:pointer}
@media (max-width:520px){
  .tf-card{padding:12px}
  .tf-row{grid-template-columns:minmax(64px,40%) 1fr auto;gap:8px}
  .tf-donut{justify-content:center}
  .tf-range .btn{flex:1}
  .adm-totals{grid-template-columns:repeat(2,1fr)}
}

/* App bar (2026-10-16): the selected tab is the "ish" blue, a soft gradient with a faint glow, so which page you are on reads at a glance */
.appbar .seg .thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 94%,#fff) 0%,color-mix(in srgb,var(--accent) 82%,#9C6BFF) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(20,30,90,.22),0 5px 14px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.appbar .seg .tab[aria-selected="true"]{color:var(--on-accent);text-shadow:0 1px 0 rgba(10,20,80,.18)}
/* the generic `nav a` rule in style.css gives every link 16px of right margin and a hover underline: that made the gaps between the tabs
   and the space after the last one uneven. Tabs sit flush, and the weight stays the same selected or not so nothing shifts. */
.appbar .seg .tab{margin:0;border-bottom:0}
.appbar .seg .tab:hover{border-bottom:0}
.appbar .seg .tab:not([aria-selected="true"]):hover{color:var(--fg)}