/* ============================================================
   The house style for a mockup. Copy this whole file into the
   <style> at the top of a new mockup and build on it.

   The tokens are `app/web/src/00-tokens.css` verbatim. Copy them
   rather than linking: an artifact fetches nothing but fonts, and a
   mockup that drifts from the app is worse than one that is a week
   behind. Re-copy when the app's tokens change.

   Single-theme dark BY INTENT - the app declares itself that way and
   a mockup of it must not be theme-aware. Every colour is painted
   explicitly so the page holds on any host ground.
   ============================================================ */

:root{
  color-scheme:dark;

  /* ground - ink with a blue bias, never neutral black */
  --ground:#0A0E13;
  --well:#06090D;          /* the page behind a framed artboard */
  --surf-1:#10161D;
  --surf-2:#172029;
  --surf-3:#1F2A35;
  --surf-4:#26333F;
  --line:#243240;
  --line-soft:#1A2430;

  --ink:#E9F0F5;
  --ink-2:#B4C3CF;
  --ink-3:#8A9DAD;
  --ink-4:#697E90;
  --ink-5:#4A5C6B;   /* marks only, never text - the app's 00-tokens.css */

  /* brand / selection - the amber work light. ONE accent, and it means
     "a person decides this". Never spend it on decoration. */
  --accent:#F5A524;
  --accent-2:#FFC15E;
  --accent-ink:#1A1206;
  --accent-wash:rgba(245,165,36,.13);
  --accent-line:rgba(245,165,36,.42);

  /* state ramp - separate from the accent, and each one means one thing:
     ok = settled/final, review = somebody must look, work = running,
     stale = broken/old, wired = audio handed to a generation,
     anim = drawn over the picture */
  --ok:#35C48D;       --ok-wash:rgba(53,196,141,.13);   --ok-line:rgba(53,196,141,.40);
  --review:#7AA2F7;   --review-wash:rgba(122,162,247,.13);
  --work:#A78BFA;     --work-wash:rgba(167,139,250,.13);
  --stale:#F2566A;    --stale-wash:rgba(242,86,106,.13);
  --wired:#4FC3F7;    --wired-wash:rgba(79,195,247,.13);
  --anim:#E27DBE;     --anim-wash:rgba(226,125,190,.13); --anim-line:rgba(226,125,190,.40);
  --sc1:#6E8BA8; --sc2:#A8748F; --sc3:#5E9E9B; --sc4:#B8925E;

  /* Bahnschrift is what Chrome on Windows resolves, so the mockup reads as
     his app; Barlow and JetBrains Mono are the web fallbacks so it also
     reads right on a phone or anybody else's machine. Load them with:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Semi+Condensed:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap"> */
  --mono:"Cascadia Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ui:"Bahnschrift Light","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Bahnschrift SemiCondensed","Barlow Semi Condensed","Bahnschrift Light",system-ui,sans-serif;
  --ui-body:system-ui,-apple-system,"Segoe UI",Roboto,"Barlow","Helvetica Neue",sans-serif;

  --r:5px;            /* everything inside a screen */
  --r-sm:3px;         /* a chip, a thumbnail */
  --r-frame:8px;      /* the artboard frame, and nothing else */
  --rail:232px;
  --insp:322px;

  /* the sizes the menu is set in: the studio's own type scale (its
     00-tokens.css), so a menu here and a menu there are one size */
  --fs-2xs:10px;
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--well);color:var(--ink);
  font-family:var(--ui-body);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--ui);font-weight:600;text-wrap:balance}
h1{font-size:26px;letter-spacing:-.02em;line-height:1.15}
h2{font-size:17px;letter-spacing:-.01em}
h3{font-size:14px;letter-spacing:-.005em}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- the page around the pixels ---------- */
/* The wrap is wide because this is desk software. Prose inside it is
   capped in ch, so the argument stays readable while the screen does not
   have to shrink. */
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:34px 72px}
.pitch{max-width:74ch;margin-bottom:26px}
.pitch .kick{display:block;margin-bottom:9px}
.pitch h1{font-size:32px;margin-bottom:10px}
.pitch p{font-size:15px;color:var(--ink-2);max-width:68ch;margin-top:9px}
.pitch p b{color:var(--ink);font-weight:600}

/* The one uppercase voice: mono, tracked, small. An eyebrow, a column
   head, a stat label, a caption - all the same formula. */
.eyebrow,.kick{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.kick{color:var(--accent)}
.kick b{color:var(--accent-2);font-weight:500}

/* ---------- the artboard ---------- */
/* A screen is a framed object sitting on a darker ground, never bled to
   the page edge - the frame is what says "this is a picture of an app".
   It scrolls sideways rather than reflowing: a 400px version of a desk
   tool is a different design, not this one. */
.frame{border:1px solid var(--line);border-radius:var(--r-frame);overflow:hidden;
  background:var(--ground);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.frame.scrolls{overflow-x:auto}
.frame.scrolls > *{min-width:1000px}
.cap{display:flex;align-items:baseline;gap:10px;margin:32px 0 9px}
.cap h2{flex:none}
.cap .sub{color:var(--ink-3);font-size:13px}
.cap .pin{flex:none}

/* ---------- the argument ---------- */
/* Pixels alone are not a proposal. Use ONE of these three, not all: a
   note rail beside the artboard, numbered pins keyed to notes under it,
   or a decisions table at the end. */
.two{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:28px;align-items:start}
.note{border-left:2px solid var(--line);padding-left:14px}
.note + .note{margin-top:18px}
.note h3{margin-bottom:5px}
.note p{color:var(--ink-2);font-size:13px;line-height:1.62;max-width:76ch}
.note em{color:var(--accent-2);font-style:normal}
.note.risk{border-left-color:var(--stale)}
.note.risk h3{color:#FFB9C2}

/* the pin: an amber number dropped INTO the screen and repeated in the
   gutter of the note it belongs to, which is what keys one to the other */
.pin{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:10px;font-weight:600;line-height:1}
.pin.ghost{background:none;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.notes{margin-top:40px}
.notes .row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;
  padding:18px 0;border-top:1px solid var(--line-soft)}

/* a measured claim, so evidence does not read as opinion */
.measured{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);border:1px solid var(--ok-line);background:var(--ok-wash);
  border-radius:99px;padding:1px 7px;white-space:nowrap}

/* ---------- app furniture, 01-app.css's own ---------- */
.panel{background:var(--surf-1);border:1px solid var(--line-soft);border-radius:var(--r)}
.panel-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.panel-head .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.panel-body{padding:12px}
.card{background:var(--surf-1);border:1px solid var(--line-soft);border-radius:var(--r);
  width:100%;text-align:left;display:block;padding:0}

.btn{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surf-2);color:var(--ink-2);font-size:12px;white-space:nowrap}
.btn:hover{background:var(--surf-3);color:var(--ink);border-color:var(--surf-4)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-4)}
.btn.ghost:hover{color:var(--ink);background:var(--surf-2)}
.btn.sm{padding:3px 8px;font-size:11px}
/* A refused control stays on screen, quiet, with the reason beside it -
   never hidden, never live-looking and dead. */
.btn:disabled{opacity:.45;cursor:default}
.btn .k{font-family:var(--mono);font-size:10px;color:var(--ink-4)}

.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  padding:1.5px 5px;border-radius:var(--r-sm);background:var(--surf-2);
  border:1px solid var(--line);color:var(--ink-3)}
.ref{font-family:var(--mono);font-size:12px;color:var(--accent-2);background:var(--accent-wash);
  border:1px solid rgba(245,165,36,.26);border-radius:var(--r-sm);padding:.5px 4px}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px 2px 5px;border-radius:99px;border:1px solid}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);border-color:rgba(53,196,141,.32);background:var(--ok-wash)}
.pill.review{color:var(--review);border-color:rgba(122,162,247,.32);background:var(--review-wash)}
.pill.work{color:var(--work);border-color:rgba(167,139,250,.32);background:var(--work-wash)}
.pill.work i{animation:pulse 1.6s ease-in-out infinite}
.pill.stale{color:var(--stale);border-color:rgba(242,86,106,.32);background:var(--stale-wash)}
.pill.idle{color:var(--ink-3);border-color:var(--line);background:var(--surf-2)}
.pill.warn{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-wash)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* every figure that lines up in a column */
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* The hairline grid: cells divided by the gap itself. Used for a stats
   strip, a notes grid, any run of equal cells. */
.hair{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.hair > *{background:var(--surf-1);padding:11px 13px}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stat .n{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:3px}
.stat.hot .n{color:var(--accent-2)}

/* thin, tool-like scrollbars, as the app has */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:var(--surf-1)}
*::-webkit-scrollbar-thumb{background:var(--surf-4);border:2px solid var(--surf-1);border-radius:6px}

/* ---------- the mockup's own chrome, never the app's ---------- */
/* Anything that exists only because this is a mockup - a What to try
   list, a Proposed/Today switch, a provenance line - is marked, dashed
   and amber, so nobody reads it as a control that would ship. */
.mk-only{border:1px dashed var(--accent-line);border-radius:var(--r);background:var(--surf-2)}
.mk-only > summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.mk-only > summary::-webkit-details-marker{display:none}
.mk-only .body{padding:0 14px 14px;font-size:12px;color:var(--ink-2);line-height:1.6}

/* one breakpoint: the argument reflows, the screen does not */
@media (max-width:900px){
  .two{grid-template-columns:minmax(0,1fr)}
  .note{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px}
  .pitch h1{font-size:25px}
}


/* ============ this mockup ============ */
html,body{background:var(--ground)}
.layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:26px;align-items:start}
.idx{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;padding:0}
.idx .body{padding:0 8px 10px}
.idx .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:12px 6px 4px}
.idx a{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--r);color:var(--ink-3);text-decoration:none;font-size:12px;cursor:pointer}
.idx a:hover{color:var(--ink);background:var(--surf-3)}
.idx a.on{color:var(--ink);background:var(--surf-4)}
.idx a.pop{padding-left:20px;font-size:11.5px;color:var(--ink-4)}
.idx a.pop::before{content:"";width:6px;height:6px;border:1px solid var(--ink-5);border-radius:2px;flex:none}
.idx a .ms{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--ink-5)}
.idx a.dim{opacity:.32}
.idx .tog{display:flex;align-items:center;gap:8px;padding:6px 6px 2px;font-size:11.5px;color:var(--ink-2);cursor:pointer}
.idx .tog input{accent-color:var(--accent)}

.cap2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.cap2 h2{font-size:20px}
.ms-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.ms-tag.slice{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-wash)}
.cap2 .nav{margin-left:auto;display:flex;gap:6px}
.lede{color:var(--ink-2);font-size:14px;max-width:74ch;margin-bottom:14px}

.stage{position:relative}
.browser{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--surf-2);border-bottom:1px solid var(--line-soft)}
.browser .dots{display:flex;gap:5px}.browser .dots i{width:9px;height:9px;border-radius:50%;background:var(--surf-4)}
.browser .url{flex:1;max-width:560px;background:var(--ground);border:1px solid var(--line-soft);border-radius:99px;padding:3px 12px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.browser .url b{color:var(--ink);font-weight:400}
.screen{position:relative;min-height:560px}

/* modal inside the frame */
.mlayer{position:absolute;inset:0;background:rgba(3,5,8,.66);display:flex;justify-content:center;align-items:flex-start;padding:56px 20px 30px;z-index:5}
.modal{width:520px;max-width:100%;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.modal.wide{width:760px}
.modal .mh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.modal .mh h3{font-size:14.5px}
.modal .mh .x{margin-left:auto;color:var(--ink-4);font-size:16px;line-height:1}
.modal .mb{padding:14px 16px;display:grid;gap:12px}
.modal .mf{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line-soft)}
.modal .mf .hint{margin-right:auto;font-size:11.5px;color:var(--ink-4)}

/* hub chrome */
.hub-top{display:flex;align-items:center;gap:18px;padding:10px 18px;border-bottom:1px solid var(--line-soft);background:var(--surf-1)}
.hub-logo{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:.01em;cursor:pointer}
.hub-logo span{color:var(--accent)}
.hub-nav{display:flex;gap:2px}
.hub-nav a{font-size:12.5px;color:var(--ink-3);padding:5px 10px;border-radius:var(--r);text-decoration:none;cursor:pointer}
.hub-nav a:hover{color:var(--ink)}
.hub-nav a.on{color:var(--ink);background:var(--surf-3)}
.hub-search{flex:1;max-width:300px;background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;color:var(--ink-4);font-size:12px}
.hub-me{margin-left:auto;display:flex;align-items:center;gap:10px}
.bell{position:relative;color:var(--ink-3);font-size:13px}
.bell b{position:absolute;right:-6px;top:-5px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:9px;border-radius:99px;padding:0 4px}
.av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ground);flex:none}
.av.a{background:var(--sc1)}.av.b{background:var(--sc2)}.av.c{background:var(--sc3)}.av.d{background:var(--sc4)}.av.me{background:var(--ink-2)}
.av.lg{width:30px;height:30px;font-size:12px}.av.xl{width:64px;height:64px;font-size:24px}
.av.sm{width:16px;height:16px;font-size:8px}
/* choosing a face, on Settings > Profile */
.facepick{margin-top:12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.facepick summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.facepick summary::-webkit-details-marker{display:none}
.facepick summary .t{font-size:13px;color:var(--ink)}
.facepick summary .h{font-size:11.5px;color:var(--ink-4);margin-right:auto}
.facegrid{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 12px}
.facegrid label{display:block;cursor:pointer;border-radius:50%;line-height:0}
.facegrid input{position:absolute;opacity:0;pointer-events:none}
.facegrid img{width:48px;height:48px;border-radius:50%;display:block;border:2px solid transparent}
.facegrid input:checked + img{border-color:var(--accent)}
.facegrid input:focus-visible + img{outline:2px solid var(--accent);outline-offset:2px}
/* a face (2026-09-30): the person's picture in the same circle, at every size */
.av.face{background:var(--surf-3);overflow:hidden}
.av.face img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

.muted{color:var(--ink-3)}.faint{color:var(--ink-4)}
.tiny{font-size:11.5px}
.row{display:flex;align-items:center;gap:8px}
.col{display:grid;gap:8px}
.grow{flex:1;min-width:0}
.pad{padding:18px 20px 24px}
img.th{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--surf-3)}
a.lnk{color:var(--accent-2);text-decoration:none;cursor:pointer}
a.lnk:hover{text-decoration:underline}
.h-sec{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.hr{height:1px;background:var(--line-soft);margin:14px 0}

/* form bits */
.fld{display:grid;gap:5px}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fld .hint{font-size:11.5px;color:var(--ink-4)}
.inp{background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;color:var(--ink);font-size:13px;width:100%}
.inp.ph{color:var(--ink-4)}
.inp.big{font-family:var(--mono);font-size:22px;letter-spacing:.25em;text-align:center;padding:10px}
textarea.inp{min-height:70px;resize:none;font-family:inherit}
.chk{display:flex;gap:9px;align-items:flex-start;cursor:pointer;padding:3px 0}
.chk .bx{width:14px;height:14px;border-radius:3px;border:1px solid var(--surf-4);margin-top:2px;flex:none;display:grid;place-items:center;font-size:10px;color:var(--accent-ink)}
.chk.on .bx{background:var(--accent);border-color:var(--accent)}
.chk.lock{cursor:default}.chk.lock .bx{background:var(--surf-4);border-color:var(--surf-4);color:var(--ink-3)}
.chk.off{opacity:.45;cursor:default}
.chk .t{font-size:12.5px;color:var(--ink)}
.chk .h{font-size:11.5px;color:var(--ink-4)}
.radio{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line-soft);border-radius:var(--r);cursor:pointer}
.radio i{width:13px;height:13px;border-radius:50%;border:1px solid var(--surf-4);margin-top:2px;flex:none}
.radio.on{border-color:var(--accent-line);background:var(--accent-wash)}
.radio.on i{border:4px solid var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg span{font-size:11.5px;padding:4px 10px;color:var(--ink-3);cursor:pointer;border-right:1px solid var(--line)}
.seg span:last-child{border-right:0}
.seg span.on{background:var(--surf-4);color:var(--ink)}
.sw{width:32px;height:18px;border-radius:99px;background:var(--ok);position:relative;cursor:pointer;flex:none}
.sw i{position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.sw.off{background:var(--surf-4)}.sw.off i{right:auto;left:2px}
.setrow{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.setrow:first-child{border-top:0}
.setrow .t{font-size:13px;color:var(--ink)}
.setrow .h{font-size:11.5px;color:var(--ink-4);margin-top:2px;max-width:60ch}
.setrow > .r{margin-left:auto;flex:none;display:flex;gap:8px;align-items:center}

/* discover */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.chip{font-size:11.5px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3);background:var(--surf-1);cursor:pointer}
.chip.on{color:var(--ink);border-color:var(--surf-4);background:var(--surf-3)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{overflow:hidden;cursor:pointer}
.pcard:hover{border-color:var(--line)}
.pcard .pic{position:relative}
.pcard .pic img{border-radius:0}
.pcard .pic .pills{position:absolute;left:7px;top:7px;display:flex;gap:4px}
.pcard .pic .pill{background:rgba(10,14,19,.82)}
.pcard .pic .rt{position:absolute;right:7px;bottom:7px;font-family:var(--mono);font-size:10px;background:rgba(0,0,0,.7);color:var(--ink);padding:0 5px;border-radius:var(--r-sm)}
.pcard .b{padding:9px 11px 11px}
.pcard h3{font-size:13.5px}
.pcard .by{font-size:11.5px;color:var(--ink-4);margin-top:1px}
.pcard .log{color:var(--ink-3);font-size:12px;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bar{height:3px;border-radius:2px;background:var(--surf-3);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--ok)}
.pcard .meta{display:flex;gap:10px;margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--ink-4)}

/* show page */
.show-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;padding:20px}
.show-hero h1{font-size:30px}
.show-hero .log{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:58ch}
.eprow{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line-soft)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px}
.facts .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding-top:2px}
.person{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}

