/* ============================================================
   hehehey
   1. tokens   2. reset   3. layout   4. chrome
   5. components  6. pages   7. responsive
   ============================================================ */

/* ---- 1. tokens ---- */
:root{
  --ink:#FFFFFF;
  --ink-2:#F6F3F8;
  --wine:#EFE6FF;
  --flare:#8B5CF6;
  --flare-rgb:139,92,246;
  --ink-rgb:255,255,255;
  --cream-rgb:43,34,51;
  --sand-rgb:110,100,120;
  --cream:#2B2233;
  --sand:#6E6478;
  --sand-dim:rgba(110,100,120,.85);
  --line:rgba(43,34,51,.10);
  --gold:#E8935F;

  --fs-xs:12px;
  --fs-sm:14px;
  --fs:17px;
  --fs-lg:20px;
  --fs-xl:26px;
  --fs-line:clamp(20px,5vw,26px);
  --fs-title:clamp(28px,5vw,40px);
  --fs-hero:clamp(38px,6vw,62px);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shell:1080px;
  --shell-narrow:560px;
  --pad:clamp(16px,4vw,32px);
  --r:3px;
  --r-pill:999px;
}

/* ---- 2. reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font:400 var(--fs)/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}

/* The hidden attribute must beat any author display rule.
   Without this, .hidden = true silently does nothing on any
   element whose class sets display. */
a{color:var(--sand);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover:not(.mark){color:var(--flare)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--flare);color:var(--ink);padding:10px 14px;z-index:99}

/* ---- 3. layout ---- */
.shell{width:min(var(--shell-narrow),100% - var(--pad)*2);margin-inline:auto;padding-block:48px 72px}
.shell-wide,.shell:has(.lp-hero){width:min(var(--shell),100% - var(--pad)*2)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---- 4. chrome ---- */
.site-head{position:sticky;top:0;height:71px;background:var(--ink);z-index:30}
.head-in{
  width:min(1180px,100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;
}
.mark{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--cream);font:700 var(--fs-lg)/1 var(--font);letter-spacing:-.02em}
.mark-line{display:inline-flex;align-items:center;gap:7px}
.mark-stack{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.05;font-size:var(--fs-xl)}
/* The script sits between the two plain words, so it holds the
   mark together rather than trailing off the end. Larger than
   its neighbours because script x-heights run small. */
.nav{display:flex;align-items:center;gap:20px;font-size:var(--fs)}
.nav a{text-decoration:none}
.burger{display:none;background:none;border:0;color:var(--cream);padding:6px}
.inline{display:inline}
.linkish{background:none;border:0;color:var(--sand);padding:0}
.linkish:hover{color:var(--flare)}

.site-foot{border-top:1px solid var(--line);margin-top:auto}
.foot-in{
  width:min(var(--shell),100% - var(--pad)*2);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  padding-block:28px 40px;font-size:var(--fs-sm);color:var(--sand-dim);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-nav a{text-decoration:none}

body.bare .shell{padding-block:24px}

.flash{background:var(--gold);color:var(--ink);padding:12px var(--pad);font-size:var(--fs);text-align:center}

/* ---- 5. components ---- */
/*
* One button. Size and weight are modifiers, never new classes:
* .btn            primary, filled
* .btn-ghost      secondary, outlined
* .btn-lg/-sm/-xs size
*
* Anything that looked like a button and had its own rule - the follow
* control, the composer chips - uses these instead, so the padding and
* radius live in one place.
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--flare);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-pill);padding:13px 26px;
  font-weight:700;font-size:var(--fs);line-height:1;text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-lg{padding:16px 32px;font-size:var(--fs)}
.btn-sm{padding:9px 16px;font-size:var(--fs-sm)}
.btn-xs{padding:5px 12px;font-size:var(--fs-xs);font-weight:600}
.btn-ghost{background:none;color:var(--sand);border-color:var(--line)}
.btn-ghost:hover{background:none;border-color:var(--flare);color:var(--flare)}
.btn-ghost.on{border-color:var(--line);color:var(--sand-dim)}

.card{padding-block:20px}
.card.face{border-bottom:1px solid var(--line)}
.post-by a{text-decoration:none;font-weight:500;color:var(--cream)}
.post-by span{color:var(--sand-dim);font-size:var(--fs)}
.post-body{margin-top:8px}
.post-foot{margin-top:12px}
.act{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--sand-dim);padding:4px 0}
.act:hover,.act[aria-pressed="true"]{color:var(--flare)}
.act .count{font-size:var(--fs-sm)}

.face{border:0;padding:0}
.face-img{
  aspect-ratio:1;background:var(--wine);border-radius:var(--r);
  display:grid;place-items:center;color:rgba(var(--cream-rgb),.45);
}
.face-name{margin-top:10px;font-size:var(--fs)}
.face-loc{font-size:var(--fs-sm);color:var(--sand-dim)}

.feature svg{color:var(--flare);margin-bottom:12px}
.feature h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:6px}
.feature p{color:var(--sand);font-size:var(--fs);max-width:32ch}

/* Scoped deliberately: a bare .empty is too generic a name and was
   colliding with modifier classes elsewhere. */
div.empty{border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center}
div.empty .empty-title{font-weight:600}
div.empty .empty-body{color:var(--sand-dim);font-size:var(--fs);margin-top:4px}

.form{display:grid;gap:2px;max-width:400px;margin-top:24px}
.field{display:grid;gap:5px;margin-bottom:16px}
.field label{font-size:var(--fs-sm);color:var(--sand)}
.field input{
  background:transparent;border:1px solid rgba(var(--sand-rgb),.4);
  border-radius:var(--r);padding:12px 14px;color:var(--cream);font:inherit;
}
.field input:focus-visible{border-color:transparent}
.form .btn{margin-top:10px;justify-self:start}

.hint{font-size:var(--fs-sm);color:var(--sand-dim)}
.err{color:var(--flare);font-size:var(--fs-sm)}
.note{font-size:var(--fs-sm);color:var(--sand-dim)}
.muted{font-size:var(--fs);color:var(--sand)}
.lead{color:var(--sand);font-size:var(--fs-lg);max-width:46ch}
.alt{margin-top:26px;font-size:var(--fs);color:var(--sand)}
.kicker{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--flare);margin-bottom:14px}
.more{display:inline-block;margin-top:24px}

/* ---- 6. pages ---- */
.page-h{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}

.lp-hero{padding-block:72px 56px}
.lp-hero h1{font-size:var(--fs-hero);font-weight:700;line-height:1.06;letter-spacing:-.03em}
.lp-hero h1 em{font-style:normal;color:var(--flare)}
.lp-hero .lead{margin-top:20px}
.lp-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}

.lp-stats{display:flex;flex-wrap:wrap;gap:56px;border-block:1px solid var(--line);padding-block:28px}
.lp-stats strong{font-size:32px;font-weight:700;color:var(--flare);letter-spacing:-.02em}
.lp-stats span{display:block;font-size:var(--fs-sm);color:var(--sand)}

.lp-block{padding-block:72px}
.lp-block h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin-bottom:36px}

.lp-prompt{border:1px solid var(--line);border-radius:var(--r);padding:48px var(--pad);margin-block:16px}
.lp-prompt blockquote{font-size:var(--fs-line);font-weight:600;line-height:1.25;letter-spacing:-.015em;max-width:26ch}
.lp-prompt .note{margin-top:14px}
.lp-prompt p:last-child{margin-top:26px}

.lp-end{padding-block:88px 100px;text-align:center}
.lp-end h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.lp-end .lead{margin-inline:auto}
.lp-end .btn-lg{margin-top:28px}

.stream{margin-bottom:28px}

/* ---- 7. responsive ---- */
@media (max-width:860px){
  .grid-3{grid-template-columns:1fr;gap:32px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .lp-stats{gap:28px}
  .lp-hero{padding-block:48px 40px}
  .lp-block{padding-block:56px}

  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
  }
  .nav.open{display:flex}
  .nav a,.nav form{padding-block:12px;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;
  background:var(--cream);color:var(--ink);
  padding:12px 20px;border-radius:var(--r);font-size:var(--fs);
  opacity:0;pointer-events:none;transition:opacity .18s;z-index:60;
}
.toast.show{opacity:1}

/* ---- composer ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.composer{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:28px}
.composer textarea{
  width:100%;background:transparent;border:0;color:var(--cream);
  font:inherit;resize:vertical;min-height:52px;
}
.composer textarea::placeholder{color:var(--sand-dim)}
.composer textarea:focus-visible{outline:0}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.pick{display:inline-flex;align-items:center;gap:8px;color:var(--sand);font-size:var(--fs-sm);cursor:pointer}
.pick:hover{color:var(--flare)}
.pick input{position:absolute;width:1px;height:1px;opacity:0}
.pick:focus-within{color:var(--flare);outline:2px solid var(--flare);outline-offset:4px;border-radius:2px}
.composer-note{font-size:var(--fs-sm);color:var(--sand-dim);margin-top:8px}

/* ---- post media ---- */
.post-media{position:relative;margin-block:12px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.post-media img,.post-media video{display:block;width:100%;height:100%;object-fit:cover}
.post-media.multi{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:6px;background:none}

/* ---- moderation ---- */
.mod-sec{margin-bottom:48px}
.mod-sec h2{font-size:var(--fs-lg);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.pill{background:var(--wine);color:var(--cream);font-size:var(--fs-sm);font-weight:400;padding:2px 9px;border-radius:20px}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.mod-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--ink-2)}
.mod-by{font-size:var(--fs-sm);color:var(--sand-dim);margin-top:8px}
.mod-acts{display:flex;gap:8px;margin-top:8px}

.shot{position:relative;margin:0}
.shot img{width:100%;height:auto;border-radius:var(--r);background:var(--ink-2);display:block}
.shot.in-review img{opacity:.55}
.shot figcaption{
  position:absolute;left:10px;bottom:10px;
  background:rgba(var(--ink-rgb),.9);color:var(--sand);
  font-size:var(--fs-sm);padding:5px 10px;border-radius:2px;
}

/* ============ composer ============ */
.composer-head{margin-bottom:16px}
.composer-head h2{font-size:var(--fs);font-weight:700;letter-spacing:-.01em}
.composer-head p{font-size:var(--fs-sm);color:var(--sand-dim)}

.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:12px}
.pick-tile{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--line);border-radius:var(--r);color:var(--sand-dim);
  font-size:var(--fs-xs);cursor:pointer;text-align:center;padding:6px;
}
.pick-tile:hover{border-color:var(--flare);color:var(--flare)}
.pick-tile input{position:absolute;width:1px;height:1px;opacity:0}
.pick-tile:focus-within{border-color:var(--flare);color:var(--flare)}

.thumb{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--ink-2);cursor:grab}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.dragging{opacity:.4}
.thumb .lead{
  position:absolute;left:4px;top:4px;background:var(--flare);color:var(--ink);
  font-size:var(--fs-xs);font-weight:700;padding:2px 6px;border-radius:2px;letter-spacing:.04em;
}
.thumb .drop{
  position:absolute;right:4px;top:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(var(--ink-rgb),.85);color:var(--cream);display:grid;place-items:center;line-height:1;
}
.picks-note{font-size:var(--fs-sm);color:var(--sand-dim);margin-bottom:12px}

.chip{
  display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;
  color:var(--sand);font-size:var(--fs-sm);cursor:pointer;
}
.chip:hover{border-color:var(--flare);color:var(--flare)}

.sheet{border:0;padding:0;background:transparent;max-width:min(520px,94vw)}
.sheet::backdrop{background:rgba(var(--ink-rgb),.72)}
.sheet-in{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.sheet-in h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:14px}
.starter-list{list-style:none;display:grid;gap:6px;margin-bottom:16px}
.starter{
  width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r);padding:11px 12px;color:var(--cream);
}
.starter:hover{border-color:var(--flare);background:rgba(var(--flare-rgb),.07)}
.starter svg{color:var(--flare);flex:0 0 auto;margin-top:2px}
.starter strong{display:block;font-size:var(--fs);font-weight:600}
.starter em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--sand-dim);margin-top:2px}

/* ---- avatars ----
   One shape for every avatar: a clipped circle that centres whatever is
   inside it, image or fallback icon. Each use below adds only its size,
   and its colours where it sits on a surface that needs different ones.
   Change the shape here and it changes everywhere. */
.post-avatar,.reply-av,.notif-av,.person-av,.cs-open-av,.rail-me-av,
.story-av,.tray-av,.thread-av,.th-av,.msg-av,.buddy-av,.acct-av,.pf-avatar,.mnav-av{
  display:grid;place-items:center;flex:none;
  overflow:hidden;border-radius:50%;
  background:var(--wine);color:var(--sand);
}
.post-avatar img,.reply-av img,.notif-av img,.person-av img,.cs-open-av img,
.rail-me-av img,.story-av img,.tray-av img,.thread-av img,.th-av img,.msg-av img,
.buddy-av img,.acct-av img,.pf-avatar img,.mnav-av img{
  width:100%;height:100%;object-fit:cover;
}

/* ============ post card ============ */
.post-avatar{width:40px;height:40px;color:rgba(var(--cream-rgb),.55)}
.post-who{flex:1;min-width:0}
.post-name{font-size:var(--fs);font-weight:600;display:flex;align-items:center;gap:5px}
.post-name a{color:var(--cream);text-decoration:none}
.post-name a:hover{color:var(--flare)}
.verified{color:var(--flare);display:inline-flex}
.post-meta{font-size:var(--fs-sm);color:var(--sand-dim)}

.menu{position:relative;flex:0 0 auto}
.menu summary{list-style:none;cursor:pointer;color:var(--sand-dim);padding:4px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--cream)}
.menu-pop{
  position:absolute;right:0;top:100%;z-index:30;min-width:190px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:5px;display:grid;gap:1px;
}
.menu-pop button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--cream);font-size:var(--fs-sm);padding:9px 10px;border-radius:2px;
}
.menu-pop button:hover{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

.starter-tag{color:var(--flare);font-size:var(--fs-sm);margin-bottom:6px}
.starter-tag a{color:inherit;text-decoration:none}
.starter-tag a:hover{text-decoration:underline}
.post-body{margin-bottom:12px}
.post-body.prompt{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}

/* ---- gallery ---- */
.gal{display:grid;gap:4px;height:100%;grid-auto-rows:1fr;border-radius:var(--r);overflow:hidden}
.gal-2{grid-template-columns:1fr 1fr}
.gal-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.gal-3 .tile:first-child{grid-row:span 2}
.gal-4{grid-template-columns:1fr 1fr}
.tile{position:relative;padding:0;border:0;background:var(--ink-2);cursor:zoom-in;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* A single photo gets its own aspect, clamped inline by the template
   to somewhere between 4:5 and 1.91:1. Nothing is cut from the file. */

/* Two photos read best as a pair of portraits. Three and four use
   squares, because four 4:5 tiles make a card taller than a screen. */
.more-count{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(var(--ink-rgb),.66);color:var(--cream);font-size:var(--fs-xl);font-weight:700;
}
.tile.in-review img{opacity:.5}
.review-tag{
  position:absolute;left:8px;bottom:8px;background:rgba(var(--ink-rgb),.9);
  color:var(--sand);font-size:var(--fs-xs);padding:4px 8px;border-radius:2px;
}

.post-counts{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-sm);color:var(--sand-dim);margin-bottom:10px}

.post-acts{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}
/* Same shape as the reels rail, but on a card rather than video: the
   colour comes from the palette, not white-on-dark. */
.post-acts .act{
  flex:1;display:grid;justify-items:center;gap:3px;
  border:0;border-radius:var(--r);padding:8px 6px;
}
.post-acts .act .act-n{font-size:var(--fs-xs);font-weight:600;min-height:14px}
.post-acts .act-face{width:26px;height:26px;object-fit:contain}
.post-acts .act:hover:not(:disabled){color:var(--flare)}
.post-acts .act.on{color:var(--flare)}
.post-acts .act:disabled{opacity:.5;cursor:default}

/* ---- replies ---- */
.replies{border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.reply{display:flex;gap:10px;padding:8px 0}
.reply.child{margin-left:34px}
.reply-av{width:28px;height:28px;color:rgba(var(--cream-rgb),.55)}
.reply-in{flex:1;min-width:0}
.reply-who{font-size:var(--fs-sm);font-weight:600}
.reply-who a{color:var(--cream);text-decoration:none}
.reply-body{font-size:var(--fs);margin-top:1px}
.reply-acts{display:flex;gap:14px;margin-top:5px;font-size:var(--fs-sm);color:var(--sand-dim)}
.reply-acts button{background:none;border:0;color:inherit;padding:0;display:inline-flex;align-items:center;gap:5px}
.reply-acts button:hover{color:var(--flare)}
.reply-acts button.on{color:var(--flare)}
.reply-signalled{color:var(--flare);font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:4px;margin-top:4px}

.reply-form{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.reply-form textarea{
  flex:1;background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;color:var(--cream);font:inherit;resize:none;min-height:42px;
}
.reply-form textarea::placeholder{color:var(--sand-dim)}
.reply-form button{
  background:var(--flare);color:var(--ink);border:0;border-radius:var(--r);
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
}
.reply-more{background:none;border:0;color:var(--sand);font-size:var(--fs-sm);padding:6px 0}
.reply-more:hover{color:var(--flare)}

/* ---- lightbox ---- */
/* Anything that covers the page. Saying it once means no component
   can forget that hidden means hidden. */
.overlay{position:fixed;inset:0}

/* The attribute wins. Components set display for their own layout;
   without this each one has to remember what hidden means, and
   the one that forgets renders over the page. */

.lb{position:fixed;inset:0;background:rgba(var(--ink-rgb),.96);z-index:80;display:none;place-items:center}
.lb.open{display:grid}
.lb-track > img{max-width:94vw;max-height:86vh;object-fit:contain}
.lb-close,.lb-prev,.lb-next,.lb-up,.lb-down{
  position:absolute;background:var(--ink);border:0;color:var(--cream);box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:1;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;translate:0 -50%}
.lb-next{right:14px;top:50%;translate:0 -50%}

/* ---- notifications ---- */
.nav-notif{position:relative}
.dot{
  background:var(--flare);color:var(--ink);font-size:var(--fs-xs);font-weight:700;
  border-radius:10px;padding:1px 6px;margin-left:5px;
}
.notif-list{list-style:none;display:grid}
.notif{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.notif-av{width:40px;height:40px}
.notif-text{flex:1;font-size:var(--fs)}
.notif-text a{margin-left:8px}
.notif-when{font-size:var(--fs-sm);color:var(--sand-dim);flex:0 0 auto}
.notif.mutual{background:rgba(var(--flare-rgb),.06);padding-inline:12px}

@media (max-width:600px){
  .post-acts .act{padding:8px 4px}
}

/* ============ reels ============ */
.reels{
  height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;
  background:#000;margin:0;scrollbar-width:none;
}
.reels::-webkit-scrollbar{display:none}
body:has(.reels){overflow:hidden}

.reel{
  position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden;
}
.reel-video{width:100%;height:100%;object-fit:contain;background:#000}
.reel-shade{
  position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
}

.reel-info{position:absolute;left:16px;right:84px;bottom:calc(24px + env(safe-area-inset-bottom))}
.reel-who{font-size:var(--fs);font-weight:600}
.reel-who a{color:#fff;text-decoration:none}
.reel-loc{font-size:var(--fs-sm);color:rgba(var(--cream-rgb),.7)}
.reel-cap{font-size:var(--fs);color:rgba(var(--cream-rgb),.92);margin-top:8px;max-width:34ch}

.reel-rail{
  position:absolute;right:12px;bottom:calc(28px + env(safe-area-inset-bottom));
  display:grid;gap:18px;justify-items:center;
}
.rail-btn{
  background:none;border:0;color:#fff;display:grid;justify-items:center;gap:3px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));padding:2px;
}
.rail-btn span{font-size:var(--fs-xs);font-weight:600;min-height:14px}
.rail-btn.on{color:var(--flare)}
.rail-btn:disabled{opacity:.5}

.reel-back,.reel-add{
  position:fixed;z-index:40;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);text-decoration:none;
}
.reel-back{left:12px;top:calc(12px + env(safe-area-inset-top))}
.reel-add{right:12px;top:calc(12px + env(safe-area-inset-top));background:var(--flare);color:var(--ink)}

.reel-replies{
  position:absolute;left:0;right:0;bottom:0;max-height:62dvh;overflow-y:auto;
  background:var(--ink);border-top:1px solid var(--line);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));margin:0;z-index:30;
}

.reel-empty{
  height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:24px;
}

#reel-form{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.sheet-in textarea{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;color:var(--cream);font:inherit;resize:none;margin-block:10px;
}
.sheet-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

.nav-reels{display:inline-flex;align-items:center;gap:6px}

/* ============ recorder ============ */
.rec{z-index:70;background:#000;display:grid;place-items:center}

/* Everything is posted square. The frame shows exactly what will be
   kept, so the shot is set up for the square rather than cropped
   after upload. */
.rec-frame{
  position:relative;aspect-ratio:1;
  width:min(100vw,100dvh);
  background:#000;overflow:hidden;
}
.rec-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* mirroring is set in JS: front camera only */

.rec-top{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rec-icon{
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);
}
.rec-timer{
  background:var(--flare);color:var(--ink);font-size:var(--fs-sm);font-weight:700;
  padding:5px 12px;border-radius:20px;font-variant-numeric:tabular-nums;
}

.rec-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(var(--cream-rgb),.2)}
.rec-bar span{display:block;height:100%;width:0;background:var(--flare);transition:width .2s linear}

.rec-bottom{
  position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:16px;padding-inline:24px;
}
#rec-controls{justify-content:space-between}
.rec-spacer{width:42px}

.rec-shutter{
  width:74px;height:74px;border-radius:50%;border:4px solid #fff;
  background:transparent;display:grid;place-items:center;padding:0;
}
.rec-shutter span{
  width:56px;height:56px;border-radius:50%;background:var(--flare);
  transition:border-radius .2s,width .2s,height .2s;
}
.rec-shutter.on span{width:28px;height:28px;border-radius:6px}

.rec-hint{
  position:absolute;left:0;right:0;bottom:calc(112px + env(safe-area-inset-bottom));
  text-align:center;font-size:var(--fs-sm);color:rgba(var(--cream-rgb),.75);
}

/* ---- reel card inside the feed ---- */
.composer-tools{display:flex;gap:8px;flex-wrap:wrap}
.feed-reel{position:relative;height:100%;border-radius:var(--r);background:#000 center/cover no-repeat}
.feed-video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:transparent;display:block;border-radius:inherit}
.feed-video{opacity:1}
/* Catches the tap before Safari's own play control can swallow it. */
.feed-tap{position:absolute;inset:0}
.feed-reel-tag{
  position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.55);color:#fff;font-size:var(--fs-xs);font-weight:600;
  padding:4px 9px;border-radius:20px;backdrop-filter:blur(4px);
}
.feed-sound{
  position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);
}
.feed-sound.on{background:var(--flare);color:var(--ink)}

