/* Agorai — design direction A: m8k navy, emerald, a color for every square. */
:root{
  /* Sunrise (2026-10-13): coral accent, deep ink grounds, a gold glow. Every colour below is used by
     name across the stylesheet, so a palette change (or the light theme) is made here and nowhere else. */
  --bg:#150d26; --panel:#1b1033; --panel2:#201339; --line:#2f2249; --line2:#3b2c57;
  --text:#ece6f3; --strong:#fbf8fd; --muted:#b5a9c6; --faint:#a597b9;
  --accent:#ff6a3d; --accent-rgb:255,106,61; --accent-ink:#1b1033; --accent-soft:#ffd9cc; --ai-bg:#2a1209;
  --gold:#ffd23f; --glow-rgb:255,210,63;
  --raise1:#24183f; --raise0:#1c1131; --chip:#362852; --ring:#4f3f6e; --hero-btn2:#2a1c48; --hero-btn2-hover:#33245a;
  --ink-text:#170e2a; --ink-soft:#3e2f5a;            /* dark text on the white input boxes */
  --media:#0a0612;                                   /* behind photos and videos */
  --panel-rgb:27,16,51; --bar-rgb:20,11,36; --scrim-rgb:9,5,16;
  --cover-a:#3b1a14; --cover-b:#24183f;
  --hi:#fbf8fd; --soft-text:#c4b9d3; --input-text:#f3eef8; --avatar-text:#e6def0; --link:#ffc9b3;
  --prose:#e8e1f0; --ref:#e8c968; --ref-rgb:232,201,104; --ref-hover:#f5dc8a;
  --prose-link:#ffab8a; --prose-link-rgb:255,171,138; --prose-link-hover:#ffd2c0; --mention:#ffc9b3;
  --hl-rgb:255,255,255; --field-border:rgba(255,255,255,.6); --sq-filter:none;
  --warn:#fbbf24; --warn-soft:#fcd34d; --danger:#f87171; --danger-soft:#fca5a5; --rss:#f59e42; --switch-off:#3a4558;
  --serif:'Newsreader', Georgia, serif; --sans:'Geist', system-ui, -apple-system, sans-serif;
}
/* Light theme (preview only until a switch exists): warm paper, ink text, a deeper coral that reads
   on white. Media backgrounds and scrims stay dark. */
:root[data-theme="light"]{
  --bg:#fbf7f3; --panel:#ffffff; --panel2:#f6f0ea; --line:#e8ded5; --line2:#dccfc3;
  --text:#2a2140; --strong:#1b1033; --muted:#5f5573; --faint:#6e6482;
  --accent:#c4461f; --accent-rgb:196,70,31; --accent-ink:#ffffff; --accent-soft:#8a2f12; --ai-bg:#fff1ea;
  --gold:#b98a00; --glow-rgb:255,170,110;
  --raise1:#ffffff; --raise0:#f8f2ec; --chip:#ece4f2; --ring:#cbbfd6; --hero-btn2:#f1e9f6; --hero-btn2-hover:#e8ddf0;
  --panel-rgb:255,255,255; --bar-rgb:255,252,249;
  --cover-a:#ffd9cc; --cover-b:#f3e6f7;
  --hi:#1b1033; --soft-text:#4f4566; --input-text:#2a2140; --avatar-text:#3b2c57; --link:#b33e1a;
  --prose:#2a2140; --ref:#8a6400; --ref-rgb:138,100,0; --ref-hover:#5e4400;
  --prose-link:#b33e1a; --prose-link-rgb:179,62,26; --prose-link-hover:#7d2a10; --mention:#8a2f12;
  --hl-rgb:27,16,51; --field-border:#dccfc3; --sq-filter:brightness(.62) saturate(1.25);
  --warn:#a16207; --warn-soft:#8a6400; --danger:#c0262d; --danger-soft:#b42318; --rss:#c2410c; --switch-off:#cbbfd6;
}
/* "Auto" in Settings: the light palette when the device asks for light. MUST match the block above
   exactly (tests/theme.test.mjs checks). */
@media (prefers-color-scheme: light){
:root[data-theme="auto"]{
  --bg:#fbf7f3; --panel:#ffffff; --panel2:#f6f0ea; --line:#e8ded5; --line2:#dccfc3;
  --text:#2a2140; --strong:#1b1033; --muted:#5f5573; --faint:#6e6482;
  --accent:#c4461f; --accent-rgb:196,70,31; --accent-ink:#ffffff; --accent-soft:#8a2f12; --ai-bg:#fff1ea;
  --gold:#b98a00; --glow-rgb:255,170,110;
  --raise1:#ffffff; --raise0:#f8f2ec; --chip:#ece4f2; --ring:#cbbfd6; --hero-btn2:#f1e9f6; --hero-btn2-hover:#e8ddf0;
  --panel-rgb:255,255,255; --bar-rgb:255,252,249;
  --cover-a:#ffd9cc; --cover-b:#f3e6f7;
  --hi:#1b1033; --soft-text:#4f4566; --input-text:#2a2140; --avatar-text:#3b2c57; --link:#b33e1a;
  --prose:#2a2140; --ref:#8a6400; --ref-rgb:138,100,0; --ref-hover:#5e4400;
  --prose-link:#b33e1a; --prose-link-rgb:179,62,26; --prose-link-hover:#7d2a10; --mention:#8a2f12;
  --hl-rgb:27,16,51; --field-border:#dccfc3; --sq-filter:brightness(.62) saturate(1.25);
  --warn:#a16207; --warn-soft:#8a6400; --danger:#c0262d; --danger-soft:#b42318; --rss:#c2410c; --switch-off:#cbbfd6;
}
}
/* Text in a square's own colour: those colours are tuned for the dark ground; darkened on light. */
[style^="color:#"],[style*=";color:#"],[style*="; color:#"],.chip[style^="--c:"],.crumb-here[style^="--c:"],.tag-row[style^="--c:"] .tag{filter:var(--sq-filter)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);position:relative;
  color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* The glow behind every page: blue from the top (as on the m8k dashboards) and a faint emerald from
   the lower corner. A fixed layer, so it stays put while you scroll, on iPhone too. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 75% at 50% -10%, rgba(var(--glow-rgb),.20), rgba(var(--glow-rgb),0) 62%),
    radial-gradient(70% 60% at 100% 105%, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),0) 70%),
    radial-gradient(60% 50% at -5% 60%, rgba(120,140,255,.06), rgba(120,140,255,0) 70%)}
a{color:var(--link);text-decoration:none}a:hover{color:var(--hi);text-decoration:underline}
.prelaunch{background:rgba(var(--accent-rgb),.08);border-bottom:1px solid rgba(var(--accent-rgb),.25);color:var(--accent-soft);text-align:center;font-size:14px;padding:8px 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:9}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 24px}}
.serif{font-family:var(--serif);font-weight:500;color:var(--strong);letter-spacing:-.01em}
.muted{color:var(--muted)}.faint{color:var(--faint);font-size:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px}
/* the m8k mark, same as the blogs: the 8 tips over into an infinity sign; links to m8k.io */
.hublink{display:inline-flex;align-items:center;color:var(--hi);text-decoration:none}
.hublink:hover{text-decoration:none;color:var(--hi)}
.m8kwm{font-family:Georgia,'Times New Roman',serif;font-size:30px;letter-spacing:-.01em;line-height:1}
/* a soft hue behind each logo, like the halo on the m8k.io front door */
.hublink,.wordmark{position:relative;isolation:isolate}
.hublink::before,.wordmark::before{content:"";position:absolute;inset:-14px -18px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.07) 55%,rgba(var(--accent-rgb),0) 100%)}
.wordmark::before{background:radial-gradient(closest-side,rgba(var(--glow-rgb),.16),rgba(var(--accent-rgb),.06) 60%,rgba(0,0,0,0) 100%)}
.m8k8{display:inline-block;margin:0 .05em;color:var(--accent);text-shadow:0 0 6px rgba(var(--accent-rgb),.55),0 0 16px rgba(var(--accent-rgb),.35);animation:m8kLie 12s ease-in-out infinite}
@keyframes m8kLie{0%,17.5%{transform:rotate(0)}25%,42.5%{transform:rotate(90deg)}50%,67.5%{transform:rotate(180deg)}75%,92.5%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.m8k8{animation:none}}
.crumbsep{flex:0 0 auto}
.wordmark{font-family:var(--serif);font-size:40px;line-height:1;font-weight:600;color:var(--hi);letter-spacing:-.015em}
@media (max-width:640px){.wordmark{font-size:34px}}
.wordmark:hover{text-decoration:none;color:var(--hi)}.wordmark .ai{color:var(--accent)}
.top nav,.nav-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:15px}
.nav-main{margin-left:auto}
.nav-tools{gap:8px 16px}
.me-link{display:inline-flex;align-items:center;gap:8px;margin-left:4px}.me-link .me-name{display:none}   /* you = your photo, like the other tools an icon */
@media (max-width:640px){
  .top{gap:6px 12px;padding:14px 0 10px}
  .brand{order:1;flex:1 1 auto}
  .nav-tools{order:2;gap:4px 10px;flex-wrap:nowrap}
  .nav-main{order:3;flex:1 1 100%;margin:0;flex-wrap:nowrap;gap:22px;font-size:15px;overflow-x:auto;scrollbar-width:none;padding:4px 0 2px}
  .nav-main::-webkit-scrollbar{display:none}
  .nav-main a{white-space:nowrap;color:var(--muted)}
  .join-btn{min-height:38px;padding:7px 14px;font-size:15px}
  .signin-link{font-size:15px}
  .me-link .av{display:inline-flex}.me-link .me-name{display:none}
  .nav-tools .bell{width:36px;height:36px}
  .nav-tools{gap:2px 4px}
}
.nav-ais{color:var(--accent)}
.nav-ais:hover{filter:brightness(1.15)}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--accent);color:var(--accent-ink);
  font:inherit;font-weight:600;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--accent-ink);text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2)}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
.bell-n{position:absolute;top:4px;right:2px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;border-radius:999px;padding:0 5px;line-height:16px}

/* hero */
.hero{text-align:center;padding:56px 0 40px}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8vw,76px);line-height:1.02;letter-spacing:-.02em;margin:16px 0;color:var(--strong)}
.hero p{max-width:640px;margin:0 auto;font-size:19px;color:var(--soft-text)}
.ask{max-width:680px;margin:32px auto 0;text-align:left}
.ask label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.askbox{display:flex;flex-wrap:wrap;gap:10px;background:linear-gradient(180deg,var(--raise1),var(--raise0));border:1.5px solid rgba(var(--accent-rgb),.42);border-radius:20px;padding:10px;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06),0 10px 34px rgba(var(--accent-rgb),.10);transition:border-color .2s,box-shadow .2s}
.askbox input{flex:1 1 280px;min-width:0;background:transparent;border:0;color:var(--input-text);font:inherit;font-size:17px;padding:12px}
.askbox input:focus{outline:none}.askbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 12px 40px rgba(var(--accent-rgb),.18)}
.askbox textarea{flex:1 1 280px;min-width:0;background:transparent;border:0;color:var(--input-text);font:inherit;font-size:17px;line-height:1.45;padding:12px;resize:none;overflow:hidden;min-height:48px;max-height:260px}
.askbox textarea:focus{outline:none}
.askbox .btn{align-self:flex-end;min-width:96px}
.ask-more{margin:10px 4px 0;font-size:14px}
/* Home page, search-first: the wordmark, one ask box and two buttons, with the feed starting about
   three-quarters of the way down the first screen. The header's small logo hides here (the big one
   is right below it); every other page keeps it. */
.home .brand-lockup{visibility:hidden}
.hero{min-height:calc(76vh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 0 36px}
.hero-mark{margin:0;line-height:1}
.hero .hero-word{font-size:clamp(64px,9vw,112px);letter-spacing:-.02em;pointer-events:none}
/* The tagline sits halfway between the bottom of the "g" and the ask box, measured on the rendered
   glyphs (2026-10-15). ".hero h1" and ".hero p" above outrank single-class rules, hence ".hero .x". */
.hero .hero-mark{margin:16px 0 23px}
.hero .hero-tag{margin:0 auto 23px}
.hero-local{margin:8px 0 0;font-size:clamp(22px,3vw,30px);font-weight:500;letter-spacing:.04em;color:var(--muted)}
.hero-local+.hero-tag{margin-top:10px}
.brand-lockup .local-name{letter-spacing:0}
.askbox-hero{width:min(720px,100%);box-sizing:border-box;border-radius:30px;padding:6px 8px 6px 14px;align-items:center;text-align:left}
.askbox.askbox-hero{margin-top:6px;gap:4px}
.askbox.askbox-hero textarea,.askbox.askbox-hero textarea:focus{flex:1 1 220px;font-size:18px;min-height:46px;padding:11px 8px;background:transparent;border:0;box-shadow:none;color:var(--input-text)}
/* On a phone the question shares its row with all three buttons (camera, paperclip, mic), as on a
   computer; at 220px it pushed the paperclip and mic onto a row of their own. */
@media (max-width:640px){.askbox.askbox-hero textarea,.askbox.askbox-hero textarea:focus{flex:1 1 0;min-width:0}}
.askbox.askbox-hero .ask-legal{font-size:12px;line-height:1.4;color:var(--faint);padding:0 8px 6px;text-align:left}
.askbox-hero .ask-photo,.askbox-hero .ask-mic{align-self:center;border-color:transparent}
.askbox-hero .ask-photo:hover,.askbox-hero .ask-mic:hover{border-color:transparent;background:rgba(var(--accent-rgb),.08)}
.askbox-hero .ask-similar,.askbox-hero .ask-attach,.askbox-hero .ask-legal{flex-basis:100%}
.hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
/* "Ask Agorai" submits the question, so it leads in solid coral; "Browse the squares" follows in plum. */
.hero-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:10px;border:1px solid var(--ring);background:var(--hero-btn2);color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
.hero-btn:hover{background:var(--hero-btn2-hover);text-decoration:none;color:var(--text)}
.hero-btn.hero-btn-ask{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600}
.hero-btn.hero-btn-ask:hover{color:var(--accent-ink);filter:brightness(1.08)}
.hero-note{margin:20px 0 0;font-size:14px;max-width:none}.hero-note a{white-space:nowrap}
@media (max-width:640px){.hero{min-height:calc(70vh - 80px);padding-top:4px}.hero .hero-mark{margin-bottom:14px}.hero .hero-tag{margin-bottom:13px}}
.ask-wait{display:flex;align-items:center;gap:12px;margin:14px 0}
.dots{display:inline-flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.35;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.8}}
input::placeholder,textarea::placeholder{color:#7f8da1}
.askbox textarea::placeholder{color:#a9b8cb}

/* sections */
.sec{padding:24px 0 40px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:18px}
.sec-head h2,.h2{font-family:var(--serif);font-weight:500;font-size:34px;margin:0;color:var(--strong)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;border:1px solid var(--line);color:var(--text);min-height:160px}
.tile:hover{text-decoration:none;color:var(--text);filter:brightness(1.15)}
.tile .name{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.tile .now{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--hi)}
.sw{width:12px;height:12px;border-radius:4px;display:inline-block;flex:0 0 auto}
.cols{display:flex;flex-wrap:wrap;gap:32px;padding:8px 0 56px}
.main-col{flex:999 1 560px;min-width:0}.side-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.stack{display:flex;flex-direction:column;gap:14px}
.card h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.25;margin:8px 0 10px}
.card h3 a{color:var(--strong)}
.side h2{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.005em;margin:0 0 6px;color:var(--hi)}
.side .row{display:block;padding:12px 0;border-top:1px solid var(--line);color:var(--text)}
.side .row:hover{text-decoration:none;color:var(--hi)}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--c)}
.chip .dot{width:8px;height:8px;border-radius:3px;background:var(--c)}
.chip .sq-glyph{flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:15px}
.pill:hover{text-decoration:none;border-color:var(--accent)}
.people{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--chip);color:var(--avatar-text);font-weight:600;flex:0 0 auto}
.av-ai{border-radius:30%;background:var(--ai-bg);color:var(--accent);border:2px solid var(--accent)}
.badge-ai{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.who{color:var(--text);font-weight:600}
.empty{color:var(--muted);padding:18px 0}

/* square page */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;font-size:15.5px;color:var(--muted);margin:8px 0 12px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--strong);text-decoration:none}
.crumb-sep{margin:0 9px;color:var(--faint);font-size:19px;line-height:1;position:relative;top:-1px}
.crumbs .crumb-here{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c,var(--strong))}
.crumbs .crumb-here:hover{color:var(--c,var(--strong));text-decoration:underline}
/* Tags (lib/tags.js): picked by the house AI, under a conversation's title and on /tag/<slug>. */
.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 8px;margin:0 0 12px}
.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 11px 4px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.3;
  color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 11%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--accent)) 32%,transparent)}
.tag::before{content:"#";opacity:.55;font-weight:500}
.tag:hover{text-decoration:none;background:color-mix(in srgb,var(--c,var(--accent)) 22%,transparent)}
.tag .faint{font-weight:400;font-size:12px;margin-left:3px}
.tag-related{margin:14px 0 18px}
.tag-title{font-size:46px;margin:0 0 6px}.tag-hash{color:var(--accent);margin-right:6px;opacity:.75}
.sg-ic.sg-tag{color:var(--accent);font-weight:700}
.sq-head{padding:20px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.sq-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,56px);margin:0 0 8px;line-height:1.05}
/* The Squares page (/squares): the whole header is centered, with the search under it, the way the
   home page puts the ask box under the wordmark (Michael's pick, 2026-10-15). */
.squares-head{text-align:center;padding-top:28px}
.squares-lede{max-width:62ch;margin:0 auto 22px;text-wrap:balance}
.squares-label{display:block;margin:0 0 6px}
.squares-search{max-width:660px;margin:0 auto;text-align:left}
.known{border-radius:18px;padding:22px;margin-bottom:24px}
.known h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.signpost{font-size:14px;color:var(--muted);padding:10px 14px;border:1px dashed var(--line2);border-radius:12px}

/* thread */
.thread-head{padding:12px 0 20px}
.thread-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,48px);line-height:1.12;margin:10px 0;color:var(--strong)}
.post{display:flex;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.post .body{min-width:0;flex:1}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--faint);margin-bottom:6px}
.prose{font-size:17px;line-height:1.65;color:var(--prose);overflow-wrap:anywhere}
.prose p{margin:0 0 12px}.prose blockquote{margin:0 0 12px;padding:4px 16px;border-left:3px solid var(--line2);color:var(--soft-text)}
.prose a.ref{color:var(--ref);border-bottom:1px dotted rgba(var(--ref-rgb),.5)}.prose a.ref:hover{text-decoration:none;color:var(--ref-hover)}
.prose code{background:rgba(var(--hl-rgb),.09);border-radius:6px;padding:1px 6px;font-size:.92em}
details.collapsed{border:1px dashed var(--line2);border-radius:12px;padding:10px 14px}
details.collapsed summary{cursor:pointer;color:var(--muted)}
.reply{margin-top:12px;border-top:1px solid var(--line);padding-top:22px}
textarea,.field{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;color:var(--input-text);font:inherit;font-size:16px;padding:14px}
textarea{min-height:150px;resize:vertical;line-height:1.55}
textarea:focus,.field:focus{outline:none;border-color:var(--accent)}
label.lbl{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:var(--text)}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.narrow{max-width:640px;margin:0 auto;padding:40px 0 64px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--soft-text)}
.note.ok{border-color:rgba(var(--accent-rgb),.35)}.note.warn{border-color:rgba(247,147,26,.45)}
.log-row{padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.foot{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--faint)}

/* rich posts: photos, galleries, files, video, link cards */
.prose h3,.prose h4,.prose h5{font-family:var(--serif);font-weight:500;color:var(--strong);line-height:1.25;margin:20px 0 8px}
.prose h3{font-size:26px}.prose h4{font-size:22px}.prose h5{font-size:19px}
.prose figure.img{margin:14px 0}
.prose figure.img img{display:block;max-width:100%;max-height:640px;height:auto;border-radius:12px;border:1px solid var(--line)}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.prose .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px;margin:14px 0}
.prose .gallery figure.img{margin:0}
.prose .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;max-height:none}
.prose .attach{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin:6px 8px 6px 0;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);color:var(--text);font-size:15px}
.prose .attach:hover{border-color:var(--accent);text-decoration:none;color:var(--hi)}
.prose .embed{position:relative;aspect-ratio:16/9;margin:14px 0;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .preview{display:flex;gap:14px;margin:12px 0;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);color:var(--text);text-decoration:none}
.prose .preview:hover{border-color:var(--accent);text-decoration:none;color:var(--text)}
.prose .preview img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.prose .pv-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.prose .pv-site{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.prose .pv-title{font-weight:600;color:var(--strong);line-height:1.3}
.prose .pv-desc{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:520px){.prose .preview{flex-direction:column}.prose .preview img{width:100%;height:auto;aspect-ratio:1.91/1}}

/* composer */
.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.toolbar button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.toolbar button:hover{border-color:var(--accent)}
.toolbar .sep{width:1px;background:var(--line2);margin:4px 2px}
.uploading{font-size:14px;color:var(--muted);margin:6px 0}
.preview-pane{margin-top:14px;padding:16px;border:1px dashed var(--line2);border-radius:14px}
.drop-hint{outline:2px dashed var(--accent);outline-offset:4px}

/* share */
.share{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.share:hover{border-color:var(--accent);color:var(--text)}
.share-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
.share-toast.show{opacity:1}
.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:var(--prose-link);text-decoration:underline;text-decoration-color:rgba(var(--prose-link-rgb),.45);text-underline-offset:3px}
.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t):hover{color:var(--prose-link-hover);text-decoration-color:currentColor}
.prose a.mention{color:var(--mention);font-weight:600}

/* feed-first home */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.welcome{display:flex;flex-direction:column;gap:12px;padding:8px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.welcome-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.welcome .askbox{max-width:none}
/* The home feed's header runs across the whole page (tabs left, the live counter at the far right,
   one line under both), so the sidebar's first card starts level with the first conversation card. */
.feed-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:22px}
.feed-head .tabs{border-bottom:0;margin-bottom:0}
/* On a phone the tabs fill the row and the counter would wrap below them, leaving the line (and the
   current tab's underline) under the counter. There the counter goes first, above the tabs. */
@media (max-width:640px){.feed-head{row-gap:2px}.feed-head > .here{order:-1;width:100%;font-size:13.5px;white-space:normal}.here-part{white-space:nowrap}}
/* Tabs: words with a glowing underline under the current one (pills are kept for filters/choices) */
.tabs{display:flex;gap:4px 26px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs a{position:relative;padding:10px 2px 12px;color:var(--muted);font-weight:600;font-size:15.5px;letter-spacing:.02em;text-decoration:none}
.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a.on{color:var(--accent);text-shadow:0 0 14px rgba(var(--accent-rgb),.35)}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}
.sq-row{display:flex !important;align-items:center;gap:10px;padding:9px 0 !important}

