/* ===================================================================
   SideHang — design system
   Derived from Sidehang.dc.html (Claude Design)
   =================================================================== */
:root{
  /* MeatApp palette — 2026 retone: neutral near-black ground, one coral accent family
     (was warm brown #17120f + orange-tinted lines; moved off the muddy brown per design review rec 02) */
  --bg:#0e0b09;              /* neutral near-black */
  --bg-2:#151210;
  --panel:rgba(22,18,16,.62);
  --panel-left:rgba(19,16,14,.58);
  --topbar:rgba(16,12,10,.95);
  --line:rgba(255,255,255,.07);      /* neutral lines (were orange-tinted rgba(255,150,110,.09)) */
  --line-2:rgba(255,255,255,.12);
  --ink:#f4efe9;             /* warm off-white text on neutral */
  --ink-bright:#fdfbf8;
  --ink-soft:#d9cfc6;
  --muted:#a59a90;           /* warm grey (was tan #c2a08a) */
  --muted-2:#8f857b;         /* ~5:1 AA on the neutral ground */
  --muted-3:#b8aca2;
  --accent:#f2543d;          /* coral brand accent (was orange-red #f2543d) */
  --accent-2:#ff6f56;        /* coral gradient end (was orange #ff6f56) */
  --accent-soft:#ffb0a1;
  --accent-bg:rgba(242,84,61,.14);
  --accent-line:rgba(242,84,61,.5);
  --gold:#f2543d;            /* no separate gold — quality/verified use the accent */
  --gold-soft:#ffb0a1;
  --gold-bg:rgba(242,84,61,.14);
  --gold-line:rgba(242,84,61,.42);
  --header-h:64px;
  --footer-h:62px;
  /* single-family coral heat sweep */
  --heat:linear-gradient(100deg,#f2543d,#ff6f56);
  --heat-soft:radial-gradient(120% 120% at 50% 0%, rgba(255,111,86,.14), rgba(242,84,61,.04) 55%, transparent 75%);
  /* surfaces (tokenise the accreted dark fills) */
  /* lifted surface fills — derived from each theme's bg→ink so they adapt across dark/light/slay/cyber.
     (fixes the old self-referential --surface-1:var(--surface-1), which was invalid and computed to
     transparent, leaving every placeholder avatar/thumb/card with no fill.) */
  --surface-1:color-mix(in oklab, var(--bg), var(--ink) 7%);
  --surface-2:color-mix(in oklab, var(--bg), var(--ink) 13%);
  --surface-3:color-mix(in oklab, var(--bg), var(--ink) 20%);
  /* radius scale */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:999px;
  /* type scale */
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:32px;
  /* Type voices: Fredoka for the wordmark + headings ONLY; system stack for body/UI. */
  --display:'Fredoka','General Sans',system-ui,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;max-width:100%;overflow-x:hidden;overscroll-behavior:none;}
html{background:var(--bg);}   /* no pure-black gap can ever show behind the app */
body{
  margin:0;
  /* Pin the app to the visual viewport so it truly fills the screen in iOS standalone/PWA
     (with viewport-fit=cover this includes the safe areas — kills the dead band at the bottom). */
  position:fixed;
  inset:0;
  background:var(--heat-soft), var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:calc(16px * var(--fs,1));
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  /* native-app feel: no rubber-band, no tap flash, no auto text inflation, no long-press menu */
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-touch-callout:none;
}
/* chrome (bars, controls) shouldn't be selectable like a web page */
.topbar,.footer,.foot-item,.map-legend,.menu-dropdown,.rail-head{user-select:none;-webkit-user-select:none;}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
a{color:var(--accent);text-decoration:none;}

::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

@keyframes vsp-pulse{0%{transform:translate(-50%,-50%) scale(.6);opacity:.55}70%{transform:translate(-50%,-50%) scale(2.8);opacity:0}100%{opacity:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- App shell ---------------- */
:root{ --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;}   /* fill the whole screen in standalone */
/* extend the bars into the safe areas (notch / home indicator) so it reads as full-screen.
   box-sizing stays content-box, so --header-h/--footer-h remain the content height and the
   safe inset is added as padding on top — rails offset by the same total below. */
.footer{padding-bottom:var(--safe-bottom);box-sizing:content-box;}
.rail{top:calc(var(--header-h) + var(--safe-top));bottom:calc(var(--footer-h) + var(--safe-bottom));}
/* Belt-and-braces: paint the home-indicator strip at the very bottom of the viewport with the
   bar colour, so no grey system gap can ever show under the footer in iOS standalone/PWA. */
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:env(safe-area-inset-bottom,0px);
  background:var(--topbar);z-index:1650;pointer-events:none;}
[data-theme="light"] body::after{background:rgba(252,248,245,.98);}

/* ---------------- Top bar ---------------- */
/* padding-top carries the safe-area inset (status bar / notch) — must be set in the
   SAME shorthand or it gets reset to 0. position+z-index keep it (and the menu
   dropdown) above the map layer, incl. in iOS standalone PWA mode. */
.topbar{
  height:var(--header-h);flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;
  padding:var(--safe-top) 22px 0;box-sizing:content-box;
  position:relative;z-index:1800;
  border-bottom:1px solid var(--line-2);background:var(--topbar);
  backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,.26);
}
.brand{justify-self:start;display:flex;align-items:center;gap:11px;white-space:nowrap;}
.brand-emoji{width:46px;height:46px;flex:none;border-radius:26%;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;
  overflow:visible;font-size:calc(18px * var(--fs,1));line-height:1;}
.onboard-emoji{width:68px;height:68px;font-size:calc(32px * var(--fs,1));border-radius:24%;}
/* legacy diamond mark (kept for empty-state bullet) */
.brand-diamond{width:9px;height:9px;transform:rotate(45deg);background:var(--accent);
  box-shadow:0 0 14px rgba(242,84,61,.7);display:inline-block;}
.brand-diamond.small{width:6px;height:6px;box-shadow:none;}
.brand-name{font-family:var(--display);font-weight:700;font-size:calc(54px * var(--fs,1));line-height:1;letter-spacing:-.02em;color:var(--ink-bright);
  display:inline-flex;align-items:center;transform:translateY(-0.06em);
  text-shadow:0 0 18px rgba(242,84,61,.5);}
.brand-tld{color:var(--accent);}   /* the ".net" suffix on the wordmark */
.brand-tag{font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  color:#ffffff;text-shadow:0 0 10px rgba(242,84,61,.85);transition:opacity .45s ease;}

/* ---- header filters: THE app's single filter surface — When + Looking-for segs + Filters panel ---- */
.topbar-filters{justify-self:center;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;}
/* Filters live in the footer now — the header has NO visible filter control; the sheet folds out at every width */
.topbar-filters .tf-pill{display:none;}   /* higher specificity to beat the ≤880 inline-flex rule */
.tf-lbl-when,.tf-lbl-type{display:block;}
.topbar-filters .tf-body{display:none;position:absolute;top:100%;left:0;right:0;z-index:1900;flex-direction:column;
  align-items:stretch;gap:8px;background:#141110;border-bottom:1px solid var(--line-2);padding:12px 14px 16px;
  max-height:calc(100dvh - var(--header-h) - 20px);overflow:auto;box-shadow:0 18px 44px rgba(0,0,0,.5);}
.topbar-filters.expanded .tf-body{display:flex;}
.topbar-filters .tf-body .when-seg{width:100%;flex:none;}
.topbar-filters .tf-more{display:none;}
.topbar-filters .tf-more-wrap{position:static;display:block;}
.topbar-filters.expanded .tf-more-panel{display:block;position:static;width:auto;max-height:none;
  background:transparent;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
[data-theme="light"] .topbar-filters.expanded .tf-body{background:#fcf8f5;}
[data-theme="slay"] .topbar-filters.expanded .tf-body{background:#fff9fd;}
[data-theme="cyber"] .topbar-filters.expanded .tf-body{background:#070d09;}
.tf-lbl{flex:none;font-size:calc(12px * var(--fs,1));font-weight:600;letter-spacing:.01em;color:var(--muted-2);}
.tf-lbl .lbl-soft{text-transform:none;letter-spacing:0;}
.topbar-filters .when-seg{flex:none;min-width:0;}
/* Desktop header (>=881px): (1) size each When/Looking-for segment to its own label so the
   longest ones (Tomorrow / Groups) sit centred with even padding on BOTH sides, instead of
   overflowing a forced-equal 1/3 cell; (2) bump the filter fonts for readability. The font
   SCALES fluidly (clamp) so the cluster never overflows the header (which would clip Filters +
   the menu on narrow desktops): it keeps the original 12px where space is tight, up to 14px wide.
   The phone fold-out panel keeps the base flex:1 + smaller mobile fonts — desktop-header only. */
@media (min-width:881px){
  .topbar-filters .when-seg .seg{flex:0 0 auto;font-size:clamp(12px,1.2vw,14px);}
  .topbar-filters .tf-lbl{font-size:clamp(11px,1vw,12px);}
  .topbar-filters .tf-more,.topbar-filters .tf-pill{font-size:clamp(12.5px,1.05vw,13.5px);}
}
/* Phones: brand + menu keep their own auto columns (menu can NEVER be pushed off-screen); the
   filter cluster lives in a shrinkable middle column and the When seg scrolls only if the screen is
   genuinely tiny. Tablets/desktop (>620) keep the 1fr auto 1fr grid that screen-centres the cluster. */
@media (max-width:620px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;}
  .topbar-filters{justify-self:stretch;min-width:0;}
  .topbar-filters .when-seg{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  .topbar-filters .when-seg::-webkit-scrollbar{display:none;}
}
.tf-body{display:flex;align-items:center;gap:12px;min-width:0;}
.tf-more-wrap{position:relative;flex:none;display:flex;align-items:center;}
.tf-more,.tf-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink);font-size:calc(12.5px * var(--fs,1));font-weight:600;
  transition:border-color .2s,background .2s;}
.tf-more:hover,.tf-pill:hover{border-color:var(--accent-line);}
.tf-caret{font-size:calc(10px * var(--fs,1));opacity:.7;}
.tf-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:calc(11px * var(--fs,1));font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.tf-count[hidden]{display:none;}
.tf-more-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:320px;max-height:72vh;overflow:auto;
  background:#141110;border:1px solid var(--line-2);border-radius:14px;padding:12px 14px 14px;z-index:1900;
  box-shadow:0 18px 44px rgba(0,0,0,.5);}
.tf-more-panel.open{display:block;}
.tf-more-panel .filter-label:first-child{margin-top:0;}
.tf-more-panel .chip-row{margin-bottom:20px;flex-wrap:wrap;}
.tf-actions{display:flex;gap:8px;align-items:center;}
/* width:auto overrides the buttons' base width:100% — with both at 100% the flex row starves
   the primary down to a sliver (the "Find guys becomes 'in/uy'" QA blocker) */
.tf-actions .btn-primary{flex:1 1 auto;width:auto;}
.tf-actions .btn-ghost{flex:none;width:auto;padding:0 16px;}
/* phone trigger: round icon button with the count badge riding its corner */
.tf-pill{display:none;position:relative;width:38px;height:38px;flex:none;padding:0;border-radius:50%;justify-content:center;}
.tf-pill .tf-count{position:absolute;top:-5px;right:-6px;}
.tf-pill-sum{display:none;}
/* on the tightest phones the When strip needs the room — show just the Looking-for type, drop the radius/role detail */
@media (max-width:520px){ .tf-pill .tps-more{display:none;} }
@media (max-width:880px){
  .topbar-filters{gap:8px;}
  .tf-lbl-when{display:block;}   /* When now lives inside the Filters sheet — label it there */
  /* rec 07: the phone trigger is a summary chip of the current filters, not a bare icon */
  .tf-pill{display:inline-flex;flex:none;width:auto;height:auto;min-width:max-content;padding:8px 12px;border-radius:9px;justify-content:center;max-width:56vw;overflow:hidden;}
  .tf-pill svg{display:none;}
  .tf-pill .tf-count{position:static;margin-left:2px;}
  .tf-pill-sum{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12.5px * var(--fs,1));font-weight:600;color:var(--ink);}
  /* the whole filter set becomes one panel that folds out under the topbar */
  .tf-body{display:none;position:absolute;top:100%;left:0;right:0;z-index:1900;flex-direction:column;align-items:stretch;gap:8px;
    background:#141110;border-bottom:1px solid var(--line-2);padding:12px 14px 16px;
    max-height:calc(100dvh - var(--header-h) - var(--footer-h) - 20px);overflow:auto;
    box-shadow:0 18px 44px rgba(0,0,0,.5);}
  [data-theme="light"] .topbar-filters.expanded .tf-body{background:#fcf8f5;}
  [data-theme="slay"] .topbar-filters.expanded .tf-body{background:#fff9fd;}
  [data-theme="cyber"] .topbar-filters.expanded .tf-body{background:#070d09;}
  .topbar-filters.expanded .tf-body{display:flex;}
  .tf-lbl{font-size:calc(12px * var(--fs,1));letter-spacing:.01em;margin:4px 0 0;}
  .tf-body .when-seg{width:100%;flex:none;}
  .tf-more{display:none;}
  .tf-more-wrap{position:static;display:block;}
  /* high specificity on purpose: must beat the later per-theme .tf-more-panel backgrounds */
  .topbar-filters.expanded .tf-more-panel,
  [data-theme] .topbar-filters.expanded .tf-more-panel{display:block;position:static;width:auto;max-height:none;
    background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* map recenter control + the visible interact-radius ring */
.map-recenter{position:absolute;right:14px;bottom:20px;z-index:600;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--topbar);border:1px solid var(--line-2);
  color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer;transition:border-color .15s,color .15s;}
.map-recenter:hover{border-color:var(--accent-line);color:var(--accent);}
.range-circle{stroke:var(--accent);stroke-opacity:.35;stroke-width:1.5;fill:var(--accent);fill-opacity:.07;pointer-events:none;}

.topbar-right{justify-self:end;display:flex;align-items:center;gap:16px;}
.topbar-host{padding:9px 15px;border-radius:999px;background:var(--heat);color:#fff;font-weight:600;
  font-size:calc(12.5px * var(--fs,1));letter-spacing:.02em;box-shadow:0 8px 22px rgba(242,84,61,.32);transition:filter .15s,transform .05s;}
.topbar-host:hover{filter:brightness(1.07);}
.topbar-host:active{transform:translateY(1px);}
.topbar-help{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  color:var(--ink-soft);font-size:calc(15px * var(--fs,1));display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;}
.topbar-help:hover{border-color:var(--accent-line);color:var(--accent);}

/* combined header menu (Host a night + How it works) */
.menu-wrap{position:relative;display:flex;}
.topbar-menu{width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);font-size:calc(19px * var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;}
.topbar-menu:hover{border-color:var(--accent-line);background:rgba(242,84,61,.1);}
.menu-sep{height:1px;background:var(--line);margin:6px 4px;}
.menu-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:188px;background:#141110;
  border:1px solid var(--line-2);border-radius:13px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:none;z-index:1600;}
.menu-dropdown.open{display:block;}
.menu-item{display:block;width:100%;text-align:left;padding:11px 13px;border-radius:9px;font-size:calc(13.5px * var(--fs,1));
  color:var(--ink);transition:background .12s;}
.menu-item:hover{background:rgba(255,255,255,.06);}
.visible-pill{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(242,84,61,.28);background:rgba(242,84,61,.08);transition:opacity .2s;}
.visible-pill.off{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03);opacity:.7;}
.visible-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(242,84,61,.8);}
.visible-pill.off .visible-dot{background:var(--muted-2);box-shadow:none;}
.visible-label{font-size:calc(12px * var(--fs,1));letter-spacing:.04em;color:#ffd9cf;}
.visible-pill.off .visible-label{color:var(--muted);}
.avatar{width:38px;height:38px;border-radius:50%;background:#1c1815;border:1px solid var(--accent-line);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:calc(17px * var(--fs,1));color:#e7d9da;}

/* ---------------- Body / layout: full-screen map + slide-over panels ---------------- */
.body{flex:1;position:relative;min-height:0;}

/* all rails are fixed slide-over panels (filters left, detail/chats right) */
.rail{position:fixed;top:var(--header-h);bottom:calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));z-index:1500;
  background:#100d0b;min-height:0;display:flex;flex-direction:column;
  transition:transform .28s ease;box-shadow:0 0 60px rgba(0,0,0,.55);}
.rail-right,.chats-rail{right:0;border-left:1px solid var(--line);transform:translateX(106%);}
.rail-right{width:min(460px,94vw);}
.chats-rail{width:min(660px,96vw);}   /* chat gets the most room — occupies most of a tablet screen */
.rail-right.open,.chats-rail.open{transform:none;}
/* Dimming scrim behind an open panel (z 1450: above the home backdrop at 1400, below the panels at 1500) */
.rail-scrim{position:fixed;inset:0;z-index:1450;background:rgba(6,3,6,.58);opacity:0;pointer-events:none;
  transition:opacity .28s ease;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);}
.rail-scrim.show{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){.rail-scrim{transition:none;}}
.rail-scroll{padding:18px;overflow:auto;}
.rail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.rail-title{font-family:var(--display);font-weight:700;font-size:calc(18px * var(--fs,1));color:var(--ink-bright);}
.rail-x{font-size:calc(22px * var(--fs,1));line-height:1;color:var(--muted);width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.rail-x:hover{color:var(--ink);}


/* ---------------- Footer ---------------- */
.footer{flex:none;height:var(--footer-h);display:flex;align-items:stretch;position:relative;
  background:var(--topbar);border-top:1px solid var(--line-2);z-index:1700;
  backdrop-filter:blur(10px);box-shadow:0 -2px 12px rgba(0,0,0,.26);}
.foot-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;color:var(--muted-3);font-size:calc(12px * var(--fs,1));font-weight:600;transition:color .15s;}
.foot-item.active{color:var(--accent);}
.foot-badge{position:absolute;top:6px;left:50%;margin-left:3px;min-width:16px;height:16px;padding:0 4px;
  box-sizing:border-box;border-radius:9px;background:var(--accent);color:#fff;font-size:calc(10px * var(--fs,1));font-weight:800;
  line-height:16px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.foot-ico{width:20px;height:20px;}
.fi-map{border-radius:50% 50% 50% 3px;transform:rotate(45deg);background:currentColor;}
.fi-filter{border:0;background:currentColor;
  clip-path:polygon(8% 15%, 92% 15%, 58% 50%, 58% 90%, 42% 90%, 42% 50%);}   /* funnel */
.fi-home{background:currentColor;clip-path:polygon(50% 0%, 100% 42%, 84% 42%, 84% 100%, 16% 100%, 16% 42%, 0% 42%);}  /* house */
/* Host icon: a plain + (the old accent-puck styling was scoped to the removed .foot-host) */
.fi-host{position:relative;background:none;}
.fi-host::before,.fi-host::after{content:"";position:absolute;background:currentColor;border-radius:2px;}
.fi-host::before{left:9px;top:1px;width:2px;height:18px;}
.fi-host::after{left:1px;top:9px;width:18px;height:2px;}
.fi-filter{background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:18px 2px,12px 2px,6px 2px;background-position:center 4px,center 9px,center 14px;background-repeat:no-repeat;}
/* You icon: when signed in, the circle becomes the member's avatar */
.fi-you.has-pic{border:0;background-size:cover;background-position:center;}
.fi-chat{background:currentColor;border-radius:8px 8px 8px 2px;}   /* solid speech bubble, matching the other footer icons */
.fi-you{border:1.6px solid currentColor;border-radius:50%;}
.fi-browse{position:relative;background:none;}
.fi-browse::before{content:"";position:absolute;left:2px;top:2px;width:6px;height:6px;border-radius:2px;background:currentColor;
  box-shadow:10px 0 currentColor,0 10px currentColor,10px 10px currentColor;}
/* Host is the primary action — give it an accent puck that stands out from the rest */
.foot-host{color:#fff;}
.foot-host .fi-host{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(100deg,var(--accent),#cb4a2c);color:#fff;font-size:calc(21px * var(--fs,1));font-weight:600;line-height:1;
  box-shadow:0 4px 14px rgba(242,84,61,.45);margin-top:-2px;}
.foot-host.active{color:#fff;}

/* floating close on the detail slide-over */
.rail-x-float{position:absolute;top:12px;right:12px;z-index:6;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:calc(20px * var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);}
.rail-x-float:hover{background:rgba(0,0,0,.7);}

/* chats list */
.chat-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.015);margin-bottom:9px;transition:border-color .15s,background .15s;}
.chat-row:hover{border-color:rgba(255,255,255,.14);}
.chat-av.online{box-shadow:0 0 0 2px rgba(242,84,61,.7);}
.chat-row-body{min-width:0;flex:1;}
.chat-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.chat-row-name{font-size:calc(14.5px * var(--fs,1));color:var(--ink-bright);font-weight:600;}
.chat-row-when{font-size:calc(12px * var(--fs,1));color:var(--muted-2);flex:none;}
.chat-row-last{font-size:calc(12.5px * var(--fs,1));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.chat-row-ctx{font-size:calc(12px * var(--fs,1));color:var(--accent);letter-spacing:.04em;margin-top:4px;}
.chat-back{font-size:calc(24px * var(--fs,1));line-height:1;color:var(--ink-soft);width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
/* invisibly expand the small circular badge buttons to a ~44px tap target (keeps their visual size) */
.rail-x-float::after,.pe-photo-x::after,.ev-pic-x::after{content:"";position:absolute;inset:-11px;}

.filter-label{font-size:calc(12px * var(--fs,1));letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}

.segmented{display:flex;padding:4px;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);margin-bottom:22px;}
.seg{flex:1;text-align:center;padding:8px;font-size:calc(12.5px * var(--fs,1));letter-spacing:.03em;color:var(--muted);border-radius:8px;}
.seg.active{color:#f3eae9;background:#1f191b;box-shadow:0 2px 10px rgba(0,0,0,.4);}

.range-value{font-family:var(--sans);font-size:calc(22px * var(--fs,1));color:#ece6e3;margin-bottom:2px;}
.range-unit{font-size:calc(13px * var(--fs,1));color:var(--muted);}
.range{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;margin:16px 6px 24px;}
.range-fill{position:absolute;left:10%;right:42%;top:0;bottom:0;background:var(--accent);border-radius:2px;}
.range-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#f3eae9;
  transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.6);}
.range-knob-a{left:10%;}
.range-knob-b{left:58%;}

.chip-row{display:flex;gap:8px;margin-bottom:24px;}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.chip{padding:9px 0;flex:1;text-align:center;border-radius:9px;font-size:calc(12.5px * var(--fs,1));
  border:1px solid var(--line-2);color:#b9b1ae;background:rgba(255,255,255,.02);transition:all .15s;}
.chip-wrap .chip{flex:none;padding:7px 13px;border-radius:999px;}
.chip.active{border-color:var(--accent-line);color:#f0d8dc;background:var(--accent-bg);}
.chip:hover{border-color:rgba(255,255,255,.2);}

.nearby-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  padding-top:4px;border-top:1px solid var(--line);}
.nearby-count{margin-bottom:0;}
.nearby-sort{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.nearby-list{display:flex;flex-direction:column;gap:9px;padding-bottom:24px;}

.nearby-item{display:flex;gap:12px;padding:11px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.015);cursor:pointer;transition:border-color .15s,background .15s;}
.nearby-item:hover{border-color:rgba(255,255,255,.14);}
.nearby-item.selected{border-color:var(--accent-line);
  background:linear-gradient(180deg,rgba(242,84,61,.08),rgba(242,84,61,.02));}
.nearby-thumb{width:46px;height:46px;flex:none;border-radius:11px;background-color:#171115;
  background-image:repeating-linear-gradient(45deg,transparent 0 7px,rgba(255,255,255,.04) 7px 14px);}
.nearby-item.selected .nearby-thumb{background-image:repeating-linear-gradient(45deg,transparent 0 7px,rgba(242,84,61,.1) 7px 14px);}
.nearby-body{min-width:0;flex:1;}
.nearby-row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.nearby-title{font-size:calc(14px * var(--fs,1));color:var(--ink-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nearby-dist{font-size:calc(12px * var(--fs,1));color:var(--muted);flex:none;}
.nearby-item.selected .nearby-dist{color:var(--accent);}
.nearby-meta{font-size:calc(12px * var(--fs,1));color:var(--muted);margin:3px 0 7px;}
.nearby-going{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.avatar-stack{display:flex;align-items:center;}
.mini-av{width:20px;height:20px;border-radius:50%;background:var(--surface-2);border:1px solid var(--bg);
  font-size:calc(10px * var(--fs,1));display:flex;align-items:center;justify-content:center;color:#cfc7c4;}
.mini-av+.mini-av{margin-left:-6px;}

/* ---------------- People mode ---------------- */
.person-dot{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(18px * var(--fs,1));color:#f7edf0;}
.person-dot.pic{background-size:cover;background-position:center;color:transparent;border:2px solid rgba(255,255,255,.55);}
.person-dot.online{box-shadow:0 0 0 2px rgba(242,84,61,.7);border-color:transparent;}
.person-dot.sel{box-shadow:0 0 0 3px var(--accent),0 0 16px rgba(242,84,61,.6);}
.person-dot.list{width:46px;height:46px;flex:none;font-size:calc(17px * var(--fs,1));}
.person-item{align-items:center;}
.open-pill{display:inline-block;margin-top:7px;padding:4px 11px;border-radius:999px;font-size:calc(12px * var(--fs,1));font-weight:600;
  border:1px solid var(--accent-line);color:var(--accent-soft);background:var(--accent-bg);}
.open-pill.open-host{border-color:rgba(242,84,61,.45);color:#ffd9cf;background:rgba(242,84,61,.1);}
.open-pill.open-anything{border-color:rgba(242,84,61,.5);color:#ffd0b0;background:rgba(242,84,61,.12);}

.you-status{padding:13px;border-radius:14px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(242,84,61,.07),rgba(255,255,255,.015));margin-bottom:16px;}
.you-vis{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-size:calc(13px * var(--fs,1));font-weight:600;
  color:var(--gold);line-height:1.3;}
.you-vis .you-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold);}
.you-vis.off{color:var(--muted);}
.you-vis.off .you-dot{background:var(--muted-2);box-shadow:none;}
.you-open{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  font-size:calc(12px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
.open-chips{display:flex;gap:6px;flex-wrap:wrap;}
.open-chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);font-size:calc(12px * var(--fs,1));
  color:var(--ink-soft);letter-spacing:0;text-transform:none;transition:all .15s;}
.open-chip.active{border-color:var(--accent-line);color:#fff;background:var(--accent-bg);}

.btn-block{width:100%;margin-top:16px;height:44px;border-radius:11px;border:1px solid rgba(255,90,90,.32);
  color:#ff9a9a;background:rgba(255,90,90,.07);font-size:calc(12.5px * var(--fs,1));font-weight:600;transition:background .15s;}
.btn-block:hover{background:rgba(255,90,90,.14);}

/* ---------------- Map ---------------- */
.map-wrap{position:absolute;inset:0;overflow:hidden;background:var(--bg-2);}
#map{position:absolute;inset:0;background:var(--bg-2);}
.leaflet-container{background:var(--bg-2);font-family:var(--sans);}
.leaflet-control-zoom{border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important;overflow:hidden;
  box-shadow:none!important;}
.leaflet-control-zoom a{background:rgba(16,13,14,.85)!important;color:var(--ink-soft)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;}
.leaflet-control-zoom a:hover{background:rgba(40,30,33,.9)!important;}
.leaflet-control-attribution{background:rgba(12,10,11,.7)!important;color:var(--muted-2)!important;}
.leaflet-control-attribution a{color:var(--muted)!important;}

/* custom markers */
.pin{width:36px;height:36px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);
  background:var(--heat);box-shadow:0 0 0 5px rgba(242,84,61,.18),0 0 22px rgba(242,84,61,.55),0 12px 26px rgba(242,84,61,.4);
  display:flex;align-items:center;justify-content:center;}
.pin .pin-core{width:11px;height:11px;border-radius:50%;background:#fff;transform:rotate(-45deg);}
.pin.dim{width:26px;height:26px;background:rgba(20,16,18,.95);border:1.5px solid var(--accent);
  box-shadow:0 8px 18px rgba(0,0,0,.5);}
.pin.dim .pin-core{display:none;}
/* event pins — house-shaped (cover photo inside a framed house) so they read
   differently from the circular people dots */
.house-pin{position:relative;width:100%;height:100%;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55));cursor:pointer;}
.house-pin::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.62);
  clip-path:polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%);}
.house-pin .ph{position:absolute;inset:2.5px;background-color:var(--surface-1);background-size:cover;background-position:center;
  clip-path:polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%);}
.house-pin.nopic .ph{background:var(--heat);}
.house-pin.far{opacity:.42;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}   /* other areas: view-only */
.person-dot.far{opacity:.42;}
.house-pin.sel::before{background:var(--accent);}
.house-pin.sel{filter:drop-shadow(0 0 9px rgba(242,84,61,.65)) drop-shadow(0 6px 14px rgba(0,0,0,.5));}
.you-marker{position:relative;width:14px;height:14px;}
.you-marker .ring{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;
  background:rgba(242,84,61,.4);animation:vsp-pulse 2.8s ease-out infinite;}
.you-marker .dot{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2px solid var(--bg-2);transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(242,84,61,.8);}
.leaflet-marker-icon.sh-icon{background:none;border:none;}

/* cluster styling */
.marker-cluster div{background:rgba(242,84,61,.92)!important;color:#fff!important;font-family:var(--sans)!important;
  font-size:calc(17px * var(--fs,1))!important;font-weight:700!important;box-shadow:0 0 0 5px rgba(242,84,61,.18);}
.marker-cluster{background:rgba(242,84,61,.3)!important;}

.map-legend{position:absolute;left:18px;bottom:18px;display:flex;gap:16px;padding:9px 14px;border-radius:11px;
  border:1px solid rgba(255,255,255,.08);background:rgba(16,13,14,.82);font-size:calc(12px * var(--fs,1));color:var(--muted-3);z-index:500;}
.legend-item{display:flex;align-items:center;gap:7px;}
.legend-pin{width:13px;height:13px;background:var(--accent);clip-path:polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%);}
.legend-person{width:11px;height:11px;border-radius:50%;background:var(--surface-1);border:1px solid rgba(255,255,255,.2);}
.legend-you{width:11px;height:11px;border-radius:50%;background:var(--gold);}

/* popups */
.leaflet-popup-content-wrapper{background:rgba(18,14,16,.96);color:var(--ink);border:1px solid var(--accent-line);
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.leaflet-popup-tip{background:rgba(18,14,16,.96);}
.leaflet-popup-content{margin:12px 14px;font-size:calc(13px * var(--fs,1));}
.popup-title{font-family:var(--sans);font-size:calc(18px * var(--fs,1));color:var(--ink-bright);}
.popup-meta{color:var(--accent);font-size:calc(12px * var(--fs,1));letter-spacing:.12em;text-transform:uppercase;margin-top:4px;}
/* screen-polish D: legible session-pin card (host · time · area · going · spots-left) */
.session-card .pc-host{padding:0 13px;font-size:calc(12.5px * var(--fs,1));color:var(--ink-soft);margin-top:3px;}
.pc-vchk{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#4bb58a;color:#0e0b09;font-size:calc(8px * var(--fs,1));font-weight:800;vertical-align:middle;}
.session-card .pc-where{padding:0 13px;font-size:calc(12px * var(--fs,1));color:var(--muted-2);margin-top:4px;}
.session-card .pc-going{display:flex;align-items:center;gap:8px;padding:0 13px;margin:9px 0 2px;}
.pc-avs{display:inline-flex;}
.pc-av{width:22px;height:22px;border-radius:50%;background:var(--surface-3);border:2px solid var(--panel);margin-left:-7px;display:inline-flex;align-items:center;justify-content:center;font-size:calc(10px * var(--fs,1));font-weight:700;color:var(--ink);}
.pc-av:first-child{margin-left:0;}
.session-card .pc-count{font-size:calc(12px * var(--fs,1));color:var(--muted-3);font-weight:600;}
/* event preview card inside the popup */
.ev-popup .leaflet-popup-content{margin:0;width:auto!important;}
.popup-card{width:228px;}
.popup-thumb{height:104px;margin:-1px -1px 10px;border-radius:11px 11px 0 0;background-size:cover;background-position:center;}
.popup-card .popup-title{padding:0 13px;}
.popup-card .popup-meta{padding:0 13px;}
.popup-view{display:block;width:calc(100% - 26px);margin:11px 13px 13px;height:38px;border:none;border-radius:10px;
  background:linear-gradient(100deg,var(--accent),#cb4a2c);color:#fff;font-family:var(--sans);font-weight:700;
  font-size:calc(13px * var(--fs,1));cursor:pointer;}
.popup-view:hover{filter:brightness(1.06);}
.popup-far{margin:11px 13px 13px;font-size:calc(12px * var(--fs,1));color:var(--muted-2);border-top:1px solid var(--line);padding-top:10px;}
/* Map session pin → a bottom sheet (brief's Map & sessions card): 74px cover thumbnail beside the title, going/spots split */
.modal-overlay.sheet-overlay{align-items:flex-end;}   /* beat the base .modal-overlay centering so it anchors to the bottom */
.session-sheet{max-width:min(460px,calc(100vw - 16px));border-radius:20px 20px 0 0;padding:8px 0 max(18px,env(safe-area-inset-bottom,0px));animation:sheetUp .2s ease;}
@keyframes sheetUp{from{transform:translateY(28px);opacity:.55;}to{transform:none;opacity:1;}}
.sheet-handle{width:38px;height:4px;border-radius:2px;background:var(--line-2);margin:2px auto 14px;}
.session-sheet .modal-close{top:12px;}
.session-card{padding:0 18px;}
.sc-head{display:flex;gap:12px;align-items:flex-start;}
.sc-cover{width:74px;height:74px;border-radius:14px;background-size:cover;background-position:center;flex:none;}
.sc-cover-empty{background:var(--surface-3);}
.sc-headtext{min-width:0;flex:1;padding-top:1px;}
.session-card .popup-title{padding:0;font-size:calc(18px * var(--fs,1));line-height:1.2;}
.session-card .pc-host{padding:0;margin-top:4px;}
.session-card .pc-where{padding:0;margin-top:4px;}
.session-card .pc-going{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;margin:15px 0 2px;}
.pc-going-left{display:inline-flex;align-items:center;gap:8px;}
.pc-left{font-size:calc(12px * var(--fs,1));color:var(--muted-2);font-weight:600;white-space:nowrap;}
.session-card .popup-view{width:100%;margin:13px 0 2px;}
.session-card .popup-far{margin:13px 0 2px;border-top:0;padding-top:0;}

/* on-map name label — shown only for the selected event pin */
.leaflet-tooltip.pin-tip{background:rgba(18,12,16,.96);color:var(--ink-bright);border:1px solid var(--accent-line);
  border-radius:9px;font-family:var(--sans);font-size:calc(12px * var(--fs,1));font-weight:600;padding:5px 11px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.55);}
.leaflet-tooltip.pin-tip::before{display:none;}   /* drop the default arrow */

/* ---------------- Right rail panels ---------------- */
.panel{overflow:auto;display:flex;flex-direction:column;min-height:0;height:100%;animation:fade-up .25s ease;}

/* event detail */
.ev-cover{position:relative;height:clamp(200px,42vh,320px);flex:none;display:flex;align-items:flex-end;padding:18px;
  background-color:#141013;background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(242,84,61,.09) 10px 20px);}
.ev-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,10,11,.92));}
.ev-cover-inner{position:relative;z-index:1;}
.ev-kicker{font-size:calc(12px * var(--fs,1));letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.ev-title{font-family:var(--display);font-size:calc(29px * var(--fs,1));font-weight:700;line-height:1.04;letter-spacing:-.01em;color:var(--ink-bright);}
.ev-body{padding:20px;display:flex;flex-direction:column;gap:20px;}
.stat-row{display:flex;gap:10px;}
.stat{flex:1;padding:12px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.015);}
.stat-k{font-size:calc(12px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px;}
.stat-v{font-size:calc(15px * var(--fs,1));font-weight:600;color:var(--ink-bright);}
.stat-of{font-size:calc(12px * var(--fs,1));font-weight:400;color:var(--muted-2);}
.stat-x{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 2px;}
.join-how{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:calc(12.5px * var(--fs,1));line-height:1.5;color:var(--ink-soft);
  background:linear-gradient(180deg,rgba(255,111,86,.10),rgba(242,84,61,.05));border:1px solid var(--accent-line);}
.join-how strong{color:var(--accent-soft);}
.ev-desc{font-size:calc(13.5px * var(--fs,1));line-height:1.6;color:var(--ink-soft);}
.host-card{display:flex;align-items:center;gap:13px;padding:14px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);cursor:pointer;}
.host-card:hover{border-color:rgba(255,255,255,.14);}
.host-av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--surface-1);border:1px solid rgba(242,84,61,.4);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:calc(21px * var(--fs,1));color:#e7d9da;}
.host-info{flex:1;min-width:0;}
.host-name-row{display:flex;align-items:center;gap:7px;}
.host-name{font-size:calc(15px * var(--fs,1));color:var(--ink-bright);}
.verified{width:14px;height:14px;border-radius:50%;background:rgba(242,84,61,.18);color:var(--accent);
  font-size:calc(9px * var(--fs,1));display:flex;align-items:center;justify-content:center;}
.host-sub2{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:2px;}
.host-view{font-size:calc(12px * var(--fs,1));color:var(--accent);}
.section-label{font-size:calc(12px * var(--fs,1));letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}
.going-row{display:flex;align-items:center;}
.going-av{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:2px solid #14100f;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:calc(15px * var(--fs,1));color:#d9cfcd;}
.going-av+.going-av{margin-left:-11px;}
.going-av.more{background:rgba(242,84,61,.14);font-family:var(--sans);font-size:calc(12px * var(--fs,1));color:var(--accent-soft);}
.going-left{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-left:14px;}
.ev-actions{margin-top:auto;padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:11px;
  background:rgba(12,10,11,.7);}
.icon-btn{width:50px;height:48px;flex:none;border-radius:11px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:calc(18px * var(--fs,1));transition:all .15s;}
.icon-btn:hover{border-color:var(--accent-line);color:var(--accent);}
.icon-btn.liked{color:var(--accent);border-color:var(--accent-line);background:var(--accent-bg);}
.btn-primary{flex:1;height:48px;border-radius:11px;background:var(--heat);color:#fff;font-weight:600;
  font-size:calc(14.5px * var(--fs,1));letter-spacing:.02em;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(242,84,61,.3);transition:filter .15s,transform .05s;width:100%;}
.btn-primary:hover{filter:brightness(1.07);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary.joined{background:var(--accent-bg);border:1px solid var(--accent-line);color:var(--accent-soft);}

/* profile panel */
.profile{overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px;}
.profile-top{display:flex;flex-direction:column;align-items:center;text-align:center;}
.profile-av{width:96px;height:96px;border-radius:50%;border:1px solid rgba(242,84,61,.4);
  background-color:#1a1418;background-image:repeating-linear-gradient(45deg,transparent 0 9px,rgba(242,84,61,.1) 9px 18px);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:calc(34px * var(--fs,1));color:#e7d9da;}
.profile-name{font-family:var(--display);font-weight:700;font-size:calc(25px * var(--fs,1));letter-spacing:-.01em;color:var(--ink-bright);margin-top:14px;}
.profile-sub{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-top:3px;}
.profile-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(242,84,61,.4);background:rgba(242,84,61,.1);font-size:calc(12px * var(--fs,1));color:#e6c0c7;}
.profile-bio{font-size:calc(14px * var(--fs,1));line-height:1.65;color:#a59c99;text-align:center;}
.quote-card{padding:16px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.02);}
.quote-k{font-size:calc(12px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px;}
.quote-v{font-family:var(--sans);font-size:calc(18px * var(--fs,1));line-height:1.4;color:#e7e1de;}
.tag-soft{padding:7px 13px;border-radius:999px;font-size:calc(12.5px * var(--fs,1));border:1px solid var(--line-2);color:var(--ink-soft);}
.back-link{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-bottom:4px;display:inline-flex;gap:6px;align-items:center;}

/* chat panel */
.chat{display:flex;flex-direction:column;min-height:0;height:100%;}
.chat-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.chat-av{width:42px;height:42px;border-radius:50%;background:var(--surface-1);border:1px solid rgba(242,84,61,.4);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:calc(18px * var(--fs,1));color:#e7d9da;}
.chat-name{font-size:calc(14.5px * var(--fs,1));color:var(--ink-bright);}
.chat-status{font-size:calc(12px * var(--fs,1));color:#4bb58a;}
.chat-ctx{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.chat-log{flex:1;overflow:auto;padding:20px 18px;display:flex;flex-direction:column;gap:13px;}
.chat-divider{display:flex;align-items:center;gap:12px;margin:2px 0 8px;}
.chat-divider span{font-size:calc(12px * var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.chat-divider i{flex:1;height:1px;background:rgba(255,255,255,.08);}
.bubble{max-width:78%;padding:11px 14px;font-size:calc(13.5px * var(--fs,1));line-height:1.5;}
.bubble.them{align-self:flex-start;border-radius:15px 15px 15px 4px;background:rgba(255,255,255,.05);color:#ddd5d2;}
.bubble.me{align-self:flex-end;border-radius:15px 15px 4px 15px;background:rgba(242,84,61,.18);
  border:1px solid rgba(242,84,61,.3);color:#f3e6e8;}
/* per-message meta: timestamp + read receipt */
.bubble-meta{display:block;margin-top:4px;font-size:calc(12px * var(--fs,1));opacity:.55;text-align:right;}
.bubble.them .bubble-meta{text-align:left;}
.bubble-receipt{margin-left:5px;font-weight:700;letter-spacing:-1px;}
.bubble-receipt.read{color:#4ea1ff;opacity:1;}
/* day separator between message groups */
.chat-daysep{align-self:center;margin:10px 0 6px;font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-2);opacity:.8;}
/* "typing…" animated dots */
.chat-typing{align-self:flex-start;display:flex;gap:4px;align-items:center;padding:10px 14px;margin-top:2px;
  border-radius:15px 15px 15px 4px;background:rgba(255,255,255,.05);}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;
  animation:typingdot 1.2s infinite;}
.chat-typing i:nth-child(2){animation-delay:.2s;}
.chat-typing i:nth-child(3){animation-delay:.4s;}
@keyframes typingdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:.95;transform:translateY(-3px)}}
/* inline quick-reply chips — sit just above any composer; tap fills the box (you always hit send) */
.qr-row{flex:none;display:flex;gap:7px;padding:9px 16px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.qr-row::-webkit-scrollbar{display:none;}
.qr-row:empty{display:none;}
/* quick-reply suggestions: fainter + a dashed outline so they read as SUGGESTIONS, not real sent/received messages */
.qr-chip{flex:none;padding:7px 13px;border-radius:8px;font-size:calc(13px * var(--fs,1));font-weight:500;white-space:nowrap;cursor:pointer;
  color:var(--muted-2);background:transparent;border:1px dashed var(--line-2);transition:background .12s,border-color .12s,color .12s;}
.qr-chip:hover{color:var(--ink);border-color:var(--accent-line);border-style:solid;background:rgba(255,255,255,.07);}
.qr-chip:active{transform:translateY(1px);}
[data-theme="light"] .qr-chip,[data-theme="slay"] .qr-chip{color:var(--muted-2);}
[data-theme="light"] .qr-chip:hover,[data-theme="slay"] .qr-chip:hover{background:rgba(0,0,0,.05);}
#wallQrRow{padding:10px 2px 0;}   /* wall lives inside a card — align chips to its content edge */
/* member reporting */
.report-link{display:block;width:100%;margin-top:8px;padding:9px;border-radius:8px;background:none;border:1px solid var(--line-2);color:var(--muted);font-size:calc(12.5px * var(--fs,1));font-weight:600;cursor:pointer;}
.report-link:hover{color:var(--accent);border-color:var(--accent-line);}
.chat-report{flex:none;background:none;border:none;font-size:calc(17px * var(--fs,1));color:var(--muted-2);cursor:pointer;padding:0 6px;line-height:1;}
.chat-report:hover{color:var(--accent);}
/* chat header: name + key bio stats + AI-recap button */
.chat-head-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.chat-substats{font-size:calc(12px * var(--fs,1));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;line-height:1.35;}
.chat-substats .chat-status{color:#4bb58a;}
.chat-substats .chat-status:not(:empty)::before{content:" · ";color:var(--muted-2);}
.chat-icon-btn{flex:none;background:none;border:none;font-size:calc(18px * var(--fs,1));line-height:1;cursor:pointer;padding:0 6px;transition:transform .15s;}
/* "Catch up" thread-recap control — a small neutral pill (de-branded from the old ✨, quiet-helpers spec) */
.chat-catchup{flex:none;background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted-3);font-size:calc(12px * var(--fs,1));font-weight:600;line-height:1;cursor:pointer;padding:6px 10px;border-radius:9px;transition:background .15s,color .15s;}
/* chat header: fold the extra actions into one ⋯ overflow (brief rec 03/05) */
.chat-ov-wrap{position:relative;flex:none;}
.chat-overflow{background:none;border:none;color:var(--muted);font-size:calc(22px * var(--fs,1));line-height:1;cursor:pointer;padding:2px 6px;letter-spacing:1px;}
.chat-overflow:hover{color:var(--ink);}
.chat-ov-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:10;background:var(--surface-3);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);overflow:hidden;min-width:184px;}
.chat-ov-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:calc(13.5px * var(--fs,1));padding:11px 15px;cursor:pointer;}
.chat-ov-menu button:hover{background:var(--surface-2);}
/* one grouped time-stamp per run + a day divider (brief rec 03/05) */
.chat-day{align-self:center;font-size:calc(12px * var(--fs,1));color:var(--muted-2);margin:8px 0 2px;letter-spacing:.03em;font-weight:600;}
/* composer: fold the three emoji attach controls into one ＋ menu (brief rec 01 — no emoji controls) */
.chat-plus-wrap{position:relative;flex:none;}
.chat-plus{background:none;border:none;color:var(--muted);font-size:calc(26px * var(--fs,1));line-height:1;cursor:pointer;padding:0 4px;width:34px;}
.chat-plus:hover{color:var(--accent);}
.chat-attach-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:10;background:var(--surface-3);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);overflow:hidden;min-width:170px;}
.chat-attach-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:calc(13.5px * var(--fs,1));padding:11px 15px;cursor:pointer;}
.chat-attach-menu button:hover{background:var(--surface-2);}
.chat-catchup:hover{background:var(--surface-3);color:var(--ink);}
.chat-icon-btn:hover{transform:scale(1.14);}
.chat-icon-btn:disabled{opacity:.5;animation:csum-pulse 1s ease-in-out infinite;cursor:default;}
@keyframes csum-pulse{50%{opacity:.85;}}
/* AI recap card, pinned at the top of the log */
.chat-summary-card{align-self:stretch;background:linear-gradient(180deg,rgba(242,84,61,.13),rgba(242,84,61,.05));
  border:1px solid var(--accent-line);border-radius:14px;padding:12px 14px;margin:0 0 6px;}
.csum-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:calc(13px * var(--fs,1));color:var(--ink-bright);margin-bottom:7px;}
.csum-head .csum-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:calc(19px * var(--fs,1));line-height:1;cursor:pointer;padding:0 2px;}
.csum-head .csum-x:hover{color:var(--ink);}
.csum-body{font-size:calc(13px * var(--fs,1));line-height:1.6;color:var(--ink-soft);}
/* shared-photos panel — grid of images swapped in this thread */
.chat-photos-card{align-self:stretch;background:var(--surface-1);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;margin:0 0 6px;}
.cph-body{font-size:calc(13px * var(--fs,1));color:var(--muted);}
.cph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px;}
/* show the WHOLE shared photo scaled down (contain), not a cropped square (cover) */
.cph-thumb{aspect-ratio:1;border-radius:9px;background:rgba(0,0,0,.28) center/contain no-repeat;cursor:zoom-in;border:1px solid var(--line-2);transition:transform .12s;}
.cph-thumb:hover{transform:scale(1.05);}
.cph-thumb.me{border-color:var(--accent-line);}
.chat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Blocked-members management list */
.blocked-modal{max-width:440px;}
.blocked-list{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto;}
.blocked-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-1);}
.blocked-av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface-1) center/cover no-repeat;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:calc(17px * var(--fs,1));color:var(--ink-soft);}
.blocked-info{flex:1;min-width:0;}
.blocked-name{font-weight:600;color:var(--ink-bright);font-size:calc(14.5px * var(--fs,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.blocked-area{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:1px;}
.blocked-unblock{flex:none;width:auto;height:auto;padding:8px 15px;font-size:calc(13px * var(--fs,1));}
.report-modal{max-width:360px;}
.report-reasons{display:flex;flex-direction:column;gap:8px;}
.report-reason{text-align:left;padding:12px 14px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink);font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;transition:border-color .12s,background .12s;}
.report-reason:hover{border-color:var(--accent-line);background:rgba(242,84,61,.08);}
[data-theme="light"] .report-reason,[data-theme="slay"] .report-reason{background:rgba(0,0,0,.04);}
/* Fantasies (AI characters) */
.menu-tag-new{font-size:calc(9px * var(--fs,1));font-weight:800;background:var(--accent);color:#fff;border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:middle;letter-spacing:.04em;}
.fantasy-modal{max-width:440px;width:92vw;}
.fantasy-picker{max-height:84vh;display:flex;flex-direction:column;}
.fantasy-grid{display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.fantasy-card{display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;padding:13px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);cursor:pointer;transition:border-color .12s,background .12s;}
.fantasy-card:hover{border-color:var(--accent-line);background:rgba(242,84,61,.07);}
[data-theme="light"] .fantasy-card,[data-theme="slay"] .fantasy-card{background:rgba(0,0,0,.04);}
.fantasy-emoji,.fantasy-av{flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:calc(25px * var(--fs,1));background:var(--accent-bg);}
.fantasy-card-id{min-width:0;}
.fantasy-name{font-weight:700;font-size:calc(15px * var(--fs,1));color:var(--ink-bright);}
.fantasy-tag{font-size:calc(12.5px * var(--fs,1));color:var(--accent);font-weight:600;margin-top:1px;}
.fantasy-blurb{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-top:4px;line-height:1.45;}
.fantasy-chat{max-width:440px;width:92vw;height:84vh;display:flex;flex-direction:column;padding:0;overflow:hidden;}
.fantasy-chat .chat-head{padding:12px 14px;border-bottom:1px solid var(--line);}
.fantasy-av{width:40px;height:40px;font-size:calc(20px * var(--fs,1));}
.fantasy-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;}
.fantasy-chat .chat-input{border-top:1px solid var(--line);flex:none;}
.chat-input{flex:none;padding:14px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.chat-input input{flex:1;padding:12px 15px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);font-size:calc(13px * var(--fs,1));color:var(--ink);}
.chat-input input::placeholder{color:var(--muted-2);}
.chat-send{width:42px;height:42px;flex:none;border-radius:50%;background:var(--heat);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:calc(16px * var(--fs,1));box-shadow:0 8px 20px rgba(242,84,61,.3);}

.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  text-align:center;padding:30px;color:var(--muted);gap:10px;}
.empty-panel .eg-diamond{width:14px;height:14px;transform:rotate(45deg);background:var(--accent);opacity:.6;}

/* ---------------- FAB (mobile only — desktop uses the topbar Host button) ---------------- */
.fab{display:none;position:fixed;right:24px;bottom:24px;z-index:1200;padding:13px 20px;border-radius:999px;
  background:var(--heat);color:#fff;font-weight:600;font-size:calc(13.5px * var(--fs,1));letter-spacing:.02em;
  box-shadow:0 12px 30px rgba(242,84,61,.4);transition:filter .15s,transform .05s;}
.fab:hover{filter:brightness(1.07);}
.fab:active{transform:translateY(1px);}

/* ---------------- Modals ---------------- */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(6,5,5,.72);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));}
.modal-overlay.open{display:flex;}
/* dvh (dynamic viewport height) keeps the modal inside the VISIBLE area in mobile browsers,
   where the URL/toolbar chrome makes 100vh taller than the screen (was cutting off Save/Close). */