/* ============ profile ============ */

.pf-avatar{position:relative;width:104px;height:104px;color:rgba(var(--cream-rgb),.5)}
.pf-avatar-edit{
  position:absolute;right:2px;bottom:2px;width:30px;height:30px;border:0;
  border-radius:50%;background:var(--flare);color:var(--ink);
  display:grid;place-items:center;
}

.pf-id{min-width:0}
.pf-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-sm);color:var(--sand-dim);margin-top:3px}
.pf-bio{font-size:var(--fs);margin-top:12px;max-width:58ch}

.pf-acts .btn.on,.pf-acts .btn:disabled{background:none;border:1px solid var(--line);color:var(--flare)}
.pf-menu summary{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-pill);display:grid;place-items:center}

.pf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 22px}
.pf-tabs a{
  padding:13px 16px;font-size:var(--fs);text-decoration:none;color:var(--sand);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.pf-tabs a:hover{color:var(--cream)}
.pf-tabs a.on{color:var(--flare);border-bottom-color:var(--flare)}

/* The back link is the way out of a profile: without the site nav
   beside it, nothing else leads off this page. */
.rail-back{margin-bottom:8px;color:var(--sand-dim)}
.rail-back:hover{color:var(--cream)}
/*
* The left column, on every page that has one: the site nav on most,
* the profile card and its nav on a profile.
*
* Sticky under the header, and scrolling on its own only when the
* content is taller than the screen - without the max-height the last
* links on a short screen can never be reached, and with an
* unconditional overflow the column scrolls when it does not need to.
*/
.rail,
.pf-aside{
  position:sticky;top:71px;
  max-height:calc(100vh - 76px);overflow-y:auto;
  scrollbar-width:none;overscroll-behavior:contain;
  padding-block:19px 24px;
}
.rail::-webkit-scrollbar,
.pf-aside::-webkit-scrollbar{display:none}

.rail{display:grid;gap:1px}
.pf-aside{display:grid;gap:16px;align-content:start}
.pf-aside .rail{position:static;max-height:none;overflow:visible;padding-block:0}

button.rail-link{width:100%;background:none;border:0;text-align:left;font:inherit;cursor:pointer}

/* Profile: a column of cards about the person, then the content.
   The wider left column is what lets the card hold a centred avatar,
   the stats row and the actions without cramping any of them. */
.pf-media{padding-block:32px;position:sticky;top:76px}

.pf-card{padding:22px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.pf-card .pf-avatar{width:112px;height:112px;margin:0 auto 14px}
.pf-name{display:flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em}
.pf-handle{margin-top:2px;font-size:var(--fs-sm);color:var(--sand-dim)}
.pf-card .pf-bio{margin-top:12px;font-size:var(--fs)}
.pf-card .pf-fact{justify-content:center;margin-top:8px}

.pf-acts{display:grid;gap:8px;margin-top:18px}
.pf-acts .btn{width:100%}

.pf-nav{padding:8px;text-align:left}
.pf-content{padding:0}
.pf-content-h{margin:0 0 18px;font:600 var(--fs-lg)/1.2 var(--font);color:var(--cream)}

@media (max-width:900px){
  /* One column: a sticky card would pin itself over the content
     scrolling beneath it. The card itself is dropped here - the header
     already carries the avatar, and the nav keeps Edit profile. */
  .pf-aside{position:static;max-height:none;overflow:visible}
  .pf-aside .pf-card:not(.pf-nav){display:none}
}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pf-cell{position:relative;aspect-ratio:1;display:block;background:var(--ink-2);overflow:hidden;border-radius:2px}
.pf-cell img{width:100%;height:100%;object-fit:cover}
.pf-cell-blank{display:grid;place-items:center;height:100%;color:var(--sand-dim)}
.pf-cell-tag{position:absolute;right:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.reels-grid .pf-cell{aspect-ratio:9/16}

@media (max-width:760px){
  .pf-head{grid-template-columns:auto minmax(0,1fr);gap:16px;row-gap:18px}
  .pf-avatar{width:76px;height:76px}
  .pf-name{font-size:var(--fs-lg)}
  .pf-acts{grid-column:1 / -1;justify-content:flex-start}
  .pf-tabs a{flex:1;text-align:center;padding-inline:8px}
  .reels-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============ trim ============ */
.trim{z-index:75;background:#000;display:flex;flex-direction:column}
.trim-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
}
.trim-len{
  background:rgba(var(--cream-rgb),.12);color:#fff;font-size:var(--fs-sm);font-weight:700;
  padding:5px 12px;border-radius:20px;font-variant-numeric:tabular-nums;
}
.trim-len.over{background:var(--flare);color:var(--ink)}

.trim-frame{
  flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;
  container-type:size;
}
.trim-video{
  aspect-ratio:1;width:min(100cqw,100cqh);
  object-fit:cover;background:#000;
}

.trim-panel{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.trim-hint{font-size:var(--fs-sm);color:rgba(var(--cream-rgb),.65);text-align:center;margin-bottom:14px}

.trim-track{
  position:relative;height:52px;border-radius:var(--r);
  background:rgba(var(--cream-rgb),.12);touch-action:none;
}
.trim-sel{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  border:2px solid var(--flare);border-radius:var(--r);
  background:rgba(var(--flare-rgb),.16);
}
.trim-grip{
  position:absolute;top:-2px;bottom:-2px;width:22px;border:0;
  background:var(--flare);cursor:ew-resize;touch-action:none;
}
.trim-grip::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:2px;height:18px;background:var(--ink);border-radius:2px;
  box-shadow:4px 0 0 var(--ink),-4px 0 0 var(--ink);
}
.trim-grip.left{left:-2px;border-radius:var(--r) 0 0 var(--r)}
.trim-grip.right{right:-2px;border-radius:0 var(--r) var(--r) 0}

.trim-play{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;opacity:.9}

.trim-times{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:var(--fs-xs);color:rgba(var(--cream-rgb),.6);font-variant-numeric:tabular-nums;
}

/* three buttons after recording need a little more room */
#rec-done{gap:10px;flex-wrap:wrap}
#rec-done .btn{min-width:88px}

/* ---- guest feed on the landing page ---- */
.lp-hero.slim{padding-block:44px 32px;margin-bottom:28px}
.lp-hero.slim h1{font-size:var(--fs-title)}
.lp-hero.slim .lead{margin-top:12px;font-size:var(--fs)}
.lp-hero.slim .lp-cta{margin-top:22px}

.guest-stream .post-acts .act{text-decoration:none}

.lp-feed-end{
  display:grid;justify-items:center;gap:14px;text-align:center;
  padding-block:56px 80px;border-top:1px solid var(--line);margin-top:28px;
}

/* ============ app frame: rail + column ============ */
.frame{
  width:min(1180px,100% - var(--pad)*2);margin-inline:auto;
  display:grid;--c-left:260px;--c-right:240px;--c-gap:32px;grid-template-columns:var(--c-left) minmax(0,1fr);gap:var(--c-gap);
  align-items:start;
}
.col{padding-block:0 80px;--col-w:600px;max-width:var(--col-w);width:100%}

/* The feed carries a third column, but only where there is room for it.
   Scoped to a min-width: .frame:has() outranks .frame, so setting this
   unconditionally would beat the narrow-screen rules further down. */
@media (min-width:1101px){
  .frame:has(>main+*){grid-template-columns:var(--c-left) minmax(0,1fr) var(--c-right)}
}
.col-wide{max-width:none}

/* ---- left rail ---- */
.rail-link{
  display:flex;align-items:center;gap:12px;position:relative;
  padding:9px 14px;border-radius:var(--r);
  color:var(--sand);text-decoration:none;font-size:var(--fs);
}
.rail-link:hover{background:rgba(var(--cream-rgb),.04);color:var(--cream)}
/* A line at the edge says where you are without a block of colour. */
.rail-link.on{color:var(--flare);background:none}
.rail-link.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--flare)}
.rail-link svg{opacity:.75}
.rail-link.on svg,.rail-link:hover svg{opacity:1}
.rail-link svg{flex:0 0 auto}
.rail-dot{
  margin-left:auto;background:var(--flare);color:var(--ink);
  font-style:normal;font-size:var(--fs-xs);font-weight:700;
  padding:1px 7px;border-radius:10px;
}

/* ---- account menu ---- */
.acct{position:relative}
.acct summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:5px 6px 5px 5px;border-radius:24px;border:1px solid transparent;
}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover{border-color:var(--line)}
.acct[open] summary{border-color:var(--line)}
/* One circular icon button, shared by the menu toggle and every
   close control, so there is a single style to change. */
.btn-round{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(var(--cream-rgb),.06);color:var(--cream);
}
.btn-round:hover{background:rgba(var(--cream-rgb),.12)}
/* .acct summary sets flex + padding for the old avatar row; the round
   button needs neither, and outranks it only when scoped this way. */
.acct summary.btn-round{display:grid;place-items:center;padding:0;gap:0;border:0}
.acct summary.btn-round svg{display:block}
.acct[open] .btn-round{border-color:transparent}
/* Both icons ship; only one shows. No reflow on toggle. */
.acct .ico-close,.acct[open] .ico-menu{display:none}
.acct[open] .ico-close{display:block}
.acct-me{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:12px!important}

.acct-av{width:30px;height:30px;color:rgba(var(--cream-rgb),.6)}
.acct-av svg{width:18px;height:18px}
.acct-name{font-size:var(--fs);color:var(--cream);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acct-pop{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:40;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:5px;display:grid;gap:1px;
}
.acct-pop a,.acct-pop button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:var(--cream);font-size:var(--fs);
  padding:10px 11px;border-radius:2px;text-decoration:none;
}
.acct-pop a:hover,.acct-pop button:hover{background:rgba(var(--flare-rgb),.12);color:var(--flare)}
.acct-pop form{display:contents}
.acct-pop form::before{
  content:"";display:block;height:1px;background:var(--line);margin:4px 0;
}

/* ---- mobile: rail becomes a bottom bar ---- */
@media (max-width:900px){
  .frame{grid-template-columns:1fr;gap:0}
  .col{padding-block:0 92px;--col-w:100vw;max-width:none;margin-inline:auto;min-width:0}

  .rail{display:none}
  .rail-dot{
    position:absolute;top:4px;left:50%;margin:0;translate:2px 0;
    font-size:var(--fs-xs);padding:0 5px;
  }
  .acct-name{display:none}
}

/* ---- settings ---- */
.set-sec{padding-block:28px;border-bottom:1px solid var(--line)}
.set-sec:last-child{border-bottom:0}
.set-sec h2{font-size:var(--fs-lg);font-weight:600;margin-bottom:6px}
.set-sec .form{margin-top:14px}
.saved{color:var(--gold)}

.field textarea{
  background:transparent;border:1px solid rgba(var(--sand-rgb),.4);border-radius:var(--r);
  padding:12px 14px;color:var(--cream);font:inherit;resize:vertical;
}

.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--flare);width:17px;height:17px;flex:0 0 auto}
.check strong{display:block;font-size:var(--fs);font-weight:500}
.check em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--sand-dim);margin-top:2px;max-width:46ch}

.blocked-list{list-style:none;display:grid;gap:2px}
.blocked-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.blocked-list em{font-style:normal;color:var(--sand-dim)}

/* reactions */
.flirt-wrap{position:relative;flex:1;display:grid}
.act-react{width:18px;height:18px;object-fit:contain}
.flirt-pick{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;display:flex;gap:2px;padding:8px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.flirt-opt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;padding:6px 4px;background:none;border:0;border-radius:var(--r);color:var(--sand-dim);font:400 var(--fs-xs)/1 var(--font);cursor:pointer}
.flirt-opt img{width:40px;height:40px;object-fit:contain;transition:transform .12s ease}
.flirt-opt:hover img,.flirt-opt:focus-visible img{transform:scale(1.18)}
.flirt-opt.on{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

/* Six 56px columns overflow a 380px screen. Scroll rather than wrap:
   a second row would push the picker over the post above it. */
@media (max-width:480px){
  .flirt-pick{left:0;transform:none;max-width:min(360px,calc(100vw - 32px));overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .flirt-pick::-webkit-scrollbar{display:none}
  .flirt-opt{min-width:52px}
  .flirt-opt img{width:36px;height:36px}
}

/* match moment */
.flirt-match{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--pad);background:rgba(var(--ink-rgb),.82)}
.flirt-match-in{max-width:340px;padding:32px 28px;text-align:center;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.fm-title{margin:0 0 8px;font:600 var(--fs-xl)/1.2 var(--font);color:var(--flare);letter-spacing:-.01em}
.fm-body{margin:0 0 24px;color:var(--cream)}
.fm-close{display:block;width:100%;margin:12px 0 0;padding:8px;background:none;border:0;color:var(--sand-dim);font:400 var(--fs-sm)/1 var(--font);cursor:pointer}
/* sticker comments */
.reply-row{display:flex;align-items:flex-end;gap:8px}
.reply-tools{display:flex;gap:2px;margin-top:6px}
.sticker-btn{padding:4px;background:none;border:0;border-radius:var(--r);line-height:0;cursor:pointer;opacity:.72;transition:opacity .12s ease,transform .12s ease}
.sticker-btn:hover,.sticker-btn:focus-visible{opacity:1;transform:scale(1.12)}
.sticker-btn.on{opacity:1;background:rgba(var(--flare-rgb),.14)}
.sticker-btn img{width:28px;height:28px;object-fit:contain}
.reply-chosen{position:relative;display:inline-block;margin:0 0 8px}
.reply-chosen img{width:56px;height:56px;object-fit:contain}
.reply-chosen-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;background:var(--ink);border:1px solid var(--line);border-radius:50%;color:var(--sand);font:400 var(--fs-sm)/1 var(--font);cursor:pointer}
.reply-sticker{display:block;width:72px;height:72px;object-fit:contain;margin:4px 0 0}
.reply-gif{display:block;max-width:220px;border-radius:var(--r);margin:4px 0 0}
.post-who{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.post-who .post-name{margin:0}
.post-who .post-meta{flex:0 0 100%;margin:0}
/* people lists */
.people{list-style:none;display:grid;gap:2px}
.person{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.person-who{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.person-av{width:40px;height:40px}
.person-who strong{display:block;font-weight:600}
.person-who em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--sand-dim)}
.person-acts{display:flex;gap:8px;flex:0 0 auto}
.notif-acts{display:flex;gap:8px;margin-left:auto}
.page-h2{margin:24px 0 8px;font:600 var(--fs)/1.3 var(--font);color:var(--cream)}
/* Shape comes from .btn-round; this only adds what is bell-specific. */
.head-bell{position:relative}
.head-bell.on{color:var(--flare)}
.head-dot{position:absolute;top:4px;right:2px;min-width:16px;padding:0 4px;background:var(--flare);border-radius:var(--r-pill);color:var(--ink);font:700 var(--fs-xs)/16px var(--font);font-style:normal;text-align:center}
.head-acts{display:flex;align-items:center;gap:6px}

/* bell panel: its own scroll, so a long history does not push the
   page around or stretch the panel past the viewport */
.bell-pop{width:340px;max-width:calc(100vw - 24px);padding:0}
.bell-head{padding:14px 16px 10px;font:600 var(--fs)/1 var(--font);color:var(--cream)}
.bell-list{max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:0 6px 6px}
.bell-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);color:var(--sand);text-decoration:none}
.bell-row:hover{background:rgba(var(--cream-rgb),.05);color:var(--cream)}
.bell-row.unread{color:var(--cream)}
.bell-row .notif-av{flex:0 0 34px;width:34px;height:34px}
.bell-text{flex:1;min-width:0;font-size:var(--fs-sm);line-height:1.35}
.bell-text em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--sand-dim);margin-top:1px}
.bell-new{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--flare)}
.bell-empty{padding:24px 10px;text-align:center;color:var(--sand-dim);font-size:var(--fs-sm)}
.bell-all{display:block;padding:12px;border-top:1px solid var(--line);text-align:center;color:var(--flare);text-decoration:none;font-size:var(--fs-sm)}
.bell-all:hover{background:rgba(var(--flare-rgb),.08)}