/* threaded replies */
.post.opening{border-top:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.act{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 10px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--faint);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.act:hover{color:var(--text);border-color:var(--line2);text-decoration:none}
.act.share{border-color:transparent}
.children{margin:10px 0 0;padding-left:16px;border-left:2px solid var(--line2)}
.children:hover{border-left-color:rgba(var(--accent-rgb),.35)}
.children .post{padding:14px 0;border-top:0}
.children .prose{font-size:16px}
.children[hidden]{display:none}
/* At every width, replies stop stepping right after the third level: a long back-and-forth (a member
   and a house AI, say) keeps a readable column instead of shrinking with each answer, and a "↳ Name"
   label says who's being answered (Bryan's feedback, 2026-10-16). */
.children .children .children .children{padding-left:0;border-left:0;margin-left:0}
/* On wider screens a reply also sits beside its parent's photo column (32px + 14px gap), so a
   flattened level pulls back by that much to line up under the level above. */
@media (min-width:601px){.children .children .children .children{margin-left:-46px}}
.prose ul,.prose ol{padding-left:1.4em}
.replies{border-top:1px solid var(--line);margin-top:6px}
.replies > .post{border-top:1px solid var(--line)}
.post.removed .body{opacity:.75}
.inline-reply{margin:10px 0 4px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel)}
.inline-reply textarea{min-height:110px}
.inline-reply .row-btns{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
@media (max-width:600px){
  .children{padding-left:10px}.post{gap:10px}
  /* Phones: nested replies keep the full width — a small photo beside the name instead of a
     column, ~12px per level, and from the sixth level on no further indent (a "↳ Name" label
     says who's being answered). */
  .children .post{display:block}
  .children .post > .av{float:left;width:24px !important;height:24px !important;margin:1px 8px 0 0}
  .children .post > .av svg{width:20px;height:20px}
  .children .post > .body .meta{min-height:26px}
  .children .children .children .children .children .children{padding-left:0;border-left:0;margin-left:0}
  .reply-to{font-size:12.5px;color:var(--faint)}
  .actions{gap:2px}
}
.reply-to{display:inline;font-size:12.5px;color:var(--faint)}

/* profile photos + AI emblems */
.av-img{border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--chip);border:1px solid var(--line2)}
.av-ai svg{display:block}
.av-ai{box-shadow:0 0 12px rgba(var(--accent-rgb),.18)}
.av-person{overflow:hidden;align-items:flex-end}
.av-person svg{display:block}
.rundown-list{list-style:none;margin:0;padding:0}
.rundown-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.rundown-list a{font-family:var(--serif);font-size:20px;color:var(--strong);line-height:1.3}

/* square icons, cards and bands */
.sq-ico{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:50%;border:1px solid}
.sq-row{gap:12px !important}
.sq-band{padding:24px 24px 26px;border:1px solid;border-radius:22px;margin-top:6px}
.sq-title{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.sq-title h1{margin:0}
@media (max-width:640px){.sq-band{padding:18px 16px 20px}.sq-title{gap:12px}.sq-title .sq-ico{width:48px !important;height:48px !important}}
.sq-grid{align-items:stretch}
.sq-card{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid;border-radius:20px}
.sq-card-head{display:flex;align-items:center;gap:14px;color:inherit}
.sq-card-head:hover{text-decoration:none}.sq-card-head:hover .sq-card-name{text-decoration:underline}
.sq-card-head > span:last-child{display:flex;flex-direction:column;gap:2px}
.sq-card-name{font-weight:650;font-size:19px;line-height:1.2}
.sq-card-blurb{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.sq-tree,.sq-tree ul{list-style:none;margin:0;padding:0}
.sq-tree ul{padding-left:16px;margin-top:4px}
.sq-tree li{margin:5px 0;font-size:15.5px;font-weight:600}
.sq-card-latest{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--text);font-family:var(--serif);font-size:17px;line-height:1.3}
.sq-card-latest .faint{font-family:var(--sans);font-size:12.5px}
/* feed thumbnails */
.card.has-thumb{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:20px;align-items:start}
.card.has-thumb > *{grid-column:1}
.card.has-thumb > .thumb{grid-column:2;grid-row:1 / span 4;display:block;width:128px;height:128px;border-radius:14px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.card.has-thumb{grid-template-columns:minmax(0,1fr) 84px;column-gap:14px}.card.has-thumb > .thumb{width:84px;height:84px;border-radius:12px}}
.tr-note{margin:2px 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);opacity:.85}
.askbox .cf-turnstile{flex-basis:100%}.askbox .cf-turnstile:empty{display:none}
.guest-join{margin:16px 0;padding:18px 20px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:16px;background:rgba(var(--accent-rgb),.05)}
.guest-join p{margin:0 0 12px}
.ask-photo,.ask-mic{align-self:flex-end;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--soft-text);cursor:pointer;flex:0 0 auto}
.ask-photo:hover,.ask-mic:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.ask-photo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ask-clip{text-decoration:none}.ask-clip:hover{text-decoration:none}
.ask-photo:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ask-mic.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);animation:micpulse 1.4s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.ask-mic.on{animation:none}}
.ask-attach{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:4px 6px 2px}
.ask-attach[hidden]{display:none}
.ask-attach img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--line2)}
.ask-legal{flex-basis:100%;margin:0;padding:0 8px 2px;font-size:12px;color:var(--faint)}
.ask-legal a{color:var(--muted)}
.nav-search{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--text)}   /* same ink as the other header icons, not link coral */
.search-form{display:flex;flex-wrap:wrap;gap:10px}.search-form .field{flex:1 1 260px;margin:0}
.search-hit mark{background:rgba(var(--accent-rgb),.18);color:var(--strong);border-radius:3px;padding:0 2px}
.search-hit h3{font-size:22px;margin:6px 0 6px}
.feed-head{flex-wrap:wrap;gap:10px 24px}
/* Plain inline text, so the spaces in the markup are the spaces you see (a flex gap spread the words apart). */
.here{display:inline-block;font-size:14px;color:var(--muted);white-space:nowrap}
.here-dot{display:inline-block;vertical-align:0;margin-right:8px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);animation:herepulse 2.4s infinite}
@keyframes herepulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.here-dot{animation:none}}
.stats{width:100%;border-collapse:collapse;font-size:15px}
.stats th,.stats td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
.stats th:first-child,.stats td:first-child{text-align:left}
.stats th{color:var(--muted);font-weight:600;font-size:13px}
fieldset.opts{border:0;padding:0;margin:14px 0 0}fieldset.opts legend{padding:0;margin-bottom:4px}
.vote-form{display:inline}.act.vote.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.foot-m8k{display:inline-flex;align-items:baseline;gap:8px;color:var(--faint);text-decoration:none}
.foot-m8k:hover{text-decoration:none;color:var(--muted)}
.foot-m8k .m8kwm{font-size:21px;color:var(--hi)}
.foot-m8k:hover .m8kwm{color:var(--hi)}
.foot-m8k .m8k8{text-shadow:0 0 5px rgba(var(--accent-rgb),.5),0 0 12px rgba(var(--accent-rgb),.25)}
.push-card{margin:14px 0 26px}
input[type=file]{color:var(--muted);font:inherit;font-size:14px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
input[type=file]::file-selector-button{margin-right:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent)}
.room-bar{margin-top:10px;min-height:26px}
.room-here{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted)}
.room-here .here-dot{margin-right:2px}
.room-face{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;object-fit:cover;border:1px solid var(--line2)}
.room-here > .room-face + .room-face{margin-left:-10px}
.room-typing{display:flex;align-items:center;gap:8px;min-height:0;font-size:13.5px;color:var(--accent);margin:6px 0}
.room-typing:empty{margin:0}
.post.fresh > .body{animation:fresh 4s ease-out}
@keyframes fresh{0%{background:rgba(var(--accent-rgb),.14);border-radius:12px}100%{background:transparent}}
.new-pill{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.post.fresh > .body{animation:none}}
.prose .signature{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--strong);margin-top:18px}
.profile-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}.profile-links .pill{min-height:34px;padding:5px 12px;gap:7px;font-size:14px}
.adm-h{font-size:26px;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.adm-count{font:600 14px var(--sans);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.adm-card{padding:16px 18px}.adm-card.adm-report{border-color:rgba(248,113,113,.45)}.adm-card.adm-moderation{border-color:rgba(251,191,36,.4)}
.adm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.adm-kind{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.adm-report .adm-kind{color:var(--danger)}.adm-moderation .adm-kind{color:var(--warn)}
.adm-quote{margin:6px 0 10px;padding:8px 12px;border-left:3px solid var(--line2);color:var(--muted);font-size:14.5px}
.adm-actions{display:flex;flex-wrap:wrap;gap:8px}
.adm-act{display:inline-flex;gap:6px;align-items:center}
.adm-act input[name=reason]{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;color:var(--text);font:inherit;font-size:13px;padding:7px 12px;width:min(260px,52vw)}
.adm-act .btn{min-height:36px;padding:6px 14px;font-size:14px}
.btn.danger{background:transparent;border:1px solid rgba(248,113,113,.6);color:var(--danger-soft)}.btn.danger:hover{background:rgba(248,113,113,.12)}
.adm-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.adm-row:last-child{border-bottom:0}
.adm-snip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-flag{font-size:12px;font-weight:700;color:var(--warn);border:1px solid rgba(251,191,36,.45);border-radius:999px;padding:1px 8px;margin-left:6px}
.gist{margin:14px 0 20px;padding:14px 18px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:16px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.015))}
.gist summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.gist summary::-webkit-details-marker{display:none}
.gist-title{font-family:var(--serif);font-size:21px;color:var(--strong)}
.gist-title .badge-ai{font-family:var(--sans);vertical-align:4px}
.gist ul{margin:10px 0 4px;padding-left:20px}.gist li{margin:6px 0;line-height:1.55}
.gist-src{font-size:12.5px;color:var(--faint)}.gist-src a{color:var(--muted);margin-left:6px}
.gist-src a::before{content:"↳ "}
.gist-open{margin:8px 0 0;font-size:15px;color:var(--muted)}
.welcome-short{display:none}
@media (max-width:640px){.welcome-long{display:none}.welcome-short{display:inline}.welcome-text .serif{font-size:22px !important}
  .welcome{padding-top:4px}.ask-more{font-size:13.5px}}
.ask-similar{flex-basis:100%;margin:2px 4px 0;padding:10px 12px;border-radius:14px;background:rgba(var(--hl-rgb),.035);border:1px solid var(--line2)}
.ask-similar[hidden]{display:none}
.ask-similar-head{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.ask-similar-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:7px 4px;border-top:1px solid var(--line);color:var(--text)}
.ask-similar-item:first-of-type{border-top:0}
.ask-similar-item:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03);border-radius:8px}
.ask-similar-item .sw{width:9px;height:9px;border-radius:3px;align-self:center}
.ask-similar-title{font-family:var(--serif);font-size:17px}
.ask-similar-item .faint{grid-column:2;font-size:12.5px}
/* The typing field: a soft off-white well inside the glowing box ("type here"), white when you're in it. */
.askbox textarea{background:#eef4fa;color:var(--ink-text);border-radius:14px;padding:13px 16px;border:1px solid var(--field-border);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.askbox textarea::placeholder{color:#5b6b80}
.askbox textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
/* Search boxes: one rounded control like the ask box — off-white field, the button inside at the end. */
.searchbox{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:linear-gradient(180deg,var(--raise1),var(--raise0));
  border:1.5px solid rgba(var(--accent-rgb),.42);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06),0 8px 26px rgba(var(--accent-rgb),.08)}
.searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 10px 30px rgba(var(--accent-rgb),.14)}
.searchbox input,.searchbox .field{flex:1;min-width:0;margin:0;border:0;border-radius:999px;background:#eef4fa;color:var(--ink-text);
  font:inherit;font-size:16px;padding:11px 16px;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.searchbox input:focus,.searchbox .field:focus{outline:none;background:#fff}
.searchbox input::placeholder{color:#5b6b80}
.searchbox .btn{flex:0 0 auto;min-height:42px;padding:8px 18px}
.search-form.searchbox{flex-wrap:nowrap}
.mention-list{position:absolute;z-index:30;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.mention-list[hidden]{display:none}
.mention-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.mention-item.on,.mention-item:hover{background:rgba(var(--accent-rgb),.10)}
.mention-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1;overflow:hidden}
.mention-item .mention-col .mention-desc{margin-left:0;max-width:100%;text-align:left;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-item .faint{margin-left:auto;font-size:13px}
.mention-face{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--line2);color:var(--avatar-text);object-fit:cover;flex:0 0 auto}
.new-badge{display:inline-block;vertical-align:middle;font:700 12px var(--sans);letter-spacing:.02em;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:2px 9px;margin-left:6px}
.post.unread > .body{box-shadow:-3px 0 0 var(--accent);padding-left:12px;border-radius:2px}
.new-jump{display:inline-flex;margin-top:10px;font-weight:600;font-size:14.5px;color:var(--accent)}
.new-anchor{position:relative;top:-90px;display:block}

/* Private conversation: Add people / Leave, as real buttons under the reply box */
.pm-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pm-actions details > summary{list-style:none;cursor:pointer}
.pm-actions details > summary::-webkit-details-marker{display:none}
.pm-add[open]{flex:1 1 100%;order:-1}
.pm-add[open] > summary{display:none}
.pm-add-form{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.pm-add-row{display:flex;gap:10px;flex-wrap:wrap}.pm-add-row .field{flex:1 1 220px;margin:0}
.pm-leave{margin-left:auto}
.pm-leave[open]{flex:1 1 100%;margin-left:0}
.pm-leave[open] > summary{display:none}
.pm-leave-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-end}

/* Bookmarks: filter by square, and remove one without opening it */
.bm-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.bm-filter{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 14px;border:1px solid var(--line2);border-radius:999px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.bm-filter:hover{border-color:var(--accent);text-decoration:none}
.bm-filter.on{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.45)}
.bm-filter .dot{width:8px;height:8px;border-radius:3px;background:var(--c)}
.bm-filter span{color:var(--muted);font-weight:500}
.bm-item{display:flex;flex-direction:column}
.bm-remove{align-self:flex-end;margin-top:6px}

/* "Pick a few squares": big tap-to-choose tiles */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pick{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 40px 14px 14px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);cursor:pointer;transition:border-color .15s,background .15s}
.pick:hover{border-color:var(--c-line)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick:has(input:checked){border-color:var(--c);background:linear-gradient(180deg,var(--c-soft),var(--panel))}
.pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pick .sq-ico{flex:0 0 auto}
.pick-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pick-name{font-weight:700;color:var(--c);font-size:16px}
.pick-blurb{color:var(--muted);font-size:13.5px;line-height:1.4}
.pick-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:transparent}
.pick:has(input:checked) .pick-tick{background:var(--c);border-color:var(--c);color:#06120c}
.pick-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:18px;margin-top:18px;padding:14px 0;background:linear-gradient(180deg,transparent,var(--bg) 35%)}

/* Settings: photo first (tap to change), then sections */
.settings .set-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.avatar-edit{display:flex;align-items:center;gap:16px;margin:10px 0 18px}
.avatar-pick{position:relative;display:inline-block;cursor:pointer;border-radius:50%;flex:0 0 auto}
.avatar-pick .av{width:104px;height:104px}
.avatar-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.avatar-pen{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;border:3px solid var(--panel);pointer-events:none}
.avatar-pick:hover .avatar-pen,.avatar-pick:focus-within .avatar-pen{filter:brightness(1.1)}
.avatar-pick:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.avatar-pick.busy::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--bar-rgb),.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ff6a3d' stroke-width='2.5' stroke-dasharray='40 20'/%3E%3C/svg%3E") center/34px no-repeat;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.link-rows{display:flex;flex-direction:column;gap:8px}.link-rows .field{margin:0}
.link-more{margin-top:8px}
.set-save{margin-top:16px}

/* Code blocks: monospace, scroll sideways rather than wrap, with a Copy button */
.prose pre.code{position:relative;margin:12px 0;padding:14px 16px;background:#08111d;border:1px solid var(--line2);border-radius:12px;overflow-x:auto;font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d7e3f0;tab-size:4}
.prose pre.code code{background:none;padding:0;font:inherit;white-space:pre}
.prose pre.code[data-lang]::before{content:attr(data-lang);display:block;margin:-4px 0 8px;font:600 11px/1 var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.copy-code{position:absolute;top:8px;right:8px;min-height:28px;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.copy-code:hover{color:var(--text);border-color:var(--accent)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* The Front Page, laid out like a magazine front */
.mag{max-width:1080px;margin:0 auto}
.mag-mast{text-align:center;padding:6px 0 18px;margin-bottom:26px;border-bottom:3px double var(--line2)}
.mag-date{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mag-title{font-size:clamp(46px,9vw,84px);line-height:1;margin:6px 0 10px}
.mag-sub{margin:0 auto;max-width:640px;color:var(--muted)}
.mag-sub .faint{display:block;margin-top:4px;font-size:13.5px}
.mag-sq{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.mag-sq:hover{text-decoration:none;filter:brightness(1.15)}
.mag h2 a,.mag h3 a{color:var(--strong);text-decoration:none}
.mag h2 a:hover,.mag h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mag-meta{margin:8px 0 0;font-size:13px;color:var(--faint)}
.mag-dek{margin:8px 0 0;color:var(--text);line-height:1.55}
.mag-pic{display:block;position:relative;overflow:hidden;border-radius:14px;background:var(--c-soft);aspect-ratio:16/10;border:1px solid var(--line)}
.mag-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.mag-pic:hover img{transform:scale(1.03)}
.mag-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--c-soft),transparent 70%)}
.mag-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:34px}
.mag-lead .mag-pic{aspect-ratio:16/10.5}
.mag-lead h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12;margin:8px 0 0}
.mag-lead .mag-dek{font-size:17px}
.mag-lead.is-breaking .mag-sq{color:#f7931a !important}
.mag-join{margin-top:16px}
.mag-row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:22px;padding:24px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.mag-card .mag-pic{margin-bottom:12px}
.mag-card h3{font-size:20px;line-height:1.22;margin:6px 0 0}
.mag-section{margin:0 0 30px}
.mag-section-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--c)}
.mag-briefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.mag-brief{display:flex;gap:16px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.mag-brief h3{font-size:21px;line-height:1.25;margin:4px 0 0}
.mag-brief .mag-dek{font-size:14.5px;color:var(--muted)}
.mag-thumb{flex:0 0 112px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--c-soft)}
.mag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mag-add{margin:38px 0 10px;border:2px dashed var(--line2);border-radius:20px;transition:border-color .15s}
.mag-add:hover,.mag-add[open]{border-color:rgba(var(--accent-rgb),.45)}
.mag-add summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 24px}
.mag-add summary::-webkit-details-marker{display:none}
.mag-plus{flex:0 0 auto;width:64px;height:64px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:300;line-height:1;box-shadow:0 0 24px rgba(var(--accent-rgb),.25);transition:transform .2s}
.mag-add[open] .mag-plus{transform:rotate(45deg)}
.mag-add-text{display:flex;flex-direction:column;gap:3px}
.mag-add-text strong{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--strong)}
.mag-add-text span{color:var(--muted)}
.mag-add-box{padding:0 24px 22px}
@media (max-width:900px){
  .mag-row{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))}
  .mag-row > .mag-card:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}
  .mag-row > .mag-card:last-child:nth-child(odd):not(:first-child) .mag-pic{aspect-ratio:16/8}
}
@media (max-width:720px){
  .mag-lead{grid-template-columns:1fr;gap:16px}
  .mag-briefs{grid-template-columns:1fr}
  .mag-brief h3{font-size:19px}
  .mag-thumb{flex-basis:92px;height:72px}
  .mag-add summary{padding:18px}
  .mag-plus{width:54px;height:54px;font-size:34px}
  .mag-add-text strong{font-size:22px}
  .mag-add-box{padding:0 16px 18px}
}
@media (max-width:480px){.mag-row{grid-template-columns:1fr 1fr;gap:16px}.mag-card h3{font-size:17px}}

/* The reply box: tools on top, a white writing space, the send button in the corner, all one box */
.composer{background:#eef4fa;border:1px solid var(--field-border);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(var(--hl-rgb),.04),0 6px 24px rgba(0,0,0,.18);transition:box-shadow .15s,background .15s}
.composer.focus{background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
.composer .toolbar{margin:0;padding:6px;gap:2px;background:#e1e9f2;border-bottom:1px solid #d3dde8;flex-wrap:wrap}
.composer.focus .toolbar{background:#eaf0f6}
.composer .toolbar button{min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-soft);font-size:14px;font-weight:500}
.composer .toolbar button:hover{background:rgba(11,22,38,.08);border:0}
.composer .toolbar button:focus-visible{outline:2px solid #00a866;outline-offset:-2px}
.composer .toolbar .sep{background:#c7d2df;margin:6px 3px}
.composer textarea{display:block;width:100%;background:transparent;border:0;border-radius:0;color:var(--ink-text);font-size:16.5px;padding:14px 16px;min-height:140px}
.composer textarea:focus{border:0;outline:none}
.composer textarea::placeholder{color:#6b7a8f}
.composer textarea.drop-hint{background:rgba(var(--accent-rgb),.08)}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;padding:8px 10px 10px;margin:0}
.composer-foot .faint{order:1;margin-right:auto;color:#5b6b80;font-size:13.5px;padding-left:6px}
.composer-foot .btn{order:2;min-height:40px;padding:8px 18px}
.composer-foot .btn.ghost{color:var(--ink-soft);border-color:#c5d0dc;background:transparent}
.composer-foot .btn.ghost:hover{background:rgba(11,22,38,.06)}
@media (max-width:560px){
  .composer .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .composer .toolbar::-webkit-scrollbar{display:none}
  .composer .toolbar .tb-word{display:none}
  .composer .toolbar button{padding:6px 9px;flex:0 0 auto}
  .composer-foot .faint{flex:1 1 100%;order:3;padding:0 4px}
}

/* Language: a globe with the current language, opening a small menu (flags stand for countries, not languages) */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--accent)}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:200px;display:flex;flex-direction:column;padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.lang-pop a{padding:10px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:15px}
.lang-pop a:hover{background:rgba(var(--hl-rgb),.06);text-decoration:none}
.lang-pop a[aria-current]{color:var(--accent);font-weight:600}
.lang-pop a[aria-current]::after{content:" ✓"}
.lang-pop .lang-more{border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px;padding-top:12px;color:var(--muted);font-size:14px}
@media (max-width:640px){.nav-main .lang-menu{margin-left:auto}.nav-main{overflow:visible}}

.rss-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--rss);text-decoration:none;padding:4px 2px}
.rss-link:hover{text-decoration:none;filter:brightness(1.15)}
.mag-sub .rss-link{margin-left:8px;vertical-align:middle}

/* "Answered" marks */
.answer-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 9px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-size:12px;font-weight:700}
.post.is-answer > .body > .prose{border-left:3px solid var(--accent);padding-left:14px}
/* When a time-sensitive answer was written, and a warning once it's old */
.fresh-note{margin:8px 0 0;font-size:13px;color:var(--faint)}
.fresh-note.stale{padding:7px 11px;border-radius:10px;color:var(--text);background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.40)}
.fresh-note a{color:var(--accent);font-weight:600;white-space:nowrap}
/* The live price box under an answer to "what's bitcoin at?" (price.js) */
.price-box{margin:4px 0 12px;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);font-size:15px;line-height:1.5}
.price-box strong{font-size:18px;color:var(--strong);font-variant-numeric:tabular-nums}
.price-box .pb-what{color:var(--muted);margin-right:4px}
.price-box .pb-src{color:var(--faint);font-size:13px}
.price-box a{color:var(--accent)}
.act.mark-answer{color:var(--accent)}
.act.mark-answer.on{background:rgba(var(--accent-rgb),.1)}
.answered-chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.answered-chip:hover{text-decoration:none;filter:brightness(1.1)}
.answered-card{display:flex;gap:14px;align-items:flex-start;margin:6px 0 22px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));border:1px solid rgba(var(--accent-rgb),.35);color:var(--text);text-decoration:none}
.answered-card:hover{text-decoration:none;border-color:rgba(var(--accent-rgb),.6)}
.answered-tick{flex:0 0 auto;width:30px;height:30px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.answered-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.answered-text strong{color:var(--accent)}
.answered-ex{color:var(--text);line-height:1.5}
.answered-pill{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:0}

/* Circles: private groups */
.circle-list{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
.circle-row{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s}
.circle-row:hover{border-color:var(--c);text-decoration:none}
.circle-row-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.circle-row-name{font-family:var(--serif);font-size:22px;color:var(--strong)}
.circle-row-blurb{color:var(--muted);font-size:14.5px}
.circle-ico{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid;flex:0 0 auto}
.circle-new{border:2px dashed var(--line2);border-radius:20px}
.circle-new[open]{border-color:rgba(var(--accent-rgb),.45)}
.circle-new summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:18px 20px}
.circle-new summary::-webkit-details-marker{display:none}
.circle-new[open] .mag-plus{transform:rotate(45deg)}
.circle-new-form{padding:0 20px 20px}
.circle-private{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--muted)}
.circle-faces{display:flex;flex-wrap:wrap;align-items:center;gap:4px;text-decoration:none}
.circle-faces:hover{text-decoration:none}
.circle-banner{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:8px 14px;border-radius:12px;background:rgba(125,211,252,.07);border:1px solid rgba(125,211,252,.25);color:var(--text);font-size:14px}
.circle-members{list-style:none;margin:0;padding:0}
.circle-members li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cm-name{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.pill-mini{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line2);font-size:12px;color:var(--muted)}
.invite-link{display:flex;gap:10px;flex-wrap:wrap}.invite-link .field{flex:1 1 260px;margin:0;font-size:14px}
.circle-note{margin:0 0 10px}
.circle-banner svg{flex:0 0 auto;margin-top:3px}