.modal{width:100%;max-width:min(440px, calc(100vw - 28px));
  max-height:92vh;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;position:relative;
  background:#100d0e;border:1px solid var(--line-2);border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.7);padding:30px;animation:fade-up .22s ease;}
.modal-close{position:absolute;top:16px;right:18px;z-index:3;font-size:calc(22px * var(--fs,1));color:var(--muted);line-height:1;}
.modal-close:hover{color:var(--ink);}

/* account / settings modal */
.modal-title{font-family:var(--sans);font-size:calc(24px * var(--fs,1));color:var(--ink-bright);margin:0 0 18px;}
.account-id{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.account-name{font-size:calc(17px * var(--fs,1));font-weight:600;color:var(--ink-bright);}
.account-email{font-size:calc(13px * var(--fs,1));color:var(--muted);margin-top:3px;}
/* Settings: leading profile card + Appearance/Blocked (brief You-regroup) */
.account-card{display:flex;gap:13px;align-items:center;padding:14px;margin:0 0 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-1);}
.account-av{width:54px;height:54px;border-radius:50%;flex:none;background:var(--surface-3) center/cover;display:flex;align-items:center;justify-content:center;font-size:calc(21px * var(--fs,1));font-weight:700;color:var(--ink);}
.account-card-main{min-width:0;flex:1;}
.account-card .account-name{font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--ink-bright);}
.account-card .account-sum{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-top:2px;}
.account-card .account-email{font-size:calc(12px * var(--fs,1));color:var(--muted-2);margin-top:3px;}
.account-edit{align-self:flex-start;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--accent);padding:3px 4px;}
.acct-theme{margin-bottom:4px;}
.acct-drill{text-align:left;}
.setting-block{margin-bottom:24px;}
.setting-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.setting-head label{font-size:calc(12px * var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);}
.setting-val{font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--accent);}
.setting-note{font-size:calc(12px * var(--fs,1));color:var(--muted);line-height:1.5;margin:11px 0 0;}
.setting-note strong{color:var(--ink-soft);}
input[type=range]#jitterSlider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.12));outline:none;}
input[type=range]#jitterSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5);}
input[type=range]#jitterSlider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--accent);cursor:pointer;}
.btn-ghost.danger{width:100%;}
.btn-ghost.danger:hover{border-color:#ff6b6b;color:#ff8a8a;}

/* ---------------- Profile editor ---------------- */
.pe-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pe-photo{position:relative;aspect-ratio:1;border-radius:13px;background:var(--surface-1) center/cover no-repeat;border:1px solid var(--line-2);}
.pe-photo-x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.62);
  color:#fff;font-size:calc(16px * var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);}