/* Mobile nav: its own element, rendered on every page. A floating pill
   rather than a bar welded to the bottom edge - it reads as a control
   sitting on the page. */
.mobile-nav{display:none;transition:translate .22s ease,opacity .22s ease}

@media (max-width:900px){
  /* Separate buttons, not one pill: each action is its own thing to
     hit, and the picture shows between them. */
  .mobile-nav{
    position:fixed;left:50%;translate:-50% 0;
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
    display:flex;gap:12px;padding:0;
    background:none;border:0;box-shadow:none;
  }
  .mnav-link{
    position:relative;display:grid;place-items:center;
    width:52px;height:52px;border-radius:50%;color:var(--cream);
    background:rgba(var(--ink-rgb),.72);border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(0,0,0,.4);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    /* Buttons and links sit side by side in here, so the button's own
       chrome has to go or only half the bar looks flat. */
    padding:0;cursor:pointer;
  }
  .mnav-link.on{background:rgba(var(--flare-rgb),.14);color:var(--flare)}
  .mnav-link.on svg path{fill:currentColor}
  .mnav-dot{
    position:absolute;top:9px;right:11px;width:8px;height:8px;
    border-radius:50%;background:var(--flare);
  }
}

/* composer sheet */
.composer-sheet{z-index:60;background:var(--ink);overflow-y:auto}
.cs-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--ink);border-bottom:1px solid var(--line);font:600 var(--fs)/1 var(--font);color:var(--cream)}
.cs-close{background:none;border:0;color:var(--sand);font-size:var(--fs-xl);line-height:1;cursor:pointer;padding:0 4px}
.cs-close:hover{color:var(--flare)}
.cs-body{width:min(600px,100% - 32px);margin-inline:auto;padding-block:20px 80px}
.cs-body .composer{background:none;border:0;padding:0}

.cs-open{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:20px;padding:14px 16px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--sand-dim);font:inherit;text-align:left;cursor:pointer}
.cs-open:hover{border-color:var(--flare);color:var(--cream)}
.cs-open-av{width:34px;height:34px}

.mnav-post{background:var(--flare);border:0;color:var(--ink);cursor:pointer;padding:0}
.mnav-post:hover{background:var(--gold)}
.mnav-soon{background:none;border:0;padding:0;color:var(--sand);cursor:default;opacity:1;-webkit-appearance:none;appearance:none}
.mnav-av{width:28px;height:28px}
.mnav-link.on .mnav-av{outline:2px solid var(--flare);outline-offset:1px}

/* avatars that were placeholder-only until now */

@media (max-width:900px){
}

/* The post header sits over the foot of the media rather than above
   it: with a tall frame there is no reason to spend a row of the
   screen on a name.

   It has to match the media's own edges - the media breaks out of the
   page gutter on a phone, so the header follows it rather than sitting
   inset by the width of that gutter. */
.card.post{position:relative}

/* Matched to the conversation's avatars below: at 38px the person who
   posted read as smaller than each message they had sent. */
.card.post .post-avatar,
.lb-who .post-avatar{
  width:var(--post-avatar-h);
  height:var(--post-avatar-h);
  flex:0 0 var(--post-avatar-h);
  border-radius:50%;
  border:1.5px solid rgba(var(--cream-rgb),.85);
}

@media (max-width:900px){
  .feed-sound{bottom:auto;top:12px;right:12px}
  .card.post{border-bottom:0}
}
.rail-me{display:flex;align-items:center;gap:11px;padding:11px 14px;margin-bottom:6px;border-radius:var(--r);color:inherit;text-decoration:none;min-width:0}
.rail-me:hover{background:rgba(var(--cream-rgb),.05)}
.rail-me-av{width:38px;height:38px}
.rail-me-who{min-width:0}
.rail-me-who strong{display:block;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-me-who em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--flare)}

/* reel tray */
.tray{margin:0 0 22px}
.tray-scroll{
  display:flex;gap:10px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tray-scroll::-webkit-scrollbar{display:none}
.tray-card{
  position:relative;flex:0 0 128px;aspect-ratio:9/16;
  scroll-snap-align:start;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);text-decoration:none;display:block;
}
.tray-card > img{width:100%;height:100%;object-fit:cover;display:block}
.tray-card::after{
  content:'';position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.85));
}
.tray-av{
  position:absolute;top:8px;left:8px;z-index:1;
  width:30px;height:30px;outline:2px solid var(--flare);
}
.tray-name{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:1;
  font-size:var(--fs-sm);font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The tray breaks out of the gutter like the post media does, so the
   row runs to the screen edge and reads as scrollable. */
@media (max-width:900px){
  .tray-scroll{
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .tray-card{flex-basis:112px}
}
/* reel progress */
.reel-bar{position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;z-index:3;height:3px;border-radius:2px;background:rgba(var(--cream-rgb),.28);overflow:hidden}
.reel-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px;transition:width .28s linear}
/* timeupdate fires a few times a second, so the bar arrives in steps.
   The transition rides between them. It is linear and slightly longer
   than the gap, so the fill keeps moving rather than easing to a stop
   between each update. */

/* the create-story card: the one tile that is always there, so the
   row never renders as an empty strip */
.tray-new{position:relative;border:0;padding:0;cursor:pointer;text-align:left}
.tray-new > img{opacity:.55}
.tray-plus{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--flare);color:var(--ink);
  font:700 var(--fs-xl)/1 var(--font);
}
.tray-new .tray-name{text-align:center}
.rail-create{width:100%;margin-top:14px;justify-content:center}

/* ============ stories ============ */
.stories{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
.stories::-webkit-scrollbar{display:none}
body:has(.stories){overflow:hidden}

.story-set{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}

/* The strip is the horizontal axis: one person's stories, snapped. */
.story-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.story-strip::-webkit-scrollbar{display:none}
.story{flex:0 0 100%;height:100%;scroll-snap-align:start;display:grid;place-items:center;background:#000}
.story-img,
.story-video{width:100%;height:100%;object-fit:contain;display:block}

/* One segment per story, so how many are left is visible at a glance. */
.story-bars{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;z-index:4;display:flex;gap:3px}
.story-bar{flex:1;height:3px;border-radius:2px;background:rgba(var(--cream-rgb),.28);overflow:hidden}
.story-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}

.story-head{position:absolute;top:calc(24px + env(safe-area-inset-top));left:12px;right:56px;z-index:4;display:flex;align-items:center;gap:10px}
.story-av{width:34px;height:34px}
.story-who{color:#fff;font-weight:600;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.story-when{color:rgba(var(--cream-rgb),.7);font-size:var(--fs-sm)}

/* Tap targets, not buttons you can see. They sit below the header so
   the name and avatar stay clickable. */
.story-tap{position:absolute;top:0;bottom:0;width:32%;z-index:3;background:none;border:0;cursor:pointer}
.story-prev{left:0}
.story-next{right:0}

/* ============ messages ============ */
.thread-list{list-style:none;display:grid;gap:2px}
.thread{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r);text-decoration:none;color:inherit;
}
.thread:hover{background:var(--ink-2)}
.thread-av{width:46px;height:46px;background:var(--ink-2);color:var(--sand-dim)}
.thread-who{min-width:0;display:grid;gap:2px}
.thread-name{font-weight:600;color:var(--cream)}
.thread-last{
  font-size:var(--fs-sm);color:var(--sand-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thread.unread .thread-last{color:var(--cream)}
.thread-when{font-size:var(--fs-xs);color:var(--sand-dim);white-space:nowrap}
.thread-dot{width:8px;height:8px;border-radius:50%;background:var(--flare)}

.th-head{
  display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:14px;
}
.th-back{color:var(--cream);display:grid;place-items:center}
.th-who{display:flex;align-items:center;gap:9px;color:var(--cream);text-decoration:none;font-weight:600}
.th-av{width:32px;height:32px;background:var(--ink-2);color:var(--sand-dim)}

.th-log{display:grid;gap:8px;align-content:start;padding-bottom:14px}
.msg{
  justify-self:start;
  display:flex;align-items:flex-end;gap:8px;
  max-width:min(82%,520px);
}
.msg.mine{
  justify-self:end;
  flex-direction:row-reverse;
}
.msg-av{
  width:30px;height:30px;
  background:var(--wine);color:var(--sand-dim);
}
.msg-bubble{
  max-width:460px;
  background:var(--ink-2);padding:9px 13px;
  border-radius:16px 16px 16px 4px;
}
.msg.mine .msg-bubble{
  background:var(--flare);color:#fff;
  border-radius:16px 16px 4px 16px;
}
.msg p{font-size:var(--fs);line-height:1.4;overflow-wrap:anywhere}
.msg-when{display:block;font-size:var(--fs-xs);opacity:.65;margin-top:3px}

.th-send{
  position:fixed;
  bottom:0;
  z-index:20;
  width:min(600px,calc(100vw - (var(--pad) * 2)));
  background:var(--ink);
  padding:10px 0;
}
@media (min-width:901px){
  .th-send{
    left:max(
      var(--pad),
      calc((100vw - min(1180px,100vw - (var(--pad) * 2))) / 2 + 292px)
    );
  }
}
@media (max-width:900px){
  .th-send{
    left:var(--pad);
    right:var(--pad);
    width:auto;
    bottom:0;
  }
}
.th-send-box{
  position:relative;
}
.th-send input{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:11px 52px 11px 14px;
  border-radius:var(--r-pill);
  font:inherit;
  box-sizing:border-box;
}
.th-send input:focus{
  outline:2px solid var(--flare);
  outline-offset:-1px;
}
/* The same pill as the feed card's: one send button across the app. */
.th-send-btn{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--flare);
  color:var(--ink);
  padding:10px 15px;
  font:700 var(--fs-sm)/1 var(--font);
  cursor:pointer;
}
.th-send-btn:hover{
  filter:brightness(1.05);
}
.th-send-btn:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:2px;
}

/* ============ flirt buddies rail ============ */
.buddies{padding-block:30px 24px;position:sticky;top:71px}
.buddies-card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:14px;padding:16px 12px;
}
.buddies-h{
  font:600 var(--fs)/1 var(--font);color:var(--cream);
  margin-bottom:14px;padding-inline:6px;
}
.buddies-none{font-size:var(--fs-sm);color:var(--sand-dim);padding-inline:6px;line-height:1.5}
.buddy-list{list-style:none;display:grid;gap:2px}
.buddy{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:7px 6px;border-radius:10px;text-decoration:none;color:var(--cream);
}
.buddy:hover{background:rgba(var(--cream-rgb),.06)}
/* The remove control stays out of the way until the row is under the
   cursor: it is a rare action next to a common one. */
.buddy-x{
  background:none;border:0;padding:2px 6px;font-size:var(--fs-lg);line-height:1;
  color:var(--sand-dim);cursor:pointer;opacity:0;transition:opacity .12s ease;
}
.buddy:hover .buddy-x,.buddy-x:focus-visible{opacity:1}
.buddy-x:hover{color:var(--flare)}
.buddy .buddy-dot{display:inline-block;margin-left:6px;vertical-align:middle}
.buddy-av{
  position:relative;width:44px;height:44px;
  background:var(--ink);color:var(--sand-dim);
  box-shadow:0 0 0 2px var(--flare);
}
/* Presence sits beside the avatar rather than inside it — .buddy-av
   clips to a circle and would clip this with it. Green, not coral:
   coral is the unread dot, and one colour cannot mean two things. */
.buddy-slot{position:relative;display:grid;flex:none}
.buddy-on{
  position:absolute;right:0;bottom:1px;
  width:12px;height:12px;border-radius:50%;
  background:#3FD07A;box-shadow:0 0 0 2px var(--ink-2);
}
.buddy-name{
  display:grid;gap:1px;min-width:0;
  font-size:var(--fs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--cream);text-decoration:none;
}
.buddy.unread .buddy-name{font-weight:600}
/* Two lines in 240px: who, then what they said and when. */
.buddy-last{
  font-size:var(--fs-sm);color:var(--sand-dim);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.buddy-when{font-style:normal;margin-left:6px;color:var(--sand-dim);opacity:.7}
.buddy-dot{width:7px;height:7px;border-radius:50%;background:var(--flare)}

/* Below this the third column would squeeze the feed, and /messages is
   the better experience on a narrow screen anyway. */
@media (max-width:1100px){
  .buddies{display:none}
}

/* ---- buddies: tabs and discovery ---- */
.bd-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
.bd-tab{
  background:none;border:0;border-bottom:2px solid var(--line);
  padding:8px 4px;font:inherit;font-size:var(--fs-sm);color:var(--sand-dim);cursor:pointer;
}
.bd-tab.on{color:var(--flare);border-bottom-color:var(--flare)}
.bd-search{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:8px 12px;border-radius:var(--r-pill);
  background:var(--ink);border:1px solid var(--line);color:var(--sand-dim);
}
.bd-search input{
  flex:1;min-width:0;background:none;border:0;color:var(--cream);font:inherit;font-size:var(--fs-sm);
}
.bd-search input:focus{outline:none}
.bd-label{font-size:var(--fs-sm);color:var(--sand-dim);margin:0 6px 6px}
.bd-add{
  background:none;border:1px solid var(--flare);color:var(--flare);
  padding:5px 14px;border-radius:var(--r-pill);font:inherit;font-size:var(--fs-sm);cursor:pointer;
}
.bd-add:hover{background:rgba(var(--flare-rgb),.12)}
.bd-add[disabled]{border-color:var(--line);color:var(--sand-dim);cursor:default;background:none}

/* ---- message requests ---- */
.req-h{
  font:600 var(--fs-sm)/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sand-dim);margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.req-n{
  background:var(--flare);color:#fff;border-radius:var(--r-pill);
  padding:1px 7px;font-size:var(--fs-xs);letter-spacing:0;
}
.req-list{margin-bottom:6px}
.req-note{font-size:var(--fs-sm);color:var(--sand-dim);margin:0 0 24px 12px}
.th-note{
  font-size:var(--fs-sm);color:var(--sand-dim);line-height:1.5;
  padding:12px 14px;background:var(--ink-2);border-radius:var(--r);margin-bottom:12px;
}

/* The mark sits with the name rather than replacing it: at 22px the
   letterform reads, but only next to the word it comes from. */

/* "zone" in the site's own face rather than the display one. */

/* ============ admin ============ */
.adm{background:var(--ink);color:var(--cream);font:15px/1.5 var(--font);min-height:100vh}
.adm a{color:var(--flare)}

.adm-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;border-bottom:1px solid var(--line);
}
.adm-brand{font-weight:700;color:var(--cream);text-decoration:none}
.adm-brand span{color:var(--sand-dim);font-weight:400}
.adm-out{background:none;border:0;color:var(--sand-dim);font:inherit;cursor:pointer}
.adm-out:hover{color:var(--cream)}

.adm-frame{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;
  width:min(1240px,100% - 40px);margin-inline:auto;padding-block:24px 64px;align-items:start}
.adm-nav{display:grid;gap:1px;position:sticky;top:24px}
.adm-nav a{
  padding:9px 12px;border-radius:var(--r);color:var(--cream);
  text-decoration:none;font-size:var(--fs);
}
.adm-nav a:hover{background:var(--ink-2)}
.adm-nav a.on{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

.adm-main{min-width:0}
.adm-h{font:700 var(--fs-xl)/1.2 var(--font);margin-bottom:20px}
.adm-h2{font:700 var(--fs)/1.2 var(--font);margin:32px 0 12px}
.adm-none{color:var(--sand-dim)}
.adm-note{color:var(--sand-dim);font-size:var(--fs-sm);margin-top:10px}
.adm-dim{color:var(--sand-dim)}
.adm-flash{background:rgba(var(--flare-rgb),.12);color:var(--flare);
  padding:10px 14px;border-radius:var(--r);margin-bottom:16px}
.adm-err{background:rgba(var(--flare-rgb),.14);color:var(--flare);
  padding:10px 14px;border-radius:var(--r);margin-bottom:16px}

/* Cards are links where there is somewhere to go, so a number on the
   dashboard is a way into the screen that explains it. */
.adm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.adm-card-n{
  display:grid;gap:4px;padding:16px 18px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--cream);
}
a.adm-card-n:hover{border-color:var(--flare)}
.adm-n{font:700 var(--fs-xl)/1 var(--font)}
.adm-l{font-size:var(--fs-sm);color:var(--sand-dim)}

.adm-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.adm-table th{
  text-align:left;font-weight:600;color:var(--sand-dim);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.05em;padding:0 10px 8px;
}
.adm-table td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}
.adm-table a{text-decoration:none}
.adm-acts form{display:flex;gap:6px;justify-content:flex-end}