/* episode */
.ep{display:grid;grid-template-columns:minmax(0,1fr) 330px}
.ep-main{padding:16px 16px 20px;border-right:1px solid var(--line-soft);min-width:0}
.player{position:relative;border-radius:var(--r);overflow:hidden;background:#000}
.player img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.player .ctl{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.player .scrub{position:relative;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin-bottom:8px;cursor:pointer}
.player .scrub .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:2px}
.player .scrub .mk{position:absolute;top:-4px;width:3px;height:12px;background:var(--accent);border-radius:1px}
.player .play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:var(--ink);font-size:11px}
.player .label{position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:var(--r-sm)}
.player .anim{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--review);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:var(--r-sm)}
.player svg.draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.strip{display:flex;gap:3px;margin-top:10px}
.strip button{position:relative;padding:0;border-radius:var(--r-sm);overflow:hidden;outline:1px solid transparent;min-width:0}
.strip button .cells{display:flex;height:50px}
.strip button img{height:50px;width:100%;object-fit:cover;display:block;opacity:.7}
.strip button.on{outline:2px solid var(--accent)}
.strip button.on img,.strip button:hover img{opacity:1}
.strip .n{position:absolute;right:3px;top:2px;font-family:var(--mono);font-size:9px;color:#fff;background:rgba(0,0,0,.65);border-radius:8px;padding:0 5px}
.strip .bd{position:absolute;left:3px;bottom:2px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--review);background:rgba(0,0,0,.7);border-radius:3px;padding:0 4px}
.scn{display:flex;gap:3px;margin-top:4px}
.scn div{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border-top:2px solid;padding-top:3px;min-width:0;white-space:nowrap;overflow:hidden}
.ep-head{display:flex;align-items:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.ep-head h2{font-size:20px}
.tabs{display:flex;gap:2px;margin-top:12px;border-bottom:1px solid var(--line-soft)}
.tabs span{font-size:12.5px;padding:6px 11px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tabs span:hover{color:var(--ink)}
.tabs span.on{color:var(--ink);border-color:var(--accent)}
.tabs span .c{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-left:4px}
.tabbody{padding-top:14px}
.shotinfo{display:grid;grid-template-columns:210px 1fr;gap:16px}
.line{font-size:13px;color:var(--ink-2);padding:3px 0}
.line.act{color:var(--ink-3)}
.nm{color:var(--ink);border-bottom:1px dotted var(--ink-4)}
.cells6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cells4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cell{position:relative;cursor:pointer}
.cell img{border-radius:var(--r-sm);display:block;width:100%}
.cell .no{position:absolute;left:4px;top:4px;font-family:var(--mono);font-size:9px;background:rgba(0,0,0,.7);color:#fff;border-radius:3px;padding:0 4px}
.cell .nb{position:absolute;right:4px;top:4px;font-family:var(--mono);font-size:9px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:0 5px;font-weight:600}
.cell p{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.45}
.cell.on img{outline:2px solid var(--accent)}
.olscene{margin-bottom:14px}
.olscene h3{font-size:13.5px;display:flex;gap:8px;align-items:center}
.olshot{margin:8px 0 0 12px;padding-left:12px;border-left:2px solid var(--line)}
.olshot .t{font-size:12.5px;color:var(--ink)}
.take{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;padding:10px 0;border-top:1px solid var(--line-soft)}
.castgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.castc img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);display:block}
.castc.place img{aspect-ratio:16/9}
.castc .n{font-size:12.5px;margin-top:5px;color:var(--ink)}
.castc .s{font-size:11px;color:var(--ink-4)}
.ep-side{display:flex;flex-direction:column;min-width:0}
.side-head{padding:12px 14px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px}
.cmts{padding:4px 14px;flex:1}
.cmt{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cmt .h{display:flex;align-items:center;gap:7px;font-size:12px}
.cmt .h b{font-weight:600}
.cmt .h .mk{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);border:1px solid var(--accent-line);border-radius:99px;padding:0 5px}
.cmt .h .at{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--accent-2);cursor:pointer}
.cmt p{margin:5px 0 0 29px;color:var(--ink-2);font-size:12.5px}
.cmt .sk{margin:7px 0 0 29px;position:relative;width:150px}
.cmt .sk img{display:block;width:100%;border-radius:var(--r-sm)}
.cmt .sk svg{position:absolute;inset:0;width:100%;height:100%}
.cmt .acts{margin:6px 0 0 29px;display:flex;gap:12px;font-size:11px;color:var(--ink-4)}
.cmt .acts span{cursor:pointer}.cmt .acts span:hover{color:var(--ink-2)}
.cmt.reply{margin-left:26px}
.cmt.stale{opacity:.6}
.home{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.compose{padding:10px 14px 12px;border-top:1px solid var(--line-soft)}
.compose .box{background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;color:var(--ink-4);font-size:12px;cursor:text}
.hidden-n{font-size:11px;color:var(--ink-4);padding:8px 0}

/* shot page */
.shotpage{display:grid;grid-template-columns:minmax(0,1fr) 330px}
.crumbs{font-size:12px;color:var(--ink-4);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--ink-3);cursor:pointer}

/* settings shell (hub) */
.set{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:560px}
.set nav{border-right:1px solid var(--line-soft);padding:14px 8px;background:var(--surf-1)}
.set nav .g{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:12px 8px 4px}
.set nav a{display:block;padding:5px 9px;border-radius:var(--r);color:var(--ink-3);font-size:12.5px;cursor:pointer}
.set nav a.on{background:var(--surf-3);color:var(--ink)}
.set .main{padding:20px 24px 28px;min-width:0}
.set .main > h2{font-size:19px}
.set .main > .sub{color:var(--ink-3);font-size:13px;margin-top:3px;max-width:66ch}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:400;padding:6px 8px;border-bottom:1px solid var(--line)}
table.t td{padding:9px 8px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:middle}
table.t td.num,table.t th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.t tr.dim td{opacity:.5}
.pos{color:var(--ok)}.neg{color:var(--ink-2)}

/* auth */
.authpage{display:grid;place-items:center;padding:40px 20px;min-height:560px;background:radial-gradient(ellipse at 50% 0,var(--surf-2),var(--ground) 60%)}
.authcard{width:420px;max-width:100%;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.authcard h2{font-size:19px}
/* the card after Connect: sent back to the studio */
.youin-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;background:var(--ok-wash);border:1px solid var(--ok-line);color:var(--ok);font-size:18px}
.devbox{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-2)}
.devbox .ic{width:40px;height:30px;border:1px solid var(--ink-4);border-radius:3px;position:relative;flex:none}
.devbox .ic::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:4px;background:var(--ink-4);border-radius:1px}
.scope{display:flex;gap:9px;padding:4px 0;font-size:12.5px;color:var(--ink-2)}
.scope .ok{color:var(--ok);font-family:var(--mono)}
.scope .no{color:var(--ink-4);font-family:var(--mono)}

/* money */
.bal{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.bal .n{font-family:var(--mono);font-size:34px;font-variant-numeric:tabular-nums;color:var(--ink)}
.bal .u{font-size:12px;color:var(--ink-3)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.packs .radio{flex-direction:column;gap:3px}
.packs .radio .n{font-family:var(--mono);font-size:18px;color:var(--ink)}

/* studio shells */
.app{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:560px}
.rail{background:var(--surf-1);border-right:1px solid var(--line-soft);padding:10px 8px;font-size:12px}
.rail .rh{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:10px 8px 4px}
.rail a{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r);color:var(--ink-3);text-decoration:none}
.rail a.on{background:var(--surf-3);color:var(--ink)}
.rail a .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--accent-2)}
.rail a.new::after{content:"new";margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);border:1px solid var(--accent-line);border-radius:99px;padding:0 4px}
.app-top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}
.app-top b{color:var(--ink);font-weight:600}
.app-top .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.app-body{padding:16px 18px 22px}
.svc{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);padding:14px}
.code{font-family:var(--mono);font-size:26px;letter-spacing:.2em;color:var(--accent-2);background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;display:inline-block}
.prog{height:5px;background:var(--surf-4);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--work)}
.prog.ok i{background:var(--ok)}
.upl{display:grid;grid-template-columns:1fr 90px 70px;gap:8px;align-items:center;font-size:12px;padding:5px 0;color:var(--ink-2)}
.rvcell{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.src{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:0 6px;border:1px solid}
.src.lot{color:var(--review);border-color:rgba(122,162,247,.4)}
.src.own{color:var(--ink-3);border-color:var(--line)}

/* crew, lend, shelf, experiments */
.claimr{display:grid;grid-template-columns:170px 1fr 200px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.claimr .shots{display:flex;gap:3px}.claimr .shots img{width:70px;border-radius:2px}
.steps{display:grid;gap:10px;counter-reset:s}
.step{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;background:var(--surf-3);color:var(--ink-2)}
.step.done .n{background:var(--ok-wash);color:var(--ok)}
.step.now{border-color:var(--accent-line)}
.step.now .n{background:var(--accent);color:var(--accent-ink)}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.ladder > div{background:var(--surf-1);padding:12px}
.ladder > div.on{background:var(--surf-2);box-shadow:inset 0 2px 0 var(--ok)}
.ladder .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ladder p{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.packc .pic{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.packc .pic img{aspect-ratio:1;object-fit:cover;width:100%;display:block}
.exp{padding:12px 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 150px 120px;gap:14px;align-items:start}
.exp h3{font-size:13.5px}
.exp .q{font-size:12px;color:var(--ink-3);margin-top:3px}
.eff{font-family:var(--mono);font-size:10px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px;display:inline-block;margin:5px 4px 0 0}

/* moderation */
.modq{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:560px}
.modq .list{border-right:1px solid var(--line-soft)}
.modq .it{padding:10px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:12px}
.modq .it.on{background:var(--surf-2);box-shadow:inset 2px 0 0 var(--accent)}
.modq .it .r{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.reason{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3)}
.reason.hot{color:var(--stale);border-color:rgba(242,86,106,.4);background:var(--stale-wash)}
.tl{display:grid;gap:0}
.tl .e{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-2)}
.tl .e .w{font-family:var(--mono);font-size:10px;color:var(--ink-4)}

/* compute */
.grid2c{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.way{padding:16px}
.shotgrid{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.sg{height:30px;border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--ink-3);border:1px solid var(--line-soft);background:var(--surf-2)}
.sg.ok{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.sg.work{background:var(--work-wash);border-color:rgba(167,139,250,.4);color:var(--work)}
.sg.re{background:var(--stale-wash);border-color:rgba(242,86,106,.4);color:var(--stale)}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;border:1px solid var(--line)}
.dot.ok{background:var(--ok)}.dot.work{background:var(--work)}.dot.wait{background:var(--surf-3)}.dot.re{background:var(--stale)}
.where{display:grid;grid-template-columns:16px minmax(0,1fr) 110px 90px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);cursor:pointer}
.where i{width:13px;height:13px;border-radius:50%;border:1px solid var(--surf-4)}
.where.on{border-color:var(--accent-line);background:var(--accent-wash)}
.where.on i{border:4px solid var(--accent)}
.where .t{font-size:13px;color:var(--ink)}
.where .h{font-size:11.5px;color:var(--ink-4)}
.where .tm{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}
.where .cs{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}

/* community */
.ladder5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.ladder5 > div{background:var(--surf-1);padding:9px 12px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.ladder5 > div .mono{font-size:10px;color:var(--ink-4)}
.ladder5 > div.on{background:var(--accent-wash);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.sup{display:flex;gap:14px;align-items:center;padding:10px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.sup img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);flex:none}
.req{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.vote{display:grid;justify-items:center;width:46px;padding:5px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surf-2);color:var(--ink-3);font-size:10px;flex:none}
.vote b{font-family:var(--mono);font-size:13px;color:var(--ink)}
.vote.on{border-color:var(--accent-line);background:var(--accent-wash);color:var(--accent-2)}

.toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--surf-3);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;font-size:12.5px;color:var(--ink);z-index:9;box-shadow:0 10px 30px rgba(0,0,0,.4)}

.notes-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.notes-rail .note + .note{margin-top:0}
.decide{margin-top:48px}
.decide table{width:100%;border-collapse:collapse;font-size:13px}
.decide th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line)}
.decide td{padding:10px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.decide td:first-child{color:var(--ink);width:30%}
.prov{margin-top:34px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line-soft);padding-top:14px;max-width:96ch}
.wideonly{overflow-x:auto}

@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .idx{position:static;max-height:none}
  .cap2 .nav{margin-left:0}
}