.pe-photo-add{aspect-ratio:1;border-radius:13px;border:1.5px dashed var(--line-2);color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:calc(26px * var(--fs,1));background:rgba(255,255,255,.015);}
.pe-photo-add span{font-size:calc(12px * var(--fs,1));letter-spacing:.04em;}
.pe-photo-add:hover{border-color:var(--accent-line);color:var(--accent);}
.pe-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pe-taggroup{margin-bottom:14px;}
.pe-toggle{display:flex;gap:12px;align-items:flex-start;margin:18px 0 4px;padding:14px;border-radius:13px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.015);cursor:pointer;}
.pe-toggle input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--accent);}
.pe-toggle span{display:flex;flex-direction:column;gap:3px;font-size:calc(14px * var(--fs,1));color:var(--ink-soft);}
.pe-toggle small{color:var(--muted);font-size:calc(12.5px * var(--fs,1));}
.profile-edit textarea.field{resize:vertical;min-height:72px;line-height:1.5;}
.pe-score{display:flex;flex-direction:column;gap:5px;padding:14px 16px;margin-bottom:20px;border-radius:14px;
  border:1px solid var(--gold-line);background:var(--gold-bg);}
.pe-score .score-num{font-family:var(--display);font-weight:700;font-size:calc(26px * var(--fs,1));color:var(--gold-soft);line-height:1;}
.pe-score .score-num.new{color:var(--muted);}
.pe-score .score-cap{font-size:calc(12px * var(--fs,1));color:var(--muted);line-height:1.5;}
.pe-score .score-cap strong{color:var(--gold-soft);}