.adm-status{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);background:var(--ink-2)}
.adm-active{color:#3FD07A}
.adm-suspended{color:var(--flare)}
.adm-pending{color:var(--sand-dim)}
.adm-tag{font-size:var(--fs-xs);padding:1px 6px;border-radius:var(--r-pill);
  background:rgba(var(--flare-rgb),.14);color:var(--flare);margin-left:4px}

.adm-btn{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:7px 14px;border-radius:var(--r);font:inherit;font-size:var(--fs-sm);cursor:pointer;
}
.adm-btn:hover{border-color:var(--flare)}
.adm-btn-sm{padding:4px 10px;font-size:var(--fs-sm)}
.adm-btn-go{background:var(--flare);border-color:var(--flare);color:#fff}
.adm-btn-warn:hover{color:var(--flare)}

.adm-bar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.adm-bar input,.adm-bar select{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:7px 12px;border-radius:var(--r);font:inherit;font-size:var(--fs-sm);
}
.adm-bar input{flex:1;min-width:180px}

.adm-form{display:grid;gap:12px;max-width:340px}
.adm-form label{display:grid;gap:5px;font-size:var(--fs-sm);color:var(--sand-dim)}
.adm-form input{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:9px 12px;border-radius:var(--r);font:inherit;font-size:var(--fs);
}
.adm-form input:focus{outline:2px solid var(--flare);outline-offset:-1px}
.adm-form-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  align-items:end;max-width:none}

.adm-bare{display:grid;place-items:center;min-height:100vh}
.adm-card{width:min(340px,100% - 40px);padding:28px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}

@media (max-width:760px){
  .adm-frame{grid-template-columns:1fr;gap:18px}
  .adm-nav{position:static;grid-auto-flow:column;overflow-x:auto}
}

/* An AI account says so wherever its name appears. Small, but never
   hidden: the point is that nobody has to wonder. */
.ai-badge{
  display:inline-block;vertical-align:middle;margin-left:6px;
  font:600 var(--fs-xs)/1 var(--font);letter-spacing:.08em;
  padding:3px 6px;border-radius:var(--r-pill);
  background:rgba(var(--sand-rgb),.16);color:var(--sand);
}
.ai-note{
  font-size:var(--fs-sm);color:var(--sand-dim);line-height:1.5;
  padding:10px 14px;background:var(--ink-2);border-radius:var(--r);margin-bottom:12px;
}

/* ---- video call ---- */
.call-sheet{z-index:80;background:#000;display:grid}

#call-remote{width:100%;height:100%;object-fit:cover}
#call-local{
  position:absolute;right:14px;top:14px;width:110px;
  border-radius:10px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.call-bar{
  position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:14px;
}
.call-who{color:#fff;font-size:var(--fs);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.call-acts{display:flex;gap:14px}
.call-hang{background:var(--flare);color:var(--ink)}

/* ---- going live ---- */
.live-sheet{z-index:80;background:#000;display:grid}

#live-preview{width:100%;height:100%;object-fit:cover}
.live-bar{
  position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:12px;padding-inline:20px;
}
.live-status{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.live-title{
  width:min(420px,100%);padding:11px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--cream-rgb),.3);background:rgba(0,0,0,.4);color:#fff;font:inherit;
}
.live-acts{display:flex;gap:12px;align-items:center}

/* ---- live on a profile ---- */
.live-card{position:relative;margin-bottom:22px;border-radius:var(--r);overflow:hidden;background:#000}
.live-card video,.live-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;object-fit:cover}
.live-pill{
  position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 var(--fs-xs)/1 var(--font);letter-spacing:.04em;
}
.live-cap{position:absolute;left:14px;bottom:12px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.live-cap strong{display:block;font-size:var(--fs-lg)}
.live-cap em{font-style:normal;font-size:var(--fs-sm);opacity:.85}

/* The iframe swallows clicks, so an overlay carries the link. */
.live-open{position:relative;display:block}
.live-open-hit{position:absolute;inset:0}
.live-open video{aspect-ratio:auto}
.live-mute{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff}
.live-mute.on{background:var(--flare);color:var(--ink)}

/* ---- live in the hint row ---- */
.tray-card.on-air{outline:2px solid var(--flare);outline-offset:-2px}
.tray-card.on-air .tray-av{box-shadow:0 0 0 2px var(--flare)}
.tray-live{
  position:absolute;left:8px;top:8px;z-index:2;
  padding:3px 7px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 var(--fs-xs)/1 var(--font);letter-spacing:.05em;
}

/* ---- live card in the row ---- */
.tray-eyes{
  position:absolute;right:8px;top:8px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);color:#fff;font:600 var(--fs-xs)/1 var(--font);
}
.tray-who{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.tray-who strong{display:block;font-size:var(--fs)}
.tray-who em{font-style:normal;font-size:var(--fs-xs);opacity:.8;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-card.on-air .tray-name{display:none}


/* ---- chat over the broadcaster's preview ---- */
.live-overlay{
  position:absolute;left:16px;right:16px;bottom:170px;z-index:3;
  list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:end;
  pointer-events:none;
}
.live-overlay li{
  font-size:var(--fs-sm);line-height:1.4;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.live-overlay b{color:var(--flare);margin-right:6px}
/* Older lines recede so the broadcaster can still see themselves. */
.live-overlay li:nth-last-child(4){opacity:.6}
.live-overlay li:nth-last-child(5){opacity:.35}

/* ---- broadcaster's screen ---- */
.lv-top{
  position:absolute;left:14px;right:14px;top:calc(14px + env(safe-area-inset-top));
  z-index:3;display:flex;justify-content:space-between;align-items:center;
}
.lv-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 var(--fs-xs)/1 var(--font);letter-spacing:.04em;
}
.lv-badge em{font-style:normal;font-weight:600}
.lv-eyes{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.5);color:#fff;font:600 var(--fs-sm)/1 var(--font);
}
.lv-eyes em{font-style:normal}

.lv-setup,.lv-on{
  position:absolute;left:16px;right:16px;z-index:3;
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;gap:12px;justify-items:center;
}

.lv-reply{display:flex;gap:8px;width:min(460px,100%)}
.lv-reply input{
  flex:1;min-width:0;padding:12px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--cream-rgb),.25);background:rgba(0,0,0,.45);
  color:#fff;font:inherit;
}
.lv-reply input::placeholder{color:rgba(var(--cream-rgb),.6)}
.lv-end{background:var(--flare);color:var(--ink);min-width:120px}

/* ---- composer: pick a line ---- */
.cs-line{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:8px;padding:14px 16px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);color:var(--cream);font:inherit;text-align:left;cursor:pointer}
.cs-line:hover{border-color:var(--flare)}
.cs-line svg{color:var(--flare);flex:0 0 auto}
.cs-lines{max-height:min(46vh,340px);overflow-y:auto;margin-bottom:8px}
.cs-own{display:block;margin-bottom:16px;font-size:var(--fs-sm)}
.chip input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.chip:focus-within{border-color:var(--flare);color:var(--flare)}
.cs-cats,.cs-cat ul{list-style:none;display:grid;gap:6px}
.cs-cat .linkish{display:block;margin-bottom:10px;font-size:var(--fs-sm)}

/* ---- admin modal ---- */
.adm-modal{border:1px solid var(--line);background:var(--ink-2);color:var(--cream);padding:0;max-width:460px;width:calc(100% - 32px)}
.adm-modal::backdrop{background:rgba(var(--ink-rgb),.72)}
.adm-modal .adm-form{max-width:none;padding:20px;gap:14px}
.adm-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.adm-modal-head h2{font:700 var(--fs)/1.2 var(--font)}
.adm-modal-foot{display:flex;justify-content:flex-end}
.adm-form select,.adm-form textarea{
  padding:8px 10px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);color:var(--cream);font:inherit;width:100%;
}
.adm-form select:focus,.adm-form textarea:focus{outline:2px solid var(--flare);outline-offset:-1px}
.adm-head-row{display:flex;align-items:center;justify-content:flex-end;margin-bottom:16px}
.adm-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--cream)}
.adm-check input{width:auto}
.adm-modal{margin:auto}
.adm-modal input[type=number]{width:100%}
.adm-form select,.adm-bar select{appearance:none;background-image:none;padding-right:12px}
.adm-form input[type=number]{appearance:textfield}
.picks:empty{margin:0}
.line-cat-head{color:var(--sand-dim);margin-bottom:18px;font-size:var(--fs)}
.line-h{font:600 var(--fs-lg)/1.3 var(--font);letter-spacing:-.01em;margin-bottom:4px}
.cs-head{justify-content:flex-end;border-bottom:0}
.thumb-clip{aspect-ratio:1}
.thumb-clip video{width:100%;height:100%;object-fit:cover}
.chip.on{border-color:var(--flare);color:var(--flare)}
.chip[disabled]{opacity:.4;pointer-events:none}
.cs-live{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;padding:12px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--sand);font:inherit;cursor:pointer}
.cs-live:hover{border-color:var(--flare);color:var(--flare)}
.cs-post{width:100%;margin-top:16px}
.post-media:empty{display:none}
.post-name .js-follow{margin-left:4px}

/* ---- live now ---- */
.live-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.live-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--ink-2);text-decoration:none}
.live-tile img{width:100%;height:100%;object-fit:cover}
.live-tile-blank{display:grid;place-items:center;width:100%;height:100%;color:var(--sand-dim)}
.live-tile .live-pill{position:absolute;top:10px;left:10px}
.live-tile-who{position:absolute;left:0;right:0;bottom:0;padding:32px 12px 12px;color:#fff;background:linear-gradient(rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.9))}
.live-tile-who strong{display:block;font-size:var(--fs)}
.live-tile-who em{display:block;font-style:normal;font-size:var(--fs-sm);color:rgba(var(--cream-rgb),.75);margin-top:2px}

.feed-cats{display:flex;gap:8px;margin-bottom:18px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.feed-cats::-webkit-scrollbar{display:none}
.feed-cats .chip{flex:0 0 auto;text-decoration:none}

.cat-drop{margin-top:10px;padding:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.cat-drop ul{list-style:none;display:grid;gap:4px}
.cat-drop .starter{width:100%;text-align:left;text-decoration:none;padding:9px 12px}
.cat-all{display:block;margin-bottom:8px;color:var(--flare);font-size:var(--fs-sm);text-decoration:none}
.chip.now{border-color:var(--flare);color:var(--flare)}
.cats{position:sticky;top:71px;z-index:20;padding-block:30px 14px;background:var(--ink)}
.head-in{height:100%}

/* A column with no chip row above it provides its own top space: the
   chips carry theirs, so only the pages without them need this. */
.col:not(:has(.cats)){padding-top:24px}
.feed-cats{cursor:grab}
.feed-cats:active{cursor:grabbing}
.stream .card:first-child{padding-top:0}

@media (max-width:900px){
  /* The list takes what is left of the screen rather than pushing the
     feed down: ten lines is more than a phone shows at once. */
  .cat-drop{
    position:fixed;left:0;right:0;bottom:0;top:var(--drop-top,139px);
    margin:0;border-radius:0;border-left:0;border-right:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:60;
    padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));
  }
}
.cat-drop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cat-drop-head .cat-all{margin-bottom:0}
@media (min-width:901px){
  .cat-drop-head .js-drop-close{display:none}
}
/* The lines start where the tag does, so the column reads as one. */
.cat-drop .starter{padding-inline:0}
.live-join{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px;background:rgba(var(--flare-rgb),.12);border:1px solid var(--flare);border-radius:var(--r);color:var(--flare);text-decoration:none;font-weight:600}
.live-join:hover{background:rgba(var(--flare-rgb),.2)}
.card-live .live-pill{position:static}
/* Nothing at all until the first frame: an empty black box for a
   second reads as something failing. */
/* In the layout so the observer can see it, but taking no space and
   showing nothing until the first frame arrives. */
.feed-live{position:absolute;inset:0;background:#000 50% 30%/cover}
.feed-live .live-pill{position:absolute;top:12px;left:12px}
/* Their face while the stream connects: a second of black reads as
   broken, a second of them reads as waiting. */
@media (max-width:1100px){.frame>main~*{display:none}}
.composer:not(.has-line) :is(.composer-foot,.cs-post){display:none}
.mark span em{font-style:normal;color:var(--flare)}
/* A hidden sheet stays hidden: position:fixed can otherwise beat the
   attribute's own display:none for a frame on load. */

/* ---- landing ---- */
.lp{display:grid;justify-items:center;gap:18px;max-width:340px;margin:0 auto;padding:8vh 0 40px;text-align:center}
.lp .mark{pointer-events:none}
.lp-line{color:var(--sand);font-size:var(--fs);margin-bottom:6px}
.lp-form{display:grid;gap:10px;width:100%}
.lp-form input{padding:13px 15px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);color:var(--cream);font:inherit;font-size:var(--fs)}
.lp-form input:focus{outline:2px solid var(--flare);outline-offset:-1px}
.lp-form .btn{width:100%;margin-top:4px}
.lp-alt{color:var(--sand-dim);font-size:var(--fs-sm)}
.lp-acts{display:grid;gap:10px;width:100%}
.lp-acts .btn{width:100%}
.lp-wide{max-width:380px}
.lp-wide .form{width:100%;text-align:left}
.bare-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:32px var(--pad) 40px;font-size:var(--fs-sm);color:var(--sand-dim)}
.bare-foot a{color:inherit;text-decoration:none}
.bare-foot a:hover{color:var(--flare)}
/* The rail's rows carry padding for their active background; the
   block shifts left by the same amount so the text starts where the
   logo does. */
.rail{margin-left:-14px}

/* ---- rail foot: the once-a-month links ---- */
.rail-foot{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:22px;padding:0 14px;font-size:var(--fs-xs);line-height:1.7}
.rail-foot a{color:var(--sand-dim);text-decoration:none}
.rail-foot a:hover{color:var(--cream)}
.rail-foot span{color:var(--sand-dim);opacity:.7;width:100%}

/* A liked heart is the same shape filled in. */
.post-acts .act.on{color:var(--flare)}
.post-acts .act.on svg path{fill:currentColor;stroke:currentColor}


/* ---- full-screen feed (phones) ---- */
/* The picture is the card, and everything
   else sits on top of it at the bottom. One shape to learn, whether
   you are looking at a person or a post. */
@media (max-width:900px){
  /* The feed is the mobile viewport. Header and navigation overlay it,
     so the document itself must not become a second vertical scroller. */
  body:has(#stream){
    height:100svh;
    overflow:hidden;
  }

  body:has(#stream) .site-head{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }

  body:has(#stream) .frame{
    height:100svh;
  }

  body:has(#stream) .col{
    height:100svh;
    padding-block:0;
  }

  .stream{
    height:100svh;margin-inline:calc(var(--pad,16px) * -1);
    overflow-y:auto;scroll-snap-type:y mandatory;
    scrollbar-width:none;overscroll-behavior-y:contain;
  }
  .stream::-webkit-scrollbar{display:none}
}

@media (min-width:1px){

  /* svh, not dvh: dvh grows when the URL bar retracts, so a card sized
     in it runs past the bottom of the screen and takes the caption with
     it — under the bar, which is measured against the real viewport. */
  .card.post{
    position:relative;height:100svh;scroll-snap-align:start;
    padding:0;overflow:hidden;background:var(--ink-2);

    /* Rows, not arithmetic. The picture row is fixed, so it never moves
       while someone types; the panel takes what is left and clips its
       oldest messages when the conversation outgrows it. */
    display:grid;

    /* Clearance, identity, picture, panel, clearance. The identity has
       a band of its own, so it never sits on an attachment. */
    grid-template-rows:
      var(--post-media-top)
      var(--post-band-h)
      var(--post-media-share)
      minmax(0, 1fr)
      var(--post-bottom-clear);

    /* The middle two tracks are the picture and the rail; the 1fr on
       either side centres that pair whatever the picture's shape. */
    grid-template-columns:
      1fr
      var(--post-col)
      var(--post-control-gap)
      var(--post-control-w)
      1fr;
  }

  /* The identity sits on the picture rather than above it: the media
     spans its row too, and the band's own track is collapsed. */
  .card.post .post-media{
    grid-row:2 / 4;
    grid-column:1 / -1;
    position:relative;border-radius:0;aspect-ratio:auto;min-height:0;
  }
  .card.post .post-media .gal{border-radius:0}

  .card.post .starter-tag,
  .card.post .post-counts{
    position:relative;z-index:1;margin:0;padding:0 18px;
  }

  .card.post .post-foot-stack{
    grid-row:4;
    grid-column:1 / -1;
    position:relative;
    z-index:2;
  }

  /* The line and who posted it stay; meta (location/time) and counts
     are a tap away on their profile instead. */
  .card.post .post-meta,
  .lb-who .post-meta,
  .card.post .post-counts{display:none}
  .card.post .menu summary{color:var(--cream);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

  .card.post .feed-sound{
    z-index:3;
  }
  .card.post::before{
    content:'';position:absolute;left:0;right:0;top:0;height:34%;
    background:linear-gradient(rgba(var(--ink-rgb),.75),transparent);
    pointer-events:none;z-index:1;
  }
  .card.post .post-name,
  .lb-who .post-name{font-size:var(--fs)}

  /* The line is the post. It should read from across the room, and
     everything else on the card should defer to it. */
  .card.post .post-body{
    font-size:var(--fs-xl);font-weight:600;line-height:1.2;letter-spacing:-.015em;
    text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.5);
  }
  .card.post .starter-tag{font-size:var(--fs-sm);opacity:.85}

  /* The old row goes: these are the rail now. */
  .card.post .post-acts{display:none}

  /* Actions stay on the visual stage. */
  /* Placement lives with the card grid now; only the look is here. */
  .post-rail{
    z-index:3;
    display:grid;gap:20px;justify-items:center;
  }
  .rail-act{
    display:grid;justify-items:center;gap:4px;
    background:none;border:0;padding:0;cursor:pointer;
    color:var(--cream);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  }
  .rail-act em{font-style:normal;font-size:var(--fs-xs);font-weight:600}
  .rail-act.on{color:var(--flare)}
  .rail-act.on svg path{fill:currentColor}
}

.lines-sheet{z-index:60;background:var(--ink);overflow-y:auto;padding-bottom:120px}

/* The row is the link; the accept and decline buttons stay outside it
   so a tap on them is not a navigation. */
.notif-go{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}


/* [hidden] is the app state, so it wins over any component display rule. */
[hidden]{display:none}

.rail-act.js-save.on{color:var(--flare)}
.rail-act.js-save.on svg path{fill:currentColor}

/* Same card, loose on a wide screen: it sits in the column with its
   own edges rather than filling the window like a page. */
@media (min-width:901px){
  .card.post{
    /* Card plus gap is exactly one screen below the header: a gap under
       every card, and the next one starts at the window's edge. */
    --post-card-gap:12px;--post-card-h:calc(100dvh - var(--head-h,71px) - var(--post-card-gap));height:var(--post-card-h);
    border-radius:var(--r);margin-bottom:var(--post-card-gap);
  }

  .post-rail{gap:14px}
}

/* No double-tap zoom anywhere: a second tap is always a second tap,
   never a magnifier. Pinch still works where it is allowed. */
html{touch-action:manipulation}

/* The panel is wider than the button it hangs off, so on a phone it
   answers to the screen: full width, directly under the header. */
@media (max-width:900px){
  .bell-pop{
    position:fixed;left:8px;right:8px;width:auto;max-width:none;
    top:calc(var(--head-h,64px) + 8px);
  }
  .bell-pop{bottom:calc(var(--bar-h,96px) + 8px);display:flex;flex-direction:column}
  .bell-list{max-height:none;flex:1;min-height:0}
}

/* iOS zooms a field it thinks is too small to read, so nothing that
   takes typing goes under 16px. */
input,textarea,select{font-size:max(16px,1em)}



/* === DESKTOP FEED SNAP START === */
@media (min-width:901px){

  /*
   * Desktop scrolls the document, not .stream.
   * Snap the viewport itself to each feed post.
   */
  html:has(#stream){
    scroll-snap-type:y mandatory;
    scroll-padding-top:var(--head-h,64px);
  }

  #stream .card.post{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}
/* === DESKTOP FEED SNAP END === */

/* === CONTEXTUAL HEADER START ===
   Focused pages can replace the normal site header with page context.
   Same 71px chrome on desktop and mobile; content adapts inside it.
*/
.ctx-head{
  position:sticky;
  top:0;
  height:71px;
  z-index:30;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.ctx-inner{
  width:min(1180px,100% - var(--pad)*2);
  height:71px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.ctx-back{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--cream);
  text-decoration:none;
}

.ctx-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.ctx-title{
  min-width:0;
  color:var(--cream);
  font:600 var(--fs-lg)/1.2 var(--font);
  letter-spacing:-.01em;
}

.ctx-person{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--cream);
  text-decoration:none;
  font-weight:600;
}

.ctx-av{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--ink-2);
  color:var(--sand-dim);
}

.ctx-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ctx-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ctx-action{
  margin-left:auto;
}

@media (max-width:900px){
  .ctx-head{
    height:64px;
  }

  .ctx-inner{
    width:calc(100% - var(--pad)*2);
    height:64px;
  }

  .ctx-title{
    font-size:var(--fs-lg);
  }

  .ctx-av{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}
/* === CONTEXTUAL HEADER END === */

/* === THREAD INTERNAL SCROLL START === */
.th-log{
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  min-height:0;
}
/* === THREAD INTERNAL SCROLL END === */

/* === MESSAGE WORKSPACE START === */

.msg-workspace{
  width:min(1180px,100%);
  height:100dvh;
  margin-inline:auto;
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  overflow:hidden;
}

.msg-workspace-list{
  min-width:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
}

.msg-list-head{
  height:71px;
  flex:0 0 71px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:10px;
}

.msg-list-head strong{
  color:var(--cream);
  font:600 var(--fs-lg)/1.2 var(--font);
}

.msg-list-back,
.msg-thread-back{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--cream);
  text-decoration:none;
}

.msg-list-back:hover,
.msg-thread-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.msg-list-scroll{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:10px 8px 24px;
  overscroll-behavior-y:contain;
}

.msg-workspace-list .thread.active{
  background:var(--ink-2);
}

.msg-workspace-chat{
  min-width:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
}

.msg-thread-head{
  height:71px;
  flex:0 0 71px;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
}

.msg-thread-person{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cream);
  text-decoration:none;
  font-weight:600;
}