/* A PDF waiting to go with a question */
.ask-doc{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(var(--hl-rgb),.06);border:1px solid var(--line2);color:var(--text);font-size:14px;max-width:100%}
.ask-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-doc-warn{flex:1 1 100%;margin:6px 0 0;font-size:13px;color:var(--warn-soft)}

/* Circles drawn as circles: a ring in the circle's color, faces seated around its edge */
.circles-page{max-width:1000px;margin:0 auto}
.circles-intro{max-width:760px;margin:0 auto 10px;text-align:center}
.circle-cluster{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px 46px;padding:40px 10px 30px}
.circle-cluster > :nth-child(even){margin-top:46px}
.ring{position:relative;flex:0 0 auto;border-radius:50%;border:3px solid var(--c);background:radial-gradient(circle at 50% 38%,var(--c-soft),var(--c-faint) 72%);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
a.ring:hover{text-decoration:none;transform:scale(1.03);box-shadow:0 0 34px var(--c-glow)}
.ring-center{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:68%}
.ring-name{font-family:var(--serif);font-size:var(--name);line-height:1.12;color:var(--c);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ring-meta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.ring .seat{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px var(--bg);line-height:0}
.ring .seat-more{display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font-size:12px;font-weight:700;line-height:1}
.ring-start{border:2px dashed var(--line2);background:transparent}
.ring-start:hover{border-color:var(--accent);box-shadow:0 0 28px rgba(var(--accent-rgb),.18)}
.ring-plus{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:300;line-height:1;box-shadow:0 0 22px rgba(var(--accent-rgb),.3)}
.ring-start-title{font-family:var(--serif);font-size:20px;color:var(--strong);margin-top:4px}
.ring-start-sub{font-size:12px;color:var(--muted)}
.ring .seat-empty{width:26px;height:26px;border:2px dashed var(--line2);background:var(--bg);box-shadow:none}
.ring-start:hover .seat-empty{border-color:rgba(var(--accent-rgb),.5)}
.circle-new-card{max-width:620px;margin:10px auto 40px;padding:22px 24px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:20px;background:var(--panel)}
.circle-new-card h2{font-size:28px;margin:0 0 4px}
.circle-hero{display:flex;flex-wrap:wrap;align-items:center;gap:36px 48px;padding:34px 24px 30px;margin-bottom:22px}
.circle-hero .ring{--name:28px}
.circle-hero-text{flex:1 1 300px;min-width:0}
@media (max-width:640px){
  .circle-cluster{flex-direction:column;gap:64px;padding-top:44px}
  .circle-cluster > :nth-child(even){margin-top:0}
  .circle-hero{flex-direction:column;text-align:center;padding:30px 0 20px}
  .circle-hero-text{flex:0 0 auto;width:100%}
  .circle-hero-text .circle-private,.circle-hero-text > div{justify-content:center}
}

@media (max-width:560px){.askbox textarea{flex-basis:100%}}

/* "Your circles" as bubbles: sized by members, packed together; faces peek out on hover */
.bubbles-wrap{padding:30px 0 34px}
.bubbles{position:relative;width:100%;margin:0 auto;container-type:inline-size}
.bubbles-tall{display:none}
@media (max-width:640px){.bubbles-wide{display:none}.bubbles-tall{display:block}}
.bubble{position:absolute;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;text-align:center;text-decoration:none;color:var(--text);
  background:radial-gradient(circle at 38% 30%,var(--c-a),var(--c-b) 45%,var(--c-c) 75%);box-shadow:inset 0 0 0 2px var(--c-line),0 0 36px var(--c-glow);transition:transform .25s,box-shadow .25s}
.bubble:hover,.bubble:focus-visible{text-decoration:none;transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--c),0 0 46px var(--c-glow)}
.bubble-name{font-family:var(--serif);color:var(--hi);font-size:max(15px,calc(var(--w) * .115cqw));line-height:1.1;max-width:74%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bubble-meta{font-size:max(11.5px,calc(var(--w) * .05cqw));color:var(--soft-text)}
.bubble-face{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px var(--bg);line-height:0;opacity:0;transition:opacity .25s}
.bubble:hover .bubble-face,.bubble:focus-visible .bubble-face{opacity:1}
@media (hover:none){.bubble-face{opacity:1}}
.bubble-seed{border:2px dashed rgba(var(--accent-rgb),.6);background:radial-gradient(circle,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),0) 70%);box-shadow:0 0 34px rgba(var(--accent-rgb),.2);gap:.25em}
.bubble-seed:hover{box-shadow:0 0 46px rgba(var(--accent-rgb),.32)}
.seed-plus{width:44%;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:max(24px,calc(var(--w) * .2cqw));font-weight:300;line-height:1}
.seed-label{font-size:12px;color:var(--text);white-space:nowrap}

/* Starting a circle: the form is a round table */
.table-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 56px;max-width:1000px;margin:10px auto 50px;padding:20px 0}
.table-ring{position:relative;flex:0 0 auto;width:380px;aspect-ratio:1;border-radius:50%;border:3px solid var(--ring);background:radial-gradient(circle at 50% 40%,rgba(58,77,104,.14),rgba(var(--panel-rgb),.6) 72%);transition:border-color .3s,box-shadow .3s,background .3s}
.table-ring.named{border-color:var(--accent);background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),.10),rgba(var(--panel-rgb),.6) 72%);box-shadow:0 0 50px rgba(var(--accent-rgb),.14)}
.table-center{position:absolute;inset:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.table-name{font-family:var(--serif);font-size:34px;line-height:1.1;color:#5c6b80;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.table-ring.named .table-name{color:var(--strong)}
.table-blurb{font-size:14.5px;color:var(--muted);max-width:100%}
.table-count{font-size:13px;color:var(--muted)}
.chair{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:2px dashed var(--ring);background:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;transition:all .25s}
.chair.taken{border:0;box-shadow:0 0 0 4px var(--bg);color:var(--ink-text)}
.chair-you{border:0;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent);line-height:0}
.table-form{flex:1 1 360px;max-width:460px}
.table-form h2{font-size:32px;margin:0 0 4px}
.field-white{background:#eef4fa;color:var(--ink-text);border-color:var(--field-border)}
.field-white::placeholder{color:#6b7a8f}
.field-white:focus{background:#fff}
@media (max-width:640px){.table-ring{width:280px}.table-name{font-size:26px}.chair{width:38px;height:38px}.table-card{gap:30px}}

.share-row{display:flex;flex-wrap:wrap;gap:10px}
.link-tools{display:inline-flex;gap:4px;margin-left:6px}.link-tools form{display:inline}

.mag-earlier{margin-top:10px}
.mag-earlier-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.mag-earlier-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.mag-earlier-list a{font-family:var(--serif);font-size:17px;color:var(--text);line-height:1.3}
@media (max-width:720px){.mag-earlier-list{grid-template-columns:1fr}}

/* Photos: full-screen viewer */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(var(--scrim-rgb),.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 12px 70px;touch-action:pan-y}
.lightbox[hidden]{display:none}
html.lb-open{overflow:hidden}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;flex:1;justify-content:center}
.lb-img{max-width:min(96vw,1400px);max-height:calc(100vh - 170px);object-fit:contain;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.lb-cap{color:#dbe6f2;font-size:15px;text-align:center;max-width:720px}
.lb-bar{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;align-items:center;gap:18px;font-size:14px;color:#b9c6d6}
.lb-link{color:var(--accent)}
.lb-close,.lb-prev,.lb-next{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(var(--panel-rgb),.7);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close{top:12px;right:12px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-prev[hidden],.lb-next[hidden]{display:none}
@media (max-width:640px){.lb-prev,.lb-next{display:none}}
.prose figure.img > a{cursor:zoom-in}

/* Several photos in one post: a swipeable carousel */
.carousel{position:relative;margin:14px 0 6px}
.prose .carousel .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin:0;border-radius:14px;scrollbar-width:none;background:var(--media);border:1px solid var(--line)}
.prose .carousel .gallery::-webkit-scrollbar{display:none}
.prose .carousel .gallery figure.img{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;flex-direction:column;align-items:center}
.prose .carousel .gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;border:0;border-radius:0;max-height:none;background:var(--media)}
.prose .carousel figcaption{padding:6px 10px}
.car-count{position:absolute;top:10px;right:10px;padding:2px 9px;border-radius:999px;background:rgba(var(--scrim-rgb),.7);color:#fff;font-size:12px;font-weight:600}
.car-prev,.car-next{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--ink-text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.car-prev{left:10px}.car-next{right:10px}
.carousel.at-start .car-prev,.carousel.at-end .car-next{display:none}
@media (hover:none){.car-prev,.car-next{display:none}}
.car-dots{display:flex;justify-content:center;gap:6px;margin:0 0 12px}
.car-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .2s}
.car-dots i.on{background:var(--accent)}

/* Photos grid (Instagram-style): square tiles, three across */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 20px}
.photo-tile{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--panel2)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.photo-tile:hover img{transform:scale(1.04)}
/* Circle albums: cover cards on the Photos page, a pick-and-remove mode inside an album. */
.albums{margin:0 0 28px}
.albums-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.albums-head h2,.albums-sub{font-size:26px;margin:0}
.albums-sub{margin:8px 0 12px}
.album-new{position:relative}.album-new>summary{list-style:none;cursor:pointer}.album-new>summary::-webkit-details-marker{display:none}
.album-new-form{display:grid;gap:8px;margin-top:10px;min-width:min(420px,100%)}
.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:700px){.album-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.album-card{display:flex;flex-direction:column;gap:4px;color:var(--text);text-decoration:none}
.album-cover{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.album-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.album-card:hover .album-cover img{transform:scale(1.04)}
.album-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:40px;opacity:.5}
.album-name{font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.album-n{font-size:13px}
.album-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.album-edit{display:grid;gap:12px;margin:0 0 16px}
.album-rename{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:700px){.album-rename{grid-template-columns:1fr 1.4fr auto}}
.album-edit-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.album-pick{position:relative;cursor:pointer}
.album-pick input{position:absolute;top:8px;left:8px;width:22px;height:22px;accent-color:var(--accent)}
.album-pick:has(input:checked) img{opacity:.55}
.album-cover-badge{position:absolute;bottom:6px;left:6px;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff}
.album-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin:22px 0;flex-wrap:wrap}
@media (min-width:900px){.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
@media (max-width:480px){.photo-grid{gap:3px}.photo-tile{border-radius:0}}

@media (pointer:coarse){.send-hint{display:none}}

.fresh-card{animation:freshcard 5s ease-out}
@keyframes freshcard{0%{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.7),0 0 28px rgba(var(--accent-rgb),.25)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.fresh-card{animation:none}}

/* Private conversations: replying to a specific message */
.pm-replying{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.35);font-size:14px;color:var(--text)}
.pm-replying[hidden]{display:none}
.pm-replying-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* People in a private conversation: tap to open their profile */
.person-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 4px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--text);font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.person-chip:hover,.person-chip:focus-visible{border-color:var(--accent);background:var(--panel);text-decoration:none}

.convo-title{font-weight:400;color:var(--muted)}

/* Voice messages */
.voice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0;padding:8px 12px;border-radius:14px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.25);max-width:460px}
.voice audio{height:36px;flex:1 1 220px;min-width:0}
.voice-label{font-size:13px;color:var(--muted)}
/* Transcripts under recordings (transcribe.js) */
.transcript{margin:-2px 0 10px;max-width:640px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2)}
.transcript>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;padding:9px 14px;min-height:24px;font-size:14px}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary::before{content:"▸";color:var(--muted);font-size:12px;transition:transform .15s}
.transcript[open]>summary::before{transform:rotate(90deg)}
.transcript .tx-h{font-weight:600;color:var(--text)}
.transcript .tx-meta{color:var(--muted);font-size:13px}
.transcript .tx-body{padding:2px 14px 10px;max-height:420px;overflow-y:auto;font-size:15px;line-height:1.6;unicode-bidi:plaintext}
.transcript .tx-body p{margin:0 0 10px}
.transcript a.tx-t{display:inline-block;min-width:38px;margin-right:4px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent);text-decoration:none;padding:2px 0}
.transcript a.tx-t:hover{text-decoration:underline}
.transcript .tx-trbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 10px;font-size:13px;color:var(--muted)}
.transcript .tx-trbtn{font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer}
.transcript .tx-trbtn:hover{text-decoration:underline}
.transcript .tx-trbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
.transcript .tx-foot{font-size:12px;color:var(--muted);margin:4px 0 0}
.tx-note{margin:-2px 0 10px;font-size:13px;color:var(--muted)}
/* In private messages: just a small link under the voice message until it's tapped */
.transcript.tx-link{border:0;background:none;margin:2px 0 6px}
.transcript.tx-link>summary{padding:2px 0;min-height:0;font-size:13px}
.transcript.tx-link>summary::before{content:none}
.transcript.tx-link .tx-h{font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.transcript.tx-link[open] .tx-h{text-decoration:none}
.transcript.tx-link .tx-body{padding:6px 0 2px;max-height:300px;font-size:14.5px}
.voice-rec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
.voice-rec audio{height:38px;flex:1 1 220px;min-width:0}
.voice-rec .btn{min-height:40px;padding:8px 16px}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 0 rgba(248,113,113,.6);animation:recpulse 1.2s infinite}
@keyframes recpulse{70%{box-shadow:0 0 0 10px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600;margin-right:auto}

/* A circle at scale: topics down the side (chips on a phone), search, welcome, pins */
.circle-hero-compact{padding:22px 10px 18px;margin-bottom:10px;gap:28px 40px}
.circle-hero-compact .ring{--name:22px}
.circle-main{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.topic-nav{position:sticky;top:14px;display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.topic-nav-h{margin:0 0 6px;padding:0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--strong)}
.topic-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:6px 10px;border-radius:10px;color:var(--text);text-decoration:none;font-size:15px;cursor:pointer;list-style:none}
.topic-link::-webkit-details-marker{display:none}
.topic-link span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic-link:hover{background:rgba(var(--hl-rgb),.05);text-decoration:none}
.topic-link.on{background:rgba(var(--accent-rgb),.10);color:var(--strong);font-weight:600}
.topic-unsorted{color:var(--muted)}
.topic-n{font-size:12.5px;color:var(--faint)}
.topic-new{min-width:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;text-align:center}
.topic-add summary{color:var(--accent)}
.topic-add-form{display:flex;flex-direction:column;gap:8px;padding:6px 4px 4px}
.topic-add-form .field{margin:0;padding:10px 12px;font-size:14px}
.topic-add-form .btn{min-height:38px}
.circle-search{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.circle-search .field{margin:0;border-radius:999px;padding:11px 18px}
.circle-welcome{margin:0 0 16px;padding:14px 18px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.02));border:1px solid rgba(var(--accent-rgb),.3)}
.circle-welcome-h,.pinned-h{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pinned{margin:0 0 20px}
.pinned-h{color:var(--warn-soft)}
.topic-title{font-family:var(--serif);font-weight:500;font-size:30px;margin:4px 0 12px;color:var(--strong)}
.circle-card{position:relative}
.topic-tag{position:absolute;top:14px;right:16px;z-index:1;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);font-size:12.5px;color:var(--muted);text-decoration:none}
.topic-tag:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.circle-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0 0;padding:10px 14px;border-radius:12px;border:1px dashed var(--line2)}
.circle-tool{display:flex;align-items:center;gap:8px}
.circle-tool label{font-size:13px;color:var(--muted)}
.circle-tool .field{margin:0;padding:8px 10px;min-width:160px}
.circle-tool .btn{min-height:38px;padding:6px 14px}
.topic-admin{list-style:none;margin:0;padding:0}
.topic-admin li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.topic-admin-row{display:flex;align-items:center;gap:8px;flex:1}
.topic-admin-row .field{margin:0;padding:8px 12px;max-width:280px}
.pill-mod{border-color:rgba(var(--accent-rgb),.45);color:var(--accent)}
@media (max-width:820px){
  .circle-main{grid-template-columns:1fr;gap:14px}
  .topic-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;gap:6px;border-radius:999px}
  .topic-nav::-webkit-scrollbar{display:none}
  .topic-nav-h{display:none}
  .topic-link{flex:0 0 auto;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);gap:6px}
  .topic-add{flex:0 0 auto}
  .topic-add[open]{position:absolute;z-index:5;margin-top:44px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px}
  .topic-tag{position:static;display:inline-block;margin:0 0 6px}
}

.ai-suggest{margin:0 0 16px;padding:14px 18px;border-radius:16px;border:1px solid rgba(165,180,252,.45);background:linear-gradient(135deg,rgba(165,180,252,.10),rgba(165,180,252,.02))}
.ai-suggest-h{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a5b4fc}
.ai-suggest-item{display:inline-block;margin:4px 6px 0 0;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--text)}
.topic-known{margin:0 0 18px;padding:14px 18px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.05)}
.topic-known-h{margin:0 0 6px;font-family:var(--serif);font-size:20px;color:var(--strong)}
.topic-known-h .faint{font-family:var(--sans);font-size:12.5px}
.my-circle-prefs{margin:0 0 18px;padding:12px 16px}

.circle-similar{margin:8px 0 0;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:4px}
.circle-similar[hidden]{display:none}

.badge-bot{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:rgba(147,197,253,.15);border:1px solid rgba(147,197,253,.5);color:#93c5fd;font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.hook-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hook-add .field{margin:0;flex:1 1 200px}

/* One-tap circles: the start buttons, and the "Set up your circle" card inside a new circle */
button.bubble,button.ring{font:inherit;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
button.ring-start{color:var(--text)}
.start-first{display:flex;flex-direction:column;align-items:center;gap:18px;margin:30px auto 50px}
.circle-setup{margin:0 0 26px;padding:20px 22px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.35);background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.02))}
.circle-setup h2{font-size:28px;margin:0 0 12px}
.setup-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.setup-steps>li{padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.setup-steps>li.now{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 22px rgba(var(--accent-rgb),.10)}
.setup-step-h{margin:0 0 10px;font-weight:700;color:var(--strong)}
.setup-steps>li.done .setup-step-h{color:var(--accent)}
.setup-name{display:flex;flex-direction:column;gap:8px}.setup-name .field{margin:0}.setup-name .btn{align-self:flex-start}
.circle-setup .share-row .btn{min-height:44px}

/* Who's around a circle right now (circle page): a line under its name, seat dots, card chips, topic dots */
.circle-now{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 4px}
.circle-now[hidden]{display:none}
.now-person{display:inline-flex;align-items:center;gap:6px;position:relative;font-size:14px;color:var(--text)}
.now-person a{color:var(--accent)}
.now-face{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.now-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);font-size:11px;font-weight:700}
.now-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 10px rgba(var(--accent-rgb),.7);flex:0 0 auto;animation:nowpulse 2.4s ease-in-out infinite}
.now-person .now-dot{position:absolute;left:15px;top:-2px}
@keyframes nowpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.now-dot{animation:none}}
.ring .seat.online{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),0 0 16px rgba(var(--accent-rgb),.55)}
.live-chip{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--accent)}
.circle-card.live-now article.card{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 22px rgba(var(--accent-rgb),.08)}
.topic-link.live-topic span:first-child::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.7);vertical-align:middle}

/* Feedback (/feedback and the host's /admin/feedback) */
.fb-kinds{border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.fb-kind{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 12px;border:1px solid var(--line2);border-radius:999px;cursor:pointer}
.fb-kind:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.10)}
.fb-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fb-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid var(--line2)}
.fb-new{color:#7dd3fc;border-color:rgba(125,211,252,.5)}.fb-planned{color:var(--warn-soft);border-color:rgba(252,211,77,.5)}
.fb-done{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}.fb-closed{color:var(--muted)}
.fb-reply{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25)}
.fb-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.fb-tab{padding:6px 14px;border-radius:999px;border:1px solid var(--line2);text-decoration:none;color:var(--text)}
.fb-tab.on{border-color:var(--accent);color:var(--accent)}
.fb-admin textarea{min-height:70px;margin:0 0 8px}
.fb-actions{display:flex;flex-wrap:wrap;gap:8px}

/* The app: room for the iPhone's notch and home bar when installed (viewport-fit=cover) */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* The install invitation (phones, second visit on) and the Get the app page */
.install-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 14px;border-radius:18px;background:rgba(var(--panel-rgb),.97);border:1px solid rgba(var(--accent-rgb),.4);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.install-bar[hidden],.install-bar [hidden]{display:none}
.install-bar img{border-radius:10px;flex:0 0 auto}
.install-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.install-bar .btn{flex:0 0 auto;min-height:44px}
.install-x{flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.install-x:hover{color:var(--text)}
.app-page .app-icon{border-radius:20px;box-shadow:0 0 30px rgba(var(--accent-rgb),.18);margin:6px 0 16px}
.app-steps h2{margin:0 0 10px}
.app-steps ol,.app-steps ul{margin:0 0 8px;padding-left:22px;line-height:1.7}
.app-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);color:var(--accent)}
.app-more{margin-top:16px}.app-more .app-steps{margin-top:12px}
.btn-big{min-height:52px;padding:12px 30px;font-size:17px}