/* ---------------- Member profile (photos + rating) ---------------- */
.pg-hero{position:relative;flex:0 0 auto;height:min(72vh,480px);border-radius:16px;margin-bottom:10px;background:var(--surface-1) center/cover no-repeat;
  box-shadow:inset 0 -60px 60px -30px rgba(0,0,0,.6);}
.pg-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.pg-thumb{height:150px;border-radius:12px;background:var(--surface-1) center/cover no-repeat;}
/* merged Block/Report control + private-album flag */
.safety-link{display:block;width:100%;margin:16px 0 2px;padding:9px 8px;font-size:calc(12.5px * var(--fs,1));text-align:center;
  color:var(--muted);background:none;border:none;cursor:pointer;opacity:.72;text-decoration:underline;text-underline-offset:3px;}
.safety-link:hover{opacity:1;color:var(--ink);}
.profile-badge.album-badge{background:rgba(224,69,123,.15);color:#e0457b;border:1px solid rgba(224,69,123,.4);}
.safety-sep{margin:18px 0 8px;font-size:calc(12px * var(--fs,1));letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;}
.safety-modal .btn-block{width:100%;margin:0;}
/* demonstration / fantasy event markers (purple, matches the Fantasy persona badge) */
.ev-demo-tag{display:inline-block;background:#a855f7;color:#fff;padding:1px 6px;border-radius:5px;font-size:calc(10px * var(--fs,1));font-weight:800;letter-spacing:.05em;vertical-align:middle;}
.ev-demo-note{background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.4);color:#c99bf5;border-radius:9px;padding:9px 11px;font-size:calc(12.5px * var(--fs,1));margin-bottom:12px;font-weight:600;}
.when-demo-tag{position:absolute;top:8px;right:8px;background:rgba(168,85,247,.92);color:#fff;padding:2px 8px;border-radius:6px;font-size:calc(11px * var(--fs,1));font-weight:800;}
.demo-inline{color:#b57ee8;font-weight:700;text-transform:uppercase;font-size:calc(10px * var(--fs,1));letter-spacing:.04em;}
/* full-screen photo viewer (public gallery + private album) */
.pg-hero,.pg-thumb{cursor:zoom-in;}
/* findings #21: photo-forward public profile (screen-polish part B) — hero with overlaid name + availability chip */
.pg-profile{padding:0;gap:0;position:relative;}
.pg-profile .pg-hero{height:min(52vh,440px);border-radius:0;margin:0;flex:0 0 auto;}
.pg-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,9,.96),rgba(14,11,9,.12) 48%,transparent 64%);pointer-events:none;}
.pg-back{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;background:rgba(14,11,9,.6);color:var(--ink);border:none;font-size:calc(21px * var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;}
.pg-more{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(14,11,9,.6);color:var(--ink);border:none;font-size:calc(20px * var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;}
.pg-hero-meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;}
.pg-name{font-family:var(--display);font-weight:700;font-size:calc(23px * var(--fs,1));letter-spacing:-.01em;color:#fff;margin:0;line-height:1.12;}
.pg-sub{font-size:calc(13px * var(--fs,1));color:var(--ink-soft);margin-top:3px;}
.pg-avail{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 13px;border-radius:20px;background:var(--surface-3);color:var(--ink);font-size:calc(12.5px * var(--fs,1));font-weight:600;}
.pg-avail.live{background:var(--accent);color:#fff;}
.pg-avail-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pg-profile .pg-strip{padding:10px 16px 0;margin:0;}
.pg-body{padding:16px 16px calc(88px + var(--safe-bottom));display:flex;flex-direction:column;gap:14px;}   /* bottom pad clears the sticky .pg-actions bar so the last item (e.g. Fantasy disclaimer) isn't hidden */
.pg-body .profile-bio{text-align:left;font-size:calc(13.5px * var(--fs,1));line-height:1.55;color:var(--muted-3);}
.pg-body .profile-headline{margin:0;}
.pg-chips{margin:0;gap:6px;}
.pg-actions{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 16px calc(12px + var(--safe-bottom));background:var(--topbar);border-top:1px solid var(--line);backdrop-filter:blur(8px);}
.pg-actions .btn-primary{flex:1;}
.pg-actions .pg-like{flex:none;width:48px;height:48px;}
.pg-safety{display:block;text-align:center;padding:12px;}
/* Full-screen immersive profile on phones: the photo fills the screen, chrome overlays it, details scroll up
   (adapted from the cruising-app pattern — full-bleed hero + a vertical circular thumb strip). Desktop keeps the panel. */
@media (max-width:620px){
  .rail.rail-right{width:100vw;top:0;bottom:0;z-index:2000;border-left:none;}   /* beat the ≤1100px width:320px */
  .pg-profile .pg-hero{height:84vh;}
  .pg-back{top:calc(12px + env(safe-area-inset-top, 0px));width:38px;height:38px;background:rgba(14,11,9,.55);}
  .pg-more{top:calc(12px + env(safe-area-inset-top, 0px));width:38px;height:38px;background:rgba(14,11,9,.55);}
  .pg-name{font-size:calc(26px * var(--fs,1));}
  .pg-hero-scrim{background:linear-gradient(to top,rgba(14,11,9,.97),rgba(14,11,9,.04) 42%,transparent 62%);}
  /* other photos become a vertical strip of round thumbs overlaid on the hero (tap to make it the hero) */
  .pg-profile .pg-strip{position:absolute;top:calc(60px + env(safe-area-inset-top, 0px));right:12px;left:auto;width:auto;
    padding:0;margin:0;display:flex;flex-direction:column;gap:10px;z-index:3;background:none;}
  .pg-profile .pg-strip .pg-thumb{width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
    box-shadow:0 2px 12px rgba(0,0,0,.55);}
  .pg-profile .pg-strip .pg-thumb.active{border-color:var(--accent);}
  .pg-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
}
.lb-overlay{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
.lb-img{max-width:94vw;max-height:92vh;border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.6);object-fit:contain;}
.lb-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:calc(26px * var(--fs,1));line-height:1;cursor:pointer;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:62px;border-radius:10px;border:none;background:rgba(0,0,0,.42);color:#fff;font-size:calc(34px * var(--fs,1));line-height:1;cursor:pointer;}
.lb-prev{left:12px;} .lb-next{right:12px;}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22);}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#eee;font-size:calc(13px * var(--fs,1));padding:4px 12px;border-radius:20px;}
/* Fantasy Chatbots picker: persona photo instead of emoji */
.fantasy-photo{flex:none;width:54px;height:54px;border-radius:12px;background:var(--surface-1) center/cover no-repeat;}
/* safer-sex disclosure — health-green, distinct from the interest tags */
.safe-tag{background:rgba(46,163,111,.15);color:#37b87d;border:1px solid rgba(46,163,111,.42);}
[data-theme="light"] .safe-tag{color:#188a56;background:rgba(46,163,111,.1);}
.safe-chip.active{background:#2ea36f;border-color:#2ea36f;color:#fff;}
/* optional-unlock checklist progress bar (rec 10) */
.founder-progress{height:5px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin:2px 0 0;}
.founder-progress>span{display:block;height:100%;border-radius:6px;background:var(--heat);transition:width .3s ease;}
.profile-id{margin:6px 0 14px;}
.profile-headline{color:var(--accent-soft);font-size:calc(14.5px * var(--fs,1));margin:5px 0 2px;}
.vchk{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--gold-bg);color:var(--gold);font-size:calc(11px * var(--fs,1));vertical-align:middle;}
.rating-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:calc(13px * var(--fs,1));font-weight:700;
  color:#ffd9cf;background:rgba(242,84,61,.14);border:1px solid rgba(242,84,61,.3);}
.rating-badge.new{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--line-2);font-weight:600;}
.rating-badge.over{position:absolute;top:12px;right:12px;background:rgba(10,7,9,.72);backdrop-filter:blur(6px);
  border-color:rgba(242,84,61,.4);box-shadow:0 4px 14px rgba(0,0,0,.4);}

/* ---------------- First-tap map hint + privacy nudge ---------------- */
.map-hint{position:absolute;left:14px;right:14px;bottom:14px;z-index:650;display:none;align-items:center;gap:10px;
  padding:11px 14px;border-radius:13px;background:rgba(16,11,14,.96);border:1px solid var(--accent-line);
  box-shadow:0 12px 32px rgba(0,0,0,.55);font-size:calc(13px * var(--fs,1));color:#e9e1e3;animation:fade-up .3s ease;}   /* bubble is always dark in every theme → fixed light text */
.map-hint.show{display:flex;}
.map-hint span{flex:1;line-height:1.4;} .map-hint b{color:var(--accent-soft);font-weight:700;}
.map-hint-x{flex:none;padding:7px 13px;border-radius:9px;background:var(--accent-bg);border:1px solid var(--accent-line);
  color:#fff;font-size:calc(12.5px * var(--fs,1));font-weight:600;}
.onboard-privacy{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;margin:2px 0 18px;padding:13px 15px;
  border-radius:13px;border:1px solid rgba(242,84,61,.3);background:rgba(242,84,61,.07);color:var(--ink-soft);
  font-size:calc(13px * var(--fs,1));line-height:1.45;transition:border-color .15s;}
.onboard-privacy strong{color:#ffd9cf;} .onboard-privacy:hover{border-color:rgba(242,84,61,.55);}

/* ---------------- Filter rail + people search ---------------- */
.lbl-soft{color:var(--muted-2);font-weight:500;letter-spacing:0;text-transform:none;}
.age-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.age-in{margin:0;text-align:center;}
.age-dash{color:var(--muted-2);}
.people-results{margin-top:16px;}
.results-head{font-size:calc(12px * var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.ppl-card{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.015);margin-bottom:8px;transition:border-color .15s;}
.ppl-card:hover{border-color:var(--accent-line);}
.ppl-av{width:46px;height:46px;flex:none;border-radius:50%;background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(17px * var(--fs,1));color:#e9cdd2;}
.ppl-body{min-width:0;flex:1;}
.ppl-name{font-size:calc(14.5px * var(--fs,1));font-weight:600;color:var(--ink-bright);}
.ppl-meta{font-size:calc(12px * var(--fs,1));color:var(--muted);margin:2px 0 5px;}
.ppl-tags{display:flex;gap:5px;flex-wrap:wrap;}
.tag-soft.sm{font-size:calc(12px * var(--fs,1));padding:2px 8px;}

/* ---------------- Browse grid (events / people list) ---------------- */
.browse-rail{left:0;right:0;width:auto;background:var(--bg);transform:translateY(100%);}
.browse-rail.open{transform:none;}
.browse-head{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);flex:none;}
.browse-toggle{flex:1;display:flex;gap:4px;padding:4px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);}
.browse-toggle .seg{flex:1;padding:9px;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--muted);border-radius:8px;}
.browse-toggle .seg.active{color:#fff;background:#231a1e;box-shadow:0 2px 10px rgba(0,0,0,.4);}
.browse-head .rail-x{flex:none;}
.browse-grid{flex:1;overflow:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px;align-content:start;grid-auto-rows:max-content;}
.bcard{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.015);transition:border-color .15s,transform .05s;}
.bcard:hover{border-color:var(--accent-line);} .bcard:active{transform:translateY(1px);}
.bcard-cover{flex:0 0 124px;height:124px;background:var(--surface-1) center/cover no-repeat;} .bcard-cover.noimg{background:var(--heat);}
.bcard-photo{position:relative;flex:0 0 124px;height:124px;background:var(--surface-1) center/cover no-repeat;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:calc(30px * var(--fs,1));color:#e9cdd2;}
.bcard-rating{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;font-size:calc(12px * var(--fs,1));font-weight:700;
  color:var(--gold-soft);background:rgba(10,7,9,.72);border:1px solid var(--gold-line);}
.bcard-body{padding:10px 12px 12px;}
.bcard-title{font-weight:600;font-size:calc(14px * var(--fs,1));color:var(--ink-bright);line-height:1.25;}
.bcard-meta{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:4px;}
.bcard-going{font-size:calc(12px * var(--fs,1));color:var(--gold-soft);margin-top:5px;}
.bcard-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;}
.browse-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:54px 20px;font-size:calc(14px * var(--fs,1));}

/* ---------------- Private album ---------------- */
.album-section:empty{display:none;}
.album-lock{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:13px;
  border:1px dashed var(--line-2);background:rgba(255,255,255,.015);font-size:calc(13.5px * var(--fs,1));color:var(--ink-soft);}
.album-lock>span:first-child{flex:1;}
.album-note{font-size:calc(12.5px * var(--fs,1));color:var(--muted);}
.album-ask{padding:8px 14px;border-radius:999px;border:1px solid var(--accent-line);color:var(--accent-soft);
  background:var(--accent-bg);font-size:calc(12.5px * var(--fs,1));font-weight:600;}
.album-ask:hover{background:var(--accent);color:#fff;border-color:transparent;}   /* fill on hover so #fff stays legible in light mode */
.album-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.album-grid .pg-thumb{height:80px;}
/* in-chat album pin — tappable card above the message log when they've shared with me */
.chat-album-pin{flex:none;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-1);}
.cap-open{display:flex;align-items:center;gap:11px;width:100%;padding:8px;border-radius:12px;
  border:1px solid var(--accent-line);background:var(--accent-bg);text-align:left;cursor:pointer;transition:filter .15s;}
.cap-open:hover{filter:brightness(1.06);}
.cap-thumbs{flex:none;display:flex;}
.cap-thumb{width:34px;height:34px;border-radius:8px;background:var(--surface-2) center/cover no-repeat;
  border:2px solid var(--surface-1);margin-left:-10px;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.cap-thumb:first-child{margin-left:0;}
.cap-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.cap-text strong{font-size:calc(13.5px * var(--fs,1));color:var(--ink-bright);}
.cap-sub{font-size:calc(12px * var(--fs,1));color:var(--accent-soft);}
.cap-chev{flex:none;color:var(--accent-soft);font-size:calc(22px * var(--fs,1));line-height:1;}
/* full-screen album gallery — thumbnail grid; tap a thumb → swipeable lightbox */
.album-gallery{position:fixed;inset:0;z-index:5500;background:var(--bg);display:flex;flex-direction:column;}
.ag-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.ag-title{font-family:var(--display);font-size:calc(19px * var(--fs,1));color:var(--ink-bright);}
.ag-count{font-family:var(--sans);font-size:calc(13px * var(--fs,1));color:var(--muted);font-weight:400;margin-left:6px;}
.ag-close{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--surface-2);color:var(--ink);font-size:calc(24px * var(--fs,1));line-height:1;cursor:pointer;}
.ag-close:hover{background:var(--surface-3);}
.ag-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 18px 24px;align-content:start;}
.ag-thumb{aspect-ratio:1;border:none;border-radius:12px;background:var(--surface-1) center/cover no-repeat;cursor:zoom-in;transition:transform .06s;}
.ag-thumb:active{transform:scale(.98);}
@media (min-width:700px){.ag-grid{grid-template-columns:repeat(4,1fr);max-width:900px;margin-inline:auto;width:100%;}}
/* shared-location card in a chat bubble — static map strip + label row */
.loc-card{display:flex;flex-direction:column;width:230px;max-width:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--surface-1);text-align:left;cursor:pointer;transition:filter .15s;padding:0;}
.loc-card:hover{filter:brightness(1.06);}
.loc-map{position:relative;overflow:hidden;background:var(--surface-2);display:block;}
.loc-map img{pointer-events:none;user-select:none;}
.loc-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:26px;line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:2;}
.loc-row{display:flex;flex-direction:column;line-height:1.3;padding:9px 12px;}
.loc-text{display:flex;flex-direction:column;min-width:0;}
.loc-text strong{font-size:calc(13.5px * var(--fs,1));color:var(--ink-bright);}
.loc-sub{font-size:calc(12px * var(--fs,1));color:var(--accent-soft);}
/* full-screen shared-location map */
.loc-modal{position:fixed;inset:0;z-index:5600;background:var(--bg);display:flex;flex-direction:column;}
.lm-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);}
.lm-title{font-family:var(--display);font-size:calc(18px * var(--fs,1));color:var(--ink-bright);}
.lm-actions{display:flex;align-items:center;gap:12px;}
.lm-dir{font-size:calc(13.5px * var(--fs,1));font-weight:600;color:var(--accent-soft);text-decoration:none;padding:7px 12px;border-radius:999px;background:var(--accent-bg);border:1px solid var(--accent-line);}
.lm-close{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--surface-2);color:var(--ink);font-size:calc(24px * var(--fs,1));line-height:1;cursor:pointer;}
.lm-canvas{flex:1;width:100%;}
/* owner's incoming requests (account modal) */
.album-req{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.album-req:last-child{border-bottom:none;}
.album-req-av{width:34px;height:34px;border-radius:50%;flex:none;background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(14px * var(--fs,1));color:#e9cdd2;}
.album-req-name{flex:1;font-size:calc(14px * var(--fs,1));color:var(--ink-soft);}
.album-allow{padding:7px 13px;border-radius:9px;border:1px solid rgba(242,84,61,.45);color:var(--gold);
  background:rgba(242,84,61,.1);font-size:calc(12.5px * var(--fs,1));font-weight:600;}
.album-allow:hover{background:rgba(242,84,61,.2);}
.album-reject{padding:7px 13px;border-radius:9px;border:1px solid var(--line-2);color:var(--muted);font-size:calc(12.5px * var(--fs,1));font-weight:600;}
.album-reject:hover{border-color:#ff6b6b;color:#ff8a8a;}
/* attend-request inbox rows */
.ereq-body{flex:1;min-width:0;}
.ereq-name{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ereq-score{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--gold-soft);background:var(--gold-bg);border:1px solid var(--gold-line);padding:1px 7px;border-radius:999px;}
.ereq-score.new{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--line-2);}
.ereq-ev{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:2px;}
.btn-primary.ghosted{background:rgba(255,255,255,.06);color:var(--muted);box-shadow:none;cursor:default;}
.btn-primary.joined{filter:none;}

.auth-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:22px;}
.auth-brand .brand-name{font-size:calc(26px * var(--fs,1));}
.auth-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-1);
  border:1px solid var(--line);margin-bottom:22px;}