.msg-thread-av{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--ink-2);
  color:var(--sand-dim);
}

.msg-thread-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.msg-thread-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.msg-thread-call{
  margin-left:auto;
}

.msg-workspace-chat .th-log{
  flex:1;
  min-height:0;
  height:auto !important;
  margin:0;
  padding:18px 24px;
  overflow-y:auto;
}

.msg-workspace-chat .th-note{
  flex:0 0 auto;
  margin:0;
  padding:10px 24px;
}

.msg-workspace-chat .th-send{
  position:static;
  flex:0 0 auto;
  width:auto;
  padding:10px 24px 16px;
  background:var(--ink);
}

.msg-workspace-empty{
  height:100%;
  display:grid;
  place-items:center;
  color:var(--sand-dim);
  text-align:center;
  padding:24px;
}

/* Mobile remains list -> conversation -> back. */
@media (max-width:900px){
  .msg-workspace{
    width:100%;
    height:100dvh;
    display:block;
  }

  .msg-workspace.inbox-only .msg-workspace-chat{
    display:none;
  }

  .msg-workspace.has-thread .msg-workspace-list{
    display:none;
  }

  .msg-workspace-list,
  .msg-workspace-chat{
    width:100%;
    height:100dvh;
  }

  .msg-list-head,
  .msg-thread-head{
    height:64px;
    flex-basis:64px;
  }

  .msg-thread-head{
    padding-inline:var(--pad);
  }

  .msg-workspace-chat .th-log{
    padding:14px var(--pad);
  }

  .msg-workspace-chat .th-send{
    position:fixed;
    left:var(--pad);
    right:var(--pad);
    bottom:0;
    width:auto;
    padding:10px 0;
  }
}

/* === MESSAGE WORKSPACE END === */

/* === MESSAGE WORKSPACE DESKTOP POLISH START === */
@media (min-width:901px){

  /* Messaging is its own desktop workspace, so use more of the screen. */
  .msg-workspace{
    width:min(1480px,calc(100% - 48px));
    grid-template-columns:300px minmax(0,1fr);
  }

  /* The thread is already visible beside the list on desktop. */
  .msg-thread-back{
    display:none;
  }

  .msg-thread-head{
    padding-inline:28px;
  }

  /*
   * Keep messages visually connected even on a very wide monitor.
   * The pane stays wide; the actual conversation gets a readable width.
   */
  .msg-workspace-chat .th-log,
  .msg-workspace-chat .th-post{
    width:min(900px,100%);
    margin-inline:auto;
    box-sizing:border-box;
    padding-inline:20px;
  }

  /* The picture is the band: padding would leave the anchor's own
     background showing as a shelf either side of it. */
  .msg-workspace-chat .th-post{padding-inline:0}

  .msg-workspace-chat .th-note{
    width:min(900px,100%);
    margin-inline:auto;
    box-sizing:border-box;
  }

  .msg-workspace-chat .th-send{
    width:min(900px,calc(100% - 40px));
    margin-inline:auto;
    padding:10px 0 16px;
    box-sizing:border-box;
  }
}
/* === MESSAGE WORKSPACE DESKTOP POLISH END === */

/* === MESSAGE WORKSPACE FINAL PROPORTIONS START === */
@media (min-width:901px){

  .msg-workspace-chat .th-log,
  .msg-workspace-chat .th-post{
    width:min(760px,100%);
  }

  .msg-workspace-chat .th-note{
    width:min(760px,100%);
  }

  .msg-workspace-chat .th-send{
    width:min(760px,calc(100% - 40px));
  }

  .msg-workspace-list .thread{
    border-radius:10px;
  }

  .msg-workspace-list .thread.active{
    background:rgba(var(--cream-rgb),.07);
  }
}
/* === MESSAGE WORKSPACE FINAL PROPORTIONS END === */

/* === MESSAGE WORKSPACE BOTTOM SPACING START === */
@media (min-width:901px){
  .msg-workspace-chat .th-log{
    padding-bottom:32px;
    scroll-padding-bottom:32px;
  }
}
/* === MESSAGE WORKSPACE BOTTOM SPACING END === */

/* === MOBILE THREAD COMPOSER CLEARANCE START === */
@media (max-width:900px){
  .msg-workspace-chat .th-log{
    box-sizing:border-box;
    padding-bottom:calc(var(--th-send-h,72px) + 16px);
    scroll-padding-bottom:calc(var(--th-send-h,72px) + 16px);
  }
}
/* === MOBILE THREAD COMPOSER CLEARANCE END === */

/* ---- discover filters ---- */
.discover-sheet{
  z-index:70;
  background:rgba(var(--ink-rgb),.82);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  padding:20px;
}
.discover-sheet[hidden]{display:none}
.discover-panel{
  width:min(620px,100%);
  max-height:min(760px,calc(100dvh - 40px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.discover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border-bottom:1px solid var(--line);
}
.discover-head strong{
  display:block;
  font:600 var(--fs-lg)/1.1 var(--font);
  color:var(--cream);
}
.discover-head span{
  display:block;
  margin-top:5px;
  color:var(--sand-dim);
  font-size:var(--fs-sm);
}
.discover-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px 20px;
}
.discover-group{
  border:0;
  padding:0;
  margin:0 0 28px;
}
.discover-group:last-child{margin-bottom:0}
.discover-group legend{
  margin-bottom:12px;
  color:var(--sand-dim);
  font:600 var(--fs-xs)/1 var(--font);
  text-transform:uppercase;
  letter-spacing:.09em;
}
.discover-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.discover-option{
  cursor:pointer;
}
.discover-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.discover-option span{
  display:block;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--sand);
  font-size:var(--fs-sm);
}
.discover-option:hover span{
  border-color:var(--sand-dim);
  color:var(--cream);
}
.discover-option input:checked + span{
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.12);
  color:var(--flare);
}
.discover-line-list{
  display:grid;
  gap:4px;
}
.discover-line.is-hidden{
  display:none;
}
.discover-line{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
}
.discover-line:hover{
  background:rgba(var(--cream-rgb),.04);
}
.discover-line:has(input:checked){
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.08);
}
.discover-line input{
  margin-top:3px;
  accent-color:var(--flare);
}
.discover-line span{
  min-width:0;
}
.discover-line strong{
  display:block;
  color:var(--cream);
  font-size:var(--fs);
}
.discover-line em{
  display:block;
  margin-top:3px;
  color:var(--sand-dim);
  font-size:var(--fs-sm);
  font-style:normal;
  line-height:1.35;
}
.discover-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-top:1px solid var(--line);
}
.discover-clear{
  color:var(--sand);
  font-size:var(--fs-sm);
  text-decoration:none;
}
.discover-clear:hover{color:var(--cream)}

@media (max-width:700px){
  .discover-sheet{
    padding:0;
    place-items:stretch;
    background:var(--ink);
  }
  .discover-panel{
    width:100%;
    max-height:100dvh;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .discover-head{
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .discover-actions{
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

/* ---- settings hub + shared sheet ---- */
.settings-hub{
  display:grid;
  margin-top:18px;
  border-top:1px solid var(--line);
}

.settings-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 2px;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--cream);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.settings-row-copy{
  min-width:0;
}

.settings-row strong{
  display:block;
  font-size:var(--fs);
  font-weight:600;
}

.settings-row em{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--sand-dim);
  font-size:var(--fs-sm);
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.settings-row-arrow{
  flex:0 0 auto;
  color:var(--sand-dim);
  font-size:var(--fs-xl);
  line-height:1;
}

.settings-sheet{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.76);
}

.settings-sheet[hidden]{
  display:none;
}

.settings-panel{
  width:min(560px,100%);
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.settings-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.settings-sheet-head > strong{
  font-size:var(--fs-lg);
  font-weight:600;
}

.settings-sheet-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px;
}

.settings-pane[hidden]{
  display:none;
}

.settings-pane .form{
  display:grid;
  gap:18px;
}

.settings-pane select{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink);
  color:var(--cream);
  font:inherit;
}

@media (max-width:700px){
  .settings-sheet{
    padding:0;
    place-items:stretch;
  }

  .settings-panel{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0;
  }

  .settings-sheet-head{
    padding-top:calc(
      16px + env(safe-area-inset-top)
    );
  }

  .settings-sheet-body{
    padding-bottom:calc(
      24px + env(safe-area-inset-bottom)
    );
  }
}

/* ---- discover compact drill navigation ---- */
.discover-head{
  position:relative;
}

.discover-head-copy{
  min-width:0;
  flex:1;
}

.discover-back{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--cream);
  font:400 30px/1 var(--font);
  cursor:pointer;
}

.discover-back[hidden]{
  display:none;
}

.discover-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.discover-view[hidden]{
  display:none;
}

.discover-section-label{
  margin:4px 2px 10px;
  color:var(--sand-dim);
  font:600 var(--fs-xs)/1 var(--font);
  text-transform:uppercase;
  letter-spacing:.09em;
}

.discover-section-label:not(:first-child){
  margin-top:28px;
}

.discover-filter-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 4px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.discover-filter-row:first-of-type{
  border-top:1px solid var(--line);
}

.discover-filter-row > span:first-child{
  min-width:0;
  display:block;
}

.discover-filter-row strong{
  display:block;
  color:var(--cream);
  font:600 var(--fs)/1.25 var(--font);
}

.discover-filter-row small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:var(--sand-dim);
  font:400 var(--fs-sm)/1.3 var(--font);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.discover-chevron{
  flex:0 0 auto;
  color:var(--sand-dim);
  font-size:var(--fs-xl);
  line-height:1;
}

.discover-filter-row:hover strong,
.discover-filter-row:hover .discover-chevron{
  color:var(--flare);
}

.discover-choice-list{
  display:grid;
  gap:4px;
}

.discover-choice{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:var(--r);
  color:var(--sand);
  cursor:pointer;
}

.discover-choice:hover{
  background:rgba(var(--cream-rgb),.04);
  color:var(--cream);
}

.discover-choice:has(input:checked){
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.08);
  color:var(--flare);
}

.discover-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.discover-choice span{
  font-size:var(--fs);
}

@media (max-width:700px){
  .discover-filter-row{
    padding:17px 4px;
  }

  .discover-choice{
    min-height:52px;
  }
}

/* Inline flirt composer on fullscreen post cards */
@media (min-width:1px){
  .card.post .post-body,
  .card.post .post-quick-bubble p,
  .lb-chat .post-quick-bubble p,
  .th-log .post-quick-bubble p{
    font-size:var(--fs-line);
    font-weight:600;
    line-height:1.22;
    letter-spacing:-.012em;
  }

  .card.post .post-flirt-form,
  .lb-chat .post-flirt-form{
    display:flex;
    align-items:center;
    gap:6px;
    width:min(100%,520px);
    padding:5px;
    border:1px solid rgba(var(--cream-rgb),.26);
    border-radius:999px;
    background:rgba(var(--ink-rgb),.48);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .card.post .post-flirt-input,
  .lb-chat .post-flirt-input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    color:var(--cream);
    padding:9px 10px;
    font:500 var(--fs)/1.2 var(--font);
  }

  .card.post .post-flirt-input::placeholder,
  .lb-chat .post-flirt-input::placeholder{
    color:rgba(var(--cream-rgb),.62);
  }

  .card.post .post-flirt-send,
  .lb-chat .post-flirt-send{
    border:0;
    border-radius:999px;
    background:var(--flare);
    color:var(--ink);
    padding:10px 15px;
    font:700 var(--fs-sm)/1 var(--font);
    cursor:pointer;
  }

  .card.post .post-flirt-send:disabled,
  .lb-chat .post-flirt-send:disabled{
    opacity:.55;
    cursor:default;
  }

}

/* === FEED CARD: MEDIA + CONVERSATION ===
   One card structure on every screen. Breakpoints only tune dimensions;
   media, speech and composer keep the same relationship everywhere. */
.card.post{
  /* A floor for the panel, not its height: it grows past this whenever
     the caption or the conversation needs the room. */
  --post-panel-h:180px;
  --post-panel-edge:14px;
  --post-bottom-clear:0px;
}


.card.post .post-media img,
.card.post .post-media video,
.card.post .post-media .gal,
.card.post .post-media .tile{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-foot-stack{
  margin:0 var(--post-panel-edge) var(--post-panel-edge);
  min-height:var(--post-panel-h);
  padding:18px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;

  border:1px solid rgba(var(--cream-rgb),.12);
  border-radius:24px;
  background:rgba(var(--ink-rgb),.94);
  box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.card.post .post-speech{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
}

.card.post .post-speech-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:50%;
  background:var(--wine);
  color:rgba(var(--cream-rgb),.72);
  box-shadow:0 0 0 1px rgba(var(--cream-rgb),.12);
}

.card.post .post-speech-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-body{
  flex:0 1 auto;
  width:100%;
  max-width:24ch;
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(var(--cream-rgb),.10);
  border-radius:18px 18px 18px 6px;
  background:rgba(var(--cream-rgb),.06);
  text-shadow:none;
}

.card.post .post-flirt-form,
.lb-chat .post-flirt-form{
  width:100%;
  background:rgba(var(--cream-rgb),.06);
}

/* The prompt now has its own readable surface. */
.card.post::after{
  display:none;
}

/* Fullscreen mobile keeps clearance for the floating navigation. */
@media (max-width:900px){
  .card.post{
    --post-panel-h:220px;
    --post-panel-edge:12px;
    --post-bottom-clear:var(--bar-h,96px);
  }
}

.card.post .post-conversation-log{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:0;
  overflow:hidden;
}

.card.post .post-quick-chat[hidden],
.lb-chat .post-quick-chat[hidden]{
  display:none;
}

.card.post .post-quick-chat,
.lb-chat .post-quick-chat,
.card.post .post-opener{
  display:grid;
  gap:8px;
  width:100%;
  min-height:0;
}

.card.post .post-quick-msg,
.lb-chat .post-quick-msg,
.th-log .post-quick-msg{
  justify-self:start;
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:82%;
}

.card.post .post-quick-msg.mine,
.lb-chat .post-quick-msg.mine,
.th-log .post-quick-msg.mine{
  justify-self:end;
  flex-direction:row-reverse;
}

.card.post .post-quick-avatar,
.lb-chat .post-quick-avatar,
.th-log .post-quick-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:50%;
  background:var(--wine);
  color:rgba(var(--cream-rgb),.72);
  box-shadow:0 0 0 1px rgba(var(--cream-rgb),.12);
}