/* ===== the hub as a site ===== */
[hidden]{display:none!important}
body{min-height:100vh;display:flex;flex-direction:column}
main.page{flex:1;width:100%;max-width:1360px;margin:0 auto}
.hub-top{position:sticky;top:0;z-index:20}
.hub-top a{text-decoration:none}
.hub-logo{color:var(--ink)}
.flash{max-width:1360px;margin:10px auto 0;padding:0 20px;width:100%}
.flash div{padding:8px 12px;border-radius:var(--r);font-size:12.5px;border:1px solid var(--line);background:var(--surf-2)}
.flash .success{border-color:var(--ok-line);color:var(--ok)}
.flash .error{border-color:rgba(242,86,106,.4);color:#FFB9C2}
footer.foot{border-top:1px solid var(--line-soft);padding:14px 20px;font-size:11.5px;color:var(--ink-4);display:flex;gap:14px;flex-wrap:wrap}
footer.foot a{color:var(--ink-3)}
dialog.modal{padding:0;color:var(--ink);max-width:calc(100vw - 32px)}
dialog.modal::backdrop{background:rgba(3,5,8,.66)}
form.inline{display:inline}
.player video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.player .boardshow{position:absolute;inset:0;background:#000}
.player .boardshow img{width:100%;height:100%;object-fit:contain}
.player .ctl{pointer-events:none}.player .ctl *{pointer-events:auto}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink);margin-bottom:6px}
.drawpad{position:relative}
.drawpad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
a.card{color:inherit;text-decoration:none}
.btn{text-decoration:none}
input[type=checkbox]{accent-color:var(--accent)}
select.inp{appearance:auto}
.pager{display:flex;gap:8px;justify-content:center;margin-top:16px}
@media (max-width:900px){
  .ep,.shotpage,.show-hero,.set,.modq,.grid2c{grid-template-columns:minmax(0,1fr)!important}
  .grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}
  .hub-top{flex-wrap:wrap;gap:8px}.hub-search{display:none}
  .ep-main{border-right:0}
}
@media (max-width:520px){.grid4,.grid3{grid-template-columns:1fr}}
.seg a{font-size:11.5px;padding:4px 10px;color:var(--ink-3);text-decoration:none;border-right:1px solid var(--line)}
.seg a:last-child{border-right:0}
.seg a.on{background:var(--surf-4);color:var(--ink)}

/* ===== polish, 2026-09-27 ===== */
a{color:inherit;text-decoration:none}
a.lnk,.prose a{color:var(--accent-2)}
a.lnk:hover,footer.foot a:hover{text-decoration:underline;text-underline-offset:3px}
footer.foot{justify-content:center}
footer.foot .in{width:100%;max-width:1360px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-inline:4px}
footer.foot .in form{margin-left:auto}

/* the header lines up with the page */
.hub-top{padding:0 20px;background:rgba(16,22,29,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hub-top .in{display:flex;align-items:center;gap:22px;width:100%;max-width:1360px;margin:0 auto;height:54px}
.hub-logo{font-size:18px;white-space:nowrap}
.hub-nav a{padding:6px 10px;white-space:nowrap}
.hub-nav a.on{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
form.hub-search{flex:1;max-width:320px;position:relative}
form.hub-search input{width:100%;background:var(--surf-2);border:1px solid var(--line-soft);border-radius:99px;padding:6px 12px 6px 30px;color:var(--ink);font-size:12.5px}
form.hub-search input:focus{outline:none;border-color:var(--accent-line)}
form.hub-search::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-6px;border:1.5px solid var(--ink-4);border-radius:50%}
form.hub-search::after{content:"";position:absolute;left:21px;top:50%;width:5px;height:1.5px;margin-top:3px;background:var(--ink-4);transform:rotate(45deg)}
.hub-me .bell{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.hub-me .bell:hover{background:var(--surf-3)}

/* one page width, one page head */
main.page > .pad,main.page > .ep,main.page > .shotpage,main.page > .show-hero,main.page > .set,main.page > .modq{max-width:1360px;margin-inline:auto}
.pad{padding:26px 20px 40px}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head .t{flex:1 1 320px;min-width:0}
.page-head h1{font-family:var(--disp);font-size:28px;letter-spacing:-.01em}
.page-head p{color:var(--ink-3);font-size:13.5px;margin-top:4px;max-width:68ch}

/* chips and switches */
.chip{text-decoration:none;transition:border-color .15s,color .15s}
.chip:hover{color:var(--ink);border-color:var(--surf-4)}
.chip.on{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-2)}
.filters{gap:6px 6px}
.filters .sep{width:1px;height:18px;background:var(--line);margin:0 6px;align-self:center}

/* cards answer the pointer */
.pcard{transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--line);transform:translateY(-2px)}
.pcard .pic img{transition:filter .2s}
.pcard:hover .pic img{filter:brightness(1.06)}
.pcard .b{padding:11px 13px 13px}
.pcard h3{font-family:var(--disp);font-size:15px;letter-spacing:.005em}
.pcard .foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.pcard .foot .bar{flex:1;margin:0}
.pcard .foot span{font-family:var(--mono);font-size:10px;color:var(--ink-4);white-space:nowrap}
.grid4{gap:18px}

/* the welcome band on Discover, for someone new */
.welcome{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--r-frame);padding:26px 28px;margin-bottom:26px;
  background:radial-gradient(ellipse at 0% 0%,rgba(245,165,36,.10),transparent 55%),var(--surf-1)}
.welcome h1{font-family:var(--disp);font-size:30px;line-height:1.1}
.welcome p{color:var(--ink-2);font-size:14px;margin-top:10px;max-width:56ch}
.welcome .ways{display:grid;gap:10px}
.welcome .way{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:var(--surf-2);border:1px solid var(--line-soft)}
.welcome .way b{display:block;font-size:13px;color:var(--ink)}
.welcome .way span{font-size:12px;color:var(--ink-3)}
.welcome .way i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent-2);width:18px;flex:none;padding-top:1px}

/* action rows: one primary, the rest quieter */
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions .more{display:flex;gap:2px;margin-left:4px}

/* show page */
.show-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding:26px 20px}
.show-hero .th{max-height:440px}
.show-hero h1{font-family:var(--disp);font-size:36px;letter-spacing:-.01em}
.eprow{padding:12px 0;grid-template-columns:220px minmax(0,1fr) auto}
.eprow b{font-family:var(--disp);font-size:15px}

/* episode head wraps cleanly */
.ep-head{flex-wrap:wrap;row-gap:10px}
.ep-head > .grow{flex:1 1 260px}
.ep-head h2{font-family:var(--disp);font-size:24px}
.nm{border-bottom:1px dotted var(--ink-5)}
.player{box-shadow:0 18px 50px rgba(0,0,0,.35)}

/* wallet history rows grouped */
table.t td .sub{display:block;font-size:11px;color:var(--ink-4);margin-top:1px}

@media (max-width:900px){
  .hub-top{padding:0 14px}
  .hub-top .in{flex-wrap:wrap;height:auto;padding:10px 0 0;gap:6px 14px}
  .hub-logo{order:1}
  .hub-me{order:2;margin-left:auto}
  form.hub-search{display:none}
  .hub-nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding-bottom:2px}
  .hub-nav::-webkit-scrollbar{display:none}
  .welcome{grid-template-columns:1fr;padding:20px}
  .pad{padding:20px 14px 32px}
  .show-hero{padding:18px 14px}
  .eprow{grid-template-columns:120px minmax(0,1fr)}
  .eprow > :last-child{grid-column:2}
  .page-head h1{font-size:24px}
  .set nav{display:flex;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--line-soft)}
  .set nav .g{width:100%;padding:8px 8px 2px}
}
h2.ph{font-family:var(--disp);font-size:26px;letter-spacing:-.01em}
@media (max-width:900px){h2.ph{font-size:22px}}
@media (max-width:640px){
  .shotinfo,.take,.rvcell,.claimr,.exp{grid-template-columns:1fr}
  .shotinfo > div:first-child{max-width:320px}
  .cells6,.cells4{grid-template-columns:repeat(2,1fr)}
  .castgrid{grid-template-columns:repeat(2,1fr)}
  .player .anim{top:34px}
  .sup{flex-wrap:wrap}.sup img{width:100%}
  .grid2c,.hair{grid-template-columns:1fr!important}
  .show-hero h1{font-size:28px}
  .ladder5{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr 1fr}
  .welcome h1{font-size:24px}
  table.t{display:block;overflow-x:auto;white-space:nowrap}
}

.set{min-height:calc(100vh - 150px)}
.panel-head .tag + .tiny{margin-left:4px}
@media (max-width:640px){
  .pad > .row:first-child,.pad > .row:first-of-type{flex-wrap:wrap}
  .pad > .row > .grow,.main > .row > .grow{flex:1 1 100%}
  .seg{max-width:100%;overflow-x:auto}
}

/* ---------- the forum ---------- */
.pill.no{color:var(--ink-4);border-color:var(--line);border-style:dashed;background:transparent}
.fdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:0;flex:none}
.fside a{display:flex!important;align-items:center}
.fside a .n{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.fsearch{margin-left:auto}
.fsearch .inp{width:220px}
.ftitle{color:var(--ink);font-weight:500;font-size:13.5px;line-height:1.35}
.ftitle:hover{color:var(--accent-2)}
.fcat{display:flex;align-items:center;margin-top:3px;font-size:11.5px;color:var(--ink-4)}
table.ftopics td:first-child{max-width:0;width:58%}
table.ftopics td .av{vertical-align:middle}
.req.dim,.fpost.dim{opacity:.5}
.req .ftitle{font-size:14px}
.vote{cursor:pointer;transition:border-color .12s,background .12s}
.vote:hover:not(:disabled){border-color:var(--accent-line)}
.vote:disabled{cursor:default;opacity:.8}
.vote span{line-height:1}
.vote.big{width:58px;padding:8px 0}
.vote.big b{font-size:17px}
.ftopic{max-width:860px}
.ftopic h1.ph{font-size:23px;line-height:1.2;letter-spacing:-.01em}
.fstatus{margin-top:14px;border-color:var(--review-wash)}
.fstatus .panel-body{font-size:13px;color:var(--ink-2)}
.fpost{border-top:1px solid var(--line-soft);padding:16px 0 12px}
.fpost.first{border-top:0;margin-top:10px}
.fpost.answer{border-left:2px solid var(--accent-line);padding-left:14px;margin-left:-16px}
.fhead{display:flex;align-items:center;gap:8px;font-size:12.5px}
.fhead .mk{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);border:1px solid var(--accent-line);border-radius:99px;padding:0 5px}
.fbody{margin:8px 0 0 36px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:72ch;overflow-wrap:anywhere}
.fbody p{margin:0 0 10px}
.fcard{display:flex;gap:10px;align-items:center;margin:4px 0 10px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf-1);max-width:420px;color:var(--ink)}
.fcard:hover{border-color:var(--accent-line)}
.fcard img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;flex:none;background:var(--surf-3)}
.fcard b{display:block;font-weight:500;font-size:13px}
.fcard i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-4)}
.freply{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.freply textarea{min-height:110px}
.fstaff{margin-top:26px;border-style:dashed}
@media (max-width:760px){
  .fsearch{margin-left:0;flex:1 1 100%}.fsearch .inp{width:100%}
  table.ftopics th:nth-child(n+3),table.ftopics td:nth-child(n+3){display:none}
  table.ftopics td:first-child{width:auto;max-width:none}
  .fbody{margin-left:0}
  .fpost.answer{margin-left:0}
}
.seg .fn{margin-left:6px;font-family:var(--mono);font-size:10px;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* the header and footer inset like the page (2026-09-27): content sits 20px in */
.hub-top .in,footer.foot .in{padding-inline:20px}
.hub-top{padding-inline:0}
/* search: a quiet pill, right-aligned beside the bell */
form.hub-search{flex:1;max-width:300px;margin-left:auto;background:var(--surf-2);border:1px solid var(--line);border-radius:20px;padding:2px 10px;color:var(--ink-4);font-size:12px}
form.hub-search::before,form.hub-search::after{content:none}
form.hub-search input{background:none;border:0;border-radius:0;padding:4px 0;color:var(--ink);font-size:12px}
form.hub-search:focus-within{border-color:var(--accent-line)}
.hub-me{margin-left:0}
.hub-me .bell{color:var(--ink-3)}
.hub-me .bell:hover{color:var(--ink)}
.hub-me .bell svg{display:block}
.hub-me .bell b{top:-2px;right:-3px;line-height:14px}
@media (max-width:760px){.hub-top .in,footer.foot .in{padding-inline:14px}.hub-me{margin-left:auto}}

/* the avatar menu: the person's own places, in one list */
.me-menu{position:relative}
.me-btn{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.me-btn:hover .av,.me-btn[aria-expanded=true] .av{box-shadow:0 0 0 2px var(--surf-1),0 0 0 3.5px var(--line)}
.me-btn .av{width:26px;height:26px;font-size:11px}
.me-dot{position:absolute;right:0;bottom:1px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surf-1)}
.me-pop{position:absolute;right:0;top:calc(100% + 8px);width:250px;padding:6px;background:var(--surf-2);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:40}
.me-pop[hidden]{display:none}
.me-pop a,.me-pop button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 9px;border:0;border-radius:var(--r);background:none;color:var(--ink-2);font:inherit;font-size:12.5px;text-align:left;text-decoration:none;cursor:pointer}
.me-pop a:hover,.me-pop button:hover,.me-pop a:focus-visible,.me-pop button:focus-visible{background:var(--surf-3);color:var(--ink);outline:none}
.me-pop .me-head{gap:10px;padding:8px 9px}
.me-head b{display:block;font-weight:600;color:var(--ink);font-size:13px}
.me-head i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-4)}
.me-h{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.me-n{margin-left:auto;font-family:var(--mono);font-size:9.5px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:0 6px;line-height:15px}
.me-pop .me-alert{flex-wrap:wrap;gap:0 8px;margin:2px 0;background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent-2)}
.me-pop .me-alert:hover{background:var(--accent-wash);color:var(--accent)}
.me-alert i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
.me-alert span{flex-basis:100%;padding-left:14px;font-size:11px;color:var(--ink-3)}
.me-sep{height:1px;margin:5px 4px;background:var(--line)}

/* ---------- inside the studio ----------
   The studio frames these pages with its own rail and top bar, and every
   studio screen has the same bones: the full width of the frame at 26px
   gutters; a head of eyebrow, 26px title, lede and the actions at the
   right; then a browse rail beside a well. In here the hub wears those
   bones, so a Hub page reads as one more studio screen rather than a
   website in a window (2026-09-28). The tokens are the studio's own
   (`/_booth/tokens.css`); only the layout and the type are said here. */
body.embed{background:var(--ground)}
body.embed main.page{max-width:none;margin:0}
body.embed main.page > .pad,body.embed main.page > .set,body.embed main.page > .ep,body.embed main.page > .shotpage,body.embed main.page > .show-hero,body.embed main.page > .modq{max-width:none}
body.embed .flash{max-width:none}
body.embed main.page > .pad{padding:22px 26px 32px}

