/* 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;
  --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;
  --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;
  --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}
.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-size:17px;font-weight:600;margin:0 0 4px;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}
.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){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):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}
.feed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
/* 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}
.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:none}
@media (max-width:600px){.reply-to{display:inline}}

/* 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}
.here{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);white-space:nowrap}
.here-dot{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 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-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}
.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)}
@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)}
.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(--muted)}
.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]{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. */
  .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):not(.nav-theme){display:none}
  .nav-tools .bell.nav-notes,.nav-tools .bell.nav-host,.nav-tools .bell.nav-theme{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 */
.you-head{display:flex;align-items:center;gap:16px;padding:18px 4px 22px;text-decoration:none;color:var(--text)}
.you-head:hover{text-decoration:none}
.you-head strong{display:block;font-size:26px;font-weight:500}
.you-head .faint{display:block;font-size:14px}
.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-days{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:6px}
.tr-day{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.tr-col{width:100%;max-width:38px;background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.35));border-radius:6px 6px 2px 2px}
.tr-lbl{font-size:11px;color:var(--faint)}.tr-v{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}

/* 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){text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pm.mine .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview){color:inherit;text-decoration-color:rgba(255,255,255,.6)}
.pm.theirs .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview){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}
.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,.nav-tools .bell.nav-theme{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}
.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}