.card.post .post-quick-avatar img,
.lb-chat .post-quick-avatar img,
.th-log .post-quick-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-quick-bubble,
.lb-chat .post-quick-bubble,
.th-log .post-quick-bubble{
  padding:10px 13px;
  border:1px solid rgba(var(--cream-rgb),.10);
  border-radius:18px 18px 18px 6px;
  background:rgba(var(--cream-rgb),.06);
}

.card.post .post-quick-msg.mine .post-quick-bubble,
.lb-chat .post-quick-msg.mine .post-quick-bubble,
.th-log .post-quick-msg.mine .post-quick-bubble{
  border-radius:18px 18px 6px 18px;
  border-color:rgba(var(--flare-rgb),.35);
  background:rgba(var(--flare-rgb),.16);
}

.card.post .post-quick-bubble p,
.lb-chat .post-quick-bubble p,
.th-log .post-quick-bubble p{
  margin:0;
  overflow-wrap:anywhere;
}

/* Them, thinking: three dots in their own bubble, same shape as a
   real message so it reads as part of the conversation, not a
   separate loading state. */
.card.post .typing-dots,
.lb-chat .typing-dots{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 1px;
}
.card.post .typing-dots i,
.lb-chat .typing-dots i{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  opacity:.45;
  animation:post-typing-dot 1.2s ease-in-out infinite;
}
.card.post .typing-dots i:nth-child(2),
.lb-chat .typing-dots i:nth-child(2){animation-delay:.15s}
.card.post .typing-dots i:nth-child(3),
.lb-chat .typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes post-typing-dot{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2px)}
}

.card.post .post-flirt-form,
.lb-chat .post-flirt-form{
  flex:0 0 auto;
}

.card.post .post-flirt-form.is-waiting,
.lb-chat .post-flirt-form.is-waiting{
  opacity:.78;
}

.card.post .post-flirt-form.is-waiting .post-flirt-input,
.lb-chat .post-flirt-form.is-waiting .post-flirt-input{
  cursor:default;
}

/* === FEED CARD: MEDIA + CONVERSATION END === */

/* === FEED FLIRT CARD ===
   The card owns a fixed media territory and external action rail.
   The actual attachment keeps its stored aspect ratio. */

.card.post{
  --post-media-edge:18px;
  --post-media-radius:24px;
  --post-control-w:38px;
  --post-control-gap:12px;
  --post-media-top:var(--head-h,71px);

  /* One knob: the band is whatever the avatar needs, so changing the
     avatar per breakpoint moves the band with it. */
  --post-avatar-h:52px;
  --post-band-h:calc(var(--post-avatar-h) + 4px);

  /* How far the identity and the rail sit below the picture's top. */
  --post-rail-drop:24px;

  /* How much of the card the picture takes. The panel gets the rest and
     grows past it when the conversation needs the room. */
  --post-media-share:58svh;

  /* Air between the identity and the top of the picture. */
  --post-band-gap:14px;

  /* The same frame the site header lays itself out in, so the rail ends
     exactly where the header's buttons end and the identity starts
     where the brand starts. */
  --post-frame:min(1180px, 100% - var(--pad) * 2);

  /* One column for the picture, the same width whatever shape the
     picture is. Everything else on the card hangs off its edges, so a
     landscape photo and a portrait reel put the identity and the rail
     in exactly the same place. Capped, so the picture does not sprawl
     on a wide screen. */
  --post-col:min(
    480px,
    var(--post-frame) - var(--post-control-gap) - var(--post-control-w)
  );
}