/* the head: the studio's `.shead` */
body.embed .page-head{margin-bottom:18px;gap:12px 16px}
body.embed .page-head .t::before,
body.embed .set .main > h2:first-child::before{content:"Hub";display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
body.embed .page-head h1,
body.embed .set .main > h2:first-child{font-family:var(--ui);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
body.embed .page-head p,
body.embed .set .main > .sub{color:var(--ink-2);font-size:13px;max-width:62ch;margin-top:5px}

/* a side nav (Forum, the settings pages) is the studio's browse rail, and
   the page beside it sits in the well */
body.embed main.page > .set{margin:22px 26px 26px;min-height:calc(100vh - 48px);
  border:1px solid var(--line);grid-template-columns:184px minmax(0,1fr)}
body.embed .set nav{padding:10px 0 14px;border-right:1px solid var(--line);background:var(--surf-1)}
body.embed .set nav .g{font-size:9px;letter-spacing:.12em;padding:9px 14px 6px}
body.embed .set nav .g:first-child{padding-top:2px}
body.embed .set nav a{border-radius:0;padding:6px 14px;font-size:13px;color:var(--ink-2);
  border-left:2px solid transparent;text-decoration:none}
body.embed .set nav a:hover{background:var(--surf-2);color:var(--ink)}
body.embed .set nav a.on{background:var(--accent-wash);color:var(--accent);border-left-color:var(--accent)}
body.embed .set nav a.on .n{color:inherit}
body.embed .set .main{background:var(--ground);padding:22px 24px 28px}

/* filter chips (Discover, Ideas) become that rail too: the studio filters
   a library from the side, never from a row of pills over it. The page is
   the Forum's frame - one bordered panel, the rail inside it on the left,
   the head and the cards in the well beside it - drawn from the one `.pad`
   the templates share with the web. The rail's colour and rule are the
   panel's background, so the rail runs to the panel's foot however few
   filters or cards there are. */
body.embed main.page > .pad:has(> .filters){display:grid;grid-template-columns:184px minmax(0,1fr);align-content:start;position:relative;
  margin:22px 26px 26px;padding:0 0 28px;min-height:calc(100vh - 48px);border:1px solid var(--line);
  background:linear-gradient(to right,var(--surf-1) 184px,var(--line) 184px 185px,var(--ground) 185px)}
body.embed .pad:has(> .filters) > *{grid-column:2;min-width:0;margin-left:25px;margin-right:24px}
body.embed .pad:has(> .filters) > :first-child{margin-top:22px}
body.embed .pad:has(> .filters) > .filters{grid-column:1;position:absolute;top:0;left:0;width:184px;margin:0!important;
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;padding:10px 0 14px;background:none;border:0}
body.embed .filters::before{content:"Browse";font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);padding:2px 14px 6px}
body.embed .filters .chip{display:flex;align-items:center;gap:8px;border:0;border-left:2px solid transparent;border-radius:0;
  background:none;padding:6px 14px;font-size:13px;color:var(--ink-2)}
body.embed .filters .chip:hover{background:var(--surf-2);color:var(--ink)}
body.embed .filters .chip.on{background:var(--accent-wash);color:var(--accent);border-left-color:var(--accent)}
body.embed .filters .sep{width:auto;height:1px;margin:8px 14px;background:var(--line);align-self:stretch}

/* cards as the studio draws a library: they fill the width at a card's
   size, not four across whatever the width, and sit still under a pointer */
body.embed .grid4,body.embed .grid3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
body.embed .pcard{border-color:var(--line)}
body.embed .pcard:hover{transform:none;border-color:var(--surf-4)}
body.embed .pcard:hover .pic img{filter:none}
body.embed .pcard .b{padding:9px 10px 10px}
body.embed .pcard h3{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:0}
body.embed .crewgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* the inbox and the crews list */
.inb{display:flex;align-items:center;gap:14px;padding:11px 14px;border-top:1px solid var(--line-soft)}
.inb:first-child{border-top:0}
.inb-k{width:44px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.inb-t{font-weight:500}
.crewgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.crewcard{display:grid;gap:4px;padding:14px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);color:var(--ink);text-decoration:none}
.crewcard:hover{border-color:var(--accent-line)}
.crewcard b{font-family:var(--disp);font-size:16px;font-weight:600}

/* A show with no poster: a lettered tile whose hue comes from the show, the
   studio's library card for the same state - so at least it is this show's. */
.th.letter{aspect-ratio:16/9;display:grid;place-items:center;font-family:var(--ui);font-size:34px;letter-spacing:.06em;
  color:hsl(var(--h) 30% 82%);background:linear-gradient(150deg,hsl(var(--h) 34% 26%),hsl(var(--h) 30% 15%) 62%,var(--surf-1))}

/* ---------- sharing (2026-09-29): one thing, shared like a doc ---------- */
.sharepage{max-width:1180px;margin:0 auto;padding:22px 20px 40px}
body.embed .sharepage{max-width:none}
.share-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.share-head h1{font-size:28px;margin:6px 0 8px}
.share-head > .row{margin-left:auto}
.share-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.share-doc{min-width:0}
.share-doc .part{margin-bottom:22px}
.share-doc h3{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 8px}
.share-doc h3 .n{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.share-doc .para p,.share-doc p.para{font-size:14.5px;line-height:1.72;color:var(--ink);margin:0 0 10px;max-width:72ch}
.share-doc .part-pic{display:block;width:100%;max-width:560px;border-radius:var(--r);margin:4px 0 10px}
.share-doc mark.hl{background:rgba(122,162,247,.16);color:inherit;border-bottom:1px solid var(--review);padding:0 1px}
.ol-shot{margin:8px 0 12px}
.ol-line{padding:4px 8px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);cursor:pointer}
.ol-line:hover,.ol-line.on{background:var(--surf-2);color:var(--ink)}
.ol-line.dialogue b{color:var(--accent-2);font-weight:500}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cell{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surf-1);cursor:pointer}
.cell.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cell img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cell figcaption{padding:6px 8px;font-size:12px;color:var(--ink-2)}
.share-doc video.take{width:100%;border-radius:var(--r);background:#000}
.share-side{position:sticky;top:14px}
.composer{border:1px solid var(--line);border-radius:var(--r);background:var(--surf-1);padding:10px}
.composer textarea{width:100%;box-sizing:border-box;background:var(--ground);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);padding:7px 9px;font:inherit;font-size:12.5px;resize:vertical}
.composer .on{font-size:12px;color:var(--ink-2);border-left:2px solid var(--review);padding:2px 8px;margin-bottom:6px}
.composer .on button{border:0;background:none;color:var(--ink-4);cursor:pointer;margin-left:6px}
.composer .suggest{margin-top:8px}
.composer .err{color:#FFB9C2;margin:6px 0 0}
.cmt p.quote{color:var(--ink-3);border-left:2px solid var(--line);padding-left:8px;font-style:italic}
.cmt.sug del{color:var(--ink-4);text-decoration-color:var(--stale)}
.cmt.sug ins{text-decoration:none;background:var(--ok-wash);color:#9BE6C8;border-bottom:1px solid var(--ok-line)}
.cmt.sug.accepted .at{color:var(--ok)}
.cmt.sug.rejected{opacity:.6}
.cmt.done{opacity:.7}
.shared-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.shared-row:last-child{border-bottom:0}
.limits{padding:16px;display:grid;gap:16px}
.limits label{display:grid;gap:5px}
.limits .inp{width:110px}
@media (max-width:900px){.share-grid{grid-template-columns:minmax(0,1fr)}.share-side{position:static}}

/* ---------- the community (2026-09-29): the feed, posts, polls ---------- */
.feedpage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;max-width:1100px;margin:0 auto}
.feeditem{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);margin-bottom:12px;overflow:hidden}
.feeditem .fh{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:12.5px;color:var(--ink-2)}
.feeditem .fh .t b{color:var(--ink);font-weight:500}
.feeditem .fh .when{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.feeditem .fb{display:block;padding:0 12px 12px}
.feeditem .fb h3{font-size:15px;margin:0 0 6px}
.feeditem .fb p{font-size:12.5px;color:var(--ink-2);margin:8px 0 6px}
.feeditem .cutb{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:start;color:inherit;text-decoration:none}
.feeditem .cutb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.feeditem .cutb span{display:grid;gap:4px;font-size:12.5px}
.media{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:var(--r-sm);background:#000}
.feed-side .sw{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);padding:10px;margin-bottom:8px}
.feed-side .sw .t{font-size:12.5px;color:var(--ink)}
.feed-side .fol{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:12px}
.feed-side .fol form{margin-left:auto}
.pollpage{max-width:1100px;margin:0 auto}
.pollpage h1{font-size:26px;margin:6px 0 4px}
.pollpage .err{color:#FFB9C2}
.poll-opts{display:grid;gap:12px}
.poll-opts.n2{grid-template-columns:1fr 1fr}
.poll-opts.n3{grid-template-columns:1fr 1fr 1fr}
.poll-opts.n4{grid-template-columns:1fr 1fr}
.popt{border:1px solid var(--line);border-radius:var(--r);background:var(--surf-1);padding:8px;display:grid;gap:8px;align-content:start}
.popt.mine{border-color:var(--accent)}
.popt.won{border-color:var(--ok-line)}
.popt .pl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.popt .ltr{font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--surf-3);border-radius:var(--r-sm);padding:0 6px}
.popt .pct{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink)}
.popt .bar{height:5px;border-radius:99px;background:var(--surf-3);overflow:hidden}
.popt .bar i{display:block;height:100%;background:var(--ink-3)}
.popt.mine .bar i{background:var(--accent)}
.popt.won .bar i{background:var(--ok)}
@media (max-width:900px){.feedpage,.poll-opts.n2,.poll-opts.n3,.poll-opts.n4{grid-template-columns:minmax(0,1fr)}}

/* ---------- crew access (2026-09-29) ---------- */
.crewaccess .perm{width:100%;border-collapse:separate;border-spacing:0}
.crewaccess .perm th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.crewaccess .perm td{padding:7px 6px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.lv{display:inline-flex;justify-content:center;min-width:64px;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:var(--r-sm);border:1px solid var(--line);user-select:none}
.lv.can{cursor:pointer}
.lv.hidden{border-style:dashed;color:var(--ink-5)}
.lv.view{color:var(--ink-3);background:var(--surf-1)}
.lv.comment{color:var(--ink-2);background:var(--surf-2)}
.lv.edit{color:var(--ink);background:var(--surf-3);border-color:var(--surf-4)}
.lv.manage{color:var(--ink);background:var(--surf-4);font-weight:600}
.crewaccess .confirm{position:fixed;inset:0;background:rgba(3,5,8,.72);display:grid;place-items:center;z-index:50}
.crewaccess .confirm[hidden]{display:none}
.crewaccess .err{color:#FFB9C2}

/* ---- Ideas: an offered project, its locked parts, its applicants (2026-09-30) ---- */
.roles{display:flex;flex-wrap:wrap;gap:6px}
.role{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surf-2);color:var(--ink-2)}
.role.filled{color:var(--ink-4);text-decoration:line-through}
.hair.comes{grid-template-columns:repeat(5,1fr)}
.lk{display:inline-block;width:9px;height:8px;border:1.5px solid var(--accent-2);border-radius:2px;position:relative;margin:0 6px 0 1px;vertical-align:-1px}
.lk::before{content:"";position:absolute;left:0.5px;top:-5px;width:5px;height:4px;border:1.5px solid var(--accent-2);border-bottom:0;border-radius:4px 4px 0 0}
.lockband{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px dashed var(--accent-line);border-radius:var(--r);background:var(--accent-wash);margin-top:10px}
.lockband p{font-size:12.5px;color:var(--ink-2);flex:1;margin:0}
.lockband b{color:var(--ink)}
.blurred{color:var(--ink-4);font-style:italic}
.castc .ph{aspect-ratio:1;border-radius:var(--r-sm);background:var(--surf-2);display:grid;place-items:center;align-content:center;gap:4px;font-size:11px;color:var(--ink-4);text-align:center;padding:6px}
.castc.wide img,.castc.wide .ph{aspect-ratio:16/9}
.castc.locked .ph{background:repeating-linear-gradient(135deg,var(--surf-2) 0 8px,var(--surf-1) 8px 16px)}
.castc.locked .n{color:var(--ink-4)}
.boards{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.boards img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);display:block}
.cmt.sys{font-size:11.5px;color:var(--ink-4);font-style:italic;padding:7px 0}
.apps{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:calc(100vh - 60px)}
.alist{border-right:1px solid var(--line-soft);background:var(--surf-1)}
.atabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.atabs a{font-size:11.5px;padding:3px 8px;border-radius:var(--r);color:var(--ink-3);text-decoration:none}
.atabs a.on{background:var(--surf-3);color:var(--ink)}
.atabs .c{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-left:4px}
.arow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.arow:hover{background:var(--surf-2)}
.arow.on{background:var(--accent-wash);box-shadow:inset 2px 0 0 var(--accent)}
.arow .t{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.arow .s{display:block;font-size:11px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adet{padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-content:start}
.adet .who{display:flex;gap:12px;align-items:center}
.adet .who .nm{font-size:16px;font-weight:600;font-family:var(--ui)}
.adet .who .hd2{font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.hair.facts{grid-template-columns:repeat(4,1fr);margin-top:12px}
.facts .n{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
.facts .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.qq{font-size:11px;color:var(--ink-4);margin-top:10px}
.aa{font-size:12.5px;color:var(--ink-2);margin-top:2px;max-width:70ch}
a.sample{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:var(--r);padding:6px;background:var(--surf-1);text-decoration:none;color:inherit}
a.sample img,a.sample .th{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);display:block;background:var(--surf-2)}
a.sample b{display:block;font-size:12px;color:var(--ink)}
.decide{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);align-items:center}
.decide form{display:inline}
.adet .thread{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);display:flex;flex-direction:column;padding:0 12px 12px;align-self:start}
.adet .thread .side-head{padding:10px 0}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.area{display:flex;align-items:center;gap:6px;font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf-1);color:var(--ink-2);cursor:pointer}
.area:has(input:checked){border-color:var(--accent-line);color:var(--accent-2);background:var(--accent-wash)}
.area input{accent-color:var(--accent);margin:0}
.lockline{display:flex;align-items:center;gap:2px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r);font-size:12px;color:var(--ink-3)}
.pcard .looking{font-family:var(--mono);font-size:10.5px;color:var(--accent-2);margin-top:6px}
/* Discover: work shared in public while it's being made (2026-09-30) */
.pcard.wip .pic{display:block;position:relative}
.pcard.wip h3 a{color:inherit;text-decoration:none}
.pcard.wip .parts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pcard.wip .parts .tag{text-decoration:none}
.pcard.wip .parts .tag:hover{color:var(--ink);border-color:var(--surf-4)}