/* Active tab is an on-brand coral chip that reads clearly in EVERY theme (was a hardcoded
   dark pill: invisible-subtle in dark, a jarring black block on the light cream ground). */
.auth-tab{flex:1;padding:10px;font-size:calc(13.5px * var(--fs,1));font-weight:600;color:var(--muted);
  border-radius:9px;transition:color .15s,background .15s;}
.auth-tab:hover{color:var(--ink-soft);}
.auth-tab.active{color:var(--accent-soft);background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent-line);}
.auth-form-pane{display:none;flex-direction:column;}
.auth-form-pane.active{display:flex;}
.auth-hint{font-size:calc(12.5px * var(--fs,1));color:var(--muted);text-align:center;margin-top:16px;}
/* On the email-confirmation step the Sign in / Join tabs + unlock pill are irrelevant — hide
   them so the screen has one clear job. */
.auth--verify .auth-tabs,.auth--verify .founder-offer-auth{display:none;}
/* Custom checkboxes — the default OS squares read cheap; these are on-brand and tappable. */
.auth-check{display:flex;align-items:flex-start;gap:11px;margin:2px 0 13px;text-align:left;cursor:pointer;
  font-size:calc(13px * var(--fs,1));line-height:1.45;color:var(--muted);}
.auth-check input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.auth-check-box{flex:none;width:21px;height:21px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line-2);
  background:rgba(255,255,255,.02);position:relative;transition:background .15s,border-color .15s;}
.auth-check input:checked+.auth-check-box{background:var(--accent);border-color:var(--accent);}
.auth-check input:checked+.auth-check-box::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.auth-check input:focus-visible+.auth-check-box{outline:2px solid var(--accent-line);outline-offset:2px;}
.auth-check a{color:var(--accent-soft);text-decoration:underline;}
/* email-confirmation notice */
.verify-notice{text-align:center;align-items:center;}
.verify-emoji{font-size:calc(40px * var(--fs,1));margin-bottom:4px;}
.verify-title{font-family:var(--display);font-size:calc(22px * var(--fs,1));margin:0 0 8px;color:var(--ink-bright);}
.verify-text{font-size:calc(14px * var(--fs,1));color:var(--muted);line-height:1.55;margin:0 0 6px;}
.verify-text strong{color:var(--ink-soft);}
.verify-sub{font-size:calc(12.5px * var(--fs,1));color:var(--muted-2);margin:0 0 14px;min-height:1px;}
.verify-notice .btn-primary{width:100%;}
.change-email{display:flex;flex-direction:column;width:100%;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);text-align:left;}
.change-email.hidden{display:none;}

.field-label{font-size:calc(12px * var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3);
  font-weight:600;margin:0 0 8px 2px;}
.field{width:100%;padding:13px 15px;margin-bottom:16px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);font-size:calc(14px * var(--fs,1));color:var(--ink);font-family:var(--sans);transition:border-color .15s;}
.field:focus{outline:none;border-color:var(--accent-line);}
.field::placeholder{color:var(--muted-2);}
.field-serif{font-family:var(--sans);font-size:calc(20px * var(--fs,1));border-color:rgba(242,84,61,.35);}
textarea.field{resize:vertical;min-height:74px;line-height:1.55;}
.auth-form-pane .btn-primary{margin-top:6px;}

.host-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.host-title{font-family:var(--sans);font-size:calc(24px * var(--fs,1));color:var(--ink-bright);line-height:1;}
.host-sub{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:4px;}
.host-step{margin-left:auto;font-size:calc(12px * var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.cover-drop{height:128px;border-radius:15px;border:1px dashed rgba(242,84,61,.4);
  background-color:#141013;background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(242,84,61,.1) 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-bottom:22px;cursor:pointer;}
.cover-plus{width:36px;height:36px;border-radius:50%;background:rgba(242,84,61,.16);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));}
.cover-text{font-size:calc(12px * var(--fs,1));color:var(--muted-3);}
.host-grid{display:flex;gap:12px;}
.host-grid>div{flex:1;}
.host-maptip{font-size:calc(12px * var(--fs,1));color:var(--muted-2);margin:-6px 0 18px;}
.host-form .chip-wrap{margin-bottom:22px;}

/* no-fuss hosting */
.hidden{display:none!important;}
/* rec 09: "same as last time" repeat card that leads the host sheet */
.host-repeat{margin:0 0 18px;padding:14px 15px;border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-bg);}
.hr-label{font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:.02em;color:var(--accent-soft);margin:0 0 6px;}
.hr-name{font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--ink-bright);margin:0 0 2px;line-height:1.25;}
.hr-sum{font-size:calc(13px * var(--fs,1));color:var(--muted);margin:0 0 13px;}
/* repeat-host card: cover thumbnail beside the name (brief Host a session) */
.hr-card{display:flex;gap:11px;align-items:center;margin:0 0 13px;}
.hr-cover{width:48px;height:48px;border-radius:11px;flex:none;background-size:cover;background-position:center;}
.hr-cover-empty{background-image:linear-gradient(135deg,rgba(242,84,61,.55),rgba(242,84,61,.16));}
.hr-cardtext{min-width:0;flex:1;}
.hr-cardtext .hr-name{margin:0 0 2px;}
.hr-cardtext .hr-sum{margin:0;}
.hr-actions{display:flex;gap:10px;}
.hr-actions .btn-primary{flex:1;}
.hr-fresh{display:block;width:100%;margin:13px 0 0;padding:9px 0 2px;background:none;border:none;border-top:1px solid var(--line-2);color:var(--muted-2);font-size:calc(12.5px * var(--fs,1));cursor:pointer;transition:color .15s;}
.hr-fresh:hover{color:var(--ink);}
#hostFormBody.collapsed{display:none;}
.btn-quick{width:100%;height:50px;border-radius:12px;background:var(--heat);color:#fff;font-weight:700;
  font-size:calc(14px * var(--fs,1));display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 10px 26px rgba(242,84,61,.32);transition:filter .15s,transform .05s;}
.btn-quick:hover{filter:brightness(1.07);}
.btn-quick:active{transform:translateY(1px);}
.host-quick-or{text-align:center;font-size:calc(12px * var(--fs,1));letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-top:12px;}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.btn-ai{flex:none;padding:6px 11px;border-radius:999px;border:1px solid var(--accent-line);
  color:var(--accent);background:var(--accent-bg);font-size:calc(12px * var(--fs,1));font-weight:600;margin:0 0 9px;
  transition:filter .15s;}
.btn-ai:hover{filter:brightness(1.12);}

/* ---------------- Toast ---------------- */
.toast{position:fixed;left:50%;bottom:calc(var(--footer-h) + var(--safe-bottom) + 16px);transform:translateX(-50%) translateY(20px);z-index:3000;
  padding:13px 20px;border-radius:12px;background:rgba(18,14,16,.97);border:1px solid var(--accent-line);
  color:#f4ecef;font-size:calc(13.5px * var(--fs,1));box-shadow:0 16px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.green{border-color:rgba(77,240,176,.5);background:linear-gradient(180deg,rgba(30,44,38,.97),rgba(18,14,16,.97));}
.toast.green::before{content:"✓ ";color:#4df0b0;font-weight:800;}
.toast.red{border-color:rgba(255,120,120,.55);}
.toast.red::before{content:"! ";color:#ff8a8a;font-weight:800;}

/* OSM fallback tiles, darkened to match the theme when CARTO is unavailable */
.map-osm-dark .leaflet-tile{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.55) grayscale(.15);
}

/* ---------------- Onboarding ---------------- */
.onboard-modal{max-width:min(460px, calc(100vw - 28px));text-align:center;}
.onboard-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:6px;}
.onboard-diamond{width:13px;height:13px;transform:rotate(45deg);background:var(--accent);
  box-shadow:0 0 16px rgba(242,84,61,.7);}
.onboard-title{font-family:var(--display);font-weight:700;font-size:calc(29px * var(--fs,1));letter-spacing:-.01em;color:var(--ink-bright);line-height:1.05;}
.onboard-sub{font-size:calc(13.5px * var(--fs,1));color:var(--muted);max-width:340px;margin:0 auto 22px;line-height:1.55;}
.onboard-steps{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:24px;}
.onboard-step{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);}
.onboard-ico{width:40px;height:40px;flex:none;border-radius:11px;background:var(--accent-bg);
  border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));}
.onboard-step h4{margin:0 0 3px;font-size:calc(14.5px * var(--fs,1));color:var(--ink);font-weight:600;}
.onboard-step p{margin:0;font-size:calc(12.5px * var(--fs,1));color:var(--muted);line-height:1.5;}
.onboard-actions{display:flex;flex-direction:column;gap:10px;}
.btn-ghost{height:46px;border-radius:11px;border:1px solid var(--line-2);color:var(--ink-soft);
  font-size:calc(13.5px * var(--fs,1));display:flex;align-items:center;justify-content:center;width:100%;transition:border-color .15s;}
.btn-ghost:hover{border-color:var(--accent-line);color:var(--ink);}

/* ---------------- Mobile-only chrome (hidden on desktop) ---------------- */
.mobile-top,.brand-pill,.bottom-sheet,.bottom-nav{display:none;}

/* ============================================================
   RESPONSIVE — collapse to the mobile design
   ============================================================ */
@media (max-width:1100px){
  .rail-right{width:320px;}
}