/* Fixed territory. The final strip on the right belongs to card actions. */
.card.post .post-media{
  margin:0;

  display:flex;
  /* Top of the row, not the middle of it: the identity sits on this
     edge, and a picture floating in the centre leaves it attached to
     nothing. */
  align-items:flex-start;
  justify-content:center;

  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Single photos use their stored dimensions as the attachment shape. */
.card.post .post-photo-attachment{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  width:min(100cqw,100cqh);
  aspect-ratio:1;

  overflow:hidden;
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:var(--post-media-radius);
  background:transparent;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.card.post .post-photo-attachment .gal-1,
.card.post .post-photo-attachment .gal-1 .tile{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  border:0;
  border-radius:inherit;
  background:transparent;
  box-shadow:none;
}

.card.post .post-photo-attachment .gal-1 img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

/* Multi-photo posts keep the existing gallery composition. */
.card.post .post-media .gal:not(.gal-1){
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:var(--post-media-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

/* Video itself is the attachment. */
.card.post .post-media .feed-reel{
  position:relative;
  width:min(100cqw,100cqh);
  aspect-ratio:1;

  overflow:hidden;
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:var(--post-media-radius);

  /* The poster is painted here, not on the video: setting a source
     clears the poster attribute, so JS hands it to this box instead.
     It has to be framed exactly as the video is — cover, centred —
     or the handoff to the first frame is a visible jump. */
  background:transparent center/cover no-repeat;

  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.card.post .post-media .feed-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:transparent;
}

/* Header now owns only card-level controls such as the menu. */


/* Card's top-left, whatever the post carries — the position posts
   without media already used. Attached to the media it moved with the
   attachment's shape, so a portrait reel and a landscape photo put the
   same avatar in two different places. */
.card.post > .post-identity{
  grid-row:2;
  grid-column:1 / -1;
  justify-self:start;
  margin-left:calc((100% - var(--post-frame)) / 2);
  margin-top:var(--post-rail-drop);
  z-index:4;

  display:flex;
  align-items:center;
  gap:10px;

  min-width:0;
  height:100%;
  padding:0;
  pointer-events:auto;
}

.card.post .post-identity .post-avatar,
.lb-who .post-identity .post-avatar{
  flex:0 0 auto;
}

.card.post .post-identity .post-who,
.lb-who .post-identity .post-who{
  min-width:0;
}

.card.post .post-identity,
.lb-who .post-identity{
  /* Long names must not reach the rail icons or wrap the row: leave
     room for the rail's own width plus its gap off the right edge. */
  max-width:calc(var(--post-frame) - var(--post-control-w) - var(--post-control-gap) - 12px);
}

.card.post .post-identity .post-name,
.lb-who .post-identity .post-name{
  text-shadow:none;
  min-width:0;
}

.card.post .post-identity .post-name a,
.lb-who .post-identity .post-name a{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.card.post .post-identity .verified,
.lb-who .post-identity .verified,
.card.post .post-identity .js-follow,
.lb-who .post-identity .js-follow{
  flex:0 0 auto;
}

/* Sound belongs to the actual video attachment. */
.card.post .post-media .feed-reel > .feed-sound{
  position:absolute;
  top:auto;
  right:var(--pad);
  bottom:var(--pad);
  left:auto;
  z-index:4;
  margin:0;
  width:var(--post-control-w);
  height:var(--post-control-w);
}

/* Three-dot menu starts the fixed external action column. */
.card.post .post-rail .menu{
  position:relative;
  z-index:4;

  width:var(--post-control-w);
  /* The dots share the identity's band, so they read as one row with
     the name rather than starting a column of their own. */
  height:var(--post-avatar-h);
  align-items:center;
  align-content:center;
  justify-items:center;
  margin:0;
  display:grid;
  justify-items:center;
  pointer-events:auto;
}

.card.post .post-rail .menu > summary{
  display:grid;
  place-items:center;
  line-height:0;
  width:var(--post-control-w);
  height:var(--post-control-w);
  padding:0;
  margin:0;
}

/* Like/save continue on the same external axis. */
/* Menu, like and save are one stack in one box. Two boxes sharing a
   column is what put the dots off the heart's axis; siblings cannot
   disagree about where the middle is. */
.card.post .post-rail{
  grid-row:2 / 4;
  grid-column:1 / -1;
  justify-self:end;
  margin-right:calc((100% - var(--post-frame)) / 2);
  margin-top:var(--post-rail-drop);

  /* The narrow-screen rule above sets right:12px for an absolute rail.
     Relative keeps that as an offset and drags the box 12px left of the
     track the grid put it in, so the offsets are cleared here. */
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;

  align-self:start;
  width:var(--post-control-w);
  z-index:3;

  display:grid;
  gap:18px;
  justify-items:center;
  align-content:start;
}

/* Conversation remains the stable lower surface. */
.card.post .post-foot-stack{
  border-radius:24px 24px 20px 20px;
}

.card.post .post-foot-stack.has-conversation .post-opener{
  display:none;
}

.card.post .post-foot-stack.has-conversation .post-conversation-log{
  justify-content:flex-end;
}
.card.post .post-quick-chat{flex:none}
body:not(.feed-focus) #stream .post-quick-bubble > p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
body:not(.feed-focus) #stream .post-foot-stack{gap:16px;padding-bottom:16px;justify-content:flex-end;min-height:0}
body:not(.feed-focus) #stream .post-quick-bubble{padding-block:7px}

@media (min-width:901px){
  .card.post{
    --post-media-edge:20px;

    /* The header only overlays the card on a phone, where it is fixed.
       Here it is sticky and the card already begins beneath it, so a
       header's worth of clearance is just empty card. */
    --post-media-top:0px;
  }
}

/* Phones, last so it wins: the block above sets these unconditionally
   and later in the file, and a media query carries no extra weight. */
@media (max-width:900px){
  .card.post{
    /* Narrower card, and the picture is the point: the 52px that reads
       as balanced on a wide screen crowds it here. */

    /* Same button size as the site header's. */
    --post-control-w:38px;
  }
}

/* A live card is a post card: the stream sits in the picture column on
   the same terms as a photo or a reel, rather than filling a box that
   no longer exists. */
.card.post .post-media .feed-live{
  position:relative;
  inset:auto;

  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--media-ratio, 9 / 16);

  display:block;
  overflow:hidden;
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:var(--post-media-radius);
  background:#000 50% 30%/cover;
}

.card.post .post-media .feed-live video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  /* Nothing to show until a track arrives; .on is added on playing. */
  opacity:0;
  transition:opacity .2s ease;
}

.card.post .post-media .feed-live.on video{
  opacity:1;
}

.card.post .post-media .feed-live .live-pill{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
}

/* The way into a live room, sitting in the panel between the title and
   the reply box. Full width, because it is the card's main offer — the
   composer below it is the quieter one. */
.card.post .post-join{
  display:block;
  margin:0 0 10px;
  padding:12px 16px;

  border-radius:999px;
  background:var(--flare);
  color:var(--ink);

  font:700 var(--fs)/1 var(--font);
  text-align:center;
  text-decoration:none;
}

.card.post .post-join:hover{
  filter:brightness(1.05);
}

/* === FEED FLIRT CARD END === */

/* ==== live room (views/pages/live.php) ====
   One screen: the stream on the left, a public chat column beside it.
   Last in the file and one class stronger than the card rules, so the
   feed's sizing never wins here. */
.frame.frame-solo,.frame-solo .col{display:block;padding:0;max-width:none;width:100%}
.frame-solo #main,.card.post.live-room{max-width:none;width:100%}
html:has(.live-room),html:has(.live-room) body{height:100%;overflow:hidden}

.card.post.live-room{
  --post-band-h:0px;
  height:calc(100dvh - var(--head-h,71px));
  grid-template-rows:var(--post-media-top) var(--post-band-h) minmax(0,1fr) auto var(--post-bottom-clear);
}

.card.post.live-room .live-chat{
  grid-row:4;grid-column:1 / -1;
  display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;
  margin:0 var(--post-panel-edge) var(--post-panel-edge);
}

/* The only thing on the page that scrolls. */
.card.post.live-room .live-messages{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start}

/* Public chat: everyone on the left with their own avatar. */
.card.post.live-room .post-quick-msg.mine{justify-self:start;flex-direction:row}
.card.post.live-room .post-quick-msg.mine .post-quick-bubble{border-radius:18px 18px 18px 6px}
.card.post.live-room .post-quick-name{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--flare)}
.card.post.live-room .lc-time{display:block;margin-top:4px;text-align:right;font-size:var(--fs-xs);color:var(--sand-dim)}
.lc-mute{background:none;border:0;color:var(--sand-dim);font-size:var(--fs-xs);cursor:pointer;align-self:center}
.lc-mute:hover{color:var(--flare)}

/* The stream's shape is unknown and can change: show the whole frame. */
.card.post.live-room .post-media .feed-live{width:100%;height:100%;max-height:none;aspect-ratio:auto;background:#000}
.card.post.live-room .post-media .feed-live video{object-fit:contain}

/* Over the stream: host top-left, LIVE top-right, Go private bottom-left. */
.card.post.live-room .live-host{
  position:absolute;top:12px;left:12px;z-index:2;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 100px);
  color:#fff;text-decoration:none;text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.card.post.live-room .live-host-name{font-weight:600;font-size:var(--fs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.post.live-room .post-media .feed-live .live-pill{left:auto;right:12px}
.card.post.live-room .live-private{
  position:absolute;left:12px;bottom:12px;z-index:2;
  padding:10px 16px;border:0;border-radius:999px;
  background:var(--flare);color:var(--ink);font:700 var(--fs-sm)/1 var(--font);cursor:pointer;
}
.card.post.live-room .live-private:disabled{opacity:.6;cursor:default}

/* Wide screens: stream aligned with the page frame, a gap, the chat. */
@media (min-width:901px){
  .card.post.live-room{
    --live-chat-w:360px;
    --live-gap:32px;
    --post-col:min(480px, var(--post-frame) - var(--live-gap) - var(--live-chat-w));
    grid-template-columns:calc((100% - var(--post-frame)) / 2) var(--post-col) var(--live-gap) var(--live-chat-w) 1fr;
  }
  .card.post.live-room .live-chat{grid-row:2 / 4;grid-column:4;margin:0 0 18px}
}

/* Phones: stream above, chat below, sharing the screen. */
@media (max-width:900px){
  .card.post.live-room{
    height:100dvh;
    grid-template-rows:var(--post-media-top) var(--post-band-h) minmax(0,1.2fr) minmax(0,1fr) var(--post-bottom-clear);
  }
}

/* Private request waiting box, over the live room. */
.private-wait{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;
  width:min(340px, 100% - 32px);padding:20px;
  display:grid;gap:14px;justify-items:center;text-align:center;
  border:1px solid rgba(var(--cream-rgb),.12);border-radius:24px;
  background:rgba(var(--ink-rgb),.96);box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.private-wait[hidden]{display:none}
.private-wait .pw-text{margin:0;font-size:var(--fs);font-weight:600;color:var(--cream)}
.private-wait .pw-cancel{
  padding:10px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(var(--cream-rgb),.2);background:none;color:var(--cream);font:600 var(--fs-sm)/1 var(--font);
}
.private-wait .pw-cancel[hidden]{display:none}

/* Incoming call card: who is ringing, Accept or Decline. */
.call-ring{
  position:fixed;left:50%;top:max(16px, env(safe-area-inset-top));transform:translateX(-50%);z-index:1000;
  width:min(360px, 100% - 24px);padding:16px;
  display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;
  border:1px solid rgba(var(--cream-rgb),.14);border-radius:24px;
  background:rgba(var(--ink-rgb),.97);box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.call-ring[hidden]{display:none}
.call-ring .cr-av,.private-wait .cr-av{
  width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--wine);color:rgba(var(--cream-rgb),.72);box-shadow:0 0 0 2px var(--flare);
}
.call-ring .cr-av img,.private-wait .cr-av img{width:100%;height:100%;object-fit:cover}
.call-ring .cr-text{margin:0;font-size:var(--fs);font-weight:600;color:var(--cream)}
.call-ring .cr-acts{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.call-ring .cr-acts button{padding:12px;border-radius:999px;cursor:pointer;font:700 var(--fs)/1 var(--font)}
.call-ring .cr-decline{border:1px solid rgba(var(--cream-rgb),.2);background:none;color:var(--cream)}
.call-ring .cr-accept{border:0;background:var(--flare);color:var(--ink)}

/* Streamer on a private call: the room stays, the picture says so. */
.card.post.live-room .live-away{
  position:absolute;inset:0;z-index:1;
  display:none;place-items:center;align-content:center;gap:6px;text-align:center;
  background:rgba(var(--ink-rgb),.85);color:var(--cream);
}
.card.post.live-room.is-private .live-away{display:grid}
.card.post.live-room .live-away strong{font-size:var(--fs-lg)}
.card.post.live-room .live-away span{color:var(--sand-dim)}
.card.post.live-room.is-private .live-private{display:none}

/* Private room: the live room's layout, your camera in the corner. */
.card.post.private-room .post-media .feed-live .pr-local{
  position:absolute;right:12px;top:60px;z-index:2;
  width:28%;max-width:150px;height:auto;aspect-ratio:3 / 4;
  object-fit:cover;border-radius:14px;background:#111;
  box-shadow:0 0 0 2px rgba(var(--cream-rgb),.6);
}
.private-room .pr-who{position:absolute;left:12px;right:12px;bottom:72px;z-index:2;margin:0;text-align:center;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.private-room .pr-who:empty{display:none}
.private-room .pr-controls{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:12px}
.private-room .pr-controls .btn-round{background:rgba(0,0,0,.55);color:#fff}
.private-room .pr-controls .btn-round.off{background:var(--cream);color:var(--ink)}
.private-room .pr-controls .pr-end{background:var(--flare);color:var(--ink)}

/* Audio blocked by the browser: one tap brings it in. */
.private-room .pr-unmute{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  padding:12px 18px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.65);color:#fff;font:600 var(--fs)/1 var(--font);
}
.private-room .pr-unmute[hidden]{display:none}

/* Phones: the call is the whole screen. Video edge to edge, the last
   messages and the input over its lower part, three buttons below. */
@media (max-width:900px){
  .card.post.private-room{
    position:fixed;inset:0;z-index:900;
    display:block;height:100dvh;margin:0;padding:0;border-radius:0;
  }
  .card.post.private-room .post-media{position:absolute;inset:0;margin:0}
  .card.post.private-room .post-media .feed-live{border:0;border-radius:0}
  .card.post.private-room .post-media .feed-live .pr-remote{object-fit:cover}

  .card.post.private-room .live-host{top:calc(env(safe-area-inset-top) + 12px)}
  .card.post.private-room .post-media .feed-live .live-pill{top:calc(env(safe-area-inset-top) + 18px)}
  .card.post.private-room .post-media .feed-live .pr-local{top:calc(env(safe-area-inset-top) + 64px);width:26%;max-width:120px}
  .private-room .pr-who{top:calc(env(safe-area-inset-top) + 64px);bottom:auto}
  .private-room .pr-controls{bottom:calc(env(safe-area-inset-bottom) + 12px)}

  .card.post.private-room .live-chat{
    position:absolute;left:0;right:0;z-index:3;
    bottom:calc(env(safe-area-inset-bottom) + 76px);
    margin:0;padding:24px 12px 0;
    background:linear-gradient(transparent, rgba(0,0,0,.45));
  }
  .card.post.private-room .live-messages{
    flex:0 0 auto;
    height:auto;
    max-height:34dvh;
  }
  .card.post.private-room .post-quick-avatar{width:32px;height:32px;flex:0 0 32px}
  .card.post.private-room .post-quick-bubble{padding:6px 10px;background:rgba(0,0,0,.45);border-color:transparent}
  .card.post.private-room .post-quick-msg.mine .post-quick-bubble{background:rgba(var(--flare-rgb),.35)}
}

/* Phones: the live room is the whole screen, like a private call. */
@media (max-width:900px){
  .card.post.live-room{
    position:fixed;inset:0;z-index:900;
    display:block;height:100dvh;margin:0;padding:0;border-radius:0;
  }
  .card.post.live-room .post-media{position:absolute;inset:0;margin:0}
  .card.post.live-room .post-media .feed-live{border:0;border-radius:0}
  .card.post.live-room .post-media .feed-live video{object-fit:cover}

  .card.post.live-room .live-host{top:calc(env(safe-area-inset-top) + 12px)}
  .card.post.live-room .post-media .feed-live .live-pill{top:calc(env(safe-area-inset-top) + 18px)}

  /* Go private and sound sit on the same line, above the input. */
  .card.post.live-room .live-private{left:12px;bottom:calc(env(safe-area-inset-bottom) + 14px)}
  .card.post.live-room .live-mute{right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px)}

  .card.post.live-room .live-chat{
    position:absolute;left:0;right:0;z-index:3;
    bottom:calc(env(safe-area-inset-bottom) + 72px);
    margin:0;padding:24px 12px 0;
    background:linear-gradient(transparent, rgba(0,0,0,.45));
  }
  /* Positioned from the bottom: the list sizes to its own content, and
     0 1 auto let it shrink to nothing. */
  .card.post.live-room .live-messages{
    flex:0 0 auto;
    height:auto;
    max-height:34dvh;
  }
  .card.post.live-room .post-quick-avatar{width:32px;height:32px;flex:0 0 32px}
  .card.post.live-room .post-quick-bubble{padding:6px 10px;background:rgba(0,0,0,.45);border-color:transparent}
  .card.post.live-room .post-quick-bubble p{font-size:var(--fs)}
  .card.post.live-room .post-quick-msg.mine .post-quick-bubble{background:rgba(var(--flare-rgb),.35)}
}

/* The room's rail: sound and the way into a private call, on the
   stream's right edge above the chat. */
.card.post.live-room .live-rail{
  position:absolute;right:12px;bottom:12px;z-index:2;
  display:grid;gap:14px;justify-items:center;
}
.card.post.live-room .live-rail .live-mute,
.card.post.live-room .live-rail .live-private{position:static;background:none;border:0;padding:0;cursor:pointer}
.card.post.live-room .live-rail .live-private{display:grid;gap:4px;justify-items:center;color:#fff}
.card.post.live-room .live-rail .live-private .btn-round{background:var(--flare);color:var(--ink)}
.card.post.live-room .live-rail .live-private em{font-style:normal;font-size:var(--fs-xs);font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.card.post.live-room .live-rail .live-private:disabled{opacity:.6;cursor:default}

@media (max-width:900px){
  .card.post.live-room .live-rail{
    right:12px;
    bottom:calc(env(safe-area-inset-bottom) + 76px);
  }
  /* Chat clears the rail rather than running under it. */
  .card.post.live-room .live-chat{right:76px}
}

/* Phones: split screen. Video on top, chat below it on its own ground,
   rather than floating over the picture. */
@media (max-width:900px){
  .card.post.live-room{display:grid;grid-template-columns:1fr;grid-template-rows:45dvh minmax(0,1fr)}
  .card.post.live-room > *{grid-column:1}

  .card.post.live-room .post-media{position:relative;inset:auto;grid-row:1;min-height:0}
  /* Edge to edge: no column cap, no page padding, no rounded corners. */
  .card.post.live-room .post-media{display:block;padding:0;margin:0}
  .card.post.live-room .post-media .feed-live{
    width:100%;height:100%;max-width:none;border:0;border-radius:0;
  }
  .card.post.live-room .post-media .feed-live video{object-fit:cover}
  .card.post.live-room .live-rail{bottom:12px}

  .card.post.live-room .live-chat{
    position:relative;inset:auto;grid-row:2;right:auto;
    display:flex;min-height:0;background:none;
    padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  }
  .card.post.live-room .live-messages{flex:1 1 auto;height:auto;max-height:none;overflow-y:auto}
  .card.post.live-room .post-quick-avatar{width:40px;height:40px;flex:0 0 40px}
  .card.post.live-room .post-quick-bubble{padding:10px 13px;background:rgba(var(--cream-rgb),.06);border-color:rgba(var(--cream-rgb),.10)}
  .card.post.live-room .post-quick-msg.mine .post-quick-bubble{background:rgba(var(--flare-rgb),.16)}

  /* The private room keeps its overlay controls on the video half. */
  .private-room .pr-controls{bottom:12px}
  .card.post.private-room .post-media .feed-live .pr-local{top:64px}
  .private-room .pr-who{top:64px}
}

/* The owner's own room: preview until they start, End live after. */
.card.post.live-room .live-start{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  padding:14px 28px;border:0;border-radius:999px;cursor:pointer;
  background:var(--flare);color:var(--ink);font:700 var(--fs)/1 var(--font);
}
.card.post.live-room .live-start[hidden]{display:none}
.card.post.live-room.own-room .post-media .feed-live video{transform:scaleX(-1)}
.card.post.live-room.off-air .live-pill,
.card.post.live-room.off-air .live-rail .live-stop{display:none}
.card.post.live-room .live-rail .live-stop .btn-round{background:var(--cream);color:var(--ink)}

/* Before going live: no LIVE badge, no room, no chat. The lower half
   is the decision to start. */
.card.post.live-room.off-air .live-chat{display:none}
.card.post.live-room .live-setup{display:none}
.card.post.live-room.off-air .live-setup{
  grid-row:4;grid-column:1 / -1;
  display:flex;gap:12px;justify-content:center;align-items:center;
  padding:18px;
}
.card.post.live-room .live-setup[hidden]{display:none}

@media (max-width:900px){
  .card.post.live-room.off-air .live-setup{grid-row:2;align-items:start;padding-top:28px}
}

/* Wide screens: the room fills the window, header included. Video on
   the left edge to edge, chat in its column. */
@media (min-width:901px){
  html:has(.live-room) .site-head,
  html:has(.private-room) .site-head{display:none}

  .card.post.live-room{
    position:fixed;inset:0;z-index:900;
    height:100dvh;margin:0;padding:0;
    grid-template-rows:0 0 minmax(0,1fr) 0 0;
    grid-template-columns:minmax(0,1fr) var(--live-chat-w);
  }
  .card.post.live-room .post-media{
    grid-row:1 / -1;grid-column:1;display:block;margin:0;padding:0;min-height:0;
  }
  .card.post.live-room .post-media .feed-live{
    position:absolute;inset:0;
    width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;
  }
  .card.post.live-room .post-media .feed-live video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }

  .card.post.live-room .live-chat,
  .card.post.live-room.off-air .live-setup{
    grid-row:1 / -1;grid-column:2;margin:0;padding:16px;
  }
  .card.post.live-room.off-air .live-setup{
    flex-direction:column;justify-content:center;align-items:stretch;
  }
  .card.post.live-room .live-rail{right:24px;bottom:24px}
}

/* The owner's preview element, built at runtime. */
.card.post.live-room .feed-live .pr-preview{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#000;
}

.card.post.live-room .live-close{position:absolute;top:12px;left:12px;z-index:2}
@media (max-width:760px){
  .card.post.live-room .live-close{top:calc(env(safe-area-inset-top) + 12px)}
}

/* Full bleed for live video: the stream fills the card whatever shape it
   is, cropped rather than letterboxed. Photos and reels stay 1:1. */
.card.post .post-media .feed-live{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  border:0;
  /* Square against the header, rounded where it meets the panel. */
  border-radius:0 0 var(--post-media-radius) var(--post-media-radius);
}

.card.post .post-rail .menu > summary svg{display:block}


/* The rail's controls are the header's buttons: same chip, so the
   glyphs inside them line up with the bell and the menu by
   construction rather than by nudging. */
.card.post .post-rail .menu > summary,
.card.post .post-rail .rail-act{
  width:var(--post-control-w);
  height:var(--post-control-w);
  border-radius:50%;
  background:rgba(var(--cream-rgb),.10);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.card.post .post-rail .rail-act{
  filter:none;
  position:relative;
  /* The hidden count left an empty grid row, which pushed the glyph off
     the chip's centre. One cell, centred. */
  display:grid;
  place-items:center;
  place-content:center;
  gap:0;
  line-height:0;
}
/* No count on the rail: the filled heart already says whether you
   liked it, and the number is shown to the one person it cannot
   help — the rail never renders on your own post. */
.card.post .post-rail .rail-act em{display:none}


/* Chats and requests share the column: tabs, not a stack. */
.msg-tabs{
  display:flex;gap:4px;
  padding:10px 14px 0;
}
.msg-tab{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;
  border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--sand-dim);
  font:inherit;font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;
}
.msg-tab.on{
  background:rgba(var(--cream-rgb),.08);
  color:var(--cream);
}
.msg-tab .req-n{
  min-width:18px;padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--flare);color:#fff;
  font-size:var(--fs-xs);line-height:18px;
}

/* The post a conversation belongs to. The avatar circle clips its own
   overflow, so the badge sits on the row rather than inside it. */
.thread{position:relative}
.thread-post{
  position:absolute;
  left:44px;top:50%;margin-top:6px;
  width:20px;height:20px;
  display:grid;place-items:center;
  overflow:hidden;border-radius:6px;
  background:var(--ink-2);color:var(--sand-dim);
  box-shadow:0 0 0 2px var(--ink);
  z-index:1;
}
.thread-post img{width:100%;height:100%;object-fit:cover}
.thread-post svg{width:12px;height:12px}

/* The post the conversation is about, under the header. */
.th-post{
  position:relative;display:block;
  height:96px;
  margin:0 auto 10px;
  box-sizing:border-box;
  border-radius:16px;overflow:hidden;
  background:var(--ink-2);color:var(--cream);text-decoration:none;
}
.th-post img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.th-post-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 14px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  font-size:var(--fs-sm);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* The post's picture in full, whatever shape it was shot in. */
.th-post-wash{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:blur(28px) saturate(1.3);
  transform:scale(1.2);
  opacity:.55;
}
.th-post-pic{
  position:relative;
  display:block;
  width:auto;max-width:100%;
  height:100%;
  margin:0 auto;
  object-fit:contain;
}

/* The post a conversation is about: one card, one size, whatever the
   media's shape. */
.th-post{
  display:flex;align-items:center;gap:14px;
  height:auto;padding:10px;
  border:1px solid rgba(var(--cream-rgb),.08);
  border-radius:16px;
  background:rgba(var(--cream-rgb),.04);
}
.th-post-shot{
  position:relative;flex:0 0 auto;
  width:72px;height:90px;
  display:grid;place-items:center;
  overflow:hidden;border-radius:10px;
  background:var(--ink-2);color:var(--sand-dim);
}
.th-post-text{
  min-width:0;display:grid;gap:3px;
}
.th-post-kicker{
  font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--sand-dim);
}
.th-post-cap{
  position:static;padding:0;background:none;
  font-size:var(--fs);font-weight:600;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.th-post-meta{font-size:var(--fs-xs);color:var(--sand-dim)}

/* Whole picture in the panel: outranks the old band's cover rule. */
.th-post .th-post-pic{
  position:relative;
  width:100%;height:100%;
  object-fit:contain;
}
.th-post .th-post-wash{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}

/* The thread header: no rule under it, and when it carries the post
   it grows to fit and runs the column's full width. */
.msg-workspace-chat .msg-thread-head{border-bottom:0}

.msg-workspace-chat .msg-thread-head:has(.th-post-head){
  height:auto;
  flex:0 0 auto;
  min-height:71px;
  padding-block:10px;
}

.msg-workspace-chat .msg-thread-head .th-post-head{
  flex:1;min-width:0;
  width:auto;max-width:none;
  margin:0;padding:0;
  border:0;border-radius:0;background:none;
}

.msg-workspace-chat .msg-thread-head .th-post-shot{
  width:48px;height:60px;border-radius:8px;
}

.th-post-head .th-post-meta{text-decoration:none}
.th-post-head .th-post-meta:hover{color:var(--cream)}

/* Public vibe pages. */
.vibes{width:min(760px,100% - var(--pad) * 2);margin:0 auto;padding:24px 0 64px}
.vibes-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}
.vibes-title{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.vibes-lead{font-size:var(--fs-lg);color:var(--sand-dim);margin:0 0 32px;max-width:560px}
.vibes-back{display:inline-block;margin-bottom:14px;color:var(--sand-dim);text-decoration:none;font-size:var(--fs-sm)}
.vibes-back:hover{color:var(--cream)}
.vibes-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vibes-card{
  display:grid;gap:6px;padding:20px;
  border:1px solid rgba(var(--cream-rgb),.08);border-radius:18px;
  background:rgba(var(--cream-rgb),.04);
  color:var(--cream);text-decoration:none;
}
.vibes-card:hover{background:rgba(var(--cream-rgb),.08)}
.vibes-card strong{font-size:var(--fs-lg)}
.vibes-card span{font-size:var(--fs-sm);color:var(--sand-dim)}
.vibe-lines{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px}
.vibe-lines li{
  justify-self:start;max-width:90%;
  padding:12px 16px;border-radius:18px 18px 18px 6px;
  border:1px solid rgba(var(--cream-rgb),.10);background:rgba(var(--cream-rgb),.06);
  font-size:var(--fs-line);font-weight:600;line-height:1.25;
}
.vibes-cta{margin-bottom:40px}
.vibes-more{display:flex;flex-wrap:wrap;gap:8px}
.vibes-more a{
  padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(var(--cream-rgb),.06);color:var(--sand-dim);
  text-decoration:none;font-size:var(--fs-sm);
}
.vibes-more a:hover{color:var(--cream)}

/* Vibe list in the feed's right column. */
.vibe-rail{display:grid;gap:2px;margin:6px 0 12px}
.vibe-rail-item{
  padding:10px 12px;border-radius:10px;
  color:var(--sand-dim);text-decoration:none;font-weight:600;
}
.vibe-rail-item:hover{background:rgba(var(--cream-rgb),.05);color:var(--cream)}
.vibe-rail-item.on{background:rgba(var(--flare-rgb),.14);color:var(--flare)}
.vibe-rail-more{
  width:100%;padding:10px 12px;
  border:1px solid rgba(var(--cream-rgb),.10);border-radius:var(--r-pill);
  background:none;color:var(--cream);font:inherit;font-weight:600;cursor:pointer;
}
.vibe-rail-more:hover{background:rgba(var(--cream-rgb),.05)}

/* Left rail, tidied to match the vibe rail on the right: same rows,
   same pill for "you are here", same quiet secondary button. The pill
   and the buttons share the outer edge; icons and text share the
   logo's edge. */
.rail{gap:2px}

.rail .rail-me{border-radius:10px;padding:10px 14px;margin-bottom:10px}
.rail .rail-me-who em{color:var(--sand-dim)}

.rail .rail-link{
  padding:10px 14px;gap:12px;
  border-radius:10px;
  font-size:var(--fs);font-weight:600;
  color:var(--sand-dim);
}
.rail .rail-link:hover{background:rgba(var(--cream-rgb),.05);color:var(--cream)}
.rail .rail-link.on{background:rgba(var(--flare-rgb),.14);color:var(--flare)}
.rail .rail-link.on::before{content:none}

.rail .rail-create{
  padding:11px 16px;
  font-size:var(--fs);font-weight:600;
  border-radius:var(--r-pill);
}
.rail .rail-create{margin-top:18px}

/* Vibe colours. Each element that shows a vibe sets --vibe; the rest
   is tints of it. */
.vibe-rail-item{display:flex;align-items:center;gap:10px}
.vibe-rail-item[style]::before{
  content:'';flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--vibe);
}
.vibe-rail-item[style].on{
  background:color-mix(in srgb, var(--vibe) 16%, transparent);
  color:var(--vibe);
}

.vibes-card{border-left:3px solid var(--vibe, transparent)}
.vibes-card:hover{background:color-mix(in srgb, var(--vibe, var(--cream)) 10%, transparent)}

.vibes-one .vibes-title{color:var(--vibe)}
.vibes-one .vibe-lines li{
  border-color:color-mix(in srgb, var(--vibe) 35%, transparent);
  background:color-mix(in srgb, var(--vibe) 10%, transparent);
}
.vibes-one .vibes-cta{background:var(--vibe);color:var(--ink);border-color:var(--vibe)}
.vibes-more a[style]:hover{color:var(--vibe)}


/* ---- Light theme: what sits on a photo stays as it was ---- */
.card.post > .post-identity,
.lb-who,
.card.post .post-rail,
.card.post .post-media,
.th-post-shot{
  --cream:#F5F2F4;
  --cream-rgb:245,242,244;
  --sand:#E9E4EC;
  --sand-dim:rgba(245,242,244,.8);
  --line:rgba(245,242,244,.35);
}
/* Menus open out of the rail onto the page, so they are the page again. */
.card.post .post-rail .menu-pop{
  --cream:#2B2233;
  --cream-rgb:43,34,51;
  --sand:#6E6478;
  --sand-dim:rgba(110,100,120,.85);
}
.card.post::before{background:linear-gradient(rgba(0,0,0,.45),transparent)}

.card.post .js-follow:hover{border-color:var(--line);color:var(--sand)}

/* Vibe colours on light: the tint carries the colour, the text stays dark. */
.vibe-rail-item[style].on{color:var(--cream)}
.vibes-one .vibes-title{color:var(--cream)}
.vibes-one .vibes-cta{color:var(--cream)}

/* The mark: one line, in Lobster Two. A script face has one weight, so
   no bold — faux-bold on a script smears it. */
.mark,
.mark.mark-stack{
  display:inline-flex;flex-direction:row;align-items:baseline;gap:0;
  font-family:'Lobster Two',cursive;
  font-weight:400;
  font-size:36px;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.mark span,
.mark .mark-line{display:inline;font:inherit}

/* The post's line and vibe, on the picture. */
.post-line{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:8px;justify-items:start;
  padding:56px 64px 18px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  border-radius:0 0 var(--post-media-radius,24px) var(--post-media-radius,24px);
  pointer-events:none;
}
.post-vibe{
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--vibe);color:#2B2233;
  font-size:var(--fs-sm);font-weight:700;
}
.post-line-text{
  margin:0;color:#fff;
  font-size:var(--fs-line);font-weight:600;line-height:1.2;
  text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.4);
}

/* A post with no picture: the line fills the space, in its vibe. */
.card.post .post-media-text{
  display:grid;align-items:end;
  background:color-mix(in srgb, var(--vibe) 72%, #2B2233);
  /* Square against the header on mobile, rounded on desktop below. */
  border-radius:0 0 var(--post-media-radius,24px) var(--post-media-radius,24px);
}
.post-media-text .post-line{
  position:static;background:none;padding:28px;
}
.post-media-text .post-line-text{font-size:var(--fs-title);text-shadow:none}

/* Desktop: the card sits in a column on a light page, so its top
   corners round to match the bottom. */
@media (min-width:901px){
  .card.post{border-radius:var(--post-media-radius)}
  .card.post .post-media .post-photo-attachment,
  .card.post .post-media .feed-reel,
  .card.post .post-media .feed-live,
  .card.post .post-media-text{
    border-radius:var(--post-media-radius);
  }
}

/* The conversation is part of the card, not a box inside it. */
.card.post .post-foot-stack{
  margin:0;
  /* Sides from --pad, the inset the name and the rail use, so the
     chat lines up with them at every width. */
  padding:0 var(--pad) 16px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* On a photo, "on" is the same white, filled: violet fights the picture. */
.card.post .post-rail .rail-act.on{color:rgba(255,255,255,.8)}

/* Admin: one form per vibe. */
.adm-vibes{display:grid;gap:10px;margin-top:14px}
.adm-vibe{
  display:grid;grid-template-columns:44px 1fr 80px;gap:8px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:10px;
}
.adm-vibe input[name=meta_title],
.adm-vibe input[name=meta_desc],
.adm-vibe-foot{grid-column:1 / -1}
.adm-vibe input[type=color]{width:44px;height:36px;padding:0;border:0;background:none}
.adm-vibe-foot{display:flex;align-items:center;gap:12px}

/* Violet is for actions only; "you are here" is neutral. */
.rail .rail-link.on,
.vibe-rail-item.on:not([style]){
  background:rgba(var(--cream-rgb),.06);
  color:var(--cream);
}
.card.post .post-quick-msg.mine .post-quick-bubble,
.lb-chat .post-quick-msg.mine .post-quick-bubble,
.th-log .post-quick-msg.mine .post-quick-bubble{
  background:rgba(var(--cream-rgb),.08);
  border-color:rgba(var(--cream-rgb),.12);
}

/* Write your own: a real field under the list. */
.cs-own{display:grid;gap:8px;margin:18px 0 4px}
.cs-own span{font-size:var(--fs-sm);color:var(--sand-dim)}
.cs-own input{
  width:100%;padding:14px 16px;
  border:1px solid rgba(var(--cream-rgb),.18);border-radius:14px;
  background:var(--ink-2);color:var(--cream);font:inherit;font-size:var(--fs);
}
.cs-own input:focus{outline:none;border-color:var(--flare)}



/* Admin: blocked words as removable chips. */
.adm-terms{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.adm-terms li{
  display:flex;align-items:center;gap:6px;
  padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
}
.adm-terms form{display:contents}
.adm-terms button{
  width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(var(--cream-rgb),.08);color:var(--sand-dim);cursor:pointer;
}
.adm-terms button:hover{color:var(--cream)}
.adm-new{margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--flare);color:#fff;font-size:var(--fs-xs);font-weight:700}


/* Composer, one screen: vibe chips, the open vibe's lines, your own. */
.cs-vibes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.cs-vibe{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:none;color:var(--cream);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
}
.cs-vibe::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--vibe)}
.cs-vibe.on{border-color:var(--vibe);background:color-mix(in srgb, var(--vibe) 18%, transparent)}
.cs-cat{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:6px;max-height:280px;overflow-y:auto}
.cs-cat[hidden]{display:none}
.cs-pick{
  width:100%;text-align:left;padding:12px 14px;
  border:1px solid transparent;border-radius:12px;
  background:rgba(var(--cream-rgb),.04);color:var(--cream);
  font:inherit;font-size:var(--fs);cursor:pointer;
}
.cs-pick:hover{background:rgba(var(--cream-rgb),.07)}
.cs-pick.on{border-color:var(--flare);background:rgba(var(--flare-rgb),.10)}
.cs-own[hidden]{display:none}
.adm-new{margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--flare);color:#fff;font-size:var(--fs-xs);font-weight:700}

/* The search-or-write field sits above the lines it filters. */
.cs-own{margin:0 0 10px}
.cs-hint{margin:-4px 0 10px;font-size:var(--fs-sm);color:var(--sand-dim)}
.cs-hint[hidden]{display:none}

/* "Use line" inside the field; once used, the field shows it's set. */
.cs-own-box{position:relative;display:block}
.cs-own-box input{padding-right:112px}
.cs-own-use{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  padding:9px 14px;border:0;border-radius:var(--r-pill);
  background:var(--flare);color:#fff;font:700 var(--fs-sm)/1 var(--font);cursor:pointer;
}
.cs-own-use[hidden]{display:none}
.cs-own.is-set input{border-color:var(--flare);background:rgba(var(--flare-rgb),.08)}

/* Vibe as a dropdown: the chosen vibe's dot on the left, a chevron right. */
.cs-vibe-pick{position:relative;display:block;margin:4px 0 12px}
.cs-vibe-pick::before{
  content:'';position:absolute;left:16px;top:50%;margin-top:-5px;
  width:10px;height:10px;border-radius:50%;background:var(--vibe);pointer-events:none;
}
.cs-vibe-pick::after{
  content:'';position:absolute;right:18px;top:50%;margin-top:-6px;
  width:8px;height:8px;border-right:2px solid var(--sand-dim);border-bottom:2px solid var(--sand-dim);
  transform:rotate(45deg);pointer-events:none;
}
.cs-vibe-pick select{
  width:100%;-webkit-appearance:none;appearance:none;
  padding:14px 44px 14px 36px;border:1px solid var(--line);border-radius:14px;
  background:var(--ink-2);color:var(--cream);font:inherit;font-size:var(--fs);font-weight:600;cursor:pointer;
}

/* Clear (×) inside a field. Moves left when "Use line" is showing. */
.field-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(var(--cream-rgb),.10);
  color:var(--sand-dim);font-size:var(--fs);line-height:1;cursor:pointer;
}
.field-clear:hover{color:var(--cream)}
.field-clear[hidden]{display:none}
.cs-own-use:not([hidden]) + .field-clear{right:112px}
.cs-own-box input{padding-right:150px}


/* One size for the main text: menus, tabs, lists, fields, main buttons.
   Change --fs and they all move together. Small print stays smaller. */
.rail .rail-link,
.rail .rail-create,
.vibe-rail-item,
.vibe-rail-more,
.msg-tab,
.cs-pick,
.cs-own input,
.cs-vibe-pick select{font-size:var(--fs)}

/* Left rail: as tall as the screen, with the footer pushed to the bottom.
   On a short screen there is no spare room, so it just follows the menu. */
@media (min-width:901px){.rail{display:flex;flex-direction:column;height:calc(100vh - 76px)}}
.rail > .rail-foot{margin-top:auto}

/* Message notice: slides down from the top, tap to open the chat. */
.notice{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 12px);z-index:90;
  display:flex;align-items:center;gap:12px;
  width:min(420px, calc(100% - 24px));padding:10px 12px;
  border:1px solid var(--line);border-radius:16px;
  background:var(--ink);color:var(--cream);text-decoration:none;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  transform:translate(-50%, -140%);opacity:0;pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.notice.on{transform:translate(-50%, 0);opacity:1;pointer-events:auto}
.notice-av{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;background:var(--wine)}
.notice-thumb{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden}
.notice-av img,.notice-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.notice-text{flex:1;min-width:0;display:grid;gap:2px}
.notice-text strong{font-size:var(--fs-sm)}
.notice-text span{font-size:var(--fs-sm);color:var(--sand-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Phones, like desktop: the feed starts below the fixed header and each card fills what is left. */
@media (max-width:900px){
  body:has(#stream) .stream{margin-top:var(--head-h,71px);height:calc(100svh - var(--head-h,71px))}
  #stream .card.post{--post-media-top:0px;--post-card-h:calc(100svh - var(--head-h,71px));height:var(--post-card-h)}
}

/* ---- lightbox with the post's chat ---- */
.lb-stage{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.lb.has-chat{grid-template-columns:min(100dvh, 100vw - 320px) minmax(320px,1fr);grid-template-rows:minmax(0,1fr);place-items:stretch}
.lb.has-chat .lb-track > img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.lb.has-chat .lb-chat{display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:none;background:var(--ink-2);border-left:1px solid var(--line)}
.lb-chat .post-foot-stack{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;padding:16px;width:100%;max-width:560px;margin-inline:auto}
.lb-chat .post-quick-chat{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;gap:12px;align-content:start}
.lb-chat .post-quick-chat::-webkit-scrollbar{display:none}
@media (max-width:600px){
  .lb.has-chat{grid-template-columns:1fr;grid-template-rows:100vw minmax(0,1fr)}
}
.lb-chat::-webkit-scrollbar{display:none}
.lb-chat .post-flirt-form{position:sticky;bottom:0;margin-top:auto;background:var(--ink-2)}
.lb-up{right:18px;bottom:76px;rotate:90deg}
.lb-down{right:18px;bottom:18px;rotate:90deg}
@media (max-width:600px){
  .lb-up,.lb-down{display:none}
}
.lb video{max-width:94vw;max-height:86vh}
.lb.has-chat video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;background:#000}
.lb-text{width:100%;height:100%;background:var(--vibe)}
.card.post:not(.live-room):not(.private-room){cursor:pointer}
.lb-who{--post-avatar-h:52px;position:absolute;top:18px;left:18px;z-index:1}
.lb-who .post-identity{display:flex;align-items:center;gap:10px}

/* ---- composer: 4:5 crop ---- */
.thumb img{cursor:pointer}
.crop{z-index:90;background:rgba(var(--ink-rgb),.96);display:grid;place-content:center;justify-items:center;gap:16px}
.crop-frame{position:relative;width:min(90vw,420px,calc(100dvh - 160px));aspect-ratio:1;overflow:hidden;border-radius:18px;background:#000;touch-action:none;cursor:grab}
.crop-frame img{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;user-select:none}
.crop-zoom{width:min(90vw,420px,calc(100dvh - 160px))}
.crop-acts{display:flex;gap:12px}
.crop[hidden]{display:none}

/* Phones: one card per screen, so the picture takes its whole slot and
   the stored square is trimmed to it, whatever the screen's shape. */
@media (max-width:900px){
  .card.post .post-media .feed-live,
  .card.post .post-media .gal:not(.gal-1){width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}
}

/* Says the picture opens large, with the chat beside it. Pairs with the
   sound button in the opposite corner. */
.feed-expand{
  position:absolute;left:var(--pad);bottom:var(--pad);z-index:4;width:var(--post-control-w);height:var(--post-control-w);border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);cursor:pointer;
}

/* The part of the lightbox that moves on a drag, and the neighbour
   waiting just past its edge. */
.lb-track{position:absolute;inset:0;display:grid;place-items:center}
.lb-peek{position:absolute;left:0;width:100%;height:100%;background:#000 center/cover no-repeat}

/* ---- focus mode: the feed itself, one card per window ---- */
body.feed-focus{overflow:hidden}
body.feed-focus #stream{
  position:fixed;inset:0;z-index:80;margin:0;padding:0;
  height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;
  overscroll-behavior:contain;scrollbar-width:none;background:var(--ink);
}
body.feed-focus #stream::-webkit-scrollbar{display:none}
body.feed-focus #stream .card.post{
  height:100dvh;margin:0;border-radius:0;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.focus-close{
  position:fixed;top:18px;right:18px;z-index:81;width:46px;height:46px;
  border:0;border-radius:50%;background:var(--ink);color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:24px;line-height:1;cursor:pointer;
}
.focus-close[hidden]{display:none}

/* Desktop: picture on the left, chat on the right. */
@media (min-width:901px){
  body.feed-focus #stream .card.post{
    grid-template-columns:min(100dvh, 100vw - 400px) minmax(360px,1fr);
    grid-template-rows:100dvh;padding:0;
  }
  body.feed-focus #stream .card.post > *{grid-row:1}
  body.feed-focus #stream .card.post .post-media{grid-column:1;margin:0;height:100dvh}
  body.feed-focus #stream .card.post .post-foot-stack{grid-column:2;height:100dvh}
  body.feed-focus #stream .card.post > .post-identity{grid-column:1;align-self:start;justify-self:start;margin:24px}
  body.feed-focus #stream .card.post .post-rail{grid-column:1;align-self:start;justify-self:end;margin:24px}
}

/* Focus mode: the full chat scrolls inside the panel, newest at the
   bottom, the input fixed below it. */
body.feed-focus #stream .post-foot-stack{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* The post's line and the messages scroll as one conversation: the
   line is simply the first message, not a header. Few messages sit at
   the bottom, next to the input. */
body.feed-focus #stream .post-conversation-log{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;justify-content:flex-start}
body.feed-focus #stream .post-conversation-log::-webkit-scrollbar{display:none}
body.feed-focus #stream .post-conversation-log > :first-child{margin-top:auto}
body.feed-focus #stream .post-opener,
body.feed-focus #stream .post-quick-chat{flex:none;overflow:visible}
body.feed-focus #stream .post-quick-chat::-webkit-scrollbar{display:none}
@media (max-width:900px){
  body.feed-focus #stream .post-foot-stack{max-height:45dvh}
}

/* Focus mode: flat panel, flush picture, no expand button. */
body.feed-focus #stream .card.post{background:var(--ink-2)}
body.feed-focus #stream .feed-expand{display:none}
body.feed-focus #stream .post-media .post-photo-attachment,
body.feed-focus #stream .post-media .feed-reel,
body.feed-focus #stream .post-media .gal{border:0;border-radius:0;box-shadow:none}
@media (min-width:901px){
  body.feed-focus #stream .card.post > .post-identity{height:auto}
  body.feed-focus #stream .card.post .post-foot-stack{
    justify-content:flex-end;margin:0;padding:0 var(--pad) 24px;
    border-radius:0;background:none;box-shadow:none;
  }
  body.feed-focus #stream .card.post .post-foot-stack > *{width:100%;max-width:560px;margin-inline:auto}
}
/* Focus mode has room: the post's own line leads the conversation again. */
body.feed-focus #stream .card.post .post-foot-stack.has-conversation .post-opener{display:grid}

/* ---- emoji picker ---- */
.emoji-btn{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;background:none;color:var(--sand-dim);cursor:pointer;
}
.emoji-btn:hover{color:var(--flare)}
.emoji-pop{
  position:fixed;z-index:95;display:grid;grid-template-columns:repeat(6,40px);gap:4px;
  padding:8px;background:var(--ink);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.emoji-pop[hidden]{display:none}
.emoji-pop button{
  width:40px;height:40px;border:0;border-radius:10px;background:none;
  font-size:22px;line-height:1;cursor:pointer;
}
.emoji-pop button:hover{background:var(--ink-2)}
/* Touch devices have an emoji keyboard; the button is for desktop. */
@media (hover: none) and (pointer: coarse){
  .emoji-btn{display:none}
}
/* Outside the feed (lightbox): media fills its frame. */
.card.post .post-media .post-photo-attachment,
.card.post .post-media .feed-reel{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0 0 var(--post-media-radius) var(--post-media-radius)}
/* Feed: exact square, card as wide as the picture. */
body:not(.feed-focus) #stream .card.post .post-photo-attachment,
body:not(.feed-focus) #stream .card.post .post-media .feed-reel{width:min(100cqw,100cqh);height:auto;max-width:100%;max-height:100%;aspect-ratio:1;border:1px solid rgba(var(--cream-rgb),.14);border-radius:var(--post-media-radius)}
body:not(.feed-focus) #stream .card.post{--post-band-h:0px;--post-chat-h:180px;--post-media-share:max(300px, min(var(--col-w), var(--post-card-h) - var(--post-media-top) - var(--post-bottom-clear) - var(--post-chat-h)));max-width:min(100%, var(--post-media-share));margin-inline:auto}
body:not(.feed-focus) #stream .card.post > .post-identity{align-self:start;height:auto}
body:not(.feed-focus) #stream .card.post .post-photo-attachment,body:not(.feed-focus) #stream .card.post .post-media .feed-reel{width:min(100%, var(--post-media-share))}

/* Card: avatar lives on the rail; name and Follow only in the lightbox copy. */
.card.post > .post-identity .post-avatar,
.card.post > .post-identity .post-name > a,
.card.post > .post-identity .js-follow{display:none}
.card.post .post-rail .rail-avatar{--rail-av:calc(var(--post-control-w) + 6px);width:var(--rail-av);height:var(--rail-av);flex:0 0 var(--rail-av)}
@media (max-width:900px){body:not(.feed-focus) #stream .post-quick-bubble > p{font-size:22px}}
/* Phones: no picture floor. */
@media (max-width:900px){body:not(.feed-focus) #stream .card.post{--post-media-share:min(var(--col-w) * 1.25, var(--post-card-h) - var(--post-media-top) - var(--post-bottom-clear) - var(--post-chat-h))}}

/* Feed: her line and one button; the chat itself lives in focus mode. */
.post-cta{display:none}
body:not(.feed-focus) #stream .post-quick-chat,
body:not(.feed-focus) #stream .post-flirt-form{display:none}
body:not(.feed-focus) #stream .post-foot-stack.has-conversation .post-opener{display:grid}
body:not(.feed-focus) #stream .post-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:999px;background:var(--flare);color:#fff;font:inherit;font-weight:600;cursor:pointer}
body:not(.feed-focus) #stream .post-cta-dot{width:8px;height:8px;border-radius:50%;background:#fff}
/* Phones: the picture takes the spare height, square up to 4:5. */
@media (max-width:900px){body:not(.feed-focus) #stream .card.post .post-photo-attachment,body:not(.feed-focus) #stream .card.post .post-media .feed-reel{height:var(--post-media-share);aspect-ratio:auto}}