/* ---- a project's pages (2026-09-30) ---- */
.pg{--pg-accent:var(--accent)}
.pg-crumbs{max-width:1100px;margin:14px auto 0;padding:0 24px;font-size:12px;color:var(--ink-3)}
.pg-hero{position:relative;max-width:1100px;margin:14px auto 0;border-radius:var(--r);overflow:hidden;aspect-ratio:21/8;display:flex;align-items:flex-end;background:var(--surf-2)}
.pg-hero.small{aspect-ratio:21/6}
.pg-hero > img,.pg-hero-none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-hero-none{background:linear-gradient(150deg,hsl(var(--h,210) 30% 26%),var(--ground))}
.pg-hero .in{position:relative;width:100%;padding:22px 24px;background:linear-gradient(transparent,rgba(6,9,13,.9) 55%)}
.pg-hero .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-accent)}
.pg-hero .kick a{color:inherit}
.pg-hero h1{font-size:30px;margin-top:4px}
.pg-hero p{color:var(--ink-2);margin-top:6px;max-width:70ch}
.pg-hero .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.pg-hero .btn.pri{background:var(--pg-accent);border-color:var(--pg-accent)}
.pg-body{max-width:1100px;margin:0 auto;padding:6px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px}
.pg-body.one{grid-template-columns:minmax(0,1fr)}
.pg-sec{margin-top:22px}
.pg-sh{display:flex;align-items:center;gap:8px;margin-bottom:9px;border-bottom:1px solid var(--line-soft);padding-bottom:6px}
.pg-sh h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.pg-sh h3::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pg-accent);margin-right:8px;vertical-align:1px}
.pg-ed{font-size:11px;color:var(--ink-4);padding:0 4px;border-radius:var(--r-sm);cursor:pointer}
.pg-ed:hover{color:var(--accent-2);background:var(--surf-2)}
.pg-items.feature{display:grid;gap:10px}
.pg-items.row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px}
.pg-items.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pg-items.list{display:grid;gap:8px}
.pg-it{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);overflow:hidden;color:inherit;text-decoration:none;display:block}
.pg-it video,.pg-it > img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.pg-it .letter{display:grid;place-items:center;background:linear-gradient(150deg,hsl(var(--h,210) 30% 26%),var(--ground));color:rgba(255,255,255,.6);font-family:var(--disp);font-size:28px}
.pg-it .b{padding:8px 10px}
.pg-it .b b{display:block;font-size:13px}
.pg-it .b span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:2px}
.pg-it .b details{margin-top:6px;font-size:12px;color:var(--ink-2)}
.pg-it .b summary{cursor:pointer;color:var(--accent-2);font-size:11.5px}
.pg-it .cap{margin:0;padding:0 10px 9px;font-size:12.5px;color:var(--ink-2);font-style:italic;display:block}
.pg-it.card .portrait{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.pg-it .snd{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 10px}
.pg-it .snd .b{padding:0}
.pg-it .snd audio{width:100%;height:32px}
.pg-it .txt{padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.pg-it .txt b{display:block;color:var(--ink);margin-bottom:4px}
.pg-it .pg-ed.in{position:absolute;right:6px;top:6px}
.pg-it .ask{padding:12px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pg-it .ask .q{font-family:var(--ui);font-weight:600;font-size:14.5px}
.pg-items.feature .pg-it video,.pg-items.feature .pg-it > img{aspect-ratio:21/9}
.pg-items.list .pg-it{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center}
.pg-items.list .pg-it.sound,.pg-items.list .pg-it.text,.pg-items.list .pg-it.ask{display:block}
.pg-items.list .pg-it .cap{grid-column:2}
.pg-side{padding-top:22px}
.ep-page{margin-top:6px}
.fb.pgfeed{display:flex;gap:8px;align-items:center;text-decoration:none;color:inherit;flex-wrap:wrap}
.fb.pgfeed img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.fb.pgfeed span{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.popt-words{padding:14px 16px;font-size:14px;line-height:1.6;color:var(--ink-2);background:var(--surf-2);border-radius:var(--r);min-height:120px}
.pg-it .ask-opts{display:flex;gap:6px}
.pg-it .ask-opts img{width:88px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.pg-it .ask .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pg-it .fb-notes{border-top:1px solid var(--line-soft);padding:8px 10px;display:grid;gap:6px}
.pg-it .fb-n{font-size:12.5px;color:var(--ink-2)}
.pg-it .fb-n b{color:var(--ink);margin-right:4px}
.pg-it .fb-form{display:flex;gap:6px}
.pg-it .fb-form .inp{flex:1;font-size:12px;padding:5px 8px}

/* ---------- the one thread (2026-09-30): reactions, comments, the feed's tabs ---------- */
.rxbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px 12px;border-top:1px solid var(--line-soft);position:relative}
.rx{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;border:1px solid var(--line);background:var(--surf-2);font-size:12.5px;color:var(--ink-3);cursor:pointer;line-height:20px}
.rx .n{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums}
.rx:hover{border-color:var(--surf-4);color:var(--ink)}
.rx.me{border-color:var(--accent-line);background:var(--accent-wash);color:var(--accent-2)}
.rx.add{color:var(--ink-4);padding:1px 9px}
.rxadd{position:relative;display:inline-flex}
.rxpick{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:2px;padding:4px;background:var(--surf-3);border:1px solid var(--surf-4);border-radius:99px;box-shadow:0 10px 26px rgba(0,0,0,.5);z-index:20}
.rxpick[hidden]{display:none}
.rxpick button{width:30px;height:30px;border-radius:50%;font-size:16px;border:0;background:none;cursor:pointer}
.rxpick button:hover,.rxpick button.me{background:var(--surf-4)}
.rxwho{font-size:11.5px;color:var(--ink-4);margin-left:3px}
.rxn{margin-left:auto;font-size:11.5px;color:var(--ink-3);border:0;background:none;cursor:pointer;padding:2px 0}
.rxn:hover{color:var(--ink)}

.talk{padding:6px 12px 12px;border-top:1px solid var(--line-soft)}
.talk-h{display:flex;align-items:center;gap:10px;padding:6px 0 4px;flex-wrap:wrap}
.talk-h h3{font-size:13px}
.talk-rule{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-4)}
.talk-rule select{width:auto;padding:3px 6px;font-size:11.5px}
.talk-why{font-size:12px;color:var(--ink-4);padding:6px 0}
.tc{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;padding:7px 0}
.tc .av.sm{width:18px;height:18px;font-size:9px;margin-top:1px}
.tc.reply{margin-left:26px}
.tc.pinned{background:var(--accent-wash);border:1px solid rgba(245,165,36,.2);border-radius:var(--r);padding:8px}
.tc .bd{font-size:12.5px;color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere}
.tc .bd .who{color:var(--ink);font-weight:600;margin-right:5px;text-decoration:none}
.tc .bd .mk{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);border:1px solid var(--accent-line);border-radius:99px;padding:0 5px;margin-right:5px}
.tc .bd .tcode{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-right:5px;cursor:pointer}
.tc .bd.gone{color:var(--ink-4);font-style:italic}
.tc.hidden .bd{opacity:.6}
.tc .hid{font-size:11px;color:var(--ink-4);font-style:italic;margin-top:2px}
.tc .meta{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:10.5px;color:var(--ink-4);font-family:var(--mono);flex-wrap:wrap}
.tc .meta button{border:0;background:none;color:var(--ink-4);font:inherit;cursor:pointer;padding:0}
.tc .meta button:hover{color:var(--ink)}
.tc .meta .crx{border:1px solid var(--line);border-radius:99px;padding:0 6px;font-family:var(--ui-body)}
.tc .meta .crx.me{border-color:var(--accent-line);color:var(--accent-2)}
.tc .meta .crx.add{border-color:transparent;opacity:.55}
.tc .meta .pinw{color:var(--accent-2)}
.tc .ownbar{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tc .ownbar[hidden]{display:none}
.btn.danger{color:#FFB9C2}
.talk .mention,.talk a.mention{color:var(--accent-2);text-decoration:none}
.reftok{font-family:var(--mono);font-size:11px;color:var(--review);background:var(--review-wash);border-radius:var(--r-sm);padding:0 4px;text-decoration:none}
a.reftok:hover{text-decoration:underline}
.talk-more{display:block;border:0;background:none;color:var(--ink-3);font-size:11.5px;padding:3px 0 3px 26px;cursor:pointer}
.talk-more:hover{color:var(--ink)}
.talk-say{display:flex;align-items:flex-start;gap:8px;margin-top:6px;flex-wrap:wrap}
.talk-say .av.sm{width:18px;height:18px;font-size:9px;margin-top:7px}
.talk-in{position:relative;min-width:0}
.talk-say textarea.inp{min-height:0;height:32px;padding:6px 10px;font-size:12.5px;resize:none;line-height:1.4}
.talk-say .btn{margin-top:3px}
.talk-say .err{flex-basis:100%;color:#FFB9C2;padding-left:26px}
.talk-say .err:empty{display:none}
.talk-to{font-size:11px;color:var(--ink-4);margin-bottom:3px}
.talk-to[hidden]{display:none}
.talk-to button{border:0;background:none;color:var(--ink-4);cursor:pointer}
.mentions{position:absolute;left:0;bottom:calc(100% + 4px);width:260px;background:var(--surf-3);border:1px solid var(--surf-4);border-radius:var(--r);box-shadow:0 10px 26px rgba(0,0,0,.5);z-index:20;padding:4px}
.mentions[hidden]{display:none}
.mentions div{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--r-sm);font-size:12px;cursor:pointer}
.mentions div.on,.mentions div:hover{background:var(--surf-4)}
.mentions i{font-style:normal;color:var(--ink-4);font-size:11px;margin-left:auto}
.talk-under{margin-top:18px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1)}
.talk-under > .rxbar{border-top:0}
.pg-talk .rxbar{padding:6px 10px}
.pg-talk .talk{padding:4px 10px 10px}
.pg-talk .fb-ask{padding:8px 10px 0}
.idea-talk .talk{border-top:0;padding:10px 14px}
.ep-talk{margin:18px 0 0}

/* the feed */
.feedtabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;flex-wrap:wrap}
.feedtabs > a{padding:8px 12px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.feedtabs > a.on{color:var(--ink);border-bottom-color:var(--accent)}
.feedtabs .chips{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:6px}
.feedtabs .chip{text-decoration:none}
.feeditem{overflow:visible}
.feeditem .why{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:9px 12px 0}
.feeditem .why b{color:var(--review);font-weight:500}
.feeditem .fh .more{border:0;background:none;color:var(--ink-4);font-size:15px;line-height:1;padding:2px 5px;border-radius:var(--r-sm);cursor:pointer}
.feeditem .fh .more:hover{background:var(--surf-3);color:var(--ink)}
.feeditem .cutb.small{grid-template-columns:110px minmax(0,1fr)}
.feeditem .ask-opts{display:flex;gap:6px;margin:4px 0 8px}
.feeditem .ask-opts img{width:120px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.feeditem.fold{overflow:hidden}
.foldrow{display:flex;align-items:center;gap:10px;padding:10px 12px;color:inherit;text-decoration:none}
.foldrow .stack{display:flex}
.foldrow .stack .av{box-shadow:0 0 0 2px var(--surf-1)}
.foldrow .stack .av + .av{margin-left:-6px}
.foldrow .t{font-size:12.5px;color:var(--ink-2);min-width:0}
.foldrow .t b{color:var(--ink);font-weight:500}
.foldrow .when{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);white-space:nowrap}
.foldrow img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.feeditem.muted-row{padding:10px 12px;font-size:12px;color:var(--ink-3)}
.feeditem.muted-row button.lnk{border:0;background:none;color:var(--accent-2);cursor:pointer;font:inherit;padding:0}
.feed-side .fol .n{display:grid;min-width:0}
.feed-side .sw.premcard{display:block;text-decoration:none;color:inherit}
.feed-side .sw.premcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);margin-bottom:6px}
.feed-side .sw.chal .kick{display:block;margin-bottom:4px}
.feed-side .sw.chal .t a{color:var(--ink);text-decoration:none;font-weight:600}
.feed-side .sw{width:auto;height:auto;background:var(--surf-1);cursor:default;display:block}
.tc .meta .crxadd{position:relative;display:inline-flex}
.tc .meta .crxpick{position:absolute;left:0;bottom:calc(100% + 4px);display:flex;gap:2px;padding:3px;background:var(--surf-3);border:1px solid var(--surf-4);border-radius:99px;box-shadow:0 10px 26px rgba(0,0,0,.5);z-index:20}
.tc .meta .crxpick[hidden]{display:none}
.tc .meta .crxpick button{width:26px;height:26px;border-radius:50%;font-size:14px;font-family:var(--ui-body)}
.tc .meta .crxpick button:hover{background:var(--surf-4)}

/* ---------- messages (2026-09-30) ---------- */
/* One bordered panel in the Forum's bones: the conversations are the browse
   rail on the left (surf-1, the lit row accent-washed with its bar), the
   thread is the well, who it's with is a column on the right. In the studio
   it fills the frame at the same gutters as every other Hub page. */
.dm{display:grid;grid-template-columns:290px minmax(0,1fr) 260px;height:calc(100vh - 150px);min-height:520px;max-width:1240px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);background:var(--ground);overflow:hidden}
.dm.solo{grid-template-columns:290px minmax(0,1fr)}
body.embed main.page > .dm{max-width:none;margin:22px 26px 26px;height:calc(100vh - 48px);border-radius:0}
.dm-list{border-right:1px solid var(--line);background:var(--surf-1);display:flex;flex-direction:column;min-height:0}
.dm-lh{display:flex;align-items:center;gap:8px;padding:12px 14px 10px}
.dm-lh .g{flex:1;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.dm-tabs{padding:0 14px 10px;border-bottom:1px solid var(--line)}
.dm-tabs .seg{display:flex}
.dm-tabs .seg a{flex:1;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.dm-tabs .c{font-family:var(--mono);font-size:10px;color:var(--accent-2)}
.dm-rows{overflow:auto;flex:1}
.dm-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px 14px 10px 12px;border-left:2px solid transparent;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;align-items:start}
.dm-row:hover{background:var(--surf-2)}
.dm-row.on{background:var(--accent-wash);border-left-color:var(--accent)}
.dm-row .av{width:30px;height:30px;font-size:12px}
.dm-row .mid{display:grid;gap:1px;min-width:0}
.dm-row .nm{border:0;font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row.unread .nm,.dm-row.on .nm{color:var(--ink);font-weight:600}
.dm-row .ab{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row .pv{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row.unread .pv{color:var(--ink)}
.dm-row .rt{display:grid;justify-items:end;gap:6px;padding-top:2px}
.dm-row .tm{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);white-space:nowrap}
.dm-row .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dm-row .grp{position:relative;width:30px;height:30px}
.dm-row .grp .av{position:absolute;width:20px;height:20px;font-size:9px}
.dm-row .grp .av:first-child{left:0;top:0}
.dm-row .grp .av:nth-child(2){right:0;bottom:0;box-shadow:0 0 0 2px var(--surf-1)}
.dm-row.on .grp .av:nth-child(2){box-shadow:0 0 0 2px var(--surf-2)}
.dm-empty{padding:18px 14px;font-size:12px;color:var(--ink-4);line-height:1.6}
.dm-thread{display:flex;flex-direction:column;min-height:0;min-width:0}
.dm-th{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);min-height:62px;box-sizing:border-box}
.dm-th .t{display:grid;gap:2px;min-width:0}
.dm-th h3{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-th .s{font-family:var(--mono);font-size:10px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-th .s:empty{display:none}
.dm-th form{margin:0}
.dm-about{display:flex;align-items:center;gap:10px;margin:14px 20px 0;padding:8px 10px;background:var(--surf-1);border:1px solid var(--line-soft);border-radius:var(--r)}
.dm-about img{width:56px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.dm-about > span{display:grid;min-width:0;font-size:12.5px;flex:1}
.dm-about .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.dm-about b{font-weight:600;color:var(--ink)}
.dm-about.in-dlg{margin:0}
.dm-app{margin:10px 20px 0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);display:grid;gap:7px;font-size:12.5px;color:var(--ink-2);max-height:180px;overflow:auto}
.dm-app .l{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.dm-req{margin:14px 20px 0;padding:12px 14px;border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--r)}
.dm-req p{font-size:12.5px;color:var(--ink-2);margin:0}
.dm-req .row{margin-top:10px;gap:6px}
.dm-req form{margin:0}
.dm-msgs{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.dm-m{display:flex;gap:8px;max-width:72%;align-items:flex-end;position:relative}
.dm-m .av.sm{width:22px;height:22px;font-size:9px;flex:none}
.dm-m.mine{margin-left:auto;flex-direction:row-reverse}
.dm-b{background:var(--surf-2);border:1px solid var(--line);border-radius:10px 10px 10px 3px;padding:8px 12px;font-size:13px;line-height:1.5;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.dm-m.mine .dm-b{background:var(--accent-wash);border-color:var(--accent-line);border-radius:10px 10px 3px 10px}
.dm-b .who{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.dm-b .gone{color:var(--ink-4);font-style:italic}
.dm-b a{color:var(--accent-2)}
.dm-t{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);white-space:nowrap;padding-bottom:3px}
.dm-x{border:0;background:none;color:var(--ink-5);cursor:pointer;font-size:13px;opacity:0;padding-bottom:2px}
.dm-m:hover .dm-x{opacity:1}
.dm-x:hover{color:var(--ink)}
.dm-sys{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-4);text-align:center;max-width:80%;margin:6px 0}
.dm-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--r);padding:8px;margin-top:6px;min-width:300px}
.dm-card img,.dm-card .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--surf-3);display:block}
.dm-card .in{display:grid;gap:2px;min-width:0}
.dm-card .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.dm-card a{color:var(--ink);text-decoration:none}
.dm-card .s{font-size:11px;color:var(--ink-4)}
.dm-card .row{margin-top:5px;gap:5px;flex-wrap:wrap}
.dm-wait{padding:0 20px 6px}
.dm-say{display:flex;gap:8px;align-items:flex-end;padding:12px 20px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.dm-say textarea.inp{flex:1;min-height:0;height:34px;resize:none;padding:7px 10px;font-size:13px}
.dm-say .btn{height:34px}
.dm-say .err{flex-basis:100%;color:#FFB9C2}
.dm-say .err:empty{display:none}
.dm-none{margin:auto;text-align:center;max-width:44ch;padding:30px;display:grid;justify-items:center;gap:0}
.dm-none .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surf-2);border:1px solid var(--line);color:var(--ink-3);margin-bottom:12px}
.dm-none h3{font-family:var(--ui);font-size:15px;font-weight:600}
.dm-none p{color:var(--ink-3);font-size:13px;margin:6px 0 16px}
.dm-side{border-left:1px solid var(--line);padding:18px 16px;overflow:auto}
.dm-side .who{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line-soft);display:grid;justify-items:center;gap:4px}
.dm-side .who .av.lg{width:56px;height:56px;font-size:20px;margin-bottom:4px}
.dm-side .who h3{font-family:var(--ui);font-size:15px;font-weight:600}
.dm-side .who h3 a{color:var(--ink);text-decoration:none}
.dm-side .who h3 a:hover{color:var(--accent-2)}
.dm-side .who p{font-size:11.5px;color:var(--ink-3);margin:0}
.dm-side .sec{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:16px 0 6px}
.dm-side .li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);padding:5px 8px;margin:0 -8px;border-radius:var(--r);text-decoration:none}
.dm-side .li:hover{background:var(--surf-2);color:var(--ink)}
.dm-side .acts{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.dm-side .acts form{margin:0}
.dm-side .acts .btn{width:100%;justify-content:flex-start}
.dm-side .acts .btn.danger{background:none;border-color:transparent;color:#FFB9C2}
.dm-side .acts .btn.danger:hover{background:var(--stale-wash);border-color:rgba(242,86,106,.32)}
.dm-pick{display:grid;text-align:left;width:100%;padding:8px 10px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-2);color:var(--ink);cursor:pointer;gap:2px}
.dm-pick:hover{border-color:var(--surf-4)}
.dm-rpick{display:grid;gap:5px;max-height:170px;overflow:auto;font-size:12px;color:var(--ink-2)}
.hub-me .dmb{margin-right:-4px}
/* New message (2026-10-01): the picker. A face, a name, what you share, and
   how your message reaches them: their inbox, a request, or not at all */
.modal.pk form{display:flex;flex-direction:column;min-height:0;max-height:inherit}
.modal.pk .mb{min-height:0}
.modal.pk .mf .hint{color:var(--ink-3);min-width:0}
.modal.pk .err{color:#FFB9C2}
.modal.pk .err:empty{display:none}
.pk-to{display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r);padding:5px 7px;min-height:36px}
.pk-to:focus-within{border-color:var(--accent-line)}
.pk-to .chips{display:contents}
.pk-to input{flex:1;min-width:120px;background:none;border:0;outline:0;color:var(--ink);font-size:13px;font-family:inherit;padding:2px 3px}
.pk-to input::placeholder{color:var(--ink-4)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 4px 2px 3px;border-radius:99px;background:var(--surf-4);border:1px solid var(--line);font-size:12px;color:var(--ink)}
.chip .av{width:18px;height:18px;font-size:9px}
.chip button{border:0;background:none;cursor:pointer;color:var(--ink-4);font-size:13px;line-height:1;padding:0 3px}
.chip button:hover{color:var(--ink)}
.pk-list{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--ground);overflow-y:auto;height:min(44vh,400px)}
.pk-g{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:9px 11px 4px}
.pk-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:5px 11px;border:0;border-left:2px solid transparent;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.pk-row:hover:not(:disabled){background:var(--surf-2)}
.pk-row .av{width:30px;height:30px;font-size:12px}
.pk-row .mid{display:grid;min-width:0}
.pk-row .nm{border:0;font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-row .sb{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-row .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-4);text-align:right}
.pk-row .st.request{color:var(--review);border:1px solid rgba(122,162,247,.32);background:var(--review-wash);border-radius:99px;padding:1px 7px;text-transform:uppercase;letter-spacing:.08em}
.pk-row.on{background:var(--accent-wash);border-left-color:var(--accent)}
.pk-row.on .st::after{content:" ✓";color:var(--accent-2);font-size:12px}
.pk-row:disabled{cursor:default}
.pk-row:disabled .av{opacity:.42}
.pk-row:disabled .nm,.pk-row:disabled .sb{color:var(--ink-4)}
.pk-row:disabled .st{max-width:150px;line-height:1.35}
.pk-row .grp{position:relative;width:30px;height:30px}
.pk-row .grp .av{position:absolute;width:20px;height:20px;font-size:9px}
.pk-row .grp .av:first-child{left:0;top:0}
.pk-row .grp .av:nth-child(2){right:0;bottom:0;box-shadow:0 0 0 2px var(--ground)}
.pk-none{padding:16px 12px;font-size:12px;color:var(--ink-4)}
/* a request: what you share with them, and nothing in it to press */
.dm-req .share{display:grid;gap:2px;margin-top:10px;padding-top:9px;border-top:1px solid var(--accent-line);font-size:12.5px;color:var(--ink)}
.dm-req .share .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dm-held{margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-4)}
.dm-hid{margin-top:6px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surf-1);padding:14px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-4);text-align:center}
/* Settings, Privacy */
.radios{display:grid;gap:6px}
.radios .radio{width:100%;text-align:left;background:none;color:inherit;font:inherit}
.radios .radio .t{display:block;font-size:13px;color:var(--ink)}
.radios .radio .h{display:block;font-size:11.5px;color:var(--ink-4);margin-top:2px;max-width:62ch}
.always{display:flex;gap:9px;align-items:flex-start;padding:9px 11px 0;font-size:12.5px;color:var(--ink-3)}
.always .tag{flex:none}
/* your own followers and following (only you see them), and "followed by" on a page */
.flw{margin-top:8px}
.flw-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
.flw-row:first-child{border-top:0}
.flw-row .mid{display:grid;min-width:0;flex:1}
.flw-row .nm{border:0;font-size:13px;color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flw-row .sb{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flw-row form{margin:0}
.prof-stats a{color:inherit;text-decoration:none}
.prof-stats a:hover b{color:var(--accent-2)}
.prof-by{padding:6px 22px 0;font-size:12px;color:var(--ink-3)}
/* on a phone the dialog is the whole screen: a list of people needs the room */
@media (max-width:640px){
  dialog.modal.pk{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .modal.pk form{height:100%}
  .modal.pk .mb{flex:1;grid-template-rows:auto minmax(0,1fr)}
  .pk-list{height:auto;min-height:120px}
  .modal.pk .mf{flex-wrap:wrap}
  .modal.pk .mf .hint{flex-basis:100%}
  .pk-to input{font-size:16px}
}
@media (max-width:900px){.dm,.dm.solo,body.embed main.page > .dm{grid-template-columns:minmax(0,1fr);height:auto}.dm-list{max-height:40vh}.dm-side{border-left:0;border-top:1px solid var(--line-soft)}}

/* notification settings (2026-09-30) */
.ntf{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;margin-top:10px}
.ntf-side ul{margin:6px 0 8px;padding-left:16px;font-size:12.5px;color:var(--ink-2);display:grid;gap:3px}
.ntf-side .quiet{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ntf-side .quiet select{width:auto;padding:3px 6px;font-size:12px}
.ntf-side .mutes{display:flex;gap:6px;flex-wrap:wrap}
.ntf-side .mutes .tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 7px}
.ntf-side .mutes button{border:0;background:none;color:var(--ink-4);cursor:pointer;padding:0}
.ntf-side .mutes button:hover{color:var(--ink)}
@media (max-width:900px){.ntf{grid-template-columns:minmax(0,1fr)}}

/* a person's page, a portfolio (2026-09-30) */
.prof{max-width:1100px;margin:0 auto}
.prof-band{height:110px;border-radius:var(--r);background:linear-gradient(120deg,var(--surf-3),var(--ground) 55%,var(--surf-2))}
.prof-band.tone-a{background:linear-gradient(120deg,#22303f,var(--ground) 55%,#1c2a33)}
.prof-band.tone-b{background:linear-gradient(120deg,#35263a,var(--ground) 55%,#2a2230)}
.prof-band.tone-c{background:linear-gradient(120deg,#1f3534,var(--ground) 55%,#23303a)}
.prof-band.tone-d{background:linear-gradient(120deg,#3a3020,var(--ground) 55%,#2a2a22)}
.prof-head{display:flex;align-items:flex-end;gap:16px;padding:0 22px;margin-top:-30px;flex-wrap:wrap}
.prof-head .av.xl{box-shadow:0 0 0 4px var(--ground)}
.prof-head h1{font-size:24px}
.prof-head .muted{font-size:12.5px;margin:0}
.prof-about{margin:4px 0 0;font-size:13px;color:var(--ink-2);max-width:62ch}
.prof-head .acts{display:flex;gap:6px;align-items:center;padding-bottom:4px}
.prof-head .fm{position:relative}
.prof-open{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 22px 0}
.prof-open .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.skill{font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid var(--ok-line);background:var(--ok-wash);color:#9BE8C6}
.prof-stats{display:flex;gap:20px;flex-wrap:wrap;padding:12px 22px 0;font-size:12px;color:var(--ink-3)}
.prof-stats b{font-family:var(--mono);color:var(--ink);font-weight:500;margin-right:4px;font-variant-numeric:tabular-nums}
.prof-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-soft);margin:16px 22px}
.prof-tabs a{padding:7px 12px;font-size:12.5px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.prof-tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.prof-tabs .c{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-left:5px}
.prof-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding:0 22px 24px}
.prof-body .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prof-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.prof-posts a{display:grid;gap:4px;color:var(--ink-3);font-size:11.5px;text-decoration:none}
.prof-posts img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.prof .credits td.role{color:var(--ink);white-space:nowrap}
.prof .credits tr.dim td{opacity:.5}
.prof .idea-row{display:grid;gap:3px;padding:10px 12px;margin-bottom:8px;text-decoration:none;color:inherit}
.prof .act-row{padding:9px 0;border-bottom:1px solid var(--line-soft)}
.prof .act-row p{margin:3px 0 0;font-size:12.5px;color:var(--ink-2)}
.prof-side .fol{display:grid;gap:1px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.prof-side .fol:last-child{border:0}
.pins-pick{display:grid;gap:3px;max-height:160px;overflow:auto}
@media (max-width:900px){.prof-body{grid-template-columns:minmax(0,1fr)}.prof-body .grid3,.prof-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* search, and Discover's rows (2026-09-30) */
.srch{max-width:1100px;margin:0 auto}
.srch-box{display:flex;gap:8px;margin-bottom:12px;max-width:620px}
.srch-box .inp{font-size:14px;padding:8px 12px}
.srch .filters.sub{margin-top:-6px}
.srch .people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.person-card{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);padding:12px}
.person-card .top{display:flex;gap:10px;align-items:center}
.person-card .top a{color:var(--ink);text-decoration:none}
.person-card .skills{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}
.pg-hit{display:grid;gap:2px;padding:10px 12px;margin-bottom:8px;text-decoration:none;color:inherit}
.drow{margin-bottom:22px}
.drow-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.drow-h h2{font-size:17px}
.drow-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px}
@media (max-width:900px){.srch .people{grid-template-columns:minmax(0,1fr)}}

/* challenges (2026-09-30) */
.chal-page,.chal-list{max-width:1100px;margin:0 auto}
.chead{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-bottom:18px}
.chead h1{font-size:26px;margin:6px 0}
.chead p{color:var(--ink-2);font-size:13px;max-width:66ch}
.chead .rules .li{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-3)}
.chead .rules .li:last-child{border:0}
.chead .rules .li b{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:11px;text-align:right}
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ent{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);overflow:hidden}
.ent .pic{display:block;position:relative}
.ent .pic img,.ent .pic .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surf-3)}
.ent .dur{position:absolute;left:7px;bottom:5px;font-family:var(--mono);font-size:10px;color:var(--ink);background:rgba(6,9,13,.6);padding:0 4px;border-radius:var(--r-sm)}
.ent .t{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:var(--ink-3)}
.ent .t .v{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);border:0;background:none;cursor:pointer;white-space:nowrap}
.ent.pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ent.pick .t .v{color:var(--accent-2)}
.winners{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.winners .w{display:flex;gap:8px;align-items:center;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surf-1);padding:6px 10px 6px 6px;font-size:12px;color:var(--ink-2);text-decoration:none}
.winners .w img{width:56px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.winners .w b{font-family:var(--mono);color:var(--accent-2);font-weight:500}
.chal-card{display:grid;gap:4px;padding:14px;margin-bottom:10px;text-decoration:none;color:inherit}
.chal-card h2{font-size:18px}
.chal-card p{margin:0;color:var(--ink-2);font-size:13px}
.chal-past{padding:10px 0;border-bottom:1px solid var(--line-soft)}
@media (max-width:900px){.chead{grid-template-columns:minmax(0,1fr)}.entries{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* a premiere's room (2026-09-30) */
.prem{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;max-width:1240px;margin:0 auto;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--ground);min-height:calc(100vh - 160px)}
.prem-main{padding:16px 20px;min-width:0}
.prem-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;margin-top:8px}
.prem-stage video,.prem-stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.prem-stage .bg.none{background:linear-gradient(135deg,var(--surf-3),var(--ground))}
.prem-over{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(6,9,13,.58);z-index:2;padding:16px}
.prem-over h1{font-size:26px;margin:6px 0}
.prem-over .kick{display:block}
.prem .count{display:flex;gap:6px;justify-content:center;margin:12px auto 10px;width:320px;max-width:100%}
.prem .count div{flex:1;background:rgba(23,32,41,.88);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:5px 0}
.prem .count b{display:block;font-family:var(--mono);font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.prem .count span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.prem-stage .live{position:absolute;top:10px;left:10px;z-index:3}
.prem-join{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.prem-back{position:absolute;right:10px;top:10px;z-index:3}
.prem-back[hidden]{display:none}
.floaters{position:absolute;right:0;bottom:30px;width:40%;height:60%;pointer-events:none;z-index:3}
.floaters span{position:absolute;bottom:0;font-size:22px;animation:rise 3s ease-out forwards}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-160px);opacity:0}}
.prem .scrub{height:4px;background:var(--surf-3);border-radius:2px;margin-top:8px;overflow:hidden}
.prem .scrub i{display:block;height:100%;width:0;background:var(--accent)}
.prem-meta{display:flex;align-items:center;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
.prem-meta h2{font-size:18px}
.prem-rx{display:flex;gap:4px}
.prem-chat{border-left:1px solid var(--line-soft);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 160px)}
.prem-chat .hd{padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.prem-chat .hd h3{font-size:13px}
.prem-chat .body{flex:1;overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.prem-chat .ln{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.prem-chat .ln b{color:var(--ink);font-weight:600;margin-right:2px}
.prem-chat .ln.host b{color:var(--accent-2)}
.prem-chat .ln .tc{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-right:5px}
.prem-chat .foot{padding:8px 12px;border-top:1px solid var(--line-soft)}
.prem-chat .foot .err{color:#FFB9C2}
@media (max-width:900px){.prem{grid-template-columns:minmax(0,1fr)}.prem-chat{border-left:0;border-top:1px solid var(--line-soft);max-height:50vh}}
@media (prefers-reduced-motion:reduce){.floaters span{animation:none;opacity:0}}
.prem-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;margin-bottom:10px;border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--r)}
.prof-head .grow,.prof-head .acts{padding-top:36px}
.talk.stale .talk-h h3::after{content:" · new";color:var(--review);font-family:var(--mono);font-size:10px}

/* The staff pages' own row (2026-09-30): Pulse, Reports, Limits, Challenges
   and the admin, one click apart. Under the header, the same on every page. */
.staffnav{display:flex;align-items:center;gap:2px;padding:8px 20px;border-bottom:1px solid var(--line-soft);background:var(--surf-1);overflow-x:auto;max-width:1360px;margin-inline:auto}
.staffnav .sn-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-right:10px}
.staffnav a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r);font-size:13px;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.staffnav a:hover{color:var(--ink);background:var(--surf-2)}
.staffnav a.on{color:var(--ink);background:var(--surf-3)}
.staffnav .sn-n{font-family:var(--mono);font-size:10.5px;padding:0 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.staffnav .grow{flex:1}
.staffnav .sn-admin{border:1px solid var(--line)}
@media (max-width:560px){.staffnav{padding:6px 10px;gap:0}.staffnav .sn-h{display:none}.staffnav a{padding:5px 8px}}
/* the staff's own address (`templates/staff/base.html`): the hub's top bar with nothing of the hub's in it */
.staff-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:2px 7px;border-radius:99px;white-space:nowrap}
.staffside .hub-top .in{gap:10px}
.staffside .hub-me{margin-left:auto;gap:4px}
.staffside .staff-who{font-size:12.5px;color:var(--ink-3);margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.staffside .staff-tag{order:1}
@media (max-width:560px){.staffside .staff-who{display:none}}
@media (max-width:900px){.staffside .hub-top .in{padding-bottom:10px}}

/* ---------- phones (2026-09-30) ----------
   Most people will meet the hub on a phone, so every web page is laid out
   for one, checked page by page at 390px. The studio frames these pages on
   a desk and never reaches these widths. Layout only: the tokens, type and
   components are the desk's, and nothing here hides something a person
   needs - a row that doesn't fit scrolls sideways or wraps instead. */
.hub-me .srch-btn{display:none}
.show-body{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px}
.idea-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-top:10px}
.dm-back,.dm-info,.dm-close{display:none}
.authcard{width:min(420px,100%)}
/* a cut or share with no picture: its words take the whole row */
.feeditem .cutb > span:only-child{grid-column:1/-1}
/* a board cell's words sit inside its border, not against it */
.cell > p{padding:0 8px 8px}
/* pages meant narrower than the frame keep their width: main.page > .pad
   is more specific than their own class, and stretched them to 1360px */
main.page > .pad:is(.feedpage,.pollpage,.srch,.chal-page,.chal-list){max-width:1100px}
/* a show with no poster yet: its words take the hero, not half of it */
.show-hero:has(> div:first-child:empty){grid-template-columns:minmax(0,1fr)}
.show-hero > div:first-child:empty{display:none}
/* settings read as a form, not a banner: on a wide screen a field 1100px
   long is hard to scan back from its label */
.set .main{max-width:920px}
/* a pill is one thing: it never breaks across lines */
.pill{white-space:nowrap}
/* the projects to pin read as choices, not field labels */
.pins-pick label{display:flex;align-items:center;gap:8px;padding:3px 0;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.limits .inp[name=reactions]{width:240px;max-width:100%}
/* a person in a credit line keeps their face beside their name */
.cr{white-space:nowrap}

/* a thread sized by where it sits, not by the screen: inside a narrow card
   (a cast member two across on a phone) its rule, box and button stack */
.talk{container-type:inline-size}
@container (max-width:300px){
  .talk-h{gap:4px}
  .talk-rule{margin-left:0;flex:1 1 100%;flex-wrap:wrap;min-width:0}
  .talk-rule select{flex:1 1 100%;width:100%;min-width:0}
  .talk-say textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .talk-say .av.sm{display:none}
  .talk-say .talk-in{flex:1 1 100%}
  .talk-say .btn{margin:0 0 0 auto}
  .talk-say .err{padding-left:0}
  .tc.reply{margin-left:12px}
  .talk-more{padding-left:0}
  .mentions{width:auto;right:0}
}

@media (max-width:900px){
  /* the header: logo and icons, then the sections as one row that scrolls,
     fading at the edge so the ones past it read as more */
  .hub-me .srch-btn{display:grid}
  .hub-nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:24px}
  .hub-nav a{padding:8px 10px}
  .hub-me{gap:4px}
  .hub-me .bell{width:36px;height:36px}
  .hub-me .dmb{margin-right:0}

  .show-body,.idea-top,.pg-body,.share-grid,.adet,.apps{grid-template-columns:minmax(0,1fr)}
  .grid2c,.ep,.shotpage,.show-hero,.set,.modq{grid-template-columns:minmax(0,1fr)!important}
  .alist{border-right:0;border-bottom:1px solid var(--line-soft)}

  /* a side nav (settings, the forum) becomes one row that scrolls, its group
     names kept as quiet labels between the links */
  .set nav{flex-wrap:nowrap;overflow-x:auto;align-items:center;gap:2px;padding:8px 10px;scrollbar-width:none}
  .set nav::-webkit-scrollbar{display:none}
  .set nav .g{width:auto;flex:none;padding:0 4px 0 10px;white-space:nowrap}
  .set nav .g:first-child{padding-left:4px}
  .set nav a{flex:none;white-space:nowrap;padding:7px 10px}
  .fside a .n{margin-left:6px}
  .set,.modq{align-content:start;min-height:0}
  .set .main{padding:20px 16px 28px}

  /* a project's page */
  .pg-crumbs{padding:0 16px}
  .pg-hero{aspect-ratio:auto;min-height:260px;margin-top:10px;border-radius:0}
  .pg-hero.small{min-height:200px}
  .pg-hero .in{padding:60px 16px 18px}
  .pg-hero h1{font-size:26px}
  .pg-body{padding:0 16px 32px;gap:0}
  .pg-side{padding-top:18px;border-top:1px solid var(--line-soft);margin-top:22px}
  .pg-items.row{grid-auto-columns:minmax(200px,72%);scroll-snap-type:x mandatory}
  .pg-items.row > *{scroll-snap-align:start}
  .pg-items.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-items.list .pg-it{grid-template-columns:110px minmax(0,1fr)}
  .pg-items.grid > .sound,.pg-items.grid > .text,.pg-items.grid > .ask{grid-column:1/-1}

  /* action rows wrap; the studio's door is for a desk that has the app */
  .actions .more{flex-wrap:wrap;margin-left:0}
  .open-studio{display:none}

  /* messages: the list, or one conversation filling the screen - never
     both stacked. Who it's with opens from the thread's About. */
  .dm,.dm.solo{height:auto;min-height:0;border:0;border-radius:0}
  .dm-list{max-height:none}
  /* bare /messages opens the newest thread on a desk; on a phone it is the
     list, so the list is always one tap back */
  .dm.one > .dm-list,.dm:not(.one) > .dm-thread,.dm:not(.one) > .dm-side{display:none!important}
  .dm:not(.one) .dm-row.on{background:none;border-left-color:transparent}
  .dm.one{height:calc(100dvh - 92px);min-height:420px;display:flex;flex-direction:column}
  .dm.one > .dm-thread{flex:1;min-height:0}
  .dm-say textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dm-side{display:none;border:0}
  .dm-side:target{display:block;position:fixed;inset:0;z-index:30;background:var(--ground);padding:60px 18px 24px;overflow:auto}
  .dm-back{display:grid;place-items:center;width:32px;height:32px;margin-left:-8px;font-size:26px;line-height:1;color:var(--ink-2);flex:none}
  .dm-info{display:inline-flex}
  .dm-close{display:block;position:fixed;top:0;left:0;right:0;height:48px;line-height:48px;padding:0 16px;background:var(--surf-1);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
  .dm-th{padding:10px 14px;gap:8px;min-height:56px}
  .dm-th .av.lg{width:28px;height:28px}
  .dm-msgs{padding:14px}
  .dm-m{max-width:86%}
  .dm-say{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .dm-card{min-width:0;grid-template-columns:90px minmax(0,1fr)}
  .dm-about,.dm-req,.dm-app{margin-inline:14px}
}

@media (max-width:640px){
  .pad{padding:18px 16px 28px}
  .page-head{margin-bottom:14px}
  .page-head h1,h2.ph{font-size:23px}

  /* forms: 16px keeps an iPhone from zooming in on every field it focuses */
  .inp,input[type=text],input[type=email],input[type=search],input[type=number],input[type=url],select,textarea{font-size:16px!important;font-family:inherit}
  .talk-rule select,.ntf-side .quiet select{padding:4px 6px}
  .talk-say textarea.inp,.dm-say textarea.inp{height:40px;padding:8px 10px}
  .dm-say .btn{height:40px}

  /* touch: controls a thumb can hit */
  .btn{min-height:36px;padding:7px 12px}
  .btn.sm{min-height:32px;padding:5px 10px;font-size:12px}
  .rx{line-height:26px;padding:1px 10px}
  .rxn,.pg-ed{padding:6px 4px}
  .tc .meta{gap:14px}
  .tc .meta button{padding:4px 0}
  .chip{padding:6px 12px;font-size:12.5px}

  /* filter chips: one row that scrolls, rather than four rows above the work */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
  .filters::-webkit-scrollbar{display:none}
  .filters > *{flex:none;white-space:nowrap}
  .filters .sep{margin:0 4px}

  /* stats two across rather than one tall stack; any other hairline grid
     stacks */
  .grid2c,.hair{grid-template-columns:minmax(0,1fr)!important}
  .hair:has(> .stat){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat .n{font-size:18px}

  /* tables scroll sideways when they must, but their words wrap first */
  table.t{white-space:normal}
  table.t .mono{white-space:nowrap}
  table.t th{vertical-align:bottom}
  table.t td{min-width:64px}
  /* a table that scrolls is a block, so its rows would shrink to their
     words; they take the full width, and only grow past it when they must */
  table.t:not(.devs):not(.earns) > tbody{display:table;width:100%}
  table.t select.inp{width:auto;min-width:112px}
  table.ftopics td:first-child{min-width:0}
  table.t td:has(> .av){white-space:nowrap}
  /* connected devices: a card each - name and kind, what it may do, then
     its buttons - rather than five columns a phone can't hold */
  table.devs,table.devs tbody{display:block}
  table.devs tr:first-child:has(th){display:none}
  table.devs tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  table.devs td{display:block;padding:0;border:0;min-width:0}
  table.devs td:nth-child(2){grid-column:2;grid-row:1;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
  table.devs td:nth-child(3),table.devs td:nth-child(5){grid-column:1/-1}
  table.devs td:nth-child(4):not(:empty)::before{content:"Last seen ";color:var(--ink-4)}
  table.devs td:nth-child(5){text-align:left!important;margin-top:6px}
  table.devs td[colspan]{grid-column:1/-1}
  /* earnings: the shot and what it earned, then when, its size and state */
  table.earns,table.earns tbody{display:block}
  table.earns tr:first-child:has(th){display:none}
  table.earns tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft)}
  table.earns td{display:block;padding:0;border:0;min-width:0}
  table.earns td.s{grid-column:1/3;grid-row:1;color:var(--ink)}
  table.earns td.num{grid-column:3;grid-row:1}
  table.earns td.w{grid-column:1;grid-row:2}
  table.earns td.z{grid-column:2;grid-row:2;font-size:11px;color:var(--ink-4)}
  table.earns td.st{grid-column:3;grid-row:2;justify-self:end}
  table.earns td[colspan="5"]{grid-column:1/-1}
  .row:has(> .h-sec.grow){flex-wrap:wrap;row-gap:4px}
  .row > .h-sec.grow{flex:1 1 100%}
  .ftitle{overflow-wrap:anywhere}

  /* a settings row: its words take the width, the control drops under */
  .setrow:has(.seg,.inp,select){flex-wrap:wrap;row-gap:10px}
  .setrow:has(.seg,.inp,select) > :first-child{flex:1 1 100%}
  .setrow > .r{margin-left:0;flex-wrap:wrap}
  .seg{max-width:100%;overflow-x:auto}
  .seg span,.seg a{flex:none;white-space:nowrap;padding:7px 11px}

  /* heads with a title and things beside it */
  .row > h2.ph.grow{flex:1 1 100%}
  .share-head{flex-wrap:wrap;gap:10px}
  .share-head > .row{margin-left:0}
  .share-head h1{font-size:24px}
  .sharepage{padding:18px 16px 32px}
  .show-hero h1{font-size:28px}
  .eprow{grid-template-columns:112px minmax(0,1fr);gap:12px}
  .eprow > :last-child{grid-column:2;justify-self:start}
  .idea-top h2{font-size:24px!important}

  /* the episode and shot pages */
  .ep-main{padding:12px 16px 18px}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs span{flex:none;white-space:nowrap;padding:9px 11px}
  .compose,.side-head,.cmts{padding-inline:16px}

  /* the feed and polls */
  .feeditem .cutb{grid-template-columns:120px minmax(0,1fr)}
  .feeditem .fh .when,.foldrow .when{white-space:nowrap}
  .shotinfo > div:first-child{max-width:none}
  .feeditem .ask-opts,.pg-it .ask-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
  .feeditem .ask-opts img,.pg-it .ask-opts img{width:100%}
  .poll-opts.n2,.poll-opts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poll-opts.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .popt{padding:6px}
  .popt .pl{flex-wrap:wrap;gap:4px 6px;font-size:12px}
  .pollpage h1{font-size:23px}

  /* people, challenges, sign-in */
  /* a person's head: the avatar over the band with the buttons beside it,
     then who they are across the whole width */
  .prof-band{height:84px;border-radius:0}
  .prof-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px 12px;padding:0 16px;margin-top:-32px}
  .prof-head .av.xl{width:72px;height:72px;font-size:26px}
  .prof-head .acts{padding:0;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
  .prof-head .grow{grid-column:1/-1;grid-row:2;padding:0}
  .prof-head h1{font-size:23px;line-height:1.2}
  .prof-head .muted{font-family:var(--mono);font-size:11px;margin-top:2px}
  .prof-about{font-size:13.5px;margin-top:8px}
  .prof-stats{gap:6px 16px}
  .prof-open,.prof-stats{padding-inline:16px}
  .prof-tabs{margin:14px 16px;overflow-x:auto;scrollbar-width:none}
  .prof-tabs a{flex:none;white-space:nowrap}
  .prof-body{padding:0 16px 24px}
  .prof-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entries{grid-template-columns:minmax(0,1fr)}
  /* a show that needs renders: picture, then its words, then the button */
  .sup{align-items:stretch;gap:10px}
  .sup > .grow{flex:1 1 100%}
  .sup > .grow .row:first-child{flex-wrap:wrap;gap:2px 8px}
  .sup > .btn,.sup > form{flex:1 1 100%}
  .sup > .btn,.sup > form .btn{justify-content:center;width:100%}
  .sup > div:first-child:not(.grow){width:100%!important}
  /* the five ways to help: one row that scrolls, not a screenful */
  .ladder5{display:flex;overflow-x:auto;scrollbar-width:none}
  .ladder5::-webkit-scrollbar{display:none}
  .ladder5 > div{flex:none;white-space:nowrap}
  .authpage{min-height:0;padding:28px 16px 40px;align-items:start}
  .authcard{padding:20px 18px}
  .welcome{padding:18px 16px}
  footer.foot{padding:12px 8px}
  footer.foot .in{gap:0 4px;padding-block:6px}
  footer.foot .in > a{padding:10px 8px}
  footer.foot .in > span{flex-basis:100%;padding:4px 8px 2px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px}

  /* dialogs sit at the top of a phone, where the keyboard can't cover them */
  dialog.modal{margin:16px auto auto;max-height:calc(100dvh - 32px);overflow:auto}
  .modal .mb[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .packs{grid-template-columns:minmax(0,1fr)}

  /* a batch on the network: its name on a line, then shape, count, price */
  .panel-head.bat{flex-wrap:wrap;row-gap:6px}
  .panel-head.bat > b{flex:1 1 100%}
  .panel-head.bat .r{margin-left:auto}
  /* stats fill the row they're in */
  .hair:has(> .stat){width:100%}
  /* a project's hero: the poster whole, fading into the page, and the words
     under it - over a poster cropped tall they fought its own lettering */
  .pg-hero,.pg-hero.small{display:block;min-height:0;background:none;overflow:visible}
  .pg-hero > img,.pg-hero > .pg-hero-none{position:relative;display:block;aspect-ratio:16/9;height:auto;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .pg-hero .in{margin-top:-44px;padding:0 16px 8px;background:none}
  .pg-hero h1,.pg-hero .kick{text-shadow:0 1px 10px rgba(6,9,13,.8)}
  /* a crew's access: a preset's name fits its box */
  table.perm select.inp{width:auto;min-width:104px}
}
/* a phone has no pointer to hover with: cards stay still under a thumb, and
   the take-back on your own message shows without one */
@media (hover:none){.pcard:hover{transform:none}.dm-x{opacity:.6}}

/* ---------- a person's page, arranged (2026-09-30, *One Settings, Your Page*) ---------- */
.prof{--pg-accent:var(--accent)}
.prof-band.cover{position:relative;overflow:hidden;background:var(--surf-2)}
.prof-band.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof-band.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,14,19,.85))}
.prof-main > .pg-sec:first-child{margin-top:4px}
.pg-items.tiles .pcard{min-width:0}
.pg-it.tile > img{aspect-ratio:16/9}
.pg-it.tile .k{font-family:var(--mono);font-size:10px;color:var(--ink-4);padding:0 10px 8px;display:block}
.pg-items.list .pg-it.tile{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center}
.pg-items.list .pg-it.tile > img,.pg-items.list .pg-it.tile .letter{aspect-ratio:16/10;font-size:18px}
.pg-items.list .pg-it.tile .k{padding:0 12px 0 0}
.pg-items.feature.tiles{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){
  .pg-items.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pg-items.row{grid-auto-columns:64%}
  .pg-items.list .pg-it{grid-template-columns:96px minmax(0,1fr)}
  .prof-head .acts{flex-wrap:wrap}
}

/* ---------- Arrange your page: the editor (2026-09-30), the project pages editor's shape ---------- */
.ped{--pg-accent:var(--accent);display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:0;min-height:calc(100vh - 120px);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--ground)}
body.embed .ped{min-height:calc(100vh - 24px)}
.ped-l{padding:14px 12px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px}
.ped-sw{display:flex;gap:6px;flex-wrap:wrap}
.ped-sw button{width:16px;height:16px;border-radius:50%;border:0;cursor:pointer}
.ped-sw button.on{box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--ink-2)}
.ped-cov{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--r-sm);display:block;margin-bottom:4px}
.ped-m{min-width:0;overflow:auto;border-right:1px solid var(--line-soft)}
.ped-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--ground);z-index:3;font-size:13px}
.ped-bar span{font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.ped-bar .grow{flex:1}
.ped-bar .ped-busy{color:var(--accent-2)}
.ped-top{display:flex;gap:10px;align-items:flex-start;margin:14px 16px 4px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r);font-size:12.5px;color:var(--ink-3)}
.ped-top p{margin:0}
#ped-page{padding:0 16px 30px}
.ped-add{text-align:center;margin:8px 0}
.ped-add button{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);border:1px solid var(--line-soft);background:none;border-radius:99px;padding:2px 11px;cursor:pointer}
.ped-add button:hover{color:var(--ink);border-color:var(--line)}
.ped-sec{border:1px solid transparent;border-radius:var(--r);padding:8px}
.ped-sec.cur{border-color:var(--accent-line);background:rgba(245,165,36,.03)}
.ped-sh{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ped-sh h4{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500;min-width:40px;outline:none;border-bottom:1px dashed transparent}
.ped-sh h4:focus{border-bottom-color:var(--accent-line)}
.ped-sh h4::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pg-accent);margin-right:8px;vertical-align:1px}
.ped-sh .tools{margin-left:auto;display:flex;gap:4px;align-items:center}
.ped-sh .lay{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ped-sh .lay button{font-size:11px;padding:2px 7px;color:var(--ink-4);background:none;border:0;cursor:pointer}
.ped-sh .lay button.on{background:var(--surf-3);color:var(--ink)}
.ped-sh .ib{width:22px;height:22px;border:0;background:none;color:var(--ink-4);border-radius:var(--r-sm);cursor:pointer}
.ped-sh .ib:hover{background:var(--surf-3);color:var(--ink)}
.ped-sh .ib:disabled{opacity:.3;cursor:default}
.ped-autonote{margin:6px 0 0}
.ped-items{display:grid;gap:8px}
.ped-items.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ped-items.row{grid-auto-flow:column;grid-auto-columns:170px;overflow-x:auto}
.ped-items.list .ped-it{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center}
.ped-it{position:relative;background:var(--surf-1);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;font-size:12px}
.ped-it .pic{aspect-ratio:16/10;background:var(--surf-2);display:grid;place-items:center;overflow:hidden}
.ped-items.feature .ped-it .pic{aspect-ratio:21/9}
.ped-it .pic img{width:100%;height:100%;object-fit:cover;display:block}
.ph{font-family:var(--ui);font-size:20px;color:var(--ink-4)}
.ped-it .b{padding:6px 8px}
.ped-it .b b{display:block;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-it .b span{display:block;color:var(--ink-4);font-size:11px}
.ped-it .txt{padding:10px 12px;color:var(--ink-2);line-height:1.55}
.ped-it .txt b{display:block;color:var(--ink);margin-bottom:3px}
.ped-it .cap{padding:0 8px 7px;color:var(--ink-2);font-style:italic;font-size:11.5px;outline:none;min-height:14px}
.ped-it .cap:empty::before{content:attr(data-ph);color:var(--ink-5);font-style:normal}
.ped-it .x{position:absolute;top:4px;right:4px;z-index:2;width:20px;height:20px;border-radius:50%;border:0;background:rgba(10,14,19,.8);color:var(--ink-3);cursor:pointer;opacity:0}
.ped-it:hover .x,.ped-it:focus-within .x{opacity:1}
.ped-addin{border:1px dashed var(--line);border-radius:var(--r);color:var(--ink-4);font-size:12px;min-height:64px;background:none;cursor:pointer}
.ped-addin.on{border-color:var(--accent-line);color:var(--accent-2);background:var(--accent-wash)}
.ped-r{display:flex;flex-direction:column;min-height:0;background:var(--surf-1)}
.ped-r .hd{padding:12px 12px 2px}
.ped-r .hd h3{font-size:14px;margin:0}
.ped-tabs{display:flex;gap:2px;padding:8px 10px 4px}
.ped-tabs button{font-size:12px;padding:3px 8px;border-radius:var(--r-sm);border:0;background:none;color:var(--ink-3);cursor:pointer}
.ped-tabs button.on{background:var(--surf-3);color:var(--ink)}
.ped-target{margin:4px 10px 8px;font-size:12px;color:var(--accent-2);border:1px dashed var(--accent-line);border-radius:var(--r);padding:5px 8px}
.ped-list{flex:1;overflow:auto;padding:0 8px 8px}
.ped-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:6px 4px;border-radius:var(--r);text-align:left;font-size:12px;background:none;border:0;color:inherit}
button.ped-row{cursor:pointer}
button.ped-row:hover{background:var(--surf-2)}
.ped-row .th{width:44px;height:30px;border-radius:var(--r-sm);background:var(--surf-3);display:grid;place-items:center;overflow:hidden}
.ped-row .th img{width:100%;height:100%;object-fit:cover}
.ped-row .th .ph{font-size:12px}
.ped-row .th.auto{color:var(--ok)}
.ped-row .w{min-width:0}
.ped-row b{display:block;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-row em{display:block;font-style:normal;color:var(--ink-4);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped-row .k{font-family:var(--mono);font-size:10.5px;color:var(--accent-2)}
.ped-row.have b,.ped-row.have .k{color:var(--ink-4)}
.ped-row .acts{display:flex;gap:4px}
.ped-text{display:grid;gap:6px;padding:4px 2px}
.ped-foot{border-top:1px solid var(--line-soft);padding:8px 12px}
@media (max-width:900px){
  .ped{grid-template-columns:minmax(0,1fr);min-height:0}
  .ped-l,.ped-m{border-right:0;border-bottom:1px solid var(--line-soft)}
  .ped-l{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .ped-l .h-sec{margin:0!important}
  .ped-cov{width:120px}
  .ped-items.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ped-items.row{grid-auto-columns:62%}
  .ped-list{max-height:60vh}
}

/* a studio drawing the settings list itself (2026-09-30): the page takes
   the width, flush inside the studio's own Settings panel */
.set:not(:has(> nav)){grid-template-columns:minmax(0,1fr);min-height:0}
body.embed main.page > .set:not(:has(> nav)){grid-template-columns:minmax(0,1fr);margin:0;border:0;min-height:100vh}
.panel.yourpage{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;margin-top:14px}
.panel.yourpage img,.panel.yourpage .yp-none{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.panel.yourpage .yp-none{background:linear-gradient(120deg,var(--surf-3),var(--ground))}
.panel.yourpage b{display:block}
@media (max-width:640px){.panel.yourpage{grid-template-columns:80px minmax(0,1fr)}.panel.yourpage img,.panel.yourpage .yp-none{width:80px}}

/* ============================================================
   The menu (2026-09-30, the mockup *Right-Click on the Hub*): what a
   right-click, a `⋯` or a long press on a thing offers. `menu.js` draws it,
   `menus/service.py` says the rows.

   The first block is the studio's own menu, rule for rule (its 01-app.css
   and 02-screens.css), so a menu in the Hub section is the menu everywhere
   else in the studio. Change a rule there and here together.
   ============================================================ */
.ctx{
  position:fixed;z-index:123;min-width:238px;
  background:var(--surf-2);border:1px solid var(--surf-4);
  border-radius:var(--r);padding:4px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:none;
}
.ctx.on{display:block;animation:toastIn .12s ease-out}
.ctx-h{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);padding:6px 9px 5px;
}
.ctx button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:5.5px 9px;border-radius:var(--r-sm);
  font-size:var(--fs-md);color:var(--ink-2);text-align:left;
}
.ctx button:hover{background:var(--surf-4);color:var(--ink)}
.ctx button .k{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-4)}
.ctx button .ico{color:var(--ink-4);display:grid;place-items:center}
.ctx button:hover .ico{color:var(--accent)}
.ctx button:disabled{color:var(--ink-4);cursor:default}
.ctx button:disabled:hover{background:transparent;color:var(--ink-4)}
.ctx button:disabled .ico,
.ctx button:disabled:hover .ico{color:var(--surf-4)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.ctx button.tick .ico{color:var(--ink-4)}
.ctx button.tick.on{color:var(--accent-2)}
.ctx button.tick.on .ico{color:var(--accent)}
.ctx button.tick.on .k{color:var(--accent-2)}
.ctx button.danger{color:#FFB9C2}
.ctx button.danger:hover{background:var(--stale-wash);color:#FFD3D9}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}}

/* the hub's own: the status after a name, the head over the rows only a
   studio carries out, a hint that keeps clear of its verb, the icons */
.ctx:focus{outline:none}
.ctx-h .k{color:var(--ink-4);opacity:.7}
.ctx-h.own{color:var(--accent-2)}
.ctx button{white-space:nowrap}
.ctx button .k{padding-left:18px}
.ctx button .ico svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;display:block}
.ctx button:focus-visible{outline:none;background:var(--surf-4);color:var(--ink)}
/* the thing a menu is about, while it is open */
.menu-hot{outline:1px solid var(--accent-line);outline-offset:1px;border-radius:var(--r-sm)}
/* the `⋯` that opens a thing's menu: on a card it shows on hover at a desk
   and always where there is no hover */
.dots{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 5px;border-radius:var(--r-sm);
  color:var(--ink-4);font-size:15px;line-height:1;cursor:pointer;flex:none;user-select:none}
.dots:hover,.dots:focus-visible{background:var(--surf-3);color:var(--ink)}
.pcard,.crewcard,.ent,.chal-card{position:relative}
.pcard > .dots,.pic > .dots,.crewcard > .dots,.ent > .dots{position:absolute;right:6px;top:6px;z-index:2;background:rgba(6,9,13,.82);
  border:1px solid var(--line);color:var(--ink-2);opacity:0;transition:opacity .12s}
.pcard:hover .dots,.crewcard:hover .dots,.ent:hover .dots,.menu-hot .dots,.dots:focus-visible{opacity:1}
@media (hover:none){.pcard > .dots,.pic > .dots,.crewcard > .dots,.ent > .dots{opacity:1}}
/* a name that has a menu */
[data-thing^="person:"]{cursor:pointer}
@media (pointer:coarse){[data-thing]{-webkit-touch-callout:none}}

/* a phone has no right-click: the same rows as a sheet, sized for a thumb */
.ctx-back{position:fixed;inset:0;z-index:122;background:rgba(3,5,8,.6)}
.ctx.sheet{left:0;right:0;bottom:0;top:auto;min-width:0;max-height:82dvh;overflow-y:auto;
  border-radius:12px 12px 0 0;border-width:1px 0 0;padding:6px 8px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 30px rgba(0,0,0,.5);animation:sheetIn .16s ease-out}
.ctx.sheet button{padding:10px 9px;font-size:14px}
.ctx.sheet .ctx-h{white-space:normal}
.ctx-grab{width:32px;height:3px;border-radius:3px;background:var(--surf-4);margin:3px auto 5px}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ctx.on,.ctx.sheet{animation:none}}

/* ---- the legal pages (terms, privacy, money and refunds): prose, one column ---- */
/* the column is the page's; the measure is on what is read (`main.page > .pad` owns the width) */
.legal > *{max-width:74ch}
.legal h3{font-size:15px;margin:26px 0 8px;color:var(--ink)}
.legal p,.legal li{color:var(--ink-2);line-height:1.65}
.legal p{margin:8px 0}
.legal ul{margin:8px 0 8px 18px;padding:0}
.legal li{margin:5px 0}
.legal b{color:var(--ink)}
.legal-draft{margin-top:10px;padding:10px 12px;border:1px dashed var(--accent-line);border-radius:5px;background:var(--accent-wash);color:var(--ink-2)}

/* ---- staff: money, people, takedowns (2026-10-01) ---- */
.staffm{max-width:1180px}
.staffm .sm-h{font-size:15px;margin:26px 0 10px;display:flex;align-items:center;gap:8px}
.staffm .sm-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.staffm .sm-books table.t td{padding:5px 0;border:0}
.staffm .sm-n{float:right;font-family:var(--mono);color:var(--ink);letter-spacing:0;font-size:12px}
.staffm .sm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.staffm .sm-big{display:block;font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:400;margin:2px 0 4px}
.staffm .sm-acts{margin-top:14px;flex-wrap:wrap}
.staffm .sm-need{padding:10px 12px;border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--r);margin:0 0 8px;font-size:13px;color:var(--ink-2);line-height:1.6}
.staffm .sm-need b{color:var(--ink)}
.staffm .sm-need .btn{margin-left:8px}
.staffm .sm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px}
.staffm .sm-scroll{overflow-x:auto}
.staffm .sm-scroll table.t{min-width:520px}
.staffm .sm-ledger{max-height:460px;overflow-y:auto}
.staffm pre.sm-notice{white-space:pre-wrap;font:inherit;font-size:13px;color:var(--ink-2);margin:0;line-height:1.6}
@media (max-width:820px){.staffm .sm-two{grid-template-columns:minmax(0,1fr)}}

/* ---- not found, not allowed, out of date (`core/errors.py`) ---- */
.errpage{max-width:60ch!important;padding-top:9vh}
.errpage h1{font-family:var(--disp);font-size:28px;line-height:1.2;margin:10px 0 12px}
.errpage p{color:var(--ink-2);line-height:1.6}