@media (max-width:880px){
  :root{ --header-h:52px; --footer-h:52px; }
  body{overflow:hidden;}
  .topbar{gap:10px;padding-left:14px;padding-right:14px;}
  .brand{flex-wrap:nowrap;align-items:baseline;gap:8px;min-width:0;}
  .brand-name{font-size:calc(25px * var(--fs,1));letter-spacing:.01em;flex:none;}
  .brand-tag{display:inline-block;flex:0 1 auto;min-width:0;font-size:calc(12px * var(--fs,1));letter-spacing:.03em;color:var(--accent-soft);
    overflow:hidden;text-overflow:ellipsis;}
  .map-legend{display:none;}
  .leaflet-control-zoom{display:none!important;}

  /* legibility: lift the smallest type so it's comfortable on a phone (and for older eyes) */
  .foot-item{font-size:calc(12px * var(--fs,1));gap:3px;font-weight:600;}
  .foot-ico{width:20px;height:20px;}
  .foot-host .fi-host{width:32px;height:32px;font-size:calc(20px * var(--fs,1));}
  .ev-kicker,.section-label,.stat-k,.quote-k,.host-step,.filter-label,.field-label,.setting-head label{font-size:calc(12px * var(--fs,1));letter-spacing:.12em;}
  .nearby-dist,.nearby-sort,.nearby-going,.host-sub,.host-maptip,.back-link,.chat-status,.chat-row-when,.chat-row-ctx,.setting-note,.auth-hint{font-size:calc(13px * var(--fs,1));}
  .open-pill,.open-chip,.visible-label,.popup-meta{font-size:calc(12.5px * var(--fs,1));}
  .popup-title{font-size:calc(19px * var(--fs,1));}
  .profile-bio,.ev-desc,.bio{font-size:calc(15px * var(--fs,1));line-height:1.6;}
  .menu-item{font-size:calc(15px * var(--fs,1));}
  /* 16px form text stops iOS from zooming the page when a field is focused */
  .field,input,textarea,select{font-size:calc(16px * var(--fs,1));}
}

/* ===== direct messages ===== */
.chat-fantasies-entry{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 13px;margin-bottom:12px;
  border-radius:14px;border:1px solid rgba(255,90,140,.32);
  background:linear-gradient(120deg,rgba(255,70,120,.16),rgba(150,80,255,.14));cursor:pointer;transition:border-color .15s,transform .05s;}
.chat-fantasies-entry:hover{border-color:rgba(255,90,140,.6);}
.chat-fantasies-entry:active{transform:scale(.99);}
.cfe-emoji{font-size:calc(22px * var(--fs,1));line-height:1;width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:rgba(0,0,0,.22);}
.cfe-body{min-width:0;flex:1;display:flex;flex-direction:column;}
.cfe-title{font-size:calc(14.5px * var(--fs,1));font-weight:700;color:var(--ink-bright);}
.cfe-sub{font-size:calc(12px * var(--fs,1));color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cfe-go{font-size:calc(22px * var(--fs,1));line-height:1;color:var(--accent);flex:none;}
.chats-list{display:flex;flex-direction:column;}
/* Fantasies shelf — a labelled section INSIDE Chats, below the real conversations (brief quiet-helpers) */
.chat-shelf{margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line);}
.chat-shelf-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 13px;}
.chat-shelf-title{font-family:var(--sans);font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.chat-shelf-all{font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--accent);}
.chat-shelf-sub{padding:4px 13px 8px;font-size:calc(12px * var(--fs,1));line-height:1.45;color:var(--muted-2);}
.chat-shelf-rows{display:flex;flex-direction:column;}
.shelf-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:9px 13px;border-radius:12px;}
.shelf-row:hover{background:rgba(255,255,255,.04);}
[data-theme="light"] .shelf-row:hover{background:rgba(0,0,0,.04);}
.shelf-av{width:44px;height:44px;border-radius:50%;flex:none;background:var(--surface-3) center/cover;}
.shelf-row-body{min-width:0;flex:1;}
.shelf-row-name{font-size:calc(15px * var(--fs,1));font-weight:600;color:var(--ink);}
.shelf-row-tag{font-size:calc(12.5px * var(--fs,1));color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shelf-go{font-size:calc(18px * var(--fs,1));line-height:1;color:var(--muted-3);flex:none;}
.chats-empty{padding:34px 22px;text-align:center;color:var(--muted);font-size:calc(14px * var(--fs,1));line-height:1.6;}
.chats-empty .muted{color:var(--muted-2);font-size:calc(13px * var(--fs,1));}
.chat-unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent-2);color:#fff;
  font-size:calc(12px * var(--fs,1));font-weight:700;display:flex;align-items:center;justify-content:center;align-self:center;}
.chat-attach{background:none;border:none;font-size:calc(20px * var(--fs,1));cursor:pointer;padding:0 4px;color:var(--gold-soft);}
.chat-input{display:flex;align-items:center;gap:8px;}
.bubble-card{padding:0!important;background:none!important;max-width:84%;}
.mc-card{border-radius:14px;overflow:hidden;min-height:122px;background:var(--surface-3) center/cover no-repeat;
  position:relative;cursor:pointer;border:1px solid var(--line-2);}
.mc-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  padding:13px 14px;background:linear-gradient(to top,rgba(10,4,8,.9),rgba(10,4,8,.2) 72%,rgba(10,4,8,.05));}
.mc-k{font-size:calc(12px * var(--fs,1));letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft);}
.mc-title{font-family:var(--display);font-size:calc(17px * var(--fs,1));color:#fff;line-height:1.15;}
.mc-sub{font-size:calc(12.5px * var(--fs,1));color:var(--ink-soft);}
.mc-note{padding:7px 4px 0;font-size:calc(14px * var(--fs,1));color:var(--ink);}
.session-picker{margin:10px 0;padding:10px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);}
.sp-head{font-size:calc(12px * var(--fs,1));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.sp-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px;padding:9px 11px;margin-bottom:6px;
  border:1px solid var(--line-2);border-radius:10px;background:rgba(255,255,255,.02);color:var(--ink);cursor:pointer;text-align:left;}
.sp-row:hover{border-color:var(--accent-line);}
.sp-title{font-weight:600;font-size:calc(14px * var(--fs,1));}
.sp-k{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.sp-cancel{width:100%;padding:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:calc(13px * var(--fs,1));}

/* ===== in-session wall (quiet, secondary to the summary) ===== */
.session-wall{margin:4px 20px 0;padding-top:14px;border-top:1px solid var(--line-2);}
.session-wall:empty{display:none;}
.wall-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.wall-head .muted{color:var(--muted-2);text-transform:none;letter-spacing:0;font-weight:400;}
.wall-count{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.wall-more{width:100%;margin:8px 0 2px;padding:6px;background:none;border:none;color:var(--accent-soft);font-size:calc(13px * var(--fs,1));cursor:pointer;}
.wall-list{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.wall-empty{font-size:calc(13px * var(--fs,1));color:var(--muted-2);padding:4px 0;}
.wall-item{display:flex;gap:9px;}
.wall-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--accent-bg) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--accent-soft);}
.wall-body{flex:1;min-width:0;}
.wall-meta{display:flex;gap:8px;align-items:baseline;}
.wall-name{font-size:calc(13.5px * var(--fs,1));font-weight:600;color:var(--ink);}
.wall-when{font-size:calc(12px * var(--fs,1));color:var(--muted-2);}
.wall-text{font-size:calc(14px * var(--fs,1));color:var(--ink-soft);line-height:1.5;margin-top:1px;}
.wall-pic{margin-top:6px;height:170px;border-radius:12px;background:var(--surface-3) center/cover no-repeat;border:1px solid var(--line-2);}
.wall-compose{display:flex;align-items:center;gap:7px;margin-top:12px;}
.wall-input{flex:1;min-width:0;padding:9px 12px;border-radius:20px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--ink);font-size:calc(14px * var(--fs,1));}
.wall-icon{flex:0 0 auto;background:none;border:none;font-size:calc(18px * var(--fs,1));cursor:pointer;padding:2px;}
.wall-send{flex:0 0 auto;padding:8px 14px;border-radius:18px;border:none;background:var(--heat);color:#fff;font-weight:600;font-size:calc(13px * var(--fs,1));cursor:pointer;}
.album-pick-head{font-size:calc(12px * var(--fs,1));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 8px;}
.album-pick-grid{display:flex;flex-wrap:wrap;gap:8px;}
.album-pick{width:64px;height:64px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer;background:var(--surface-3) center/cover no-repeat;}
.album-pick:hover{border-color:var(--gold-line);}

/* ===== my sessions ===== */
.mysessions-body{max-height:64vh;overflow:auto;}
.ms-group{margin-bottom:18px;}
.ms-group-h{font-size:calc(12px * var(--fs,1));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.ms-row{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:13px 0;border-bottom:1px solid var(--line);}
.ms-main{min-width:0;}
.ms-title{font-size:calc(15px * var(--fs,1));font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.3;}
.ms-sub{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-top:3px;}
.ms-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;}
.ms-btn{padding:6px 11px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink-soft);font-size:calc(12.5px * var(--fs,1));cursor:pointer;}
.ms-btn:hover{border-color:var(--accent-line);}
.ms-btn.primary{background:var(--heat);border:none;color:#fff;}
.ms-btn.danger{color:#ff8a8a;border-color:rgba(255,90,90,.3);}
.ms-badge{font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:6px;}
.ms-badge.draft{background:var(--gold-bg);color:var(--gold-soft);}
.ms-badge.live{background:var(--accent-bg);color:var(--accent-soft);}
.ms-badge.cancelled{background:rgba(255,90,90,.12);color:#ff9a9a;}
.ms-role{font-size:calc(12px * var(--fs,1));color:var(--muted-2);}
.ms-back{background:none;border:none;color:var(--accent-soft);font-size:calc(14px * var(--fs,1));cursor:pointer;padding:0 0 12px;}
.cohost-pick{display:flex;flex-direction:column;gap:6px;}
.cohost-cand{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:10px;background:rgba(255,255,255,.02);color:var(--ink);cursor:pointer;text-align:left;font-size:calc(14px * var(--fs,1));}
.cohost-cand:hover{border-color:var(--accent-line);}
.cohost-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--accent-bg) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--accent-soft);}
/* sticky footer so Publish/Save stays reachable without scrolling the (tall) form */
.host-submit-row{display:flex;gap:10px;align-items:center;position:sticky;bottom:0;z-index:3;
  margin-top:16px;padding:12px 0 calc(4px + env(safe-area-inset-bottom));
  background:rgba(18,11,15,.98);box-shadow:0 -14px 16px -8px rgba(18,11,15,.98);}
[data-theme="light"] .host-submit-row{background:rgba(255,253,251,.98);box-shadow:0 -14px 16px -8px rgba(255,253,251,.98);}
.host-submit-row .btn-primary{flex:1;}
.host-submit-row .btn-ghost{flex:0 0 auto;width:auto;padding:0 16px;}
.modal-save-bar{position:sticky;bottom:0;z-index:3;margin-top:16px;
  padding:12px 0 calc(4px + env(safe-area-inset-bottom));
  background:rgba(18,11,15,.98);box-shadow:0 -14px 16px -8px rgba(18,11,15,.98);}
[data-theme="light"] .modal-save-bar{background:rgba(255,253,251,.98);box-shadow:0 -14px 16px -8px rgba(255,253,251,.98);}
.modal-save-bar .btn-primary{width:100%;}

/* ===== master visibility toggle ===== */
.vis-toggle{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--accent-line);background:var(--accent-bg);color:var(--ink);transition:background .15s,border-color .15s;}
.vis-toggle .vis-knob{flex:0 0 auto;position:relative;width:42px;height:24px;border-radius:12px;background:var(--accent);transition:background .15s;}
.vis-toggle .vis-knob::after{content:"";position:absolute;top:2px;left:20px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;}
.vis-toggle .vis-label{font-size:calc(14px * var(--fs,1));font-weight:600;}
.vis-toggle.off{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--muted);}
.vis-toggle.off .vis-knob{background:var(--muted-2);}
.vis-toggle.off .vis-knob::after{left:2px;}
.pe-vishint{font-size:calc(13px * var(--fs,1));color:var(--muted);line-height:1.5;margin:18px 0 0;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);}
.pe-vishint strong{color:var(--ink-soft);}

/* ===== app version · event photos · browse-card extras ===== */
.menu-version{padding:9px 16px 5px;font-size:calc(12px * var(--fs,1));color:var(--muted-2);letter-spacing:.04em;}
.menu-madein{padding:0 16px 9px;font-size:calc(12px * var(--fs,1));color:var(--muted-3);letter-spacing:.03em;}
.ev-pics{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 8px;}
.ev-pic{position:relative;width:74px;height:74px;border-radius:13px;background:var(--surface-3) center/cover no-repeat;border:1px solid var(--line-2);}
.ev-pic-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:none;background:var(--accent-2);color:#fff;font-size:calc(14px * var(--fs,1));line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.ev-pic-add{width:74px;height:74px;border-radius:13px;border:1px dashed var(--accent-line);background:var(--accent-bg);color:var(--accent-soft);font-size:calc(20px * var(--fs,1));cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.ev-pic-add span{font-size:calc(12px * var(--fs,1));letter-spacing:.04em;}
.ev-gallery{display:flex;gap:8px;padding:10px 20px 0;overflow-x:auto;}
.ev-gthumb{flex:0 0 56px;width:56px;height:56px;border-radius:10px;border:2px solid transparent;cursor:pointer;background:var(--surface-3) center/cover no-repeat;opacity:.65;transition:opacity .15s,border-color .15s;}
.ev-gthumb.active,.ev-gthumb:hover{opacity:1;}
.ev-gthumb.active{border-color:var(--gold-line);}
.bcard-host{font-size:calc(12px * var(--fs,1));color:var(--muted-3);margin-top:2px;}
.bcard-icons{display:flex;gap:7px;margin-top:6px;font-size:calc(15px * var(--fs,1));line-height:1;}

/* =========================================================
   Liquid Glass — translucent, blurred, light-catching surfaces
   layered over the existing burgundy/gold system.
   ========================================================= */
:root{ --glass:saturate(1.6) blur(22px); --glass-hi:rgba(255,224,234,.14); --glass-edge:rgba(255,205,222,.12); }
.topbar{ -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass);
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 6px 22px rgba(0,0,0,.28); }
.footer{ -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass);
  box-shadow:0 -1px 0 var(--glass-hi) inset; }
.rail,.browse-rail,.chats-rail,.menu-dropdown,.tf-more-panel{ -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass); }
.menu-dropdown,.tf-more-panel{ border:1px solid var(--glass-edge); box-shadow:0 1px 0 var(--glass-hi) inset,0 18px 44px rgba(0,0,0,.5); }
.modal{ background:rgba(22,13,19,.80); -webkit-backdrop-filter:var(--glass); backdrop-filter:var(--glass);
  border:1px solid var(--glass-edge); box-shadow:0 1px 0 var(--glass-hi) inset, 0 24px 60px rgba(0,0,0,.55); }
.modal-overlay{ -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); }
/* raised content surfaces get a soft top-edge sheen */
.bcard,.host-card,.stat{ box-shadow:0 1px 0 var(--glass-hi) inset; }
/* glossy primary buttons with a specular top sweep */
.btn-primary,.wall-send,.ms-btn.primary{ position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(242,84,61,.34); }
.btn-primary::after,.wall-send::after,.ms-btn.primary::after{ content:"";position:absolute;left:0;right:0;top:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent);pointer-events:none; }

/* =========================================================
   Light mode — dark stays the default. Activated by
   <html data-theme="light">. Keeps the burgundy/gold brand.
   ========================================================= */