/* Sign-in code box */
.code-form .code-field{max-width:220px;font-size:26px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

/* ---- Phones: a slim top bar and a tab bar at the bottom ------------------------------------ */
.tabbar{display:none}
.pl-short{display:none}
@media (max-width:640px){
  .pl-long{display:none}.pl-short{display:inline}
  .prelaunch{padding:6px 16px;font-size:13px}
  .prelaunch a{color:var(--accent-soft);text-decoration:underline}
  /* The header keeps the wordmark, the house AIs, search and the notification bell (the host's
     shield too); everything else moves to the tabs. Light/dark is set once, under You → Appearance
     (Auto by default), so its switch stays off the phone header. */
  .top{flex-wrap:nowrap;padding:10px 0 8px}
  .wordmark{font-size:30px}
  .top .nav-main{display:none}
  .nav-tools > :not(.nav-ais):not(.nav-search):not(.signin-link):not(.nav-notes):not(.nav-host){display:none}
  .nav-tools .bell.nav-notes,.nav-tools .bell.nav-host{width:44px;height:44px}
  /* Signed out: Sign in stays at the top right, where people look for it (it's also the last tab). */
  .nav-tools .signin-link{display:inline-flex;align-items:center;min-height:36px;margin-left:4px;padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
  .nav-tools{gap:0 4px}
  .nav-tools .nav-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
  .nav-tools .bell.nav-ais{width:44px;height:44px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;justify-content:space-around;align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(var(--bar-rgb),.96);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600}
  .tab:hover{text-decoration:none;color:var(--text)}
  .tab.on{color:var(--accent)}
  .tab-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
  .tab-ico .av{width:26px;height:26px}
  .tab.on .tab-ico .av{box-shadow:0 0 0 2px var(--accent)}
  .tab-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tab-n{position:absolute;top:-4px;right:-10px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:700;border-radius:999px;padding:0 5px;line-height:16px;box-shadow:0 0 0 2px rgba(var(--bar-rgb),.96)}
  /* Things that sit at the bottom move up above the tabs. */
  .install-bar{bottom:calc(78px + env(safe-area-inset-bottom))}
  .new-pill,.share-toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .pick-bar{bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* The You page */
/* The You page: a profile card with its numbers, four tiles that say what's in them, then lists. */
.you-head{display:flex;align-items:center;gap:14px;margin:6px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;color:var(--text)}
.you-head:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.you-head strong{display:block;font-size:22px;font-weight:500;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-head .faint{display:block;font-size:14px}
.you-stats{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.you-h{margin:18px 4px 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.you-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.you-tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico n" "label label" "sub sub";align-items:center;gap:2px 10px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;min-height:104px}
.you-tile:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-tile svg{grid-area:ico;color:var(--accent)}
.you-tile-n{grid-area:n;justify-self:end;font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.you-tile-label{grid-area:label;margin-top:10px;font-size:16px;font-weight:600}
.you-tile-sub{grid-area:sub;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-label .faint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-label{min-width:0}
.you-list{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.you-list li + li{border-top:1px solid var(--line)}
.you-row{display:flex;align-items:center;gap:14px;min-height:54px;padding:8px 16px;color:var(--text);text-decoration:none}
.you-row:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-row svg{color:var(--accent);flex:0 0 auto}
.you-label{flex:1 1 auto;display:flex;flex-direction:column;font-size:16px}
.you-label .faint{font-size:13px}
.you-n{background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px}
.you-chev{color:var(--faint);font-size:22px;line-height:1}

/* Your own profile: the photo up top changes it (pencil badge), and a Settings button */
.avatar-head{margin:0}
.avatar-head .avatar-pick .av{width:88px;height:88px}
.avatar-head .avatar-pen{border-color:var(--bg)}
.profile-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pill-strong{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
#settings{scroll-margin-top:16px}

/* The voice recorder, in place of the message box: Cancel · ● time · Stop · Send */
.voice-rec{flex-wrap:nowrap;gap:8px;padding:8px 8px 8px 6px;min-height:60px;border-radius:999px;border-color:rgba(248,113,113,.45)}
.voice-rec .vr-live{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text)}
.voice-rec .rec-time{margin-right:0}
.vr-icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vr-icon:hover{color:var(--text);background:rgba(var(--hl-rgb),.06)}
.vr-stop{color:var(--danger);border:1px solid rgba(248,113,113,.5)}
.voice-rec .vr-send{flex:0 0 auto;min-height:44px;padding:8px 16px 8px 13px;gap:6px}
.voice-rec audio{flex:1 1 auto;min-width:0;height:40px}
@media (max-width:380px){.voice-rec .vr-word{display:none}}

/* The host's Traffic page */
.tr-big{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 18px}
.tr-big > div{flex:1 1 180px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.tr-num{display:block;font-family:var(--serif);font-size:40px;color:var(--strong);line-height:1.1}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px}
.tr-card h2{margin:0 0 10px;font-size:20px}
.tr-table{width:100%;border-collapse:collapse;font-size:14px}
.tr-table th{text-align:left;font-weight:600;color:var(--faint);padding:4px 6px;border-bottom:1px solid var(--line)}
.tr-table th:not(:first-child),.tr-table td:not(:first-child){text-align:right;width:64px;font-variant-numeric:tabular-nums}
.tr-table td{padding:6px;border-bottom:1px solid var(--line)}
.tr-table td:first-child{position:relative;word-break:break-all}
.tr-bar{position:absolute;left:0;top:3px;bottom:3px;background:rgba(var(--accent-rgb),.10);border-radius:6px;z-index:0}
.tr-name{position:relative;z-index:1}
.tr-ranges .fb-tab{min-width:52px;text-align:center}
.tc-stack{display:grid;gap:14px;margin-bottom:14px}
.tc-note{margin:-4px 0 12px}
.tc{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:6px 4px 26px 0}
.tc-y{position:relative;height:220px;min-width:30px}
.tc-y span{position:absolute;right:0;transform:translateY(50%);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1}
.tc-plot{position:relative;height:220px;touch-action:pan-y;cursor:crosshair}
.tc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tc-grid{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line);opacity:.7}
.tc-grid.base{border-top-color:var(--line2);opacity:1}
.tc-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tc-area{fill:rgba(var(--accent-rgb),.10);stroke:none}
.tc-x{position:absolute;left:0;right:0;top:100%;height:22px}
.tc-x span{position:absolute;top:7px;transform:translateX(-50%);font-size:11.5px;color:var(--faint);white-space:nowrap}
.tc-x span.first{transform:none}.tc-x span.last{transform:translateX(-100%)}
.tc-hair{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line2);pointer-events:none}
.tc-dot,.tc-pt{position:absolute;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.tc-tip{position:absolute;top:-6px;transform:translateY(-100%);padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:12.5px;white-space:nowrap;pointer-events:none;z-index:2}
.tc-tip b{display:block;color:var(--strong);font-weight:600;margin-bottom:2px}.tc-tip span{color:var(--muted);font-variant-numeric:tabular-nums}
.tc-table{margin-top:4px}.tc-table summary{cursor:pointer;font-size:13px;color:var(--faint)}
.tc-table table{margin-top:8px;max-width:420px}
@media (max-width:640px){.tc-y,.tc-plot{height:170px}.tr-ranges{flex-wrap:wrap;gap:6px}.tr-ranges .fb-tab{min-width:0;padding-left:11px;padding-right:11px}.tc-x span.mid{display:none}}

/* Videos (reels) in posts: the first frame with a play button, then Cloudflare Stream's player */
.vid{position:relative;width:min(100%, calc(70vh * var(--r, .5625)));aspect-ratio:var(--r, .5625);margin:8px 0;border-radius:16px;overflow:hidden;background:var(--media);border:1px solid var(--line)}
.vid[data-state]:not([data-state="ready"]){aspect-ratio:auto;width:100%}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--media) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.vid-play{width:64px;height:64px;border-radius:50%;background:rgba(var(--bar-rgb),.62);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.65),0 6px 24px rgba(0,0,0,.4);padding-left:3px}
.vid-poster:hover .vid-play{background:rgba(var(--accent-rgb),.85);color:var(--accent-ink)}
.vid-dur{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.vid-msg{margin:0;padding:16px 18px;color:var(--muted);font-size:15px;display:flex;align-items:center;gap:10px}
.vid-label{display:none}

/* The Reels viewer: one video per screen, swipe up for the next */
.reels-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.reels-head h1{font-size:34px;margin:0}
.reels{height:calc(100vh - 230px);height:calc(100dvh - 230px);min-height:420px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border-radius:20px;background:var(--media);scrollbar-width:none;max-width:560px;margin:0 auto}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.reel .vid{margin:0;border:0;border-radius:0;height:100%;width:auto;max-width:100%;background:var(--media) center/contain no-repeat}
.reel-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:15px;pointer-events:none}
.reel-cap a{color:var(--accent-soft);pointer-events:auto}
.reel-end{flex-direction:column;gap:14px;color:var(--muted)}
@media (max-width:640px){
  .reels{height:calc(100dvh - 250px - env(safe-area-inset-bottom));min-height:360px;border-radius:14px;margin:0 -8px}
  .reels-head h1{font-size:28px}
}

/* Reels: the action rail (like, comments, share) and the comments sheet */
.reel-rail{position:absolute;right:10px;bottom:84px;display:flex;flex-direction:column;gap:14px;z-index:2}
.reel-act{display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;padding:6px 0;border:0;border-radius:14px;background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-act svg{filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.reel-act.on{color:#ff5c7a}
.reel-act:hover{background:rgba(0,0,0,.45)}
.reel-cap{padding-right:76px}
.reel-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:80;width:min(560px,100%);max-height:70vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
.reel-sheet[hidden]{display:none}
.reel-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.reel-sheet-x{width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}
.reel-sheet-list{flex:1 1 auto;overflow-y:auto;padding:12px 16px}
.reel-c{display:flex;gap:10px;margin:0 0 14px}
.reel-c-who{margin:0 0 2px;font-size:14px}
.reel-c .prose{font-size:15px}.reel-c .prose p{margin:0 0 6px}
.reel-c-more{margin:6px 0 4px;font-size:14px}
.reel-sheet-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);margin:0}
.reel-sheet-form textarea{flex:1 1 auto;min-height:44px;max-height:140px;margin:0;resize:vertical}
@media (max-width:640px){.reel-sheet{bottom:calc(64px + env(safe-area-inset-bottom));max-height:62vh}}

/* ---- Reels mode: the viewer takes over the screen, like Instagram and TikTok ---------------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.reels-mode{background:#000}
body.reels-mode::before{display:none}
body.reels-mode .prelaunch,body.reels-mode header.top,body.reels-mode .foot,body.reels-mode .install-bar{display:none}
body.reels-mode .reels{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw, 620px);height:auto;min-height:0;max-width:none;margin:0;border-radius:0;z-index:40;background:#000}
.reels-top{display:none}
body.reels-mode .reels-top{display:flex;align-items:center;gap:6px;position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100vw, 620px);z-index:45;padding:calc(6px + env(safe-area-inset-top)) 10px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none}
.reels-back{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#fff}
.reels-back:hover{background:rgba(255,255,255,.12)}
.reels-title{color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.reels-mode .reel{height:100%}
body.reels-mode .reel .vid{width:100%;height:100%;max-width:none;aspect-ratio:auto;background:#000 center/contain no-repeat}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
@media (max-width:640px){
  body.reels-mode .reels{width:100vw;bottom:calc(64px + env(safe-area-inset-bottom))}
  body.reels-mode .reels-top{width:100vw}
  body.reels-mode .reel-video{object-fit:cover}
  body.reels-mode .reel .vid{background-size:cover}
  body.reels-mode .tabbar{background:#000;border-top-color:#1a1a1a}
  body.reels-mode{padding-bottom:0}
}
/* The tap layer (pause/play, double-tap to like) sits over the video, under the rail and caption. */
.reel-tap{position:absolute;inset:0;z-index:1;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.reel-paused,.reel-needs-tap{display:none;pointer-events:none}
.reel.paused .reel-paused{display:flex;width:84px;height:84px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:38px;align-items:center;justify-content:center;padding-left:6px}
.reel.needs-tap .reel-needs-tap{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-weight:700}
.reel-cap,.reel-rail{z-index:2}
.reel-burst{position:absolute;z-index:3;transform:translate(-50%,-50%);font-size:96px;color:#ff3b5c;pointer-events:none;text-shadow:0 4px 18px rgba(0,0,0,.4);animation:reelburst .9s ease-out forwards}
@keyframes reelburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.reel-burst{animation-duration:.01s}}
/* Sound button: crossed out when off */
[data-reel-sound] .waves{display:none}
[data-reel-sound].on .waves{display:inline}
[data-reel-sound].on .mute{display:none}
.reel-rail{bottom:calc(96px + env(safe-area-inset-bottom))}
body.reels-mode .reel-cap{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
@media (max-width:640px){body.reels-mode .reel-cap{padding-bottom:18px}.reel-rail{bottom:90px}}

/* The emoji picker, just under the composer */
.emoji-pop{margin:8px 0 4px;padding:10px 12px;max-height:260px;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.emoji-h{margin:4px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px;margin-bottom:6px}
.emoji-grid button{height:40px;border:0;border-radius:10px;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:rgba(var(--hl-rgb),.08)}

/* Searching someone's posts, at the top right of their profile */
.profile-search{margin:0 0 0 auto;flex:0 1 340px;align-self:flex-start}
.profile-search .field{width:100%;margin:0}
.profile-hits .log-row .chip{margin-right:6px;vertical-align:middle}
.profile-hits mark{background:rgba(var(--accent-rgb),.22);color:var(--strong);border-radius:3px;padding:0 2px}
@media (max-width:640px){.profile-search{flex:1 1 100%;margin:4px 0 0}}

/* Switches (on/off settings) and segmented controls (pick one of a few) */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0;padding:6px 0;cursor:pointer;color:var(--text)}
.switch-text{flex:1 1 auto;min-width:0;line-height:1.4}
.switch-sub{display:block;font-size:13px;margin-top:2px}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-ui{position:relative;flex:0 0 auto;width:52px;height:32px;border-radius:999px;background:var(--switch-off);transition:background .2s;box-shadow:inset 0 0 0 1px rgba(var(--hl-rgb),.08)}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.switch input:checked + .switch-ui{background:var(--accent)}
.switch input:checked + .switch-ui::after{transform:translateX(20px)}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.switch-ui,.switch-ui::after{transition:none}}
.seg{display:flex;width:100%;padding:3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);margin:6px 0 4px}
.seg label{flex:1 1 0;min-width:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 8px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);text-align:center;line-height:1.2;transition:background .15s,color .15s}
.seg input:checked + span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.seg label:hover input:not(:checked) + span{color:var(--text)}

/* "Saved ✓" beside a switch or choice that saved itself */
.saved-tick{display:inline-block;margin-left:10px;font-size:13px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .25s}
.saved-tick.on{opacity:1}
.switch .saved-tick{position:absolute;right:62px;margin:0}
.switch{position:relative}
.opts > .saved-tick{display:block;margin:4px 0 0}
[data-dirty-save]{margin:14px 0 6px}

/* Settings rows and the account buttons */
.push-card .switch{margin:0}
.push-test{margin:4px 0 0;padding-left:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:10px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}
.set-row:hover{text-decoration:none;color:var(--accent)}
.set-row > span:first-child{display:flex;flex-direction:column}
.btn-invite{width:100%}
button.btn.btn-signout{width:100%;background:transparent;color:var(--danger);border:1px solid rgba(255,107,129,.55)}
button.btn.btn-signout:hover{color:var(--hi);background:rgba(255,107,129,.16);filter:none}
.push-test[hidden]{display:none}

/* Edit profile: a live preview on top, then one row per item, edited in place */
.ep-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ep-bar h1{font-size:34px;margin:0}
.ep-cap{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ep-preview{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);margin:0 0 22px}
.ep-cover{position:relative;aspect-ratio:3 / 1;background:linear-gradient(135deg,var(--cover-a),var(--cover-b) 60%,var(--ink-text)) center/cover no-repeat}
.ep-cover.busy::after{content:"";position:absolute;inset:0;background:rgba(var(--bar-rgb),.55)}
.ep-cover-tools{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.ep-cover-form,.ep-cover-remove{margin:0}
.ep-cover-remove .ep-cover-btn{border:0;font:inherit;font-size:14px;font-weight:600}
.ep-cover-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ep-cover-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ep-preview .avatar-pick{margin-top:-48px;margin-left:18px;display:inline-block}
.ep-preview .avatar-pick .av{width:96px;height:96px;box-shadow:0 0 0 4px var(--panel)}
.ep-preview .avatar-pick .avatar-pen{border-color:var(--panel)}
.ep-avatar{margin:0}
.ep-who{padding:8px 18px 18px}
.ep-name{font-size:28px;margin:0;color:var(--strong)}
.ep-handle{margin:0 0 6px}
.ep-bio{margin:6px 0 0;white-space:pre-wrap}
.ep-who .profile-links{margin-top:10px}
.pill .link-ico,.profile-links .link-ico{margin-right:6px;flex:0 0 auto}
.ep-rows .ep-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:4px 12px;min-height:56px;padding:10px 16px;cursor:pointer;position:relative}
.ep-rows .ep-row:hover{background:rgba(var(--hl-rgb),.03)}
.ep-row.ep-static{cursor:default}.ep-row.ep-static:hover{background:none}
.ep-label{color:var(--muted);font-size:15px;font-weight:600}
.ep-link-label{display:inline-flex;align-items:center;gap:8px;color:var(--text);min-width:0}
.ep-link-label > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-val{color:var(--accent);font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-row[data-field="bio"] .ep-val{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ep-val.empty{color:var(--faint)}
.ep-edit{color:var(--faint)}
.ep-row.editing{cursor:default;background:rgba(var(--accent-rgb),.04)}
.ep-row.editing .ep-edit{visibility:hidden}
.ep-input{grid-column:2 / 4;margin:0;width:100%}
.ep-help{grid-column:1 / -1;font-size:13px}
.ep-row.ep-static .ep-help{grid-column:2 / 4}
.ep-count{grid-column:2 / 4;font-size:12.5px;text-align:right}
.ep-note{grid-column:1 / -1;font-size:13px;font-weight:600;color:var(--accent);display:none}
.ep-note.on{display:block}.ep-note.bad{color:var(--danger-soft)}
.ep-add .ep-label{color:var(--accent)}
@media (max-width:640px){.ep-rows .ep-row{grid-template-columns:96px 1fr auto}.ep-bar h1{font-size:28px}}

/* A profile's cover image */
.prof-cover{aspect-ratio:3 / 1;max-height:280px;width:100%;border-radius:18px;background:center/cover no-repeat;margin:4px 0 0}
.sq-head.has-cover{align-items:flex-start !important;margin-top:0;padding-top:0}
.sq-head.has-cover > :first-child{margin-top:-52px;margin-left:18px}
.sq-head.has-cover .avatar-pick .av,.sq-head.has-cover > .av{box-shadow:0 0 0 4px var(--bg)}
.ep-link{border-top:0;margin-top:0}

/* ---- The article editor (/write): calm, full page ---- */
.write{max-width:760px;margin:0 auto}
.write-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;margin:0 0 12px;background:linear-gradient(var(--bg) 70%,transparent)}
.write-back{color:var(--muted);text-decoration:none;font-weight:600}
.write-status{flex:1 1 auto;text-align:center;font-size:14px}
.write-hero{position:relative;aspect-ratio:2.2 / 1;border-radius:18px;border:2px dashed var(--line2);background:center/cover no-repeat;display:flex;align-items:center;justify-content:center;margin:0 0 18px}
.write-hero.has{border:0}
.write-hero-btn{border:0;cursor:pointer;min-height:44px;padding:8px 18px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:inherit;font-weight:600}
.write-hero:not(.has) .write-hero-btn{background:transparent;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.5)}
.write-hero-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:24px;cursor:pointer}
.write-title,.write-sub{display:block;width:100%;resize:none;overflow:hidden;border:0;background:transparent;color:var(--strong);padding:0;margin:0 0 8px;outline:none;box-shadow:none;min-height:0 !important}
.write-title{font-family:var(--serif);font-size:44px;line-height:1.12;min-height:0}
.write-sub{font-size:21px;line-height:1.4;color:var(--muted)}
.write-title::placeholder,.write-sub::placeholder{color:var(--faint)}
.write-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 18px;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.write-file select{flex:1 1 100%;margin:6px 0 0}
.write .composer textarea.write-body{min-height:60vh;font-size:18px;line-height:1.7}
.write-foot{margin:10px 0 40px}
@media (max-width:640px){.write-title{font-size:32px}.write-sub{font-size:18px}}

/* ---- Articles: the page ---- */
.article-head{max-width:860px;margin:0 0 6px}
.article-hero{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0 0 18px}
.article-head h1{font-size:clamp(34px, 6vw, 56px);line-height:1.08;margin:8px 0 10px}
.article-sub{font-size:21px;line-height:1.45;color:var(--muted);margin:0 0 16px}
.article-by{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.article-by > span{display:flex;flex-direction:column}
.article-by-name{font-weight:700}
body.article-mode .main-col{max-width:820px}
.post.article-post{border:0;background:transparent;padding:0;margin:0 0 10px}
.post.article-post > .av{display:none}
.post.article-post .meta{display:none}
.post.article-post .prose{font-size:19px;line-height:1.75;color:var(--text)}
.post.article-post .prose h3,.post.article-post .prose h4,.post.article-post .prose h5{font-family:var(--serif);margin:1.6em 0 .5em}
.post.article-post .prose h3{font-size:30px}.post.article-post .prose h4{font-size:24px}
.post.article-post .prose p{margin:0 0 1.1em}
.post.article-post .prose figure,.post.article-post .prose .gallery,.post.article-post .prose .embed,.post.article-post .prose .vid{margin:1.4em 0}
.post.article-post .prose blockquote{font-size:21px;font-family:var(--serif);border-left-width:4px}
.article-discuss{font-family:var(--serif);font-size:30px;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--line)}

/* ---- Articles: the card in lists ---- */
.card.article-card{padding:0;overflow:hidden}
.article-card > :not(.article-card-hero){margin-left:22px;margin-right:22px}
.article-card-hero{display:block;aspect-ratio:2.4 / 1;overflow:hidden}
.article-card-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;margin-bottom:6px}
.article-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.article-card h3{font-size:26px;margin-top:4px}
.article-card-sub{margin-top:4px;margin-bottom:0;font-size:16px}
.article-card-by{margin-top:8px;margin-bottom:18px}

/* Tables in posts and articles: scroll sideways on a phone instead of squashing */
.md-table{overflow-x:auto;margin:1.2em 0;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.md-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:520px}
.md-table th{text-align:left;font-weight:700;color:var(--strong);background:rgba(var(--hl-rgb),.04);padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.md-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tr:last-child td{border-bottom:0}
.md-table tbody tr:nth-child(even) td{background:rgba(var(--hl-rgb),.02)}
.post.article-post .prose .md-table{font-size:16px}
.article-updated{color:var(--accent);font-weight:600}
.md-table td,.md-table th{overflow-wrap:normal;word-break:normal;hyphens:none;min-width:6.5em}
.md-table table{width:max-content;min-width:100%;max-width:none}
.md-table td{max-width:22em}
/* More to the right: a soft fade on the edge until you scroll to the end */
.md-table{background:linear-gradient(to right,var(--bg) 30%,transparent),linear-gradient(to left,rgba(0,0,0,.35),transparent 24px) right/24px 100% no-repeat;background-attachment:local,scroll}
/* Appearance choice in Settings: three pills, the current one lit. */
.seg-links{display:flex;flex-wrap:wrap;gap:6px}
.seg-links a,.seg-links strong{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none}
.seg-links a:hover{border-color:var(--accent);text-decoration:none}
.seg-links strong{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--strong);font-weight:600}
.themes strong{color:var(--muted)}
/* A one-line question: the asker sits in the line under the title (t/[id]/[[slug]].js, titleOnly). */
.asked-by{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.asked-by .av,.asked-by .av-img{flex:0 0 auto}
.anchor-only{display:block;height:0;scroll-margin-top:90px}
.btn-danger-ghost{color:var(--danger);border-color:rgba(248,113,113,.5)}
/* Amazon's required disclosure under a post with an Amazon link (format.js AFFILIATE_NOTE). */
.prose .aff-note{margin:10px 0 0;font-size:12.5px;color:var(--faint)}
/* "Live numbers": the Ledger's data boards, in the top right of a square's header (functions/_lib/boards.js). */
.sq-cols{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-start}
.sq-main{flex:1 1 520px;min-width:0}
.sq-boards{flex:0 1 300px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-content:flex-start}
.sq-boards-h{flex-basis:100%;text-align:right;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;gap:7px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);animation:livepulse 2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}70%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.sq-board{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 13px;border:1px solid;border-radius:999px;font-size:14px;font-weight:600;color:var(--text);background:rgba(var(--hl-rgb),.04);text-decoration:none}
.sq-board:hover{text-decoration:none;border-color:var(--accent) !important;color:var(--strong)}
@media (max-width:860px){.sq-boards{flex-basis:100%;justify-content:flex-start}.sq-boards-h{text-align:left;justify-content:flex-start}}
/* The standing notice under some squares' descriptions (functions/_lib/notices.js). */
.sq-notice{display:flex;align-items:flex-start;gap:7px;margin:-6px 0 16px;font-size:14px;color:var(--faint);max-width:720px}
.sq-notice svg{flex:0 0 auto;margin-top:3px}
/* Search everything (functions/search.js): pinned answers, two result lists, the type-ahead list. */
.search-scope{margin:8px 2px 0;font-size:13.5px}
.search-pin{display:flex;flex-direction:column;gap:3px;margin:18px 0 6px;padding:16px 18px;border-radius:16px;border:1.5px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.07);color:var(--text);text-decoration:none}
.search-pin:hover{text-decoration:none;border-color:var(--accent)}
.search-pin-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.search-pin-title{font-family:var(--serif);font-size:24px;color:var(--strong);line-height:1.2}
.search-h{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.lib-pub{font-size:12.5px;font-weight:700;color:var(--gold)}
.search-more{margin:12px 0 4px}
.suggest-list{position:absolute;z-index:60;max-height:70vh;overflow-y:auto;padding:6px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.suggest-item{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"ic t" "ic s";column-gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.suggest-item:hover,.suggest-item.on{background:rgba(var(--accent-rgb),.12);text-decoration:none}
.sg-ic{grid-area:ic;align-self:center;text-align:center;font-size:14px;color:var(--faint)}
.sg-ic.sg-live{color:var(--accent)}
.sg-title{grid-area:t;font-weight:600;color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-sub{grid-area:s;font-size:12.5px;color:var(--faint)}


/* ---------- Private messages, iMessage-style (2026-10-14) ----------
   Your messages on the right in blue, everyone else's on the left in gray; a run of messages from
   one person sits close together, the last one with a tail. The blue is near Apple's, not theirs. */
:root{--chat-blue:#1d84f5;--chat-blue-ink:#ffffff;--chat-gray:#2c2442;--chat-gray-ink:var(--text)}
:root[data-theme="light"]{--chat-gray:#ebe8ee;--chat-gray-ink:#1a1625}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--chat-gray:#ebe8ee;--chat-gray-ink:#1a1625}}
.chat{max-width:760px;margin:0 auto;padding:0 4px}
.chat-head{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  margin:0 -4px 6px;padding:8px 6px 10px;background:rgba(var(--bar-rgb),.86);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.chat-back{display:inline-flex;align-items:center;gap:2px;color:var(--chat-blue);font-size:16px;text-decoration:none;justify-self:start}
.chat-back:hover{text-decoration:none;opacity:.85}
.chat-who{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text);text-decoration:none;min-width:0}
.chat-who:hover{text-decoration:none}
.chat-faces{display:flex;align-items:center}
.chat-faces > *{border:2px solid var(--bg);border-radius:50%}
.chat-faces.n2 > * + *,.chat-faces.n3 > * + *{margin-left:-10px}
.chat-name{font-size:13px;font-weight:600;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-chev{color:var(--faint);font-weight:400}
.chat-info-btn{justify-self:end;display:inline-flex;color:var(--chat-blue);padding:6px}
.chat-info{margin:6px 0 10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.chat-info .pm-actions{margin-top:12px;padding-top:12px}
.chat .room-bar{min-height:0;margin:0 0 4px;text-align:center;font-size:12.5px}
.chat-empty{text-align:center;margin:48px 0}
.chat .pm-list{display:flex;flex-direction:column;padding:4px 16px 10px 2px}
/* (the right padding keeps tails and reply lines inside a chat background) */
.chat-stamp{text-align:center;margin:16px 0 8px;font-size:12px;color:var(--faint);font-weight:500}
.chat .pm{position:relative;display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.chat .pm.first{margin-top:10px}
.chat .pm.mine{justify-content:flex-end}
.pm-face{flex:0 0 30px;width:30px;align-self:flex-end}
.pm-face .av{width:30px;height:30px}
.pm-col{display:flex;flex-direction:column;gap:2px;max-width:min(76%,520px);min-width:0}
.pm.mine .pm-col{align-items:flex-end}
.pm.theirs .pm-col{align-items:flex-start}
.pm-name{font-size:12px;color:var(--faint);margin:0 0 1px 12px}
.pm-name .ai-tag{font-size:10px}
.pm-bubble{position:relative;padding:7px 13px 8px;border-radius:19px;font-size:16px;line-height:1.38;overflow-wrap:anywhere;word-break:break-word}
.pm.mine .pm-bubble{background:var(--chat-blue);color:var(--chat-blue-ink)}
.pm.theirs .pm-bubble{background:var(--chat-gray);color:var(--chat-gray-ink)}
.pm-bubble.prose p{margin:0}.pm-bubble.prose p + p,.pm-bubble.prose * + ul,.pm-bubble.prose * + ol,.pm-bubble.prose * + blockquote{margin-top:6px}
.pm-bubble.prose ul,.pm-bubble.prose ol{margin:0;padding-left:20px}
.pm-bubble.prose blockquote{margin:0;padding-left:10px;border-left:3px solid currentColor;opacity:.85}
.pm-bubble.prose h3,.pm-bubble.prose h4,.pm-bubble.prose h5{margin:0 0 4px;font-size:16px}
.pm-bubble.prose pre{margin:4px 0;font-size:13px;white-space:pre-wrap;background:rgba(0,0,0,.18);border-radius:10px;padding:8px}
.pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pm.mine .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:inherit;text-decoration-color:rgba(255,255,255,.6)}
.pm.theirs .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:var(--chat-blue);text-decoration-color:rgba(29,132,245,.5)}
.pm.mine .pm-bubble a.ref,.pm.mine .pm-bubble .mention{color:inherit;font-weight:600}
/* The tail on the last message of a run */
.pm.mine.last .pm-bubble.tail{border-bottom-right-radius:6px}
.pm.theirs.last .pm-bubble.tail{border-bottom-left-radius:6px}
.pm-bubble.tail::after{content:"";position:absolute;bottom:0;width:14px;height:18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0H5C5.4 8.5 8.4 14.8 14 18H0Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0H5C5.4 8.5 8.4 14.8 14 18H0Z'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.pm.mine .pm-bubble.tail::after{right:-9px;background:var(--chat-blue)}
.pm.theirs .pm-bubble.tail::after{left:-9px;background:var(--chat-gray);transform:scaleX(-1)}
.pm-jumbo{font-size:46px;line-height:1.1;padding:2px 2px 0}
/* Cards, photos, videos, voice notes and files stand on their own, without a bubble */
.pm-attach{max-width:100%}
.pm-attach.prose .preview{flex-direction:column;gap:0;margin:0;padding:0;width:300px;max-width:100%;overflow:hidden;border:0;border-radius:18px;background:var(--chat-gray)}
.pm-attach.prose .preview img{width:100%;height:auto;aspect-ratio:1.91/1;border-radius:0}
.pm-attach.prose .pv-body{padding:9px 13px 11px;gap:1px}
.pm-attach.prose .pv-site{order:2;text-transform:none;letter-spacing:0;font-size:12.5px}
.pm-attach.prose .pv-title{font-size:14.5px;color:var(--chat-gray-ink)}
.pm-attach.prose .pv-desc{display:none}
.pm-attach.prose figure,.pm-attach.prose .gallery{margin:0;border-radius:18px;overflow:hidden;max-width:300px}
.pm-attach.prose figure img{display:block;width:100%;height:auto;border-radius:0}
.pm-attach.prose figcaption{display:none}
.pm-attach.prose .embed,.pm-attach.prose .vid{margin:0;width:320px;max-width:100%;border-radius:18px;overflow:hidden}
.pm-attach.prose .voice{margin:0;border-radius:19px;background:var(--chat-gray)}
.pm.mine .pm-attach.prose .voice{background:var(--chat-blue);color:var(--chat-blue-ink)}
.pm.mine .pm-attach.prose .voice-label{color:rgba(255,255,255,.88)}
.pm.theirs .pm-attach.prose .voice-label{color:var(--chat-gray-ink);opacity:.75}
.pm-attach.prose .attach{margin:0;border-radius:16px}
.pm-receipt{font-size:11.5px;color:var(--faint);margin:2px 4px 0}
/* A reply, as in Messages: the message it answers sits above it, smaller and faded, in its own
   sender's colour, joined to the reply by a curved line on the outside; "1 Reply" under the original. */
.pm-quote{position:relative;display:block;max-width:100%;margin:2px 0 6px;padding:6px 12px;border-radius:16px;font-size:14px;line-height:1.32;
  text-decoration:none;opacity:.55;overflow:visible}
.pm-quote:hover{text-decoration:none;opacity:.8}
.pm-quote.q-mine{background:var(--chat-blue);color:#fff}
.pm-quote.q-theirs{background:var(--chat-gray);color:var(--chat-gray-ink)}
.pm-quote strong{font-weight:600}
.pm-quote::after{content:"";position:absolute;top:50%;width:11px;height:calc(50% + 6px + 18px);border:2px solid var(--faint);opacity:.9;pointer-events:none}
.pm.mine .pm-quote::after{right:-13px;border-left:0;border-radius:0 12px 12px 0}
.pm.theirs .pm-quote::after{left:-13px;border-right:0;border-radius:12px 0 0 12px}
.pm-replies{font-size:12px;font-weight:600;color:var(--chat-blue);text-decoration:none;margin:1px 6px 0}
.pm-replies:hover{text-decoration:underline}
/* A reply on the other side (functions/messages/[id].js `thr`): the line runs down the answered
   message's side, 15px in from its edge, and hooks toward the last reply at its middle. It starts
   under the message itself ("N Replies" sits to the right of it) or under a faded copy (.pm-qrow).
   The line is opaque so the pieces meet without darker joints. */
:root{--chat-thread:#54496d}
:root[data-theme="light"]{--chat-thread:#d4cfda}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--chat-thread:#d4cfda}}
.pm-qrow{display:flex;gap:8px;margin-top:10px}
.pm-qrow.mine{justify-content:flex-end}
.pm-qrow .pm-quote{max-width:min(76%,520px);margin:0}
.pm-qrow .pm-quote::after{display:none}
.chat .pm.after-q{margin-top:4px}
.pm.thr-in::before{content:"";position:absolute;top:-2px;bottom:0;width:0;pointer-events:none}
.pm.first.thr-in::before{top:-10px}
.pm.after-q.thr-in::before{top:-4px}
.pm.thr-L::before{left:53px;border-left:2px solid var(--chat-thread)}
.pm.thr-R::before{right:15px;border-right:2px solid var(--chat-thread)}
.pm.thr-end::before{bottom:50%;width:28px;border-bottom:2px solid var(--chat-thread)}
.pm.thr-L.thr-end::before{border-bottom-left-radius:14px}
.pm.thr-R.thr-end::before{border-bottom-right-radius:14px}
.pm[class*="thr-root-"] .pm-replies{position:relative}
.pm.thr-root-L .pm-replies{margin-left:30px}
.pm.thr-root-R .pm-replies{margin-right:30px}
.pm[class*="thr-root-"] .pm-replies::before{content:"";position:absolute;top:-3px;bottom:0;pointer-events:none}
.pm.thr-root-L .pm-replies::before{left:-15px;border-left:2px solid var(--chat-thread)}
.pm.thr-root-R .pm-replies::before{right:-15px;border-right:2px solid var(--chat-thread)}
.chat .pm:target .pm-bubble{box-shadow:0 0 0 3px rgba(29,132,245,.45)}
/* Reply / Report: beside the bubble on hover, or after a tap on a phone */
.pm-tools{display:flex;gap:2px;align-self:center;opacity:0;transition:opacity .12s}
.pm.mine .pm-tools{order:-1}
.pm:hover .pm-tools,.pm:focus-within .pm-tools,.pm.show-tools .pm-tools{opacity:1}
.pm-tool{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--faint);cursor:pointer}
.pm-tool:hover{background:rgba(var(--accent-rgb),.1);color:var(--text)}
.pm-tools .pm-report{margin:0}
@media (hover:none){.pm-tools{position:absolute;top:-30px;opacity:0;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px}
  .pm.mine .pm-tools{right:0}.pm.theirs .pm-tools{left:38px}
  .pm.show-tools .pm-tools{opacity:1;pointer-events:auto}}
.chat .pm.fresh .pm-bubble{animation:pmpop .32s ease-out}
@keyframes pmpop{0%{transform:scale(.92);opacity:.4}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.chat .pm.fresh .pm-bubble{animation:none}}
.chat .room-typing{margin:4px 0 6px 38px;font-size:13px;color:var(--faint)}
/* The box */
.chat-compose{position:sticky;bottom:0;z-index:30;margin:0 -4px;padding:8px 4px calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--bar-rgb),.86);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.chat-bar{display:flex;align-items:flex-end;gap:8px}
.chat-plus{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:1px;border:0;border-radius:50%;
  background:rgba(var(--hl-rgb),.08);color:var(--muted);cursor:pointer}
.chat-plus:hover,.chat-plus[aria-expanded="true"]{color:var(--text);background:rgba(var(--hl-rgb),.14)}
.chat-field{position:relative;flex:1;min-width:0;border:1px solid var(--line2);border-radius:20px;background:var(--panel)}
.chat-compose.focus .chat-field{border-color:rgba(29,132,245,.6)}
.chat-field textarea{display:block;width:100%;box-sizing:border-box;min-height:38px;max-height:180px;margin:0;padding:8px 46px 8px 15px;border:0;border-radius:20px;
  background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.38;resize:none;outline:none;overflow-y:auto}
.chat-send{position:absolute;right:4px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--chat-blue);color:#fff;cursor:pointer;opacity:.35;transform:scale(.9);transition:opacity .12s,transform .12s}
.chat-compose.has-text .chat-send{opacity:1;transform:none}
.chat-send:disabled{opacity:.5}
.chat-compose .uploading:empty{display:none}
.chat-compose .uploading{font-size:13px;color:var(--faint);margin:0 0 6px 44px}
.chat-linkprev{margin:0 0 8px 44px}
.chat-linkprev.prose .preview{display:flex;flex-direction:row;gap:10px;align-items:center;margin:0;padding:8px 12px 8px 8px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);max-width:420px}
.chat-linkprev.prose .preview img{width:56px;height:42px;aspect-ratio:auto;object-fit:cover;border-radius:8px;flex:0 0 auto}
.chat-linkprev.prose .pv-site{text-transform:none;letter-spacing:0;font-size:12px;order:2}
.chat-linkprev.prose .pv-title{font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.chat-linkprev .pv-desc{display:none}
.chat-linkprev .embed{max-width:320px;border-radius:14px;overflow:hidden}
.chat-menu{position:absolute;bottom:calc(100% - 2px);left:4px;z-index:40;display:flex;flex-direction:column;min-width:200px;padding:6px;
  border:1px solid var(--line2);border-radius:16px;background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.chat-menu button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.chat-menu button:hover,.chat-menu button:focus-visible{background:rgba(var(--hl-rgb),.08);outline:none}
.chat-menu svg{width:20px;height:20px;color:var(--chat-blue)}
.chat-compose .emoji-pop{margin:0 0 8px}
.chat-compose .voice-rec{margin:0 0 4px}
.chat-compose .pm-replying{margin:0 0 8px 44px}
.chat-compose.drop-hint .chat-field{border-color:var(--chat-blue);border-style:dashed}
/* In a conversation the phone's tab bar steps aside, as in Messages: the back arrow leads out. */
@media (max-width:899px){
  /* A conversation fills the phone, as in Messages: the site's top bar steps aside too, and the
     conversation's own header makes room for the status bar (the home-screen app draws under it). */
  body:has(.chat) header.top,body:has(.chat) .prelaunch,body:has(.chat) .install-bar{display:none}
  body:has(.chat){padding-top:0}
  .msg-shell .chat-head{padding-top:calc(8px + env(safe-area-inset-top))}
  body:has(.chat) .tabbar{display:none}
  body:has(.chat){padding-bottom:0}
  body:has(.chat) .foot{display:none}
  .chat-head{margin:0 -16px 6px;padding-left:12px;padding-right:12px}
  .chat-compose{margin:0 -16px;padding-left:10px;padding-right:10px}
}
/* The Link button's box (posts and replies), instead of the browser's prompt */
.link-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.link-pop .field{flex:1 1 240px;margin:0;background:#fff;color:#1a1625;border:1px solid #cdd5e3}
.link-pop .faint{flex:1 1 100%;font-size:13px}
/* The conversation list, as in Messages */
.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.inbox-head h1{font-size:36px;line-height:1.1;margin:0}
@media (max-width:560px){.inbox-head h1{font-size:28px}}
.inbox-new{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--chat-blue)}
.inbox-new:hover{background:rgba(29,132,245,.1)}
.inbox-note{margin:0 0 14px;font-size:14px}
.chat-inbox{display:flex;flex-direction:column}
.convo-row{position:relative;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 22px;color:var(--text);text-decoration:none;border-radius:14px}
.convo-row:hover{text-decoration:none;background:rgba(var(--hl-rgb),.05)}
.convo-row + .convo-row .convo-main{border-top:1px solid var(--line)}
.convo-row + .convo-row .convo-main{margin-top:-10px;padding-top:10px}
.convo-dot{position:absolute;left:6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:transparent}
.convo-row.unread .convo-dot{background:var(--chat-blue)}
.convo-face{position:relative;flex:0 0 48px}
.convo-face .av{width:48px;height:48px}
.convo-more{position:absolute;right:-4px;bottom:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--panel2);border:2px solid var(--bg);font-size:11px;font-weight:700;line-height:16px;text-align:center;color:var(--muted)}
.convo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.convo-top{display:flex;align-items:baseline;gap:10px}
.convo-name{flex:1;min-width:0;font-weight:600;color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-time{flex:0 0 auto;font-size:13px;color:var(--faint)}
.convo-last{color:var(--muted);font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.convo-row.unread .convo-name{font-weight:700}
.convo-row.unread .convo-last{color:var(--text)}
/* One page for messages: the list on the left and the open conversation on the right on a computer;
   on a phone, the list alone, then the conversation alone with a back arrow (as in Messages). */
.msg-shell{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);align-items:start;max-width:1200px;margin:0 auto}
.msg-side{position:sticky;top:0;max-height:100dvh;overflow-y:auto;padding:4px 14px 24px 0;border-right:1px solid var(--line);overscroll-behavior:contain}
.msg-shell .chat{max-width:none;margin:0;padding:0 0 0 18px}
.msg-shell .chat-head{margin-left:-18px;margin-right:0;padding-left:18px}
.msg-shell .chat-compose{margin-left:-18px;margin-right:0;padding-left:18px}
.msg-shell .inbox-head h1{font-size:30px}
.msg-shell .inbox-note{font-size:12.5px}
.inbox-search{display:block;width:100%;box-sizing:border-box;margin:8px 0 10px;padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:15px}
.inbox-search:focus{outline:none;border-color:rgba(29,132,245,.6)}
.convo-row.on{background:rgba(29,132,245,.14)}
.convo-row.on:hover{background:rgba(29,132,245,.18)}
.convo-row[hidden]{display:none}
.msg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:60vh;text-align:center;padding:0 24px}
.msg-empty h2{margin:0;font-size:30px}
.msg-empty p{margin:0 0 10px}
@media (min-width:900px){
  .msg-shell .chat-back{visibility:hidden}
}
@media (max-width:899px){
  .msg-shell{display:block}
  .msg-shell.in-convo .msg-side{display:none}
  .msg-shell:not(.in-convo) .msg-empty{display:none}
  .msg-side{position:static;max-height:none;overflow:visible;border-right:0;padding:0}
  .msg-shell .chat{padding:0 16px;margin:0 -16px}   /* edge to edge, so a background fills the phone */
  .msg-shell .chat-head,.msg-shell .chat-compose{margin-left:-16px;margin-right:-16px;padding-left:12px;padding-right:12px}
}

/* Chat backgrounds (only the person who picks one sees it). On a background the gray bubbles turn a
   lighter solid (white in light mode) so they stand apart from it; solid, or the tail shows a seam. */
.chat[data-bg="dusk"],.sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#2a1640 0%,#3a1c3c 55%,#47222f 100%)}
.chat[data-bg="sunrise"],.sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#3b1c16 0%,#47251a 50%,#3d2a14 100%)}
.chat[data-bg="rose"],.sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#36162a 0%,#3f1b35 55%,#2c1838 100%)}
.chat[data-bg="lagoon"],.sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#0d2a2c 0%,#11363a 55%,#162c38 100%)}
.chat[data-bg="forest"],.sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#13261c 0%,#1a3123 55%,#20302a 100%)}
.chat[data-bg="slate"],.sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#1b1f27 0%,#232831 55%,#2a2e36 100%)}
.chat[data-bg="midnight"],.sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#070b16 0%,#0c1328 55%,#131030 100%)}
:root[data-theme="light"] .chat[data-bg="dusk"],:root[data-theme="light"] .sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#f1e6ff 0%,#fbe3ec 55%,#ffe6da 100%)}
:root[data-theme="light"] .chat[data-bg="sunrise"],:root[data-theme="light"] .sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#ffe4d6 0%,#ffecd2 50%,#fff4cf 100%)}
:root[data-theme="light"] .chat[data-bg="rose"],:root[data-theme="light"] .sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#ffe2ee 0%,#fbe4f4 55%,#efe4ff 100%)}
:root[data-theme="light"] .chat[data-bg="lagoon"],:root[data-theme="light"] .sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#dcf6f0 0%,#e0f3f3 55%,#e3eefa 100%)}
:root[data-theme="light"] .chat[data-bg="forest"],:root[data-theme="light"] .sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#e4f3e1 0%,#ecf5df 55%,#f3f6dc 100%)}
:root[data-theme="light"] .chat[data-bg="slate"],:root[data-theme="light"] .sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#eef0f3 0%,#e8ebef 55%,#e2e6ec 100%)}
:root[data-theme="light"] .chat[data-bg="midnight"],:root[data-theme="light"] .sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#e2e7f6 0%,#e7e6f6 55%,#ece4f6 100%)}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"] .chat[data-bg="dusk"],:root[data-theme="auto"] .sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#f1e6ff 0%,#fbe3ec 55%,#ffe6da 100%)}
  :root[data-theme="auto"] .chat[data-bg="sunrise"],:root[data-theme="auto"] .sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#ffe4d6 0%,#ffecd2 50%,#fff4cf 100%)}
  :root[data-theme="auto"] .chat[data-bg="rose"],:root[data-theme="auto"] .sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#ffe2ee 0%,#fbe4f4 55%,#efe4ff 100%)}
  :root[data-theme="auto"] .chat[data-bg="lagoon"],:root[data-theme="auto"] .sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#dcf6f0 0%,#e0f3f3 55%,#e3eefa 100%)}
  :root[data-theme="auto"] .chat[data-bg="forest"],:root[data-theme="auto"] .sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#e4f3e1 0%,#ecf5df 55%,#f3f6dc 100%)}
  :root[data-theme="auto"] .chat[data-bg="slate"],:root[data-theme="auto"] .sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#eef0f3 0%,#e8ebef 55%,#e2e6ec 100%)}
  :root[data-theme="auto"] .chat[data-bg="midnight"],:root[data-theme="auto"] .sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#e2e7f6 0%,#e7e6f6 55%,#ece4f6 100%)}
}
.chat[data-bg]:not([data-bg=""]){background:var(--chat-bgimg);background-attachment:fixed}
.chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#463d55}
:root[data-theme="light"] .chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#ffffff}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#ffffff}}
.chat[data-bg]:not([data-bg=""]) .chat-stamp,.chat[data-bg]:not([data-bg=""]) .pm-receipt{color:var(--muted)}
.msg-shell .chat[data-bg]:not([data-bg=""]){border-radius:0}
.chat-bg-form{margin:0 0 14px}
.chat-bg-form .lbl{margin-bottom:8px}
.chat-bg-swatches{display:flex;flex-wrap:wrap;gap:10px}
.chat-bg-swatch{position:relative;cursor:pointer}
.chat-bg-swatch input{position:absolute;opacity:0;width:1px;height:1px}
.chat-bg-swatch .sw{display:block;width:40px;height:40px;border-radius:50%;background:var(--chat-bgimg,var(--bg));border:1px solid var(--line2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.04)}
.chat-bg-swatch .sw[data-bg=""]{background:var(--bg)}
.chat-bg-swatch .sw[data-bg=""]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:2px;background:var(--faint);transform:rotate(-45deg);top:0;bottom:0;left:0;right:0}
.chat-bg-swatch input:checked + .sw{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--chat-blue)}
.chat-bg-swatch input:focus-visible + .sw{outline:2px solid var(--chat-blue);outline-offset:3px}
.pm-clear[open]{flex:1 1 100%}
.pm-clear[open] > summary{display:none}
.pm-clear > summary{list-style:none;cursor:pointer}
.pm-clear > summary::-webkit-details-marker{display:none}
/* Disappearing messages */
.chat-timer{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--faint)}
.chat-sys{display:block;margin:14px auto 6px;max-width:440px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--muted)}
.chat-sys svg{vertical-align:-2px;margin-right:2px}
.chat-sys [data-chat-ts]{color:var(--faint)}
.chat-ret-form{margin:0 0 14px}
.chat-ret-form .lbl{margin-bottom:8px}
.chat-ret-opts{display:flex;flex-wrap:wrap;gap:8px}
.chat-ret-opt{cursor:pointer}
.chat-ret-opt input{position:absolute;opacity:0;width:1px;height:1px}
.chat-ret-opt span{display:inline-block;padding:7px 14px;border:1px solid var(--line2);border-radius:999px;font-size:14px;color:var(--text)}
.chat-ret-opt input:checked + span{background:var(--chat-blue);border-color:var(--chat-blue);color:#fff}
.chat-ret-opt input:focus-visible + span{outline:2px solid var(--chat-blue);outline-offset:2px}
.chat-ret-note{font-size:12.5px;margin:8px 0 0}
.chat-bg-actions{margin-top:8px}
.chat-bg-all{font-size:13px;color:var(--chat-blue);padding:4px 0;background:none;border:0;cursor:pointer}
.chat-bg-all:hover{text-decoration:underline}
.cm-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
.cm-search .field{flex:1 1 220px;margin:0}
.cm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
/* Notifications page: the title with a small "On this device" switch beside it */
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.notif-head h1{font-size:44px;margin:0}
.push-mini-label{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer;margin:0;white-space:nowrap}
@media (max-width:560px){.notif-head h1{font-size:30px}.push-mini-label{font-size:13px;gap:8px}}
.push-mini-switch{margin:0;padding:0;border:0;min-height:0}
.push-mini-msg{margin:-8px 0 14px;font-size:14px}
/* Appearance in the header, three ways: the icon shows the current setting (sun = Light, moon =
   Dark, half-filled circle = Auto, following the device); a tap moves on to the next. */
.nav-theme svg{display:none}
.nav-theme[data-theme-now="light"] .ico-sun,.nav-theme[data-theme-now="dark"] .ico-moon,.nav-theme[data-theme-now="auto"] .ico-auto{display:block}
@media (max-width:380px){.nav-tools .bell.nav-ais,.nav-tools .nav-search,.nav-tools .bell.nav-notes,.nav-tools .bell.nav-host{width:38px}}
/* Dictation: the microphone sits in the box, left of the send arrow; red and pulsing while it listens. */
.chat-field.has-dictate textarea{padding-right:80px}
.chat-dictate{position:absolute;right:38px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer}
.chat-dictate:hover{color:var(--text);background:rgba(var(--hl-rgb),.08)}
.chat-dictate.listening{background:#e5484d;color:#fff;animation:dictpulse 1.4s ease-in-out infinite}
@keyframes dictpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.chat-dictate.listening{animation:none}}
/* Messages as an app, not a long page (2026-10-14): the page itself never scrolls; the conversation
   list scrolls on its own, and in a conversation only the messages scroll, between a header and a
   box that stay put. Computer: the list page and conversations. Phone: conversations only (the
   list stays an ordinary page). */
@media (min-width:900px){
  body:has(.msg-shell){height:100dvh;overflow:hidden}
  body:has(.msg-shell) .wrap{height:100dvh;display:flex;flex-direction:column}
  body:has(.msg-shell) .top{flex:none}
  body:has(.msg-shell) main{flex:1;min-height:0}
  body:has(.msg-shell) .foot,body:has(.msg-shell) .install-bar{display:none}
  body:has(.msg-shell) .msg-shell{height:100%;align-items:stretch}
  body:has(.msg-shell) .msg-side{position:static;height:100%;max-height:none}
  body:has(.msg-shell) .msg-empty{min-height:0;height:100%}
}
@media (max-width:899px){
  body:has(.chat){height:100dvh;overflow:hidden}
  body:has(.chat) .wrap{height:100dvh;display:flex;flex-direction:column}
  body:has(.chat) main{flex:1;min-height:0}
  body:has(.chat) .foot,body:has(.chat) .install-bar{display:none}
  body:has(.chat) .msg-shell{height:100%}
}
body:has(.chat) .chat{display:flex;flex-direction:column;height:100%;min-height:0}
body:has(.chat) .chat > *{flex:none}
body:has(.chat) .chat-head,body:has(.chat) .chat-compose{position:relative;top:auto;bottom:auto}
body:has(.chat) .chat .pm-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body:has(.chat) .chat-info{max-height:55%;overflow-y:auto}
/* Reactions (tapbacks): a little bubble on the message's top corner, as in Messages */
.pm-reacts{display:flex;gap:3px;margin:0 0 -10px;position:relative;z-index:2}
.pm.mine .pm-reacts{align-self:flex-start;margin-left:-10px}
.pm.theirs .pm-reacts{align-self:flex-end;margin-right:-10px}
.pm-react-chip{display:inline-flex;align-items:center;gap:2px;min-height:26px;padding:2px 7px;border-radius:999px;border:2px solid var(--bg);
  background:var(--chat-gray);font-size:14px;line-height:1;cursor:pointer;color:var(--chat-gray-ink)}
.pm-react-chip span{font-size:11px;font-weight:700}
.pm-react-chip.mine-r{background:var(--chat-blue);color:#fff}
.react-pick{position:absolute;bottom:calc(100% - 4px);z-index:20;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.pm.mine .react-pick{right:0}
.pm.theirs .react-pick{left:38px}
.react-pick button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;font-size:22px;line-height:1;cursor:pointer;transition:transform .1s}
.react-pick button:hover,.react-pick button:focus-visible{transform:scale(1.18);background:rgba(var(--hl-rgb),.08);outline:none}
.react-pick button.on{background:rgba(29,132,245,.18)}
@media (max-width:420px){.react-pick button{width:34px;height:34px;font-size:20px}}
.rename-title{margin:-4px 0 10px}
.rename-title > summary{list-style:none;cursor:pointer;display:inline-block}
.rename-title > summary::-webkit-details-marker{display:none}
.rename-title[open] > summary{display:none}
.rename-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rename-form .field{flex:1 1 260px;margin:0}
/* A circle's conversation with the circle beside it (computer): the circle's panel on the left. */
.circle-thread-acts{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 10px}
/* The top of a conversation (Michael's pick, 2026-10-15): the title, then one bar (when, how many
   posts, 🔒 private in a circle; Follow / Bookmark / Remind me or Share; ⋯), then the tags. Rename,
   the meeting form and the owners' tools live in ⋯; the two forms show only once opened from it. */
.thread-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:2px 0 12px}
.thread-bar-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.thread-bar-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thread-bar-acts form{margin:0}
.thread-bar-acts .btn{min-height:34px;padding:4px 14px;font-size:14px}
.thread-private{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.thread-private svg{flex:0 0 auto}
.thread-tags{margin:0 0 4px}
.thread-tags .tag{background:transparent;font-size:13px;padding:2px 10px 3px}
.thread-tags .tag:hover{background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
.thread-more{position:relative}
.thread-more > summary{list-style:none;cursor:pointer;font-weight:700;letter-spacing:.06em;padding:4px 12px !important}
.thread-more > summary::-webkit-details-marker{display:none}
.thread-more-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(300px,86vw);display:flex;flex-direction:column;gap:2px;padding:6px;
  border-radius:14px;border:1px solid var(--line2);background:var(--panel);box-shadow:0 14px 34px rgba(var(--scrim-rgb),.45)}
.thread-more-item{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:14.5px;cursor:pointer}
.thread-more-item:hover,.thread-more-item:focus-visible{background:rgba(var(--hl-rgb),.07)}
.thread-more-panel form{margin:0}
.thread-more-sec{margin:6px 10px 2px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.thread-more-topic{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:4px 10px 6px}
.thread-more-topic label{font-size:13.5px;color:var(--muted)}
.thread-more-topic .field{flex:1 1 0;width:auto;min-width:0;margin:0;min-height:34px;padding:4px 8px}
/* Tighter between the header and the Summary: the live "who's here" bar keeps its height but no gap. */
.thread-head:has(.thread-bar){padding-bottom:6px}
.thread-head .room-bar{margin-top:0}
[data-live-gist] > .gist{margin-top:4px}
.thread-more-note{display:block;padding:8px 10px}
.thread-head details.rename-title:not([open]),.thread-head details.meeting-edit:not([open]){display:none}
.circle-thread-acts form{margin:0}
.circle-thread-acts .btn{min-height:34px;padding:4px 14px;font-size:14px}
.circle-shell .side-col{display:none}
.circle-rail{display:none}
@media (min-width:1000px){
  .circle-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start}
  .circle-rail{display:flex;flex-direction:column;align-items:stretch;gap:12px;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:6px 4px 20px}
  .circle-rail .ring{align-self:center;margin:14px 0 4px}
  .circle-rail .ring-name{font-size:17px}
  .circle-rail .rail-now{font-size:13px}
  .circle-rail .rail-now .now-person{display:flex}
  .circle-rail .rail-new{justify-content:center}
  .rail-links{display:flex;flex-wrap:wrap;gap:6px}
  .rail-links .btn{flex:1 1 auto;justify-content:center;min-height:34px;padding:4px 10px;font-size:14px}
  .circle-rail .rail-topics{position:static;margin-top:4px}
  .circle-shell-main .cols{flex-wrap:nowrap}
  .circle-shell-main .main-col{flex:1 1 auto;min-width:0;max-width:none}
  .circle-shell-main > .crumbs{display:none}
}
/* A circle's top row: "Circles" on the left, its search on the right (own row, so it never overlaps). */
.circle-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.circle-topbar .crumbs{margin:0}
.circle-topbar .circle-search{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;width:min(380px,100%)}
.circle-topbar .circle-search .field{flex:1;margin:0;min-height:40px;padding:8px 16px;font-size:15px}
.cs-adv{white-space:nowrap;font-size:14px}
@media (max-width:640px){.circle-topbar .circle-search{width:100%}}
/* The circle's advanced search page */
.cs-form{margin:0 0 18px}
.cs-q{width:100%;margin:0 0 12px;font-size:17px}
.cs-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cs-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cs-filters .field{margin:0;min-height:40px}
.cs-count{margin:0 0 8px}
.cs-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-hit{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none}
.cs-hit:hover{border-color:var(--accent);text-decoration:none}
.cs-title{font-weight:700;color:var(--strong)}
.cs-snip{color:var(--muted);line-height:1.45}
.cs-snip mark{background:rgba(var(--accent-rgb),.22);color:var(--strong);border-radius:3px;padding:0 2px}
.cs-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--faint)}
.cs-meta .av{width:20px;height:20px}
/* A circle's private messages: the box under Topics, search matches, labels */
.circle-dms{margin-top:14px}
.dm-link{display:flex;align-items:center;gap:8px}
.dm-link .av{width:22px;height:22px;flex:0 0 auto}
.dm-names{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-link.unread .dm-names{font-weight:700;color:var(--strong)}
.dm-dot{width:8px;height:8px;border-radius:50%;background:var(--chat-blue);flex:0 0 auto}
.dm-empty{margin:2px 10px 6px;font-size:13px}
.dm-new{color:var(--accent)}
.dm-hits{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2);display:flex;flex-direction:column;gap:8px}
.dm-hits-h{margin:0;font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.dm-hit-convos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.convo-circle{font-size:12px;font-weight:500;color:var(--faint);white-space:nowrap}
.chat-circle{font-size:11.5px;color:var(--faint)}
.circle-left{display:flex;flex-direction:column;min-width:0}
.circle-left .topic-nav{position:static}
@media (min-width:861px){.circle-left{position:sticky;top:14px}}
.circle-ask{margin:0 0 16px}
.circle-ask .cc-status:empty{display:none}
.circle-ask .cc-status{flex:1 1 100%;margin:0;font-size:13px;color:var(--faint)}
/* A circle's name in its ring: its own colour is a pastel, readable on dark but faint on light, so
   in light mode it's mixed with the ink colour. */
:root[data-theme="light"] .ring-name{color:color-mix(in srgb, var(--c) 45%, #1b1033)}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .ring-name{color:color-mix(in srgb, var(--c) 45%, #1b1033)}}
.ring-logo{display:block;margin:0 auto 6px;border-radius:14px;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.circle-details .lbl{margin-top:12px}
.cd-colors{display:flex;flex-wrap:wrap;gap:10px}
.cd-color{position:relative;cursor:pointer}
.cd-color input{position:absolute;opacity:0;width:1px;height:1px}
.cd-color span[aria-hidden]{display:block;width:32px;height:32px;border-radius:50%;border:2px solid var(--line2)}
.cd-color input:checked + span{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.cd-color input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.cd-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cd-logo img{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.cd-logo-none{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px dashed var(--line2);border-radius:14px;font-size:13px}
.cd-logo-rm{font-size:14px;color:var(--muted)}
.circle-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;max-height:360px;overflow-y:auto}
.topic-rules{margin:6px 0 4px;flex:1 1 100%}
.topic-rules-form{display:flex;flex-direction:column;gap:8px;padding:10px 0}
.topic-rule{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text)}
.topic-people{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.topic-people .field{flex:1 1 220px;margin:0}
.announced-note{font-size:13px}

/* Company circles (2026-10-14): circles at your company, the branded invite page, titles and teams. */
.company-circles{margin:0 0 26px}
.company-circles h2{font-size:20px;margin:0 0 4px}
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:14px;background:var(--panel);color:inherit;text-decoration:none}
.cc-card:hover{border-color:var(--c)}
.cc-logo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.cc-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-text .faint{font-size:14px}
.invite-logo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid;background:var(--panel)}
.invite-note{text-align:left;margin:0 auto 22px;padding:14px 18px;border-left:4px solid var(--c);border-radius:10px;background:var(--panel);max-width:560px}
.invite-note > :first-child{margin-top:0}.invite-note > :last-child{margin-bottom:0}
.my-circle-title{margin-top:14px}
.mct-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mct-row .field{flex:1 1 180px;margin:0}
.cm-title{font-size:14px;color:var(--muted)}
.circle-members li{flex-wrap:wrap}
.cm-edit[open]{order:10;flex-basis:100%;padding:8px 0 0 48px}
.cm-edit > summary{list-style:none;cursor:pointer}.cm-edit > summary::-webkit-details-marker{display:none}
.cm-search select.field{flex:0 1 220px;margin:0}
.post-role{font-size:13px;color:var(--muted);font-weight:400}
.hist-dl{display:flex;gap:10px;flex-wrap:wrap}
.ret-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ret-row .field{flex:1 1 260px;margin:0}
.sq-compose{margin:18px 0 0}
.sq-compose[hidden]{display:none}
.sq-compose-more{flex:1 1 100%;margin:-5px 0 -3px;font-size:13px;line-height:1.2;text-align:center}   /* centred and tucked under the box */
/* Meetings in circle conversations */
.meeting-card{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin:14px 0;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;background:var(--panel)}
.meeting-card.past{opacity:.75;border-left-color:var(--line)}
.mc-when{display:flex;gap:12px;align-items:flex-start}.mc-ico{font-size:24px;line-height:1}
.mc-place{color:var(--muted);margin-top:2px}
.mc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.meeting-edit{margin:8px 0 14px}.meeting-edit > summary{cursor:pointer;list-style:none}.meeting-edit > summary::-webkit-details-marker{display:none}
.meeting-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.meeting-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.meeting-form .field{margin:0}
.meeting-form .mf-wide{grid-column:1/-1}.mf-tz{margin:0;font-size:13px}.mf-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.meeting-form{grid-template-columns:1fr 1fr}.meeting-form label:first-of-type{grid-column:1/-1}}
.circle-upcoming{margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.circle-upcoming h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:var(--muted)}
.circle-upcoming ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.circle-upcoming a{display:flex;gap:10px;flex-wrap:wrap;color:inherit;text-decoration:none}.circle-upcoming a:hover strong{text-decoration:underline}
.circle-upcoming .cu-when{color:var(--muted);font-size:14px}
/* Draft replies: only their author sees them */
.my-drafts{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.draft-card{padding:14px 18px;border:2px dashed var(--accent);border-radius:16px;background:var(--panel)}
.draft-head{margin:0 0 8px;font-size:14px}
.draft-pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:13px}
.draft-body > :first-child{margin-top:0}.draft-body > :last-child{margin-bottom:0}
.draft-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.draft-edit{flex:1 1 100%;order:5}.draft-edit[open] > summary{display:none}
.draft-edit > summary{list-style:none;cursor:pointer;display:inline-flex}.draft-edit > summary::-webkit-details-marker{display:none}
.draft-actions .draft-edit:not([open]){flex:0 0 auto;order:0}
.draft-jump{display:inline-block;margin:8px 0;padding:6px 14px;border:1px dashed var(--accent);border-radius:999px;font-size:14px;text-decoration:none}
/* Host: members table */
.mem-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 12px}
.mem-tools .field{max-width:280px;margin:0}
.mem-kinds{display:flex;gap:8px;flex-wrap:wrap}.mem-kinds .pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mem-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.mem-table{width:100%;border-collapse:collapse;font-size:14px}
.mem-table th,.mem-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.mem-table tbody tr:last-child td{border-bottom:0}
.mem-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:var(--panel)}
.mem-table th.sortable{cursor:pointer;user-select:none}.mem-table th.sortable:hover{color:var(--text)}
.mem-table th[aria-sort=ascending]::after{content:" ▲"}.mem-table th[aria-sort=descending]::after{content:" ▼"}
.mem-who{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.mem-who span{display:flex;flex-direction:column;line-height:1.25}
.mem-alerts{display:inline-flex;gap:10px}
.mem-status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.mem-new{border-color:var(--accent);color:var(--accent)}.mem-muted,.mem-suspended{border-color:var(--danger);color:var(--danger)}
.mem-reports{color:var(--danger)}
.mem-src span{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* Header places as icons (layout.js placeLinks): the current page opens into a pill with its name;
   hovering another slides its name out. The label stays in the page for screen readers. */
.top .nav-main{gap:4px}
.nav-place{display:inline-flex;align-items:center;height:44px;padding:0 11px;border-radius:999px;color:var(--text);text-decoration:none}
.nav-place:hover{text-decoration:none;color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.nav-place .np-label{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:600;font-size:15px;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
.nav-place:hover .np-label,.nav-place:focus-visible .np-label,.nav-place.on .np-label{max-width:130px;opacity:1;margin-left:7px}
.nav-place.on{color:var(--accent);background:rgba(var(--accent-rgb),.13)}
@media (prefers-reduced-motion:reduce){.nav-place .np-label{transition:none}}

/* Every header icon slides its name out on hover, like the places (computers with a mouse only:
   on touch screens a tapped icon would stay open). The name comes from data-label. */
@media (hover:hover) and (min-width:641px){
  .nav-tools{gap:4px}
  .nav-tools .bell,.nav-tools .nav-search,.nav-tools .lang-menu summary,.nav-tools .me-link{width:auto;min-width:44px;height:44px;padding:0 11px;border-radius:999px;transition:background .2s ease,color .2s ease}
  .nav-tools .me-link{padding:0 5px;margin-left:2px}
  .nav-tools .nav-search,.nav-tools .bell,.nav-tools .lang-menu summary{display:inline-flex;align-items:center;justify-content:center}
  .nav-tools [data-label]::after{content:attr(data-label);display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:600;font-size:15px;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
  .nav-tools [data-label]:hover::after,.nav-tools [data-label]:focus-visible::after,.nav-tools .lang-menu[open] summary::after{max-width:160px;opacity:1;margin-left:7px}
  .nav-tools .bell:hover,.nav-tools .nav-search:hover,.nav-tools .lang-menu summary:hover,.nav-tools .me-link:hover{color:var(--accent);background:rgba(var(--accent-rgb),.08);text-decoration:none}
  .nav-tools .me-link:hover::after{margin-right:6px}
}
@media (prefers-reduced-motion:reduce){.nav-tools [data-label]::after{transition:none}}
/* Host dashboard (admin.js) */
.hd-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}.hd-head h1{font-size:44px;margin:0}
.hd-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:8px 0 18px}
.hd-tabs a{padding:9px 12px;color:var(--muted);font-weight:600;font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.hd-tabs a:hover{color:var(--text)}.hd-tabs a.on{color:var(--accent);border-color:var(--accent)}
.hd-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 6px}
@media (max-width:900px){.hd-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hd-tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;min-width:0}
.hd-tile b{font:600 28px var(--serif);line-height:1.1}.hd-tile span{color:var(--muted);font-size:13px}.hd-tile em{font-style:normal;color:var(--accent);font-size:12px;font-weight:600}
.hd-tile.good b,.hd-tile.good em{color:#2f7d4f}.hd-tile.bad b,.hd-tile.bad em{color:var(--danger)}
:root[data-theme="dark"] .hd-tile.good b,:root[data-theme="dark"] .hd-tile.good em{color:#6fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-tile.good b,:root:not([data-theme="light"]) .hd-tile.good em{color:#6fd39a}}
.adm-count.ok{color:#2f7d4f;border-color:rgba(47,125,79,.35)}
.hd-calm{margin:0;padding:14px 16px;border-radius:14px;background:rgba(47,125,79,.1);color:#2f7d4f;font-weight:600}
:root[data-theme="dark"] .hd-calm{color:#6fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-calm{color:#6fd39a}}
.hd-h-note{font:400 13px var(--sans)}.hd-all{margin-left:auto}
.hd-list{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.hd-row{border-bottom:1px solid var(--line)}.hd-row:last-child{border-bottom:0}
.hd-row > summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none}
.hd-row > summary::-webkit-details-marker{display:none}.hd-row > summary:hover,.hd-row[open] > summary{background:var(--panel2)}
.hd-chip{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.hd-rt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.hd-rt strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.hd-rt .faint{font-size:13px}
.hd-ra{display:flex;gap:6px;align-items:center}.hd-ra .adm-act .btn{min-height:30px;padding:3px 12px;font-size:13px}
.hd-det{padding:6px 14px 14px 52px;background:var(--panel2)}.hd-det p{margin:0 0 10px}
@media (max-width:640px){.hd-chip{display:none}.hd-det{padding-left:14px}}
.hd-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width:760px){.hd-two{grid-template-columns:1fr}}
.hd-people,.hd-mod{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}.hd-people li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-rule{margin:26px 0 4px;font-size:14px}
.mem-act > summary{list-style:none;cursor:pointer}.mem-act > summary::-webkit-details-marker{display:none}.mem-act[open]{display:flex;flex-direction:column;gap:6px}
.hd-all .act{font:600 14px var(--sans)}
.adm-actions > .btn{min-height:36px;padding:6px 14px;font-size:14px;display:inline-flex;align-items:center}
.cm-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px}.cm-bulk .check{margin:0}
.cm-pick{width:18px;height:18px;accent-color:var(--accent);flex:none}.cm-pick-gap{width:18px;flex:none}
.danger-text{color:var(--danger)}.danger-text:disabled{opacity:.5}
/* A circle's banner (owners upload it in Settings): fills the space beside the ring. */
.circle-banner-img{height:190px;border-radius:18px;background:center/cover no-repeat;margin:0 0 14px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.circle-banner-none{display:flex;align-items:flex-end;justify-content:flex-end;padding:12px 14px;height:150px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 10%,transparent) 60%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.circle-banner-none .act{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px}
@media (max-width:860px){.circle-banner-img{height:130px}.circle-banner-none{height:90px}}
.circle-search-side{flex-wrap:nowrap;gap:6px;margin:0 0 12px}
.circle-search-side .field{flex:1 1 auto;min-width:0;min-height:42px;padding:9px 16px;font-size:15px}
.circle-search-side .cs-adv{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.circle-search-side .cs-adv:hover{color:var(--accent);text-decoration:none}
.circle-topbar .crumbs{padding:4px 0}
.cd-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.cd-banner-prev{width:200px;height:50px;border-radius:10px;background:center/cover no-repeat;border:1px solid var(--line)}
/* The circle page's left column: the column spaces its boxes evenly (search, topics, messages, this circle). */
.circle-left{gap:14px}
.circle-left > .circle-dms,.circle-left > .circle-search-side{margin:0}
/* Circle catch-up views (Unread, Your conversations) at the top of Topics */
.topic-view .tv-ico,.topic-view .tv-dot{display:inline-block;width:16px;margin-right:6px;text-align:center;color:var(--muted)}
.topic-view .tv-dot{width:9px;height:9px;margin:0 9px 1px 3px;border-radius:50%;background:var(--accent);vertical-align:middle}
.topic-view.has-new{font-weight:700}.topic-view.has-new .topic-n{color:var(--accent);font-weight:700}
.topic-view + .topic-view + .topic-link{margin-top:2px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:10px}
.view-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 12px}.view-head .topic-title{margin:0}.view-head > .faint{flex-basis:100%;font-size:14px}
.topic-view svg.tv-ico{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* The host pages' shared tab row (_lib/hosttabs.js): one width everywhere, so it never jumps. */
.host-tabs{max-width:1100px;margin:0 auto 18px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.host-tabs::-webkit-scrollbar{display:none}.host-tabs a{white-space:nowrap}
/* Agora art (_lib/agora_art.js): line drawings from the Athenian Agora, in the site's colours. */
:root{--art-line:#e7b79c;--art-wash:#22163d;--art-hill:#2a1b44;--art-bubble:#22163d;--art-ink:#ece6f3}
:root[data-theme="light"]{--art-line:#7a5a48;--art-wash:#fffaf5;--art-hill:#f6e3d6;--art-bubble:#fff;--art-ink:#2a2140}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--art-line:#7a5a48;--art-wash:#fffaf5;--art-hill:#f6e3d6;--art-bubble:#fff;--art-ink:#2a2140}}
.agora-art{display:block;width:100%;height:auto}
.welcome-stoa{width:100%;max-width:820px;margin:10px auto 4px;opacity:.95}
.about-stoa{margin:0 0 18px}
.agora-explain{position:relative;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:16px 0 22px;padding:14px 44px 14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.agora-explain p{margin:0}.agora-explain-k{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 4px !important}
.agora-explain-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.agora-explain-x:hover{background:var(--panel2);color:var(--text)}
@media (max-width:640px){.agora-explain{grid-template-columns:1fr;padding-right:18px}.agora-explain .agora-art{max-width:220px;margin:0 auto}}
.empty-art{display:flex;align-items:center;gap:20px;text-align:left}.empty-art .agora-art{width:110px;flex:none}
.empty-art-text > :first-child{margin-top:0}.empty-art-text > :last-child{margin-bottom:0}
@media (max-width:520px){.empty-art{flex-direction:column;text-align:center}}
.agora-capitals{display:block;max-width:1100px;margin:30px auto 0}
.agora-explain[hidden]{display:none}

/* The wordmark (2026-10-14): a small temple standing on the letters' baseline, its pediment gold, and
   a matching gold pediment as the dot of the final i (a dotless ı plus a drawn roof). */
.wordmark .wm-temple{display:inline-block;vertical-align:baseline;height:.74em;width:auto;margin-right:.1em;color:var(--accent)}
.wordmark .wm-word{position:relative;display:inline-block}
.wordmark .wm-idot{position:absolute;right:.02em;top:-.03em;width:.3em;height:.2em}
/* Conversation cards: what just happened (a new reply, or a new conversation), and who said it. */
.card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.card-act{font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.card-act time{font-weight:500}
.act-reply{color:var(--accent)}.act-new{color:var(--gold)}
.card-last{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.card-last .av{flex:none;margin-top:2px}
.card-last .cl-who{display:block;font-size:15px}
.card-last .cl-said{display:block;color:var(--text);line-height:1.5}
.card-act.act-old{color:var(--muted);font-weight:600}

/* The tagline under the logo: small, letter-spaced, muted, so it reads as part of the mark. */
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand-lockup .tagline{margin:5px 0 0 3px;font-family:var(--sans);font-size:11px;letter-spacing:.033em;color:var(--muted);white-space:nowrap}   /* as wide as the logo: under the temple to under the i */
@media (max-width:640px){.brand-lockup .tagline{display:none}}   /* no room in a phone header; the footer has it */

/* Your calendar (/calendar): month grid on the left, the chosen day + coming up + subscribe on the right. */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cal-head h1{margin:0}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav strong{min-width:150px;text-align:center;font-size:17px}
.cal-sub{margin:6px 0 16px}
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.cal-month{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;overflow:hidden}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:4px 6px 8px}
.cal-grid{gap:4px}
.cal-cell{min-height:96px;border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0;background:var(--raise0)}
.cal-cell.out{opacity:.45}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.sel{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45) inset}
.cal-num{font-size:13px;font-weight:600;color:var(--muted);width:24px;height:24px;display:inline-grid;place-items:center;border-radius:50%;text-decoration:none}
.cal-cell.today .cal-num{background:var(--accent);color:var(--accent-ink)}
.cal-num:hover{background:rgba(var(--accent-rgb),.18)}
.cal-chip{display:block;font-size:12px;line-height:1.35;padding:2px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--text)}
.cal-chip.is-mine{background:rgba(var(--accent-rgb),.16)}
.cal-chip.is-meeting{background:color-mix(in srgb,var(--c,#7c6cf0) 22%,transparent);border-left:3px solid var(--c,#7c6cf0)}
.cc-t{color:var(--faint);margin-right:4px;font-variant-numeric:tabular-nums}
.cal-more{font-size:12px;color:var(--faint);padding-left:6px}
.cal-side{display:flex;flex-direction:column;gap:18px}
.cal-side h2{margin:0 0 10px;font-size:18px}
.cal-side h3{margin:18px 0 8px;font-size:15px;color:var(--muted)}
.cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cal-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-radius:10px;border-left:3px solid var(--accent);background:var(--raise0)}
.cal-item.is-meeting{border-left-color:var(--c,#7c6cf0)}
.ci-when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ci-what{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-note{white-space:pre-wrap;font-size:14px;color:var(--soft-text)}
.ci-acts{grid-column:2;display:flex;gap:12px;align-items:center}
.ci-acts form{margin:0}
.cal-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cal-form .cf-day{grid-column:1/-1}
.cal-form textarea.field{min-height:76px;height:auto}
.cal-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cal-form .cf-wide{grid-column:1/-1}
.cal-form label.check{flex-direction:row;align-items:flex-start;gap:8px}
.cal-form label.check input{margin-top:3px}
.cal-form .field{width:100%;min-width:0}
.cal-about{grid-column:1/-1;margin:0;font-size:14px}
.cal-sub-card .invite-link{display:flex;gap:8px}
.cal-sub-card .invite-link .field{flex:1;min-width:0;font-size:13px}
.cal-how{margin-top:8px}
@media (max-width:980px){.cal-layout{grid-template-columns:1fr}}
@media (max-width:640px){
  .cal-cell{min-height:58px;padding:3px}
  .cal-chip{font-size:0;height:6px;padding:0;border-radius:3px}
  .cal-chip .cc-t{display:none}
  .cal-more{font-size:10px;padding:0}
  .cal-item{grid-template-columns:68px minmax(0,1fr)}
}

/* Circle tasks (/c/<slug>/tasks, functions/c/[slug]/tasks.js): a List or a Board of the same tasks. */
.tasks-page{max-width:1100px}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tk-head h1{margin:0}
.tk-viewswitch{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px}
.tk-viewswitch a{padding:6px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.tk-viewswitch a.on{background:rgba(var(--accent-rgb),.18);color:var(--strong)}
.tk-sub{margin:6px 0 14px}
.tk-new{margin:0 0 16px}
.tk-new>summary{list-style:none;display:inline-block;cursor:pointer}
.tk-new>summary::-webkit-details-marker{display:none}
.tk-new[open]>summary{margin-bottom:10px}
.tk-form{display:grid;grid-template-columns:minmax(0,1fr) 200px 170px auto;gap:10px;align-items:center}
.tk-form .field{min-width:0;padding:10px 12px;font-size:15px}
.tk-form-btns{display:flex;gap:10px;align-items:center}
.tk-tabs{display:flex;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.tk-tabs a{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;font-weight:600;border-radius:999px;font-size:14px;color:var(--muted);border:1px solid var(--line2);text-decoration:none}
.tk-tabs a.on{background:rgba(var(--accent-rgb),.16);color:var(--strong);border-color:rgba(var(--accent-rgb),.5)}
.tk-n{display:inline-block;min-width:20px;text-align:center;background:var(--chip);border-radius:999px;padding:0 7px;font-size:12px;color:var(--muted);font-weight:600}
.tk-group h3{font-size:14px;color:var(--muted);margin:16px 0 8px;display:flex;gap:8px;align-items:center}
.tk-group h3.over{color:var(--danger)}
.tk-list,.tk-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tk-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto 110px 28px;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.tk-inline{margin:0;display:inline}
.tk-box{width:22px;height:22px;border:2px solid var(--muted);border-radius:6px;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--accent-ink);font-weight:800;font-size:13px}
.tk-box:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.15)}
.is-done .tk-box{background:#22c55e;border-color:#22c55e}
.is-done .tk-box::after{content:"✓";color:#fff}
.tk-main{display:flex;flex-direction:column;min-width:0}
.tk-title{font-weight:600;color:var(--strong);overflow-wrap:anywhere}
.is-done .tk-title{text-decoration:line-through;color:var(--faint);font-weight:500}
.tk-src{font-size:13px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-doing{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 7px;border-radius:999px;background:rgba(var(--glow-rgb),.18);color:var(--gold);vertical-align:2px}
.tk-who{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.tk-who .avatar,.tk-who img{width:22px;height:22px}
.tk-due{font-size:13px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-due.soon{color:var(--gold);font-weight:600}
.tk-due.over{color:var(--danger);font-weight:600}
.tk-more{font-size:18px;line-height:1;text-align:center;text-decoration:none}
.tk-editbox{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:10px 0 2px;border-top:1px dashed var(--line2);margin-top:4px}
.tk-editbox .tk-form{grid-template-columns:minmax(0,1fr) 180px 160px auto}
.tk-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.tk-col{background:var(--raise0);border:1px solid var(--line);border-radius:16px;padding:10px;min-height:260px;transition:border-color .15s,background .15s}
.tk-col.drop{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.tk-col h3{margin:2px 4px 10px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.tk-card{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:grab}
.tk-card.is-dragging{opacity:.45}
.tk-card .tk-title{font-size:15px}
.tk-card-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.tk-card-meta .tk-who-name{display:none}
.tk-card-meta .tk-due{text-align:left}
.tk-card-move{display:flex;align-items:center;gap:2px;margin-left:auto}
.tk-arrow{font-size:18px;padding:0 8px;line-height:1}
.tk-card .tk-editbox .tk-form{grid-template-columns:1fr}
@media (max-width:760px){
  .tk-form,.tk-editbox .tk-form{grid-template-columns:1fr 1fr}
  .tk-form .field[name=title]{grid-column:1/-1}
  .tk-row{grid-template-columns:26px minmax(0,1fr) auto 24px}
  .tk-row .tk-who-name{display:none}
  .tk-row .tk-due{grid-column:2;grid-row:2;text-align:left}
  .tk-board{grid-template-columns:1fr}
  .tk-col{min-height:0}
}

/* A task made from a post: the chip under it, and the form that makes one. */
.task-chips{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;align-items:flex-start}
.task-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--text);font-size:13px;text-decoration:none;flex-wrap:wrap}
.task-chip .tc-box{width:15px;height:15px;border:2px solid var(--muted);border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:800}
.task-chip.is-done{background:rgba(34,197,94,.16)}
.task-chip.is-done .tc-box{background:#22c55e;border-color:#22c55e;color:#fff}
.task-chip .tc-what{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.task-chip .due{color:var(--gold)} .task-chip .over{color:var(--danger)}
.task-make{margin:12px 0 6px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:14px;padding:14px;background:rgba(var(--accent-rgb),.06)}
.task-make-h{margin:0 0 8px;font-weight:700}
.task-make-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:10px}
.task-make-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.task-make-grid .field{padding:10px 12px;font-size:15px;min-width:0}
.task-make-ai{margin:8px 0 0;font-size:13px;color:var(--gold)}
.task-make-btns{display:flex;gap:10px;margin-top:12px}
@media (max-width:760px){.task-make-grid{grid-template-columns:1fr 1fr}.task-make-grid label:first-child{grid-column:1/-1}}

/* Tasks on your calendar. */
.cal-chip.is-task{background:rgba(34,197,94,.15);border-left:3px solid #22c55e}
.cal-chip.is-task::before{content:"☐ ";color:#22c55e}
.cal-item.is-task{border-left-color:#22c55e}
.cal-item.is-task .ci-when{color:#22c55e;font-weight:600}

/* "Eve finished a task: …" at the end of the conversation the task came from. */
.task-notes{display:flex;flex-direction:column;gap:8px;margin:18px 0 6px}
.task-note{display:flex;align-items:center;gap:10px;margin:0;padding:8px 14px;border-radius:12px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);font-size:14px}
.task-note .tn-box{width:18px;height:18px;border-radius:5px;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}

/* "Want this on your phone's calendar?" (functions/_lib/calendar.js calPrompt). */
.cal-prompt{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}
.cal-prompt .cp-ico{font-size:26px;line-height:1}
.cal-prompt .cp-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-prompt .cp-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cal-prompt .cp-dismiss{margin:0 0 0 auto}
.circle-upcoming .cu-phone{display:inline-block;margin-top:8px;font-size:14px}

/* A circle's calendar (/c/<slug>/calendar): shared dates in the circle's color, plus the key. */
.cal-chip.is-circle{background:color-mix(in srgb,var(--c,#7dd3fc) 24%,transparent);border-left:3px solid var(--c,#7dd3fc)}
.cal-item.is-circle{border-left-color:var(--c,#7dd3fc)}
.cal-key{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:12px 4px 2px;font-size:13px}
.cal-key .ck{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:-8px;vertical-align:-1px}
.ck-circle{background:var(--c,#7dd3fc)} .ck-meeting{background:#7c6cf0} .ck-task{background:#22c55e}
.cal-show{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.switch-btn{flex:none;width:44px;height:26px;border-radius:999px;border:0;background:var(--switch-off);position:relative;cursor:pointer;padding:0}
.switch-btn span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch-btn.on{background:var(--accent)}
.switch-btn.on span{left:21px}
.circle-upcoming h2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.circle-upcoming .cu-all{font-size:13px;text-transform:none;letter-spacing:0}

/* An X post, shown whole (functions/_lib/format.js xCard): who, the full text, its video or photos. */
.prose .xpost{margin:12px 0;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel2);max-width:620px}
.prose .xp-head{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.prose .xp-head:hover{text-decoration:none}
.prose .xp-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;margin:0}
.prose .xp-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.prose .xp-name{font-weight:700;color:var(--strong)}
.prose .xp-handle{font-size:14px;color:var(--faint)}
.prose .xp-logo{margin-left:auto;font-size:20px;color:var(--muted)}
.prose .xp-text{margin:10px 0 0;font-size:16px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.prose .xp-media{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.prose .xp-media.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.prose .xp-video,.prose .xp-photo img{display:block;width:100%;height:auto;max-height:560px;background:var(--media);margin:0;border-radius:0;object-fit:contain}
.prose .xp-foot{display:inline-block;margin-top:10px;font-size:13px;color:var(--faint)}
.prose .xpost a.xp-head,.prose .xpost a.xp-foot,.prose .xpost a.xp-photo{text-decoration:none;border-bottom:0}
.prose .xpost a.xp-foot:hover{color:var(--accent)}

/* ---------- Your Notebook + Files (profile tabs only the owner sees; _lib/notebook.js) ---------- */
.profile-tabs .tab-gap{flex:1 1 0;min-width:0}
.profile-tabs a.tab-private{font-weight:600}
.nb-private{margin:2px 0 14px;font-size:14px}
.nb-new{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;align-items:start}
.nb-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px 10px;min-width:0}
.nb-card.is-pinned{border-color:rgba(var(--accent-rgb),.45)}
.nb-card.nb-busy{opacity:.7}
.nb-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nb-kind{font-size:16px;line-height:1}
.nb-title{flex:1;min-width:0;margin:0;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;color:var(--strong);overflow-wrap:anywhere}
.nb-head form{margin:0}
.nb-head .nb-titleform{flex:1;min-width:0}
.nb-title-in{display:block;width:100%;background:transparent;border:0;border-radius:8px;padding:2px 6px;margin:0 -6px;font:inherit;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;color:var(--strong)}
.nb-title-in::placeholder{color:var(--faint);opacity:1}
.nb-title-in:hover{background:var(--panel2)}
.nb-title-in:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.nb-title.is-blank{color:var(--faint)}
.nb-pin{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid transparent;background:none;color:var(--faint);cursor:pointer}
.nb-pin:hover{color:var(--text);border-color:var(--line2)}
.nb-pin.on{color:var(--accent)}
.nb-more{position:relative}
.nb-more>summary{list-style:none;cursor:pointer;font-size:18px;line-height:1}
.nb-more>summary::-webkit-details-marker{display:none}
.nb-menu{position:absolute;right:0;top:38px;z-index:20;width:min(280px,80vw);background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:4px 14px 12px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.nb-menu .field{padding:9px 12px;margin-bottom:8px}
.nb-menu form{margin:0 0 6px}
.nb-del{color:var(--danger)}
.nb-entries{list-style:none;margin:0;padding:0}
.nb-entry{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.nb-entry:last-child{border-bottom:0}
.nb-entry form{margin:0}
.nb-check{position:relative;display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.nb-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.nb-box{width:19px;height:19px;border:2px solid var(--line2);border-radius:6px;display:inline-block}
.nb-check input:focus-visible+.nb-box{outline:2px solid var(--accent);outline-offset:2px}
.nb-box{position:relative}
.nb-check input:checked+.nb-box{background:var(--accent);border-color:var(--accent)}
.nb-check input:checked+.nb-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.nb-text{flex:1;min-width:0;padding-top:2px;overflow-wrap:anywhere;line-height:1.45}
.nb-entry.is-done .nb-text{text-decoration:line-through;color:var(--faint)}
.nb-x{border:0;background:none;color:var(--faint);font-size:19px;line-height:1;width:28px;height:28px;border-radius:999px;cursor:pointer;opacity:.55}
.nb-entry:hover .nb-x,.nb-x:focus-visible{opacity:1}
.nb-x:hover{color:var(--danger)}
.nb-addform{display:flex;gap:8px;margin:10px 0 4px}
.nb-addform .field{flex:1;min-width:0;padding:9px 12px}
.nb-addform .btn{padding:8px 14px}
.nb-done{margin:8px 0 0}
.nb-done>summary{cursor:pointer;font-size:14px;padding:4px 0}
.nb-empty{margin:4px 0;font-size:14px}
.nb-body{font-size:16px;margin:4px 0 6px}
.nb-body p:last-child{margin-bottom:0}
.nb-edit>summary{list-style:none;cursor:pointer;display:inline-flex}
.nb-edit>summary::-webkit-details-marker{display:none}
.nb-edit[open]>summary{display:none}
.nb-ta{min-height:120px;margin:4px 0 8px;font-size:16px;padding:12px}
.nb-when{margin:8px 0 0;font-size:12.5px}
.nb-also{margin:22px 0 0;font-size:14px}
.pf-up{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 12px}
.pf-pick{position:relative;overflow:hidden;cursor:pointer}
.pf-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pf-up.busy .pf-pick{opacity:.6;pointer-events:none}
.pf-hint{font-size:13.5px}
.pf-use{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13.5px}
.pf-bar{flex:0 1 220px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.pf-bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.pf-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pf-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pf-row:last-child{border-bottom:0}
.pf-thumb{flex:none;width:48px;height:48px;border-radius:10px;background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;text-decoration:none}
.pf-thumb img{width:100%;height:100%;object-fit:cover}
.pf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-name{color:var(--strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-main .faint{font-size:13px}
.pf-acts{display:flex;align-items:center;gap:2px}
@media (max-width:640px){
  .profile-tabs .tab-gap{display:none}
  .nb-new .btn{flex:1 1 auto}
}

/* ---------- Docs: the list (profile tab) and a document open full-screen (functions/d/[id].js) ---------- */
.dl-h{font-family:var(--serif);font-weight:500;font-size:20px;margin:22px 0 10px;color:var(--strong)}
.dl-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dl-row{border-bottom:1px solid var(--line)}
.dl-row:last-child{border-bottom:0}
.dl-main{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;color:inherit;text-decoration:none}
.dl-main:hover{background:var(--panel2);text-decoration:none}
.dl-row:first-child .dl-main{border-radius:16px 16px 0 0}.dl-row:last-child .dl-main{border-radius:0 0 16px 16px}
.dl-icon{font-size:22px;line-height:1.2}
.dl-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dl-title{color:var(--strong);font-size:16.5px}
.dl-title.is-blank{color:var(--muted)}
.dl-sub{font-size:13px}
.dl-preview{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

body.doc-mode{background:var(--bg)}
body.doc-mode::before{display:none}
body.doc-mode .prelaunch,body.doc-mode header.top,body.doc-mode .foot,body.doc-mode .install-bar,body.doc-mode .tabbar,body.doc-mode .skip{display:none}
body.doc-mode main{padding:0}
.doc-app{position:fixed;inset:0;display:flex;flex-direction:column;z-index:30;background:var(--doc-bg,#120b20)}
:root[data-theme="light"] .doc-app{--doc-bg:#f1ece6}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .doc-app{--doc-bg:#f1ece6}}
.doc-bar{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:var(--panel);border-bottom:1px solid var(--line)}
.doc-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;color:var(--text);flex:none}
.doc-back:hover{background:var(--panel2)}
.doc-icon{flex:none;display:inline-flex;color:var(--accent)}
.doc-titlewrap{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-title{background:transparent;border:0;border-radius:8px;padding:2px 6px;margin:0 -6px;font:inherit;font-size:18px;font-weight:600;color:var(--strong);min-width:0;width:100%}
.doc-title::placeholder{color:var(--muted);opacity:1}
.doc-title:hover:not([readonly]){background:var(--panel2)}
.doc-title:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.doc-status{font-size:12.5px;padding-left:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-people{display:flex;flex-direction:row-reverse;flex:none}
.doc-face{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;border:2px solid var(--panel);margin-left:-6px}
.doc-chip{flex:none;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.doc-share{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px}
.doc-tools{display:flex;align-items:center;gap:2px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;justify-content:center}
.doc-tools::-webkit-scrollbar{display:none}
.doc-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:9px;background:none;color:var(--text);cursor:pointer}
.doc-tool:hover{background:var(--panel2)}
.doc-tool.on{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
.doc-tool:disabled{opacity:.35;cursor:default;background:none}
.doc-block{flex:none;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;padding:0 8px}
.doc-sep{flex:none;width:1px;height:22px;background:var(--line2);margin:0 6px}
.doc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:28px 16px calc(80px + env(safe-area-inset-bottom))}
.doc-sheet{max-width:816px;min-height:calc(100% - 20px);margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.18);padding:64px 72px}
.doc-loading{margin:0}
.doc-pm{outline:none;min-height:60vh;font-size:17px;line-height:1.7;color:var(--prose)}
.doc-pm>*:first-child{margin-top:0}
.doc-pm p{margin:0 0 10px}
.doc-pm h1{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.2;margin:26px 0 12px;color:var(--strong)}
.doc-pm h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.25;margin:22px 0 10px;color:var(--strong)}
.doc-pm h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;margin:18px 0 8px;color:var(--strong)}
.doc-pm ul,.doc-pm ol{padding-left:26px;margin:0 0 10px}
.doc-pm li>p{margin:0 0 4px}
.doc-pm hr{border:0;border-top:1px solid var(--line2);margin:22px 0}
.doc-pm a{color:var(--link);text-decoration:underline}
.doc-pm ul[data-type="taskList"]{list-style:none;padding-left:4px}
.doc-pm ul[data-type="taskList"] li{display:flex;gap:10px;align-items:flex-start}
.doc-pm ul[data-type="taskList"] li>label{flex:none;margin-top:5px}
.doc-pm ul[data-type="taskList"] li>label input{width:17px;height:17px;accent-color:var(--accent)}
.doc-pm ul[data-type="taskList"] li>div{flex:1;min-width:0}
.doc-pm ul[data-type="taskList"] li[data-checked="true"]>div{text-decoration:line-through;color:var(--faint)}
.doc-pm p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--faint)}
/* Other people's cursors and selections (Tiptap collaboration caret) */
.collaboration-carets__caret{position:relative;margin:0 -1px;border-left:2px solid;border-right:0;word-break:normal;pointer-events:none}
.collaboration-carets__label{position:absolute;top:-1.45em;left:-2px;font-size:11.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px 5px 5px 0;color:#fff;white-space:nowrap;user-select:none;font-family:var(--sans);letter-spacing:0}
.doc-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:1px solid var(--line2);border-radius:18px;background:var(--panel);color:var(--text);padding:18px 20px 16px}
.doc-dialog::backdrop{background:rgba(0,0,0,.55)}
.ds-close-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.ds-close-row h2{margin:0;font-size:24px;font-weight:500}
.ds-addrow{display:flex;gap:8px;flex-wrap:wrap}
.ds-addrow .field{flex:1 1 200px;padding:10px 12px;min-width:0}
.ds-pick{position:relative;flex:1 1 200px;min-width:0;display:flex}
.ds-pick .field{width:100%}
.ds-sugg{left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow-y:auto}
.ds-sugg-empty{margin:0;padding:8px 10px;font-size:14px}
.ds-addrow select.field{flex:0 0 auto;width:auto}
.ds-hint{font-size:13px;margin:8px 0 6px}
.ds-err{margin:8px 0}
.ds-people{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow-y:auto}
.ds-person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ds-person:last-child{border-bottom:0}
.ds-name{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-name .faint{font-size:13px}
.ds-person select.ds-role{width:auto;padding:6px 10px;font-size:14px}
.ds-rolelabel{font-size:14px}
.ds-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .doc-bar{gap:6px;padding-left:8px;padding-right:10px}
  .doc-icon,.doc-chip{display:none}
  .doc-share span{display:none}
  .doc-share{padding:9px 11px}
  .doc-tools{justify-content:flex-start}
  .doc-scroll{padding:0 0 calc(80px + env(safe-area-inset-bottom))}
  .doc-sheet{border:0;border-radius:0;box-shadow:none;padding:22px 18px;min-height:100%}
  .doc-people .doc-face:nth-child(n+4){display:none}
}
@media print{
  .doc-bar,.doc-tools{display:none}
  .doc-app{position:static}
  .doc-sheet{box-shadow:none;border:0;padding:0}
}
/* Photos in documents: corner handles to resize (Tiptap's resizable view), a size bar when selected */
.doc-pm [data-resize-container]{justify-content:center;margin:12px 0}
.doc-pm [data-resize-wrapper]{max-width:100%}
.doc-pm img{display:block;max-width:100%;height:auto !important;border-radius:6px}
.doc-pm .ProseMirror-selectednode img,.doc-pm [data-resize-state="true"] img{outline:3px solid rgba(var(--accent-rgb),.7);outline-offset:2px}
.doc-pm [data-resize-handle]{width:14px;height:14px;background:var(--accent);border:2px solid var(--panel);border-radius:50%;opacity:0;transition:opacity .15s;z-index:2}
.doc-pm [data-resize-container]:hover [data-resize-handle],.doc-pm .ProseMirror-selectednode [data-resize-handle],.doc-pm [data-resize-state="true"] [data-resize-handle]{opacity:1}
.doc-pm [data-resize-handle="top-left"]{transform:translate(-50%,-50%);cursor:nwse-resize}
.doc-pm [data-resize-handle="top-right"]{transform:translate(50%,-50%);cursor:nesw-resize}
.doc-pm [data-resize-handle="bottom-left"]{transform:translate(-50%,50%);cursor:nesw-resize}
.doc-pm [data-resize-handle="bottom-right"]{transform:translate(50%,50%);cursor:nwse-resize}
@media (pointer:coarse){.doc-pm [data-resize-handle]{width:22px;height:22px}}
.doc-imgbar{position:absolute;z-index:35;display:flex;gap:2px;padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.doc-imgbar[hidden]{display:none}
.doc-imgbar button{border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.doc-imgbar button:hover{background:rgba(var(--accent-rgb),.12)}

/* Following (your own list, /following) */
.fl-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.fl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.fl-row:last-child{border-bottom:0}
.fl-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
a.fl-main:hover{text-decoration:none}
a.fl-main:hover strong{color:var(--accent)}
.fl-col{flex-direction:column;align-items:flex-start;gap:4px}
.fl-text{display:flex;flex-direction:column;min-width:0}
.fl-text .faint{font-size:13.5px}
.fl-mutual{color:var(--accent);font-weight:600}
.fl-blurb{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-unfollow{margin:0;flex:none}
.fl-unfollow .btn{padding:7px 14px;font-size:14px}

/* Your profile and Settings, built like a circle's page (u/[handle].js, settings.js) */
.profile-left{gap:14px}
.profile-left > .circle-search-side{margin:0}
.profile-hero .ring-center{max-width:80%}
.profile-hero .ring-name{display:block}
.profile-hero .avatar-head{margin:0 0 2px}
.profile-hero .badge-ai{font-size:11px;vertical-align:middle;margin-left:6px}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.profile-actions form{margin:0}
.profile-actions > div{margin-top:0 !important}
.profile-feed,.settings-body{min-width:0}
.settings-h{font-size:40px;margin:2px 0 4px}
.settings-intro{margin:0 0 16px;font-size:17px}
.settings-card{padding:18px 22px}
.settings-card .set-row:first-child{margin-top:0}
.set-blocked{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.set-blocked:last-child{border-bottom:0}
.set-signout{margin:0}
.set-signout .topic-link{width:100%;border:0;background:none;font:inherit;font-size:15px;color:var(--text);text-align:left}

/* Voice messages, compact (app.js "Voice messages: one compact player"): one colour, the bubble's;
   a round play button for a finger, bars from the recording that fill as it plays, the time. */
.voice.vx{position:relative;flex-wrap:nowrap;gap:10px;padding:7px 14px 7px 7px;min-width:236px;max-width:300px;box-sizing:border-box}
.voice.vx .voice-mic,.voice.vx audio{display:none}
.voice.vx .voice-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vx-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);cursor:pointer;padding:0 0 0 2px}
.voice.is-playing .vx-play{padding:0}
.vx-wave{flex:1 1 auto;min-width:118px;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer;outline-offset:3px}
.vx-wave i{flex:1 1 0;min-width:2px;max-width:4px;border-radius:2px;background:currentColor;opacity:.35;transition:opacity .15s}
.vx-wave i.on{opacity:1}
.vx-time{flex:none;min-width:34px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;opacity:.85}
.pm-attach.prose .voice{border:0}
.pm.mine .pm-attach .voice.vx .vx-play{background:#ffffff;color:var(--chat-blue)}
.pm.theirs .pm-attach .voice.vx{color:var(--chat-gray-ink)}
.pm.theirs .pm-attach .voice.vx .vx-play{background:var(--chat-blue);color:#ffffff}

/* A new conversation (messages/new.js): the same chat pane, with a "To:" row under the header. */
.chat-to{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:8px 16px;border-bottom:1px solid var(--line)}
.chat-to > label{color:var(--muted);font-size:15px}
.chat-to #to{flex:1 1 180px;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--text);outline:none;padding:8px 0}
.chat-to-title > summary{list-style:none;cursor:pointer;color:var(--chat-blue);font-size:14px;padding:6px 0}
.chat-to-title > summary::-webkit-details-marker{display:none}
.chat-to-title[open]{flex-basis:100%;display:flex;align-items:center;gap:10px}
.chat-to-title input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:999px;background:var(--panel);font:inherit;font-size:15px;color:var(--text);padding:7px 14px}
.chat-new .chat-empty{text-align:center;max-width:420px;margin:28px auto}

/* Message boxes: attachments wait as chips above the box (app.js "attachments wait in a tray") */
.chat-tray{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px 8px}
.chat-tray[hidden]{display:none}
.tray-chip{position:relative;display:inline-flex;align-items:center;gap:8px;max-width:260px;padding:6px 34px 6px 10px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);font-size:14px;color:var(--text)}
.tray-image{padding:0;border-radius:12px;overflow:hidden;width:64px;height:64px}
.tray-image img{width:100%;height:100%;object-fit:cover;display:block}
.tray-ico{font-size:16px;line-height:1}
.tray-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tray-image .tray-x{top:4px;right:4px;transform:none;width:22px;height:22px}
.chat-sending{color:transparent !important;caret-color:transparent}

/* Any script, either direction (Bryan: readers beyond the Roman alphabet). Arabic, Hebrew, Persian
   and Urdu read right to left: each paragraph, title and box sets its own direction from its own
   first letter, so a right-to-left post sits on the right with its punctuation in place, and a
   mixed conversation still reads naturally line by line. */
.prose p,.prose li,.prose h1,.prose h2,.prose h3,.prose h4,.prose blockquote,.prose td,.prose th,
.thread-head h1,.card h3,.card .cl-said,.ask-similar-title,.gist li,.answered-ex,
textarea,input[type="text"],input[type="search"],input:not([type]){unicode-bidi:plaintext;text-align:start}
.price-box .pb-then{margin-top:4px;font-size:13px;color:var(--muted)}
.price-box .pb-then .up{color:#4ade80}
.price-box .pb-then .down{color:#f87171}

/* ---------- PDF reader (u/[handle]/files/[id]/read.js, public/pdf-reader.js) ---------- */
.pr-app .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-name{font-size:17px;font-weight:600;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bar .doc-tool{text-decoration:none}
.pr-mark{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px}
.pr-tools{display:flex;align-items:center;gap:2px;padding:5px 10px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pr-tools::-webkit-scrollbar{display:none}
.pr-pagebox{flex:none;display:inline-flex}
.pr-app input.pr-page{width:56px;height:34px;text-align:center;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:15px;padding:0 4px}
.pr-page:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.pr-of{flex:none;font-size:14px;margin:0 6px 0 7px;white-space:nowrap}
.pr-zoomval{flex:none;min-width:58px;height:34px;border:0;border-radius:9px;background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.pr-zoomval:hover{background:var(--panel2)}
.pr-find{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 1 380px;min-width:220px}
.pr-find[hidden]{display:none}
.pr-find .field{height:34px;padding:0 12px;border-radius:9px;font-size:15px;min-width:0}
.pr-findcount{flex:none;font-size:13px;min-width:52px;text-align:right;white-space:nowrap}
.pr-body{flex:1;min-height:0;display:flex;position:relative}
.pr-side{display:none;flex:none;width:300px;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0}
.pr-side-open .pr-side{display:flex}
.pr-tabs{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--line)}
.pr-tab{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:8px 6px 10px;border-bottom:2px solid transparent;cursor:pointer}
.pr-tab.on{color:var(--strong);border-bottom-color:var(--accent)}
.pr-panel{flex:1;overflow-y:auto;padding:10px 10px calc(30px + env(safe-area-inset-bottom))}
.pr-panel[hidden]{display:none}
.pr-list,.pr-toc-sub{list-style:none;margin:0;padding:0}
.pr-toc-sub{padding-left:14px}
.pr-item{display:flex;align-items:center;flex-wrap:wrap;border-radius:9px}
.pr-item.here>.pr-go{background:rgba(var(--accent-rgb),.12)}
.pr-item.here>.pr-go .pr-pnum{color:var(--accent)}
.pr-go{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;border:0;background:none;color:var(--text);font:inherit;font-size:14.5px;line-height:1.35;text-align:left;padding:7px 8px;border-radius:9px;cursor:pointer}
.pr-go:hover{background:var(--panel2)}
.pr-item>.pr-toc-sub{flex-basis:100%}
.pr-label{flex:1;min-width:0;overflow-wrap:anywhere}
.pr-pnum{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.pr-item.lvl1 .pr-go{padding-left:22px;font-size:14px}
.pr-item.lvl2 .pr-go{padding-left:36px;font-size:13.5px;color:var(--muted)}
.pr-item.lvl0 .pr-label{font-weight:500}
.pr-ailist .pr-item.lvl0 .pr-label{font-weight:600}
.pr-mini{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--faint);font-size:16px;cursor:pointer;opacity:.0;transition:opacity .12s}
.pr-item:hover .pr-mini,.pr-mini:focus-visible{opacity:1}
@media (hover:none){.pr-mini{opacity:.7}}
.pr-mini:hover{background:var(--panel2);color:var(--text)}
.pr-empty{padding:8px;font-size:14px;line-height:1.45}
.pr-ai{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pr-h{margin:0 0 6px;padding:0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.pr-ai-hint{margin:0 8px 10px;font-size:13.5px;line-height:1.45}
.pr-aibtn{width:100%;margin-top:8px;white-space:normal;line-height:1.3;padding:10px 14px}
.pr-aibtn.busy{opacity:.75;cursor:progress}
.pr-ai-note{margin:8px 8px 0;font-size:12.5px;line-height:1.4}
.pr-premium{margin:6px 8px 0;font-size:12.5px;color:var(--accent)}
.pr-err{margin:10px 0 0;font-size:14px}
.pr-askform{display:flex;flex-direction:column;gap:8px}
.pr-askform .lbl{font-weight:600;font-size:14px;color:var(--strong)}
.pr-askform textarea{font-size:15px;padding:10px 12px;resize:vertical;min-height:84px}
.pr-askform .btn{align-self:flex-end;min-width:90px}
.pr-answers{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.pr-answer{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.pr-q{margin:0 0 6px;font-weight:600;color:var(--strong);font-size:14.5px}
.pr-a{font-size:14.5px;line-height:1.5;color:var(--text)}
.pr-a p,.pr-a ol,.pr-a ul{margin:0 0 6px}
.pr-a ol,.pr-a ul{padding-left:20px}
.pr-pg{border:0;background:rgba(var(--accent-rgb),.14);color:var(--accent);font:inherit;font-size:.92em;font-weight:600;padding:0 5px;border-radius:6px;cursor:pointer}
.pr-pg:hover{background:rgba(var(--accent-rgb),.26)}
.pr-stage{flex:1;min-width:0;position:relative}
.pr-scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:none}
.pr-scroll .pdfViewer{padding:12px 0 calc(60px + env(safe-area-inset-bottom))}
.pr-scroll .pdfViewer .page{box-shadow:0 4px 22px rgba(0,0,0,.22);border-radius:2px}
@media (max-width:899px){
  .pr-side{position:absolute;z-index:5;top:0;bottom:0;left:0;width:min(340px,88vw);box-shadow:8px 0 30px rgba(0,0,0,.35)}
}
@media (max-width:700px){
  .pr-mark span,.pr-dl{display:none}
  .pr-mark{padding:8px 11px}
  .pr-find{flex:1 0 100%;order:9;margin:4px 0 0}
  .pr-tools{flex-wrap:wrap}
  .pr-scroll .pdfViewer{padding-top:4px}
}

/* ---------- Dictionary (/word/<word>, functions/_lib/dictionary.js) ---------- */
.wd .wd-search{display:flex;gap:8px;margin:0 0 18px}
.wd .wd-search .field{flex:1;min-width:0;padding:11px 14px}
.wd-word{font-size:52px;line-height:1.05;margin:6px 0 14px;overflow-wrap:anywhere}
.wd-ai{border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin:0 0 22px;background:var(--panel)}
.wd-ai-h{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--strong);display:flex;align-items:center;gap:8px}
.wd-ai-body{font-size:16.5px;line-height:1.6;color:var(--prose,var(--text))}
.wd-ai-body p{margin:0 0 8px}
.wd-ai-note{margin:6px 0 0;font-size:12.5px}
.wd-group{padding:16px 0 8px;border-top:1px solid var(--line)}
.wd-head{font-size:30px;margin:0 0 8px}
.wd-head sup{font-size:.55em;color:var(--accent);margin-left:2px}
.wd-say{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 6px}
.wd-play{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.10);color:var(--accent);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.wd-play:hover{background:rgba(var(--accent-rgb),.18)}
.wd-play.on{background:var(--accent);color:var(--accent-ink)}
.wd-ipa{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.wd-ipa-v{font-size:18px;color:var(--strong);font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Sans",var(--sans)}
.wd-sounds{margin:4px 0 0;font-size:14px}
.wd-et{margin:12px 0 6px}
.wd-et h3,.wd-part h3{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:14px 0 6px}
.wd-et p{margin:0 0 6px;line-height:1.6}
.wd-part h3 em{font-style:italic;font-weight:600;color:var(--strong);font-size:17px;letter-spacing:0;font-family:var(--serif)}
.wd-forms{font-weight:400;font-size:14px;margin-left:6px}
.wd-senses{margin:0 0 6px;padding-left:0;line-height:1.55;list-style:none;counter-reset:wd}
.wd-senses li{margin:0 0 7px;position:relative;padding-left:30px}
.wd-senses li:not(.wd-sub){counter-increment:wd}
.wd-senses li:not(.wd-sub)::before{content:counter(wd) ".";position:absolute;left:0;width:24px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.wd-senses li.wd-sub::before{content:"◦";position:absolute;left:12px;color:var(--faint)}
.wd-sub1{margin-left:18px}.wd-sub2{margin-left:34px}
.wd-tags{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel2);border-radius:6px;padding:1px 6px}
.wd-ex{display:block;color:var(--muted);font-style:italic;font-size:14.5px;margin-top:2px}
.wd-syn{margin:4px 0 8px;font-size:14px}
.wd-more{margin:20px 0 10px}
.wd-credit{margin:18px 0 30px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
@media (max-width:700px){.wd-word{font-size:40px}.wd-head{font-size:26px}}
/* One word in the ask box: its dictionary preview (app.js, api/word-peek) */
.ask-word{display:flex;flex-direction:column;gap:3px;padding:4px 4px;color:var(--text)}
.askbox a.ask-word,.askbox a.ask-word *{text-decoration:none}
.ask-word-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ask-word-head strong{font-size:17px;color:var(--strong)}
.ask-word-ipa{color:var(--muted)}
.ask-word-gloss{font-size:14.5px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ask-word-go{font-size:13.5px;font-weight:600;color:var(--accent)}
.askbox a.ask-word:hover .ask-word-go{text-decoration:underline}

/* ---------- Profile pictures (functions/_lib/avatars.js) ---------- */
.av-initial{color:#fff;font-weight:700;line-height:1;font-family:var(--sans);letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.18);user-select:none}
.avatar-menu{position:relative;display:inline-block}
.avatar-menu>summary{list-style:none}
.avatar-menu>summary::-webkit-details-marker{display:none}
.avatar-sheet{position:absolute;z-index:60;top:calc(100% + 10px);left:-90px;width:min(440px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:12px 14px 14px;text-align:left}
.avatar-sheet-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.avatar-sheet-h{margin:0;font-weight:700;color:var(--strong);font-size:16px}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatar-opt{display:block;padding:0;border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;aspect-ratio:1;position:relative}
.avatar-opt img{width:100%;height:100%;border-radius:50%;display:block}
.avatar-opt:hover,.avatar-opt:focus-visible{border-color:rgba(var(--accent-rgb),.6);outline:none}
.avatar-opt.on,.avatar-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.avatar-opt input{position:absolute;opacity:0;width:1px;height:1px}
.avatar-sheet-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.avatar-upload{position:relative;overflow:hidden;min-height:40px;padding:8px 16px}
.avatar-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.avatar-sheet-note{margin:10px 0 0;font-size:12.5px}
.avatar-nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px dashed rgba(var(--accent-rgb),.5);border-radius:14px;font-size:15px;color:var(--text)}
.welcome-pic{border:0;margin:18px 0 6px;padding:0}
.welcome-pic .lbl{display:block;margin:0 0 8px}
.welcome-pic .avatar-grid{grid-template-columns:repeat(8,1fr);gap:6px}
@media (max-width:700px){
  .avatar-sheet{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;border-radius:20px 20px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
  .welcome-pic .avatar-grid{grid-template-columns:repeat(6,1fr)}
}

/* ---------- Search as you type: the header's search (layout.js, app.js) and the home box ---------- */
.search-pop{position:fixed;inset:0;z-index:90;background:rgba(10,6,20,.55);display:flex;justify-content:center;align-items:flex-start;padding:calc(70px + env(safe-area-inset-top)) 12px 12px}
.search-pop[hidden]{display:none}
body.search-open{overflow:hidden}
.search-pop-box{width:min(640px,100%);max-height:calc(100vh - 100px);overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:8px}
.search-pop-form{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;color:var(--muted)}
.search-pop-input{flex:1;min-width:0;border:0;background:transparent;color:var(--strong);font:inherit;font-size:19px;padding:10px 2px;outline:none}
.search-pop-input::-webkit-search-cancel-button{display:none}
.search-pop-list{border-top:1px solid var(--line);padding:6px 0 2px}
.search-pop-list[hidden]{display:none}
.search-pop-ask{display:block;margin:4px 6px 6px;padding:11px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.10);color:var(--accent);font-weight:600;text-decoration:none}
.search-pop-ask:hover{background:rgba(var(--accent-rgb),.18)}
.search-pop-ask[hidden]{display:none}
.ask-all{display:block;padding:9px 10px 6px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.ask-all:hover{text-decoration:underline}
.ask-similar .suggest-item{padding:8px 6px}
.ask-similar .ask-word{padding:6px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sg-ic.sg-word{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:13px}
.sg-ic.sg-person,.sg-ic.sg-ai,.sg-ic.sg-square{color:var(--accent)}
@media (max-width:700px){.search-pop{padding-top:calc(12px + env(safe-area-inset-top))}.search-pop-box{max-height:calc(100vh - 30px)}}

/* ---------- Cover banners (functions/_lib/covers.js) ---------- */
.cover-mine{position:relative}
.circle-banner-img.cover-mine:not(.circle-banner-none) .cover-menu{position:absolute;right:12px;bottom:12px}
.circle-banner-none.cover-mine{display:flex;align-items:center;justify-content:center}
.cover-menu{position:relative;display:inline-block}
.cover-menu>summary{list-style:none;cursor:pointer}
.cover-menu>summary::-webkit-details-marker{display:none}
.cover-menu-btn{background:rgba(var(--bar-rgb,27,16,51),.72);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.circle-banner-none .cover-menu-btn{background:transparent;color:var(--text);border-color:var(--line2);backdrop-filter:none}
.cover-sheet{position:absolute;z-index:60;top:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:12px 14px 14px;text-align:left}
.circle-banner-none .cover-sheet{right:auto;left:50%;transform:translateX(-50%)}
.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cover-opt{display:block;aspect-ratio:3/1;border-radius:10px;border:2px solid transparent;background:center/cover no-repeat;cursor:pointer;padding:0}
.cover-opt:hover,.cover-opt:focus-visible{border-color:rgba(var(--accent-rgb),.6);outline:none}
.cover-opt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.ep-cover-tools .cover-menu-btn{min-height:36px}
@media (max-width:700px){
  .cover-sheet,.circle-banner-none .cover-sheet{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;border-radius:20px 20px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
  .cover-grid{grid-template-columns:repeat(2,1fr)}
}