:root[data-theme="light"]{
  --bg:#eef0f2; --bg-2:#e3e6e9;                 /* basic light grey */
  --panel:rgba(250,251,252,.86); --panel-left:rgba(250,251,252,.82); --topbar:rgba(252,253,254,.95);
  --line:rgba(28,32,38,.12); --line-2:rgba(28,32,38,.18);
  --ink:#23262b; --ink-bright:#14171b; --ink-soft:#474c54;   /* neutral dark-grey text */
  --muted:#6b7280; --muted-2:#6f7680; --muted-3:#565d66;
  --accent:#cb4a2c; --accent-2:#cb4a2c;          /* brand accent on light */
  --accent-soft:#c0401f; --accent-bg:rgba(203,74,44,.10); --accent-line:rgba(203,74,44,.42);
  --gold:#cb4a2c; --gold-soft:#c0401f; --gold-bg:rgba(203,74,44,.12); --gold-line:rgba(203,74,44,.40);
  --glass-hi:rgba(255,255,255,.6); --glass-edge:rgba(42,26,18,.10);
}
[data-theme="light"] .rail{ background:rgba(252,248,245,.80); }
[data-theme="light"] .modal{ background:rgba(255,253,251,.94); }
[data-theme="light"] .modal-overlay{ background:rgba(44,26,32,.40); }
[data-theme="light"] .menu-dropdown,[data-theme="light"] .tf-more-panel{ background:rgba(252,248,245,.94); }
[data-theme="light"] .bubble.them{ background:rgba(0,0,0,.055); color:var(--ink); }
/* my own bubbles kept dark-mode near-white text -> invert to ink so it isn't light-on-light */
[data-theme="light"] .bubble.me{ background:rgba(242,84,61,.16); border-color:rgba(242,84,61,.35); color:var(--ink); }
/* image placeholders that hardcode a dark fill */
[data-theme="light"] .bcard-cover,[data-theme="light"] .bcard-photo,[data-theme="light"] .ev-pic,
[data-theme="light"] .ev-gthumb,[data-theme="light"] .mc-card,[data-theme="light"] .wall-pic,
[data-theme="light"] .album-pick,[data-theme="light"] .pg-hero,[data-theme="light"] .pg-thumb{ background-color:#e7ddd6; }
[data-theme="light"] .browse-toggle{ background:rgba(0,0,0,.045); }
[data-theme="light"] .browse-toggle .seg.active{ background:#fff; color:var(--accent); }
[data-theme="light"] .field,[data-theme="light"] input,[data-theme="light"] textarea,
[data-theme="light"] select,[data-theme="light"] .wall-input{ background:rgba(0,0,0,.04); color:var(--ink); }
[data-theme="light"] .bcard,[data-theme="light"] .ms-btn,[data-theme="light"] .sp-row,
[data-theme="light"] .cohost-cand,[data-theme="light"] .vis-toggle.off,[data-theme="light"] .session-picker{ background:rgba(0,0,0,.025); }
[data-theme="light"] .topbar{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 18px rgba(60,40,28,.10); }

/* ===== menu visibility toggle (literal switch in the dropdown) ===== */
.menu-vis{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.menu-vis strong{color:var(--ink-bright);}
.mini-toggle{flex:0 0 auto;position:relative;width:40px;height:23px;border-radius:12px;background:var(--muted-2);transition:background .15s;}
.mini-toggle .mini-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.mini-toggle.on{background:var(--accent);}
.mini-toggle.on .mini-knob{left:19px;}

/* ===== nudge the smallest text up a touch for legibility ===== */
.menu-version{font-size:calc(12.5px * var(--fs,1));}
.bcard-meta{font-size:calc(13px * var(--fs,1));} .bcard-host{font-size:calc(12.5px * var(--fs,1));} .bcard-going{font-size:calc(12.5px * var(--fs,1));}
.ms-sub,.mc-sub,.sp-k{font-size:calc(13px * var(--fs,1));} .wall-when,.chat-row-when{font-size:calc(12px * var(--fs,1));}
.stat-k,.section-label,.ev-kicker,.field-label,.filter-label,.host-step,.quote-k,.setting-head label{font-size:calc(12.5px * var(--fs,1));}
.bcard-icons{font-size:calc(16px * var(--fs,1));} .ms-badge{font-size:calc(12px * var(--fs,1));} .open-pill,.open-chip{font-size:calc(13px * var(--fs,1));}
.setting-note{font-size:calc(13.5px * var(--fs,1));} .bcard-title{font-size:calc(14.5px * var(--fs,1));} .profile-sub,.nearby-meta{font-size:calc(13px * var(--fs,1));}

/* ===== light: also light the footer (map tiles follow the theme via JS) ===== */
[data-theme="light"] .footer{ background:rgba(252,248,245,.94); }

/* ===== theme selector (Dark / Light / Slay) ===== */
.menu-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;}
.menu-theme-label{font-size:calc(15px * var(--fs,1));color:var(--ink);}
.theme-seg{display:flex;gap:3px;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);}
.theme-seg button{padding:6px 9px;border:none;background:none;border-radius:7px;color:var(--muted);font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;transition:color .12s;}
.theme-seg button.active{background:var(--accent);color:#fff;}
.theme-seg button[data-theme-set="slay"].active{background:linear-gradient(90deg,#ff2d95,#ffd400,#2e9bff,#a14cff);color:#fff;}
.theme-seg button[data-theme-set="cyber"].active{background:#00ff9c;color:#04140c;box-shadow:0 0 10px rgba(0,255,156,.5);border-radius:2px;}

/* ===== glitter overlay (Slay only) ===== */
#glitter{display:none;}
[data-theme="slay"] #glitter{display:block;position:fixed;inset:0;pointer-events:none;z-index:1850;}
[data-theme="slay"] #glitter::before,[data-theme="slay"] #glitter::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(2px 2px at 78% 12%, #ffd400, transparent),
    radial-gradient(1.6px 1.6px at 33% 64%, #ff2d95, transparent),
    radial-gradient(2px 2px at 62% 78%, #2e9bff, transparent),
    radial-gradient(1.8px 1.8px at 48% 38%, #a14cff, transparent),
    radial-gradient(1.6px 1.6px at 88% 56%, #37d67a, transparent),
    radial-gradient(2px 2px at 18% 88%, #ff8a00, transparent),
    radial-gradient(1.5px 1.5px at 92% 86%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 55% 8%, #ff2d95, transparent),
    radial-gradient(1.6px 1.6px at 40% 92%, #2e9bff, transparent);}
[data-theme="slay"] #glitter::before{animation:glitter-pulse 2.4s ease-in-out infinite;}
[data-theme="slay"] #glitter::after{transform:translate(16px,24px) scale(1.12);animation:glitter-pulse 2.4s ease-in-out infinite reverse;animation-delay:1.2s;}
@keyframes glitter-pulse{0%,100%{opacity:.3}50%{opacity:1}}
[data-theme="slay"] #glitter::before{animation-duration:1.9s;}
[data-theme="slay"] #glitter::after{animation-duration:1.9s;}

/* ambient unicorn / sparkle parade — drifts up the screen (slay only) */
#glitter #parade b{display:none;}
[data-theme="slay"] #glitter #parade b{display:block;position:absolute;bottom:-12vh;line-height:1;
  filter:drop-shadow(0 2px 7px rgba(255,45,149,.4));animation-name:slay-float;animation-timing-function:linear;
  animation-iteration-count:infinite;will-change:transform,opacity;}
@keyframes slay-float{
  0%{transform:translateY(0) rotate(-10deg);opacity:0}
  10%{opacity:.92}
  88%{opacity:.92}
  100%{transform:translateY(-122vh) rotate(26deg);opacity:0}}

/* animated rainbow sweep — headings, toggles, CTA, topbar (slay only) */
@keyframes slay-rainbow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
[data-theme="slay"] .tf-lbl{background:linear-gradient(90deg,#ff2d95,#ff8a00,#ffd400,#37d67a,#2e9bff,#a14cff,#ff2d95);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:slay-rainbow 6s linear infinite;}
[data-theme="slay"] .when-sec{color:#ff2d95;text-shadow:0 0 16px rgba(255,45,149,.4);}
[data-theme="slay"] .when-seg .seg.active{background:linear-gradient(90deg,#ff2d95,#ff8a00,#ffd400,#37d67a,#2e9bff,#a14cff,#ff2d95);
  background-size:200% auto;animation:slay-rainbow 5s linear infinite;color:#fff;box-shadow:0 1px 12px rgba(255,45,149,.55);}
[data-theme="slay"] .btn-primary,[data-theme="slay"] .btn-quick{
  background-size:200% auto;animation:slay-rainbow 5s linear infinite;}
[data-theme="slay"] .topbar{background-size:200% auto;animation:slay-rainbow 12s linear infinite;}

@media (prefers-reduced-motion:reduce){[data-theme="slay"] #glitter::before,[data-theme="slay"] #glitter::after{animation:none;opacity:.55;}
  [data-theme="slay"] #parade b{animation:none;opacity:.6;}
  [data-theme="slay"] .tf-lbl,[data-theme="slay"] .when-seg .seg.active,
  [data-theme="slay"] .btn-primary,[data-theme="slay"] .btn-quick,[data-theme="slay"] .topbar{animation:none;}
  [data-theme="slay"] .brand-name,[data-theme="slay"] .brand-tld{animation:none;}}

/* ===== SLAY — rainbow + glitter, dark-on-light so it stays readable ===== */
:root[data-theme="slay"]{
  --bg:#fff0f8; --bg-2:#ffe6f6;
  --panel:rgba(255,250,253,.80); --panel-left:rgba(255,250,253,.76); --topbar:rgba(255,244,251,.62);
  --line:rgba(180,40,140,.16); --line-2:rgba(180,40,140,.22);
  --ink:#2a0f24; --ink-bright:#1a0716; --ink-soft:#4a2040;
  --muted:#9a5a86; --muted-2:#c08aab; --muted-3:#7a4068;
  --accent:#ff5e3a; --accent-2:#a14cff;          /* brand accent, kept loud against the rainbow */
  --accent-soft:#ff8a6a; --accent-bg:rgba(255,94,58,.12); --accent-line:rgba(255,94,58,.42);
  --gold:#ff9d00; --gold-soft:#c97a00; --gold-bg:rgba(255,157,0,.16); --gold-line:rgba(255,157,0,.45);
  --heat:linear-gradient(100deg,#ff2d95,#ff8a00,#ffd400,#37d67a,#2e9bff,#a14cff);
  --glass-hi:rgba(255,255,255,.6); --glass-edge:rgba(180,40,140,.16);
}
[data-theme="slay"] body{background:linear-gradient(135deg,#fff0f8,#fbe9ff 50%,#e9f4ff);}
[data-theme="slay"] .rail{background:rgba(255,249,253,.84);}
[data-theme="slay"] .modal{background:rgba(255,250,253,.95);}
[data-theme="slay"] .modal-overlay{background:rgba(60,20,55,.42);}
[data-theme="slay"] .menu-dropdown,[data-theme="slay"] .tf-more-panel{background:rgba(255,250,253,.96);}
[data-theme="slay"] .footer{background:rgba(255,249,253,.94);border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#ff2d95,#ff8a00,#ffd400,#37d67a,#2e9bff,#a14cff) 1;}
[data-theme="slay"] .topbar{background:linear-gradient(90deg,rgba(255,45,149,.16),rgba(255,212,0,.13),rgba(46,155,255,.15),rgba(161,76,255,.16));border-bottom:1px solid var(--accent-line);}
/* Logo stays consistent across dark / light / slay — no slay rainbow on the wordmark. */
[data-theme="slay"] .foot-host .fi-host{background:var(--heat);box-shadow:0 4px 16px rgba(224,27,141,.5);}
[data-theme="slay"] .bcard-cover,[data-theme="slay"] .bcard-photo,[data-theme="slay"] .ev-pic,
[data-theme="slay"] .ev-gthumb,[data-theme="slay"] .mc-card,[data-theme="slay"] .wall-pic,
[data-theme="slay"] .album-pick,[data-theme="slay"] .pg-hero,[data-theme="slay"] .pg-thumb{background-color:#f3def0;}
[data-theme="slay"] .field,[data-theme="slay"] input,[data-theme="slay"] textarea,
[data-theme="slay"] select,[data-theme="slay"] .wall-input{background:rgba(180,40,140,.05);color:var(--ink);}
[data-theme="slay"] .bcard,[data-theme="slay"] .session-picker,[data-theme="slay"] .ms-btn,
[data-theme="slay"] .sp-row,[data-theme="slay"] .cohost-cand,[data-theme="slay"] .vis-toggle.off{background:rgba(180,40,140,.035);}
[data-theme="slay"] .bubble.them{background:rgba(180,40,140,.07);color:var(--ink);}
[data-theme="slay"] .bubble.me{background:rgba(255,94,58,.16);border-color:rgba(255,94,58,.34);color:var(--ink);}
[data-theme="slay"] .browse-toggle .seg.active{background:#fff;color:var(--accent);}
[data-theme="slay"] .section-label,[data-theme="slay"] .ev-kicker{color:var(--accent);}

/* ===== Cyber — terminal green on near-black, blocky, gaming-style (opt-in) ===== */
:root[data-theme="cyber"]{
  --bg:#060907; --bg-2:#0a100c;
  --panel:rgba(8,16,11,.70); --panel-left:rgba(8,16,11,.66); --topbar:rgba(6,11,8,.94);
  --line:rgba(0,255,156,.14); --line-2:rgba(0,255,156,.26);
  --ink:#d7ffe9; --ink-bright:#eafff4; --ink-soft:#a6ecc9;
  --muted:#6fd3a6; --muted-2:#57a583; --muted-3:#8fe0bb;
  --accent:#00ff9c; --accent-2:#4dff8a; --accent-soft:#a9ffd6;
  --accent-bg:rgba(0,255,156,.14); --accent-line:rgba(0,255,156,.50);
  --gold:#00ff9c; --gold-soft:#a9ffd6; --gold-bg:rgba(0,255,156,.14); --gold-line:rgba(0,255,156,.42);
  --heat:linear-gradient(115deg,#00ff9c,#5cff4a);
  --heat-soft:radial-gradient(120% 120% at 50% 0%, rgba(0,255,156,.12), rgba(0,255,156,.03) 55%, transparent 75%);
  --glass-hi:rgba(0,255,156,.10); --glass-edge:rgba(0,255,156,.14);
  /* blocky — kill the round corners */
  --r-sm:0px; --r-md:2px; --r-lg:2px; --r-full:2px;
  /* terminal type */
  --display:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono','Fira Code',Menlo,Consolas,monospace;
  --sans:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono','Fira Code',Menlo,Consolas,monospace;
}
/* faint scanlines over the near-black ground */
[data-theme="cyber"] body{background:
  repeating-linear-gradient(0deg, rgba(0,255,156,.035) 0 1px, transparent 1px 3px),
  var(--bg);}
[data-theme="cyber"] .rail{background:rgba(6,11,8,.86);}
[data-theme="cyber"] .modal{background:rgba(7,13,9,.96);border:1px solid var(--line-2);}
[data-theme="cyber"] .modal-overlay{background:rgba(0,10,5,.62);}
[data-theme="cyber"] .menu-dropdown,[data-theme="cyber"] .tf-more-panel{background:rgba(7,13,9,.97);}
[data-theme="cyber"] .topbar{background:rgba(6,11,8,.95);border-bottom:1px solid var(--accent-line);}
[data-theme="cyber"] .footer{background:rgba(6,11,8,.95);border-top:1px solid var(--accent-line);}
/* blocky corners on the visible surfaces (incl. square, pixel-avatar look) */
[data-theme="cyber"] .rail,[data-theme="cyber"] .modal,[data-theme="cyber"] .menu-dropdown,
[data-theme="cyber"] button,[data-theme="cyber"] input,[data-theme="cyber"] textarea,[data-theme="cyber"] select,
[data-theme="cyber"] .field,[data-theme="cyber"] .card,[data-theme="cyber"] .chip,
[data-theme="cyber"] .guy-tile,[data-theme="cyber"] .bcard,[data-theme="cyber"] .host-card,[data-theme="cyber"] .bubble,
[data-theme="cyber"] .tag-soft,[data-theme="cyber"] .pill,[data-theme="cyber"] .founder-box,[data-theme="cyber"] .viewers-box,
[data-theme="cyber"] .setup-banner,[data-theme="cyber"] .stat,[data-theme="cyber"] .when-card,[data-theme="cyber"] .ev-cover,
[data-theme="cyber"] .guy-photo,[data-theme="cyber"] .vb-av,[data-theme="cyber"] .profile-av,[data-theme="cyber"] .host-av,
[data-theme="cyber"] .brand-emoji,[data-theme="cyber"] .tf-more,[data-theme="cyber"] .tf-pill,[data-theme="cyber"] .seg,[data-theme="cyber"] .open-chip,
[data-theme="cyber"] .btn-primary,[data-theme="cyber"] .btn-ghost,[data-theme="cyber"] .vis-toggle,[data-theme="cyber"] .founder-badge{
  border-radius:2px;
}
/* inputs + image placeholders */
[data-theme="cyber"] .field,[data-theme="cyber"] input,[data-theme="cyber"] textarea,[data-theme="cyber"] select,
[data-theme="cyber"] .wall-input{background:rgba(0,255,156,.05);color:var(--ink);border:1px solid var(--line-2);}
[data-theme="cyber"] .bcard-cover,[data-theme="cyber"] .bcard-photo,[data-theme="cyber"] .ev-pic,
[data-theme="cyber"] .ev-gthumb,[data-theme="cyber"] .mc-card,[data-theme="cyber"] .wall-pic,[data-theme="cyber"] .guy-photo.noimg,
[data-theme="cyber"] .album-pick,[data-theme="cyber"] .pg-hero,[data-theme="cyber"] .pg-thumb{background-color:#0c1712;}
[data-theme="cyber"] .bubble.them{background:rgba(0,255,156,.06);color:var(--ink);}
[data-theme="cyber"] .bubble.me{background:rgba(0,255,156,.14);border:1px solid var(--accent-line);color:#eafff4;}
[data-theme="cyber"] .btn-primary{background:var(--accent);color:#04140c;font-weight:700;}
[data-theme="cyber"] .vchk,[data-theme="cyber"] .vchk-mini{background:var(--accent);color:#04140c;}
/* neon glow on the identity + active bits */
[data-theme="cyber"] .brand-name{text-shadow:0 0 10px rgba(0,255,156,.45);}
[data-theme="cyber"] .brand-arrow{filter:drop-shadow(0 0 6px rgba(0,255,156,.55));}
[data-theme="cyber"] .section-label,[data-theme="cyber"] .ev-kicker,[data-theme="cyber"] .when-sec,
[data-theme="cyber"] .foot-item.active{color:var(--accent);text-shadow:0 0 8px rgba(0,255,156,.35);}
[data-theme="cyber"] .seg.active,[data-theme="cyber"] .btn-primary{
  box-shadow:0 0 0 1px var(--accent-line),0 0 12px rgba(0,255,156,.28);}
[data-theme="cyber"] ::selection{background:rgba(0,255,156,.3);color:#eafff4;}

/* ===== When-first segs (they live in the topbar now) + results rail ===== */
.when-seg{margin:0;border-radius:9px;}   /* margin:0 kills .segmented's default bottom margin — it off-centres the header row */
.when-seg .seg{padding:7px 13px;font-size:calc(12px * var(--fs,1));font-weight:600;border-radius:6px;min-width:0;white-space:nowrap;}
.when-seg .seg.active{background:var(--surface-3);color:var(--ink-bright);box-shadow:0 1px 5px rgba(0,0,0,.35);}
/* rec 06: coral is reserved for your POSTED availability window — the one lead (rec 03). A When preset you're
   only browsing stays neutral; the one you've posted (`.posted`) is the single coral seg in the app. */
.when-seg.tf-when .seg.posted{background:var(--accent);color:#fff;box-shadow:0 1px 6px rgba(242,84,61,.4);}
.golive-confirm{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:11px 14px;border-radius:13px;background:var(--accent-bg);border:1px solid var(--accent-line);font-size:calc(13px * var(--fs,1));color:var(--ink-soft);}
.golive-confirm .glc-actions{display:flex;gap:8px;flex:none;}
.golive-confirm .glc-post{padding:8px 15px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:calc(12.5px * var(--fs,1));}
.golive-confirm .glc-stay{padding:8px 13px;border-radius:10px;background:transparent;border:1px solid var(--line-2);color:var(--muted);font-size:calc(12.5px * var(--fs,1));}
/* rec 03 (accent restraint): keep the solid coral fill for the ONE lead — the When/availability seg.
   Looking-for is a secondary filter, so its active state is a neutral raised fill, not a 2nd coral pill. */
.when-seg.tf-type .seg.active{background:var(--surface-3);color:var(--ink-bright);box-shadow:0 1px 5px rgba(0,0,0,.35);}
/* the seg track is invisible on the near-white light/slay topbars — give it the dark-on-light treatment */
[data-theme="light"] .when-seg,[data-theme="slay"] .when-seg{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.06);}
/* results rail (right slide-over, like chats) */
.when-rail{right:0;width:min(384px,94vw);border-left:1px solid var(--line);transform:translateX(106%);}
.when-rail.open{transform:none;}
/* list-home: the when-first list is the landing surface; the map is demoted behind the footer "Map" button. */
.when-rail.home{left:0;right:0;width:auto;border-left:0;transform:translateY(100%);z-index:1400;}
.when-rail.home.open{transform:none;}
.when-sec{font-family:var(--display);font-weight:700;font-size:calc(12px * var(--fs,1));color:var(--accent);margin:8px 2px 6px;letter-spacing:.01em;}
/* Home "I'm free" control — post your own availability (multi-select, check marks each selected window) */
.imfree{margin:2px 0 14px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(242,84,61,.07),rgba(255,255,255,.012));
  box-shadow:0 6px 22px rgba(0,0,0,.28);overflow:hidden;}
.imfree-bar{display:flex;align-items:center;gap:11px;width:100%;padding:14px 15px;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;}
.imfree-dot{position:relative;width:11px;height:11px;flex:none;border-radius:50%;border:1.5px solid var(--muted-2);}
.imfree-dot i{display:none;}
.imfree.has .imfree-dot{border:0;}
.imfree.has .imfree-dot i{display:block;position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;}
.imfree.has .imfree-dot-ring{background:rgba(242,84,61,.5);animation:vsp-pulse 2.8s ease-out infinite;}
.imfree.has .imfree-dot-core{background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(242,84,61,.85);}
.imfree-headtext{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px;}
.imfree-title{font-family:var(--display);font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--ink-bright);line-height:1;}
.imfree-summary{display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-width:0;}
.imfree-prompt{font-size:calc(12.5px * var(--fs,1));color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.imfree-pill{font-size:calc(12px * var(--fs,1));font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:2px 9px;white-space:nowrap;}
.imfree-sumnote{font-size:calc(12.5px * var(--fs,1));color:var(--muted-2);}
.imfree-cta{flex:none;padding:8px 14px;border-radius:999px;background:var(--heat);color:#fff;
  font-size:calc(12.5px * var(--fs,1));font-weight:700;box-shadow:0 6px 16px rgba(242,84,61,.32);}
.imfree.has .imfree-cta{display:none;}
.imfree-caret{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  margin:-4px -2px -4px 0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--ink-soft);transition:transform .22s ease;}
.imfree-caret svg{width:18px;height:18px;display:block;}
.imfree-drawer{overflow:hidden;}
.imfree-chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:0 15px;}
.imfree-chip{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:64px;padding:13px 12px;border-radius:13px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;}
.imfree-chip:hover{border-color:var(--accent-line);}
.imfree-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.imfree-check{position:absolute;top:8px;right:9px;width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.25);display:none;align-items:center;justify-content:center;
  font-size:calc(10px * var(--fs,1));font-weight:800;color:#fff;}
.imfree-chip.on .imfree-check{display:flex;}
.imfree-lbl{display:flex;flex-direction:column;gap:4px;line-height:1.1;font-size:calc(14px * var(--fs,1));font-weight:700;}
.imfree-hint{font-size:calc(12px * var(--fs,1));font-weight:500;opacity:.72;letter-spacing:.01em;}
.imfree-chip.on .imfree-hint{opacity:.85;}
.imfree-sub{font-size:calc(12.5px * var(--fs,1));color:var(--muted-2);padding:11px 15px 15px;line-height:1.45;}
.textsize-seg{align-items:center;padding:5px;border-radius:13px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);gap:4px;}
.textsize-seg button{flex:1;display:flex;align-items:center;justify-content:center;padding:11px 0;
  font-weight:700;line-height:1;color:var(--muted);border-radius:9px;transition:background .15s,color .15s;}
.textsize-seg button.active{background:var(--accent);color:#fff;}
.when-card{display:block;width:100%;text-align:left;padding:13px 14px;margin-bottom:9px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);transition:border-color .12s,background .12s;}
.when-card:hover{border-color:var(--accent-line);background:rgba(255,255,255,.08);}
[data-theme="light"] .when-card,[data-theme="slay"] .when-card{background:rgba(0,0,0,.04);}
.when-card-t{font-weight:700;font-size:calc(14.5px * var(--fs,1));color:var(--ink-bright);}
.when-card-s{font-size:calc(12.5px * var(--fs,1));color:var(--muted);margin-top:3px;}
.when-empty{padding:38px 18px;text-align:center;color:var(--muted);font-size:calc(14px * var(--fs,1));line-height:1.6;}
.when-empty .muted{color:var(--muted-2);font-size:calc(13px * var(--fs,1));}
.when-sec-sub{font-weight:500;font-size:calc(12px * var(--fs,1));color:var(--muted-2);text-transform:none;letter-spacing:0;}
.when-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.when-card-row .when-card-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.when-tag{flex:none;font-size:calc(10px * var(--fs,1));font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:5px;padding:3px 8px;}
.when-card-host{font-size:calc(12px * var(--fs,1));color:var(--ink);opacity:.9;margin-top:7px;}
.when-card-host strong{color:var(--ink-bright);font-weight:700;}
/* photo-forward cards — imagery drives the tap */
.when-card-person{display:flex;align-items:center;gap:13px;}
.when-photo{flex:0 0 60px;width:60px;height:60px;border-radius:14px;background:var(--surface-1) center/cover no-repeat;position:relative;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:calc(23px * var(--fs,1));color:var(--ink-bright);}
.when-photo.noimg{background:var(--heat);color:#fff;}
.when-card-main{min-width:0;flex:1;}
.when-card-main .when-card-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.when-live{position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-radius:50%;background:#39d353;border:2.5px solid #100d0b;}
.when-card-session.has-cover{padding:0;overflow:hidden;}
.when-cover{height:148px;background:var(--surface-1) center/cover no-repeat;position:relative;}
/* results grid — one column on phones, multi-column on desktop so it doesn't read as stretched mobile */
.when-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;}
.when-grid .when-card{margin-bottom:0;}
/* guys grid — compact photo tiles (3 across) with "into" emojis overlaid */
.guys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start;}
/* User-chosen tile density (2/3/4 across) overrides the responsive defaults below at all
   widths ≥701px; phones stay at 2 so tiles never get too cramped to tap. */
.guys-grid.has-cols{grid-template-columns:repeat(var(--grid-cols,2),1fr);}
@media (max-width:700px){ .guys-grid.has-cols{grid-template-columns:repeat(2,1fr);} }
.guy-tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-1);text-align:left;}
.guy-tile:active{transform:translateY(1px);}
.guy-photo{position:relative;aspect-ratio:1/1.12;background:var(--surface-1) center/cover no-repeat;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:calc(38px * var(--fs,1));color:var(--ink-bright);}
.guy-photo.noimg{background:var(--heat);color:#fff;}
.guy-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.3) 34%,transparent 60%);}
.guy-live{position:absolute;top:9px;right:9px;width:13px;height:13px;border-radius:50%;background:#39d353;border:2px solid rgba(0,0,0,.45);z-index:2;}
/* "Fantasy" (AI persona) markers — white-on-violet so they read on any photo/theme */
.guy-fantasy{position:absolute;top:8px;left:8px;z-index:3;font-size:calc(9px * var(--fs,1));font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:#7c3aed;padding:2px 6px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.profile-badge.fantasy-badge{background:#7c3aed;color:#fff;}
.guy-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 10px;}
.guy-name{font-weight:700;font-size:calc(14px * var(--fs,1));color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.guy-tags{margin-top:4px;font-size:calc(15px * var(--fs,1));line-height:1;letter-spacing:2px;}
.guy-verified{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#4bb58a;color:#0e0b09;font-size:calc(9px * var(--fs,1));font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.5);}
.chat-vchk{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#4bb58a;color:#0e0b09;font-size:calc(9px * var(--fs,1));font-weight:800;margin-left:6px;vertical-align:middle;}
.chat-vchk[hidden]{display:none;}
.guy-dist{margin-top:4px;font-size:calc(12px * var(--fs,1));color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.guys-sentinel{height:1px;}
@media (min-width:881px){
  .when-rail.home .rail-scroll{width:100%;max-width:1100px;margin-inline:auto;padding-left:22px;padding-right:22px;padding-top:18px;}
  .when-grid{grid-template-columns:repeat(2,1fr);gap:10px;}   /* match the guys-grid gutter for one consistent rhythm */
  .guys-grid{grid-template-columns:repeat(4,1fr);gap:10px;}
}
@media (min-width:1240px){
  .when-rail.home .rail-scroll{max-width:1280px;}
  .guys-grid{grid-template-columns:repeat(6,1fr);}
}
@media (min-width:1600px){
  .when-rail.home .rail-scroll{max-width:1560px;}
  .guys-grid{grid-template-columns:repeat(8,1fr);gap:10px;}
  .when-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:880px){
  /* phone: the When seg sits in the topbar; the list starts right under the header */
  .when-seg .seg{padding:6px 9px;font-size:calc(12px * var(--fs,1));white-space:nowrap;}
  .when-rail.home .rail-scroll{padding-top:14px;}
  /* denser tiles so more guys are visible at once */
  .guy-photo{aspect-ratio:1/1.05;font-size:calc(26px * var(--fs,1));}
  .guy-info{padding:6px 8px;}
  .guy-name{font-size:calc(12px * var(--fs,1));}
  .guy-tags{font-size:calc(12px * var(--fs,1));letter-spacing:1px;margin-top:3px;}
  .guy-dist{font-size:calc(12px * var(--fs,1));margin-top:3px;}
  .guy-live{width:11px;height:11px;top:7px;right:7px;}
}
.grid-seg{display:inline-flex;}
.grid-seg .seg{min-width:34px;text-align:center;}
.when-card-session.has-cover .when-card-body{padding:12px 14px 13px;}
.when-tag-over{position:absolute;top:10px;right:10px;color:#fff;background:rgba(10,7,9,.74);border-color:transparent;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}

/* Ambient glow behind the primary actions (after-dark depth). */
.btn-primary, .fab, .btn-quick { box-shadow:0 8px 22px rgba(242,84,61,.28), 0 0 34px rgba(255,111,86,.10); }

/* ---- narrow phones (<=420px): shave brand + When seg so the header row never overflows ---- */
@media (max-width:420px){
  .topbar{gap:8px;padding-left:10px;padding-right:10px;}
  .brand-name{font-size:calc(22px * var(--fs,1));}
  .topbar-filters{gap:6px;}
  .when-seg .seg{padding:6px 7px;font-size:calc(12px * var(--fs,1));}
  .tf-pill,.topbar-menu{width:34px;height:34px;}
}

/* ===================================================================
   Chat upgrade — reactions, replies, edit/delete, disappearing, lightbox.
   FUNCTIONAL styling by Claude Code — visual polish is Design's lane (see COLLAB.md).
   =================================================================== */
.bubble{position:relative}
/* Action affordance sits in the empty gutter beside the bubble (left of my messages, right of theirs). */
.bubble-act{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(127,127,127,.2);color:inherit;opacity:.55;cursor:pointer;font-size:16px;font-weight:700;line-height:1;padding:2px 7px;border-radius:10px}
.bubble.me .bubble-act{right:100%;left:auto;margin-right:6px}
.bubble.them .bubble-act{left:100%;right:auto;margin-left:6px}
.bubble:hover .bubble-act{opacity:1}
.bubble-act:hover{background:rgba(127,127,127,.38)}
@media (hover:none){.bubble-act{opacity:.7}}
.bubble-quote{border-left:3px solid rgba(255,90,95,.7);padding:2px 8px;margin:0 0 4px;font-size:12px;opacity:.85;border-radius:4px;background:rgba(127,127,127,.12);cursor:pointer;max-width:240px}
.bubble-quote .bq-who{display:block;font-weight:600;font-size:11px;opacity:.9}
.bubble-quote .bq-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble-reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.react-chip{border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.12);border-radius:12px;padding:1px 7px;font-size:13px;cursor:pointer;line-height:1.5}
.react-chip.mine{border-color:rgba(255,90,95,.85);background:rgba(255,90,95,.18)}
.react-chip .rc-n{font-size:11px;margin-left:3px;opacity:.8}
.bubble-edited{font-size:10px;opacity:.6;margin-right:5px}
.bubble-deleted .deleted-note{opacity:.6;font-style:italic}
.chat-system{text-align:center;font-size:11.5px;opacity:.7;margin:8px auto;max-width:82%}
.bubble-flash{animation:bflash 1.2s ease}
@keyframes bflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(255,90,95,.55)}}
.chat-reply-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid rgba(127,127,127,.2);font-size:12px;background:rgba(127,127,127,.06)}
.chat-reply-bar .crb-in{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-reply-bar .crb-l{font-weight:600;color:#ff5a5f}
.chat-reply-bar .crb-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}
.chat-reply-bar .crb-x{border:0;background:transparent;font-size:16px;cursor:pointer;color:inherit;padding:2px 6px}
.msg-menu{position:fixed;z-index:9999;background:#1c1c1e;color:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.5);padding:6px;min-width:154px}
.msg-menu .mm-reacts{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px}
.msg-menu .mm-emoji{border:0;background:transparent;font-size:20px;cursor:pointer;padding:4px;border-radius:8px;flex:1}
.msg-menu .mm-emoji:hover{background:rgba(255,255,255,.14)}
.msg-menu .mm-acts{display:flex;flex-direction:column}
.msg-menu .mm-acts button{border:0;background:transparent;color:#fff;text-align:left;padding:8px 10px;font-size:14px;cursor:pointer;border-radius:8px}
.msg-menu .mm-acts button:hover{background:rgba(255,255,255,.1)}
.msg-menu .mm-del{color:#ff6b6b}
.ov-label{font-size:11px;opacity:.55;padding:6px 12px 2px;text-transform:uppercase;letter-spacing:.04em}
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:8px}
.lightbox .lb-x{position:absolute;top:16px;right:20px;background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}

/* Prevent mobile browsers zooming when a text field is focused: any input under 16px triggers
   iOS auto-zoom. Floor interactive text inputs at 16px on touch devices (doesn't affect desktop
   layout or the --fs text-scaling elsewhere). */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select { font-size:16px !important; }
}