/* ════════════════════════════════════════════════════════════════
   RECENTIA.FYI — Stylesheet v9 — Apple-themed full coverage
   - Legacy class structure preserved (rant cards, sidebar, modals,
     lightbox, footer, admin bar, comments, profile nav, analytics)
   - Apple visual language: SF Pro Display + Plus Jakarta + Playfair-R
   - Apple palette: white / Apple grays / blue accent
   - New additions: .chip-row, .chip, .lc, .live-stack, .hero-card
   - Dark mode supported via [data-theme="dark"]
════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── Cross-document view transitions (Chrome 126+ / Edge) ───
   Smooth fade between same-origin pages (admin tabs, etc).
   Persistent UI (top nav, admin bar) stays anchored via
   view-transition-name so only the page body fades. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}

:root{
  --bg:#ffffff;            --bg2:#f5f5f7;
  --surface:#ffffff;       --surface2:#f5f5f7;  --surface3:#ebebed;
  --border:#e5e5e7;        --border2:#d2d2d7;
  --text:#1d1d1f;          --text2:#424247;
  --muted:#86868b;         --muted2:#b1b1b6;

  --navy:#0071e3;          --navy2:#0058b8;     /* Apple blue — primary */
  --nrgb:0,113,227;
  --nlight:rgba(0,113,227,.08);

  --teal:#006edb;          --teal-bg:rgba(0,110,219,.10);
  --gold:#a16207;          --gold-bg:rgba(161,98,7,.10);
  --green:#34c759;         --green-bg:rgba(52,199,89,.10);
  --red:#ff3b30;           --red-bg:rgba(255,59,48,.08);
  --purple:#5856d6;        --purple-bg:rgba(88,86,214,.10);
  --orange:#ff9500;        --orange-bg:rgba(255,149,0,.10);

  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh:0 4px 16px rgba(0,0,0,.06);
  --sh-lg:0 24px 60px rgba(0,0,0,.10);

  --r:18px;                --r-sm:12px;         --r-xs:8px;
  --r-pill:980px;
  --nav-h:56px;            --adm-h:38px;
  --mw:1140px;
  --t:.18s ease;

  --serif-display:'SF Pro Display','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Plus Jakarta Sans','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* Dark-mode snap flip — suppress every transition during the data-theme swap so
   the entire UI repaints instantly instead of cascading element-by-element at
   .18s. Class is added by toggleDark() in r.js and removed on the next paint. */
.theme-flush, .theme-flush *, .theme-flush *::before, .theme-flush *::after {
  transition: none !important;
}

/* ─── Editorial heading (Playfair italic accent + gold dot) ───────── */
.feed-hd-l h2.ed-hd{display:flex;align-items:center;letter-spacing:-.015em;}
.feed-hd-l h2.ed-hd em{
  font-family:'Playfair Display','Cormorant Garamond',serif;
  font-style:italic;font-weight:600;color:var(--text);
  margin-right:14px;letter-spacing:-.005em;
}
.feed-hd-l h2.ed-hd .hd-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-right:14px;
  box-shadow:0 0 0 3px var(--gold-bg);
  animation:hdDotPulse 1.8s ease-in-out infinite;
}
@keyframes hdDotPulse{
  0%,100%{box-shadow:0 0 0 3px var(--gold-bg);}
  60%{box-shadow:0 0 0 8px rgba(161,98,7,0);}
}

/* ─── Vote tick — count digit pops, pill flashes a teal halo ─────── */
@keyframes voteTickDigit{
  0%{transform:translateY(0);}
  35%{transform:translateY(-4px);}
  60%{transform:translateY(2px);}
  100%{transform:translateY(0);}
}
@keyframes voteTickGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,110,219,0);}
  35%{box-shadow:0 0 0 5px rgba(0,110,219,.18);}
}
.vote-btn.tick{animation:voteTickGlow .55s ease;}
.vote-btn .vote-n{display:inline-block;font-variant-numeric:tabular-nums;}
.vote-btn.tick .vote-n{animation:voteTickDigit .42s cubic-bezier(.2,.7,.2,1);}

/* ─── Fresh-post pulsing dot — appears in tag row for posts < 1h old ─ */
.fresh-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green);margin-right:2px;flex-shrink:0;align-self:center;
  box-shadow:0 0 0 0 rgba(52,199,89,.55);
  animation:freshPulse 1.8s ease-in-out infinite;
}
@keyframes freshPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.55);}
  60%{box-shadow:0 0 0 6px rgba(52,199,89,0);}
}

/* ─── Top-ranked card — single editorial moment for #1 trending ──── */
.rant-card.top-rank{
  position:relative;border:1.5px solid transparent;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,var(--gold) 0%,var(--teal) 100%) border-box;
}
.rant-card.top-rank .rc-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);
  padding:14px 22px 0;
}
.rant-card.top-rank .rc-eyebrow::before{
  content:'';display:inline-block;width:18px;height:1px;background:var(--gold);
}
.rant-card.top-rank .rc-title{
  font-family:'Playfair Display',serif;
  font-size:1.32em;font-weight:600;letter-spacing:-.015em;line-height:1.25;
}

[data-theme="dark"]{
  --bg:#000000;            --bg2:#0c0c0e;
  --surface:#1c1c1e;       --surface2:#2c2c2e;  --surface3:#3a3a3c;
  --border:#2c2c2e;        --border2:#3a3a3c;
  --text:#f5f5f7;          --text2:#c7c7cc;
  --muted:#98989d;         --muted2:#636366;
  --navy:#0a84ff;          --navy2:#0a84ff;
  --nrgb:10,132,255;
  --nlight:rgba(10,132,255,.16);
  --teal:#5ac8fa;          --teal-bg:rgba(90,200,250,.12);
  --gold:#f0a820;          --gold-bg:rgba(240,168,32,.10);
  --green:#30d158;         --green-bg:rgba(48,209,88,.12);
  --red:#ff453a;           --red-bg:rgba(255,69,58,.12);
  --purple:#5e5ce6;        --purple-bg:rgba(94,92,230,.16);
  --orange:#ff9f0a;        --orange-bg:rgba(255,159,10,.14);
  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --sh:0 4px 16px rgba(0,0,0,.5);
  --sh-lg:0 24px 60px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t),color var(--t);
  position:relative;overflow-x:hidden;
}
/* Aurora is now anchored to the feed wrapper (.main) — see .main rule below — so the
   blooms scale with the actual feed area and never overlap the hero. The body-level
   pseudo-elements above were removed because vw/vh anchoring couldn't reliably stay
   below the variable-height hero across viewports (e.g. on 873-tall viewports the
   hero is 830px → 75vh aurora landed mid-hero, not below it). */
/* Lift content above the aurora layer. The nav already sits at z-index 50ish via its own rule;
   this catches everything else that's a direct body child. */
body > *{position:relative;z-index:1;}
a{color:inherit;text-decoration:none;transition:color var(--t)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif-display);font-weight:700;letter-spacing:-.02em;color:var(--text)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ─── Nav (fixed, height=56px) ──────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--nav-h);
  view-transition-name: rec-nav;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
[data-theme="dark"] .nav{background:rgba(0,0,0,.72)}
.nav-inner{
  width:100%;max-width:var(--mw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.logo{
  font-family:var(--serif-display);font-weight:700;font-size:21px;letter-spacing:-.025em;
  color:var(--text);text-decoration:none;flex-shrink:0;
  display:flex;align-items:center;gap:9px;
}
.logo .mark{
  width:30px;height:30px;border-radius:0;
  background:var(--text);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--bg);font-weight:800;font-size:18px;
  font-family:'Playfair Display','Times New Roman',Georgia,serif;
  line-height:1;
}
.logo small{
  font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:0;align-self:flex-end;margin-bottom:5px;
}
.nav-links{display:flex;gap:4px;list-style:none;flex-wrap:nowrap}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--text2);
  padding:7px 13px;border-radius:var(--r-pill);transition:all var(--t);
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a.act{color:var(--text);background:var(--surface2)}
.nav-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:all var(--t);position:relative;flex-shrink:0;
}
.nav-btn:hover{border-color:var(--text);color:var(--text);background:var(--surface2)}
.nbadge{
  position:absolute;bottom:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;box-sizing:border-box;
  background:var(--red);color:#fff;
  font-size:9.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.su-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--text);color:var(--bg);font-family:var(--sans);
  font-size:10px;padding:3px 9px;border-radius:var(--r-pill);
  letter-spacing:.05em;cursor:pointer;font-weight:700;
  /* Transparent 1px border on the base so the founder variant — which
     adds a real border — does not render 2px taller than the moderator
     and admin variants in the nav. Variants override `border-color`. */
  border:1px solid transparent;line-height:1.4;
}
.su-pill.admin{background:var(--text);color:var(--bg)}
/* Founder — refined metallic charcoal in light mode, brushed silver in dark.
   Distinct from .su-pill (Moderator, flat dark) and .su-pill.admin (flat navy)
   without using yellow/gold/amber. */
.su-pill.founder{
  background:linear-gradient(135deg, #2a2a2c 0%, #0a0a0a 100%);
  color:#fff;
  letter-spacing:.08em;
  font-weight:700;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .su-pill.founder{
  background:linear-gradient(135deg, #f5f5f7 0%, #d6d6d8 100%);
  color:#1d1d1f;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ─── Admin bar (fixed, top=56px) ─────────────────────────────
   Locked to dark navy/black in BOTH light and dark mode so the
   admin/moderator/founder UI is always visually distinct and the
   white text inside stays readable regardless of theme. */
.admin-bar{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:400;
  height:var(--adm-h);
  background:#1d1d1f;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  align-items:center;justify-content:space-between;padding:0 24px;
}
.admin-bar.on{display:flex;view-transition-name: rec-admin-bar;}
.adm-msg{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.92);font-size:13px}
.adm-tag{
  font-family:var(--sans);font-size:10px;letter-spacing:.05em;font-weight:700;
  text-transform:uppercase;background:#fff;color:#1d1d1f;
  padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0;
}
.adm-links a{
  font-size:13px;color:rgba(255,255,255,.82);
  padding:5px 12px;border-radius:var(--r-pill);
  transition:all var(--t);font-weight:500;
}
.adm-links a:hover{background:rgba(255,255,255,.14);color:#fff}
[data-theme="dark"] .admin-bar{background:#0c0c0e;border-bottom-color:rgba(255,255,255,.06)}

/* ─── Search box ────────────────────────────────────────────── */
#searchBox{
  display:none;position:fixed;left:0;right:0;z-index:450;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  padding:12px 24px;box-shadow:var(--sh-sm);
}
[data-theme="dark"] #searchBox{background:rgba(28,28,30,.92)}
.srch-inner{
  max-width:var(--mw);margin:0 auto;
  display:flex;align-items:center;gap:10px;
}
.srch-input{
  flex:1;background:var(--surface2);border:1px solid transparent;
  color:var(--text);padding:10px 16px;border-radius:var(--r-pill);
  font-family:inherit;font-size:14px;outline:none;transition:all var(--t);
}
.srch-input:focus{background:var(--surface);border-color:var(--navy);box-shadow:0 0 0 3px var(--nlight)}
.srch-input::placeholder{color:var(--muted)}
.srch-close{
  background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;
  line-height:1;flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.srch-close:hover{background:var(--surface2);color:var(--text)}

/* ─── Notification panel ────────────────────────────────────── */
#notifPanel{
  display:none;position:fixed;right:16px;z-index:600;
  width:360px;max-height:480px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-lg);
}
#notifPanel.show{display:block}
.np-hd{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.np-hd h3{font-size:16px}
.np-item{
  display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t);
}
.np-item:last-child{border-bottom:none}
.np-item:hover{background:var(--surface2)}
.np-item.unread{background:var(--nlight)}
.np-ico{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--surface2)}
.np-title{font-size:14px;font-weight:600;margin-bottom:3px}
.np-body{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-line;word-break:break-word}
.np-time{font-size:11px;color:var(--muted2);margin-top:4px}

/* ─── Buttons (Apple pill) ──────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:all var(--t);border:1px solid transparent;white-space:nowrap;
  font-family:var(--sans);
}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:13px 26px;font-size:15px}
/* .btn-primary is an alias for .btn-p — several admin/business pages use
   class="btn btn-primary" for their primary action; without this alias that
   class was undefined and those buttons lost the navy fill (rendered ghost). */
.btn-p,.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-p:hover,.btn-primary:hover{background:var(--navy2);border-color:var(--navy2)}
.btn-p:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-o{background:var(--surface);border-color:var(--border2);color:var(--text)}
.btn-o:hover{background:var(--surface2);border-color:var(--text)}
/* Destructive — outline-on-rest, fill-on-hover (consistent with .ab-d aesthetic) */
.btn-d{background:var(--surface);color:var(--red);border-color:rgba(255,59,48,.40)}
.btn-d:hover{background:var(--red-bg);border-color:var(--red);color:var(--red);}

/* ─── Forms ─────────────────────────────────────────────────── */
.fg{margin-bottom:18px}
.fl{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;letter-spacing:-.005em}
.fl .req{color:var(--red)}
.fi,.fs,.ft{
  width:100%;background:var(--surface);border:1px solid var(--border2);
  color:var(--text);padding:11px 14px;border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--nlight)}
.fi::placeholder,.ft::placeholder{color:var(--muted)}
.ft{resize:vertical;min-height:110px;line-height:1.65}
.fs{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.fhint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.ferr,.fok{
  font-size:13px;border-radius:var(--r-sm);padding:10px 14px;margin-bottom:14px;display:none;line-height:1.5;
}
.ferr{color:var(--red);background:var(--red-bg);border:1px solid rgba(255,59,48,.18)}
.fok{color:var(--green);background:var(--green-bg);border:1px solid rgba(52,199,89,.2)}
.ferr.on,.fok.on{display:block}

/* ─── Cards ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.cb{padding:24px 28px}

/* ─── Badges ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.b-navy{background:var(--nlight);color:var(--navy)}
.b-gold{background:var(--gold-bg);color:var(--gold);border:1px solid rgba(161,98,7,.18);font-family:var(--mono)}
.b-green{background:var(--green-bg);color:var(--green)}
.b-red{background:var(--red-bg);color:var(--red)}
.b-muted{background:var(--surface2);border:1px solid var(--border);color:var(--muted)}

/* legacy hero (kept for guests) — reused selectors */
.hdiff{border-top:1px solid var(--border);padding-top:32px;margin-top:32px}
.hdiff-eyebrow{font-family:var(--sans);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-weight:600}
.hdiff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hdiff-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:16px 18px;transition:all var(--t)}
.hdiff-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.hdiff-card.hdiff-us{background:var(--nlight);border-color:rgba(var(--nrgb),.25)}
.hdiff-name{font-size:14px;font-weight:600;margin-bottom:5px;color:var(--text);letter-spacing:-.01em}
.hdiff-card.hdiff-us .hdiff-name{color:var(--navy)}
.hdiff-desc{font-size:12.5px;color:var(--muted);line-height:1.6}
.hdiff-card.hdiff-us .hdiff-desc{color:var(--text2)}
@media(max-width:768px){.hdiff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.hdiff-grid{grid-template-columns:1fr}}

.usb{
  display:inline-flex;align-items:center;font-size:11px;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  padding:3px 9px;border-radius:var(--r-pill);font-family:var(--mono);
  cursor:help;letter-spacing:.05em;white-space:nowrap;
}
/* Tooltip handled by sitewide #tipfx portal in r.js — class="tip-host"
   on the element makes it escape any overflow:hidden parent like .rant-card. */

.b-cat{padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.01em;text-transform:uppercase}
.c-Product{background:var(--nlight);color:var(--navy)}
.c-Property{background:var(--green-bg);color:var(--green)}
.c-Service{background:var(--teal-bg);color:var(--teal)}
.c-Food{background:var(--gold-bg);color:var(--gold)}
.c-Finance{background:var(--red-bg);color:var(--red)}
.c-Healthcare{background:var(--purple-bg);color:var(--purple)}
.c-Travel{background:var(--orange-bg);color:var(--orange)}
.seller-tag{
  font-family:var(--mono);font-size:11px;padding:3px 9px;
  border-radius:var(--r-pill);background:var(--teal-bg);
  border:1px solid rgba(0,110,219,.18);color:var(--teal);
}
.seller-tag.tag-edit{cursor:pointer;border-style:dashed}
.seller-tag.tag-edit:hover{background:var(--nlight);border-color:var(--navy);color:var(--navy)}

/* ─── Tabs (Apple segmented control) ────────────────────────── */
.tabs{
  display:inline-flex;gap:0;background:var(--surface2);
  border-radius:var(--r-pill);padding:4px;
  border:1px solid var(--border);margin-bottom:22px;
  max-width:100%;flex-wrap:wrap;
}
.tab{
  padding:8px 18px;font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all var(--t);
  background:none;border:none;border-radius:var(--r-pill);
  flex-shrink:0;letter-spacing:-.005em;position:relative;
}
.tab:hover{color:var(--text)}
.tab.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* Tab tooltips render via the #tipfx portal (tip-host class); legacy
   CSS-only ::after rules removed 2026-05-08 — they were clipped by
   .main's overflow:hidden (aurora-gradient containment). */

/* ─── Filter pills (legacy — hidden in new layout) ──────────── */
.frow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.flbl{
  font-family:var(--sans);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);min-width:60px;flex-shrink:0;font-weight:600;
}
.fp{
  padding:6px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;
  cursor:pointer;border:1px solid var(--border);background:var(--surface);
  color:var(--text2);transition:all var(--t);
}
.fp:hover{border-color:var(--text);color:var(--text)}
.fp.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.loc-sel{
  padding:6px 32px 6px 14px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;
  border:1px solid var(--border);background:var(--surface);color:var(--text2);
  font-family:inherit;outline:none;cursor:pointer;transition:all var(--t);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.loc-sel:hover{border-color:var(--text);color:var(--text)}

/* ─── Chip row (Airbnb-style — above feed) ──────────────────── */
.chip-row{
  display:flex;gap:36px;overflow-x:auto;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  max-width:var(--mw);margin:8px auto 0;
  scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 4px;color:var(--muted);font-size:12px;font-weight:500;
  border:none;background:transparent;
  border-bottom:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.6,.2,1), color .18s, border-color .18s;
  font-family:var(--sans);min-width:64px;will-change:transform;
}
.chip:hover{color:var(--text);transform:translateY(-3px)}
.chip.active{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.chip .ico{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:.2s;
}
.chip .ico svg{width:24px;height:24px;display:block}
.chip:hover .ico,.chip.active .ico{color:var(--text)}

/* ─── Per-category icon gradient (chip row + sidebar) ───────── */
/* Each category icon strokes with its own 2-stop pair sourced from
   the SVG <defs> block in index.html (#gHero, #gProduct, etc.). */
.chip[data-cat=""]             .ico svg *,
.chip[data-cat="Product"]      .ico svg *,
.sb-row[data-cat="Product"]    .sb-ico *{stroke:url(#gProduct)}
.chip[data-cat=""]             .ico svg *{stroke:url(#gHero)}
.chip[data-cat="Property"]     .ico svg *,
.sb-row[data-cat="Property"]   .sb-ico *{stroke:url(#gProperty)}
.chip[data-cat="Service"]      .ico svg *,
.sb-row[data-cat="Service"]    .sb-ico *{stroke:url(#gService)}
.chip[data-cat="Food"]         .ico svg *,
.sb-row[data-cat="Food"]       .sb-ico *{stroke:url(#gFood)}
.chip[data-cat="Finance"]      .ico svg *,
.sb-row[data-cat="Finance"]    .sb-ico *{stroke:url(#gFinance)}
.chip[data-cat="Healthcare"]   .ico svg *,
.sb-row[data-cat="Healthcare"] .sb-ico *{stroke:url(#gHealthcare)}
.chip[data-cat="Travel"]       .ico svg *,
.sb-row[data-cat="Travel"]     .sb-ico *{stroke:url(#gTravel)}
.chip.active{
  background:linear-gradient(90deg,#a16207,var(--navy));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  border-bottom-color:transparent;
  position:relative;
}
.chip.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,#a16207,var(--navy));border-radius:2px;
}

/* ─── Live tag ──────────────────────────────────────────────── */
.live-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  color:var(--green);background:var(--green-bg);
  border:1px solid rgba(52,199,89,.2);
  padding:3px 10px;border-radius:var(--r-pill);letter-spacing:.06em;
  position:relative;cursor:default;
}
.live-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite;box-shadow:0 0 0 3px rgba(52,199,89,.18)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ─── Portal tooltip (managed by tipfx.js — escapes any overflow context) ─── */
#tipfx{
  position:fixed;z-index:10000;pointer-events:none;
  background:var(--text);color:var(--bg);
  padding:9px 13px;border-radius:8px;
  font-size:12px;font-weight:500;line-height:1.55;letter-spacing:0;
  font-family:var(--sans);text-transform:none;
  max-width:260px;text-align:left;white-space:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-2px);
  transition:opacity .16s,transform .16s;
  top:0;left:0;
}
#tipfx.on{opacity:1;transform:translateY(0)}
.tip-host[data-tip]{cursor:default}
.tip-host.tip-sm[data-tip]{cursor:pointer}
button.tip-host[data-tip],a.tip-host[data-tip]{cursor:pointer}
.help-ico.tip-host[data-tip]{cursor:help}
@media(hover:none){#tipfx{display:none!important}}

/* ─── Apple hero card (live banner inside) ──────────────────── */
.hero{
  border:none;background:transparent;padding:24px 24px 0;
  max-width:var(--mw);margin:0 auto;
}
.hero-card{
  /* Mesh gradient hero — light: teal upper-left + amber lower-left + faint
     teal lower-right on warm surface. Dark mode replaces amber with deep
     navy to avoid the muddy navy/amber clash. Top-right corner stays neutral
     so the .beta-pill always sits over surface bg, not a colored blob. */
  background:
    radial-gradient(circle at 14% 12%, rgba(0,110,219,.20) 0%, transparent 46%),
    radial-gradient(circle at 18% 88%, rgba(161,98,7,.13)  0%, transparent 42%),
    radial-gradient(circle at 78% 70%, rgba(0,110,219,.10) 0%, transparent 46%),
    linear-gradient(180deg, #fafbfd 0%, #f5f5f7 100%);
  border-radius:24px;
  padding:64px 56px;
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  border:1px solid var(--border);
}
.hero-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.55;
}
[data-theme="dark"] .hero-card{
  background:
    radial-gradient(circle at 14% 12%, rgba(48,176,199,.18) 0%, transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(28,49,81,.55)   0%, transparent 56%),
    linear-gradient(180deg, #1a1a1c 0%, #232326 100%);
}
[data-theme="dark"] .hero-card::before{
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  opacity:.6;
}
.beta-pill{
  position:absolute;top:24px;right:24px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;
  color:var(--text2);
  background:var(--surface);
  border:1px solid var(--border);
  padding:7px 13px 7px 11px;border-radius:100px;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.beta-dot{
  position:relative;
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.beta-dot::before,.beta-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--green);
  animation:betaRadar 2s cubic-bezier(0,0,.2,1) infinite;
}
.beta-dot::after{animation-delay:1s}
@keyframes betaRadar{
  0%   {transform:scale(1);  opacity:.55}
  80%  {transform:scale(4);  opacity:0}
  100% {transform:scale(4);  opacity:0}
}
.beta-short{display:none}
@media(max-width:600px){
  .beta-pill{top:16px;right:16px;font-size:9.5px;padding:6px 11px 6px 9px;letter-spacing:1.3px;}
}
@media(max-width:480px){
  .beta-long{display:none}
  .beta-short{display:inline}
}
.hero-card .eyebrow{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  color:var(--text);margin-bottom:18px;letter-spacing:2px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.hero-card .eyebrow::before{content:'';width:20px;height:1px;background:var(--text)}
.hero-card h1{
  font-size:clamp(40px,5.4vw,64px);
  color:var(--text);margin-bottom:20px;
  font-weight:700;letter-spacing:-.04em;line-height:1.04;
}
.hero-card .lede{font-size:18px;color:var(--text2);max-width:480px;margin-bottom:28px;line-height:1.5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-actions .live-dot{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--muted);font-weight:500;
}
.hero-actions .live-dot::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(52,199,89,.15);
  animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}

/* live preview cards inside hero */
.live-stack{display:flex;flex-direction:column;gap:14px;position:relative;transition:opacity .45s ease}
.live-stack .lc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--sh-sm);
  transition:.2s;
  text-decoration:none;color:inherit;
  display:block;overflow:hidden;
}
.live-stack .lc:hover{border-color:var(--border2);box-shadow:var(--sh);transform:translateY(-1px)}
.live-stack .lc .lc-body-wrap{padding:16px 18px}
.live-stack .lc .lc-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.lc-cat{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:var(--r-pill);text-transform:uppercase;
}
.lc-cat.c-Product{background:var(--nlight);color:var(--navy)}
.lc-cat.c-Property{background:var(--green-bg);color:var(--green)}
.lc-cat.c-Service{background:var(--teal-bg);color:var(--teal)}
.lc-cat.c-Food{background:var(--gold-bg);color:var(--gold)}
.lc-cat.c-Finance{background:var(--red-bg);color:var(--red)}
.lc-cat.c-Healthcare{background:var(--purple-bg);color:var(--purple)}
.lc-cat.c-Travel{background:var(--orange-bg);color:var(--orange)}
.lc-loc{font-size:11px;color:var(--muted);font-weight:500}
.lc-loc::before{content:'·';margin-right:4px;color:var(--muted)}
.lc-time{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500}
.lc-title{
  font-family:var(--serif-display);font-weight:600;font-size:16px;
  color:var(--text);letter-spacing:-.012em;line-height:1.32;
  margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lc-excerpt{
  font-size:13px;color:var(--text2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lc-rx-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 18px;border-top:1px solid var(--border);
  background:var(--surface2);
}
.lc-rx{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);transition:.18s;cursor:pointer;
}
.lc-rx:hover{border-color:var(--navy);color:var(--navy);background:var(--nlight)}
.lc-rx svg{flex-shrink:0}
.lc-rx .ct{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.lc-rx:hover .ct{color:var(--navy)}
.lc-vote{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--muted);margin-left:auto}
.lc-vote .v-up{color:var(--green)}
.live-stack .skel{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;height:160px;
  background-image:linear-gradient(90deg,var(--surface) 0,var(--surface2) 50%,var(--surface) 100%);
  background-size:200% 100%;
  animation:skel 1.6s ease-in-out infinite;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:900px){
  .hero{padding:16px 16px 0}
  .hero-card{padding:36px 24px;grid-template-columns:1fr;gap:32px}
}

/* ─── Welcome strip (logged-in users) ───────────────────────── */
.ws{background:var(--surface);border-bottom:1px solid var(--border);display:none}
.ws.show{display:block}
.ws-in{max-width:var(--mw);margin:0 auto;padding:28px 20px 0}
.ws-in h2{font-size:28px;letter-spacing:-.02em;margin-bottom:4px;color:var(--text);font-weight:600}
.ws-in h2 #wname,.ws-in h2 em{font-style:normal;color:var(--text);font-weight:700}
.ws-in p{font-size:14px;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--border)}

/* ─── Main feed area ────────────────────────────────────────── */
.main{max-width:var(--mw);margin:0 auto;padding:32px 20px 64px;}
/* Aurora gradient halo — two LARGE soft blooms via pseudo-elements.
   Order: BLUE top-left first, COPPER mid-right second.
   `overflow:hidden` on the wrapper contains the aurora INSIDE the wrapper so it
   never bleeds into the footer or sibling content on short pages.
   Bloom dimensions intentionally ~90% of wrapper width so the visible shape
   reads as ambient atmosphere, not a defined ellipse. Earlier attempts at
   background-image blooms further down were removed because background-image
   is clipped to the wrapper box — on any wrapper whose height ended mid-bloom,
   a visible horizontal cut-line appeared. */
.main,.pg-wrap,.biz-wrap,.mp-wrap,.rd-wrap,.pp-wrap,.cp-wrap,.mod-wrap,.apage{
  position:relative;
  overflow:hidden;
}
.main::before,.main::after,
.pg-wrap::before,.pg-wrap::after,
.biz-wrap::before,.biz-wrap::after,
.mp-wrap::before,.mp-wrap::after,
.rd-wrap::before,.rd-wrap::after,
.pp-wrap::before,.pp-wrap::after,
.cp-wrap::before,.cp-wrap::after,
.mod-wrap::before,.mod-wrap::after,
.apage::before,.apage::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  filter:blur(70px);
}
/* BLUE bloom — top-left, anchored at top of wrapper. Alpha tuned light
   (2026-05-08) so aurora reads as ambient atmosphere, not coloured wallpaper. */
.main::before,.pg-wrap::before,.biz-wrap::before,.mp-wrap::before,.rd-wrap::before,.pp-wrap::before,.cp-wrap::before,.mod-wrap::before,.apage::before{
  left:-25%;top:-100px;width:90%;height:850px;
  background:radial-gradient(ellipse at center,rgba(0,113,227,.06) 0%,transparent 70%);
}
/* COPPER bloom — mid-right, follows the blue. */
.main::after,.pg-wrap::after,.biz-wrap::after,.mp-wrap::after,.rd-wrap::after,.pp-wrap::after,.cp-wrap::after,.mod-wrap::after,.apage::after{
  right:-25%;top:600px;width:90%;height:850px;
  background:radial-gradient(ellipse at center,rgba(161,98,7,.04) 0%,transparent 70%);
}
[data-theme="dark"] .main::before,
[data-theme="dark"] .pg-wrap::before,
[data-theme="dark"] .biz-wrap::before,
[data-theme="dark"] .mp-wrap::before,
[data-theme="dark"] .rd-wrap::before,
[data-theme="dark"] .pp-wrap::before,
[data-theme="dark"] .cp-wrap::before,
[data-theme="dark"] .mod-wrap::before,
[data-theme="dark"] .apage::before{
  background:radial-gradient(ellipse at center,rgba(0,113,227,.08) 0%,transparent 70%);
}
[data-theme="dark"] .main::after,
[data-theme="dark"] .pg-wrap::after,
[data-theme="dark"] .biz-wrap::after,
[data-theme="dark"] .mp-wrap::after,
[data-theme="dark"] .rd-wrap::after,
[data-theme="dark"] .pp-wrap::after,
[data-theme="dark"] .cp-wrap::after,
[data-theme="dark"] .mod-wrap::after,
[data-theme="dark"] .apage::after{
  background:radial-gradient(ellipse at center,rgba(217,140,30,.05) 0%,transparent 70%);
}
.main > *,.pg-wrap > *,.biz-wrap > *,.mp-wrap > *,.rd-wrap > *,.pp-wrap > *,.cp-wrap > *,.mod-wrap > *,.apage > *{
  position:relative;z-index:1;
}
.feed-area{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:28px}
.feed-area>main,.feed-area>.sidebar{min-width:0}
.feed-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px}
.feed-hd-l{display:flex;align-items:center;gap:10px}
.feed-hd-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feed-hd h2{font-size:20px;letter-spacing:-.02em}
.feed-cnt{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* Hide the inline share button on desktop — sidebar CTA covers it.
   Keep visible on mobile where the sidebar is collapsed. */
.feed-hd-share{display:none}
@media(max-width:900px){.feed-hd-share{display:inline-flex}}
.disc{max-width:var(--mw);margin:0 auto;padding:0 20px 48px}
@media(max-width:900px){.feed-area{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}}

/* ─── Pagination ────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 0 6px;border-top:1px solid var(--border);margin-top:4px}
.pager-info{font-size:13px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
.pager-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg-btn{
  min-width:34px;height:34px;padding:0 10px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);font-size:13.5px;font-family:inherit;
  cursor:pointer;transition:all var(--t);font-weight:500;
}
.pg-btn:hover:not(:disabled){background:var(--surface2);border-color:var(--text);color:var(--text)}
.pg-btn.pg-active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pg-btn:disabled{opacity:.35;cursor:not-allowed}
.pg-nav{font-size:13px;padding:0 12px}
.pg-ellipsis{padding:0 4px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;height:34px}
.pager-pp{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-shrink:0}
.pg-sel{border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-size:13px;padding:5px 10px;cursor:pointer;font-family:inherit}
.pager-go{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-shrink:0}
.pg-input{width:52px;height:34px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-size:13px;font-family:var(--mono);text-align:center;padding:0 6px;outline:none;transition:border-color var(--t)}
.pg-input:focus{border-color:var(--navy)}

/* ─── Rant cards ────────────────────────────────────────────── */
.rant-list{display:flex;flex-direction:column;gap:14px}
.rant-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:all var(--t);cursor:pointer;
}
.rant-card:hover{border-color:var(--border2);box-shadow:var(--sh);transform:translateY(-1px)}
.rc-media{overflow:hidden;background:#000}
.rc-media img,.rc-media video{width:100%;height:240px;object-fit:cover;display:block;transition:transform .35s}
.rant-card:hover .rc-media img{transform:scale(1.02)}
.mg{display:grid;gap:2px}
.mg-2{grid-template-columns:1fr 1fr}
.mg-3{grid-template-columns:2fr 1fr}
.mg-3 .mi:first-child{grid-row:1/3}
.mi{overflow:hidden;background:#000;position:relative}
.mi img,.mi video{width:100%;height:100%;object-fit:cover;display:block}
.mi-more{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700}
.rc-body{padding:18px 20px}
.rc-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rc-title{font-family:var(--serif-display);font-size:18px;font-weight:600;line-height:1.3;margin-bottom:8px;letter-spacing:-.012em}
.rc-excerpt{font-size:14px;color:var(--text2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px}
.rc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.rc-meta{display:flex;gap:10px;font-size:12.5px;color:var(--muted);align-items:center;flex-wrap:wrap}
.rc-meta .meta-pill{display:inline-flex;align-items:center;gap:5px}
.rc-meta .meta-pill svg{flex-shrink:0;opacity:.85}
.rc-acts{display:flex;align-items:center;gap:6px}

/* Vote button */
.vote-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text2);cursor:pointer;font-size:13px;font-weight:600;transition:all var(--t);
}
.vote-btn:hover,.vote-btn.on{background:var(--nlight);border-color:var(--navy);color:var(--navy)}
.vote-n{font-family:var(--serif-display);font-size:17px;font-weight:700;line-height:1}

/* Action buttons */
.act-btn{
  height:30px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:transparent;color:var(--text2);
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:all var(--t);white-space:nowrap;display:inline-flex;align-items:center;
}
.act-btn:hover{color:var(--text);background:var(--surface2);border-color:var(--border2)}
.act-btn.saved{color:var(--navy);border-color:var(--navy);background:var(--nlight)}

/* Reactions bar — single row, sentiment + divider + quality */
.react-bar{display:flex;align-items:center;gap:6px;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
.rb-div{display:inline-block;width:1px;height:20px;background:var(--border);margin:0 6px;flex-shrink:0}
.lc-rx.cmt-btn{margin-left:auto}
@media(max-width:560px){.lc-rx.cmt-btn{margin-left:0}}
.r-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);
  cursor:pointer;font-size:13px;color:var(--text2);
  transition:all var(--t);font-weight:500;
}
.r-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.r-btn.on{border-color:var(--navy);background:var(--nlight);color:var(--navy)}
.r-btn svg{flex-shrink:0}
.r-cnt{font-size:12px;color:var(--muted);font-weight:600}
.r-btn.on .r-cnt{color:var(--navy)}

/* Engagement active states */
.ab-e.eng-on{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}
.ab-vt.eng-on{background:var(--nlight);border-color:var(--navy);color:var(--navy)}
.ab-v.eng-on{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
/* Active reaction on the feed-card lc-rx pill (same aesthetic as the hero rotator) */
.lc-rx.eng-on{background:var(--nlight);border-color:var(--navy);color:var(--navy)}
.lc-rx.eng-on .ct{color:var(--navy)}
.eng-cnt{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:2px}

/* Comment preview on cards */
.cmt-preview,.cmt-block{padding:12px 20px 14px;border-top:1px solid var(--border);background:var(--surface2)}
.cmt-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.cmt-row:last-of-type{margin-bottom:0}
.cmt-row.cmt-reply{margin-left:30px;padding-left:12px;border-left:2px solid var(--border)}
.cmt-av{width:36px;height:36px;border-radius:50%;background:var(--nlight);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--navy);flex-shrink:0;margin-top:1px;overflow:hidden}
.cmt-av img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-row.cmt-reply .cmt-av{width:30px;height:30px;font-size:12px}
.cmt-txt{font-size:13px;color:var(--text2);line-height:1.55;flex:1;min-width:0}
.cmt-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;margin-bottom:2px}
.cmt-author{font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmt-date{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--teal);background:rgba(0,110,219,.08);border:1px solid rgba(0,110,219,.18);padding:2px 9px;border-radius:var(--r-pill);margin-left:auto;flex-shrink:0;white-space:nowrap;letter-spacing:.04em}
.cmt-body{overflow-wrap:anywhere}
.cmt-act-row{display:flex;align-items:center;gap:14px;margin-top:4px}
.cmt-act{display:inline-flex;align-items:center;background:none;border:none;font-size:11.5px;color:var(--muted);cursor:pointer;padding:2px 0;font-weight:600;transition:color var(--t)}
.cmt-act:hover{color:var(--navy)}
.cmt-act-del:hover{color:var(--red)}
.cmt-more{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--navy);font-weight:600;text-decoration:none}
.cmt-more:hover{text-decoration:underline}
.cmt-more-replies{display:block;margin:2px 0 8px 30px;padding-left:12px;font-size:11.5px;border-left:2px solid var(--border);font-weight:600;color:var(--navy);text-decoration:none}
.cmt-more-replies:hover{text-decoration:underline}
/* Per-comment emoji reaction pills — shared between experience-detail.html and index.html cmt-block */
.cr-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11.5px;cursor:pointer;transition:all var(--t)}
.cr-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--nlight)}
.cr-btn.on{border-color:var(--navy);color:var(--navy);background:var(--nlight)}
.cr-cnt{font-weight:600;font-variant-numeric:tabular-nums}
.idx-cmt-rx{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.idx-cmt-rx .cr-btn{padding:2px 7px;font-size:11px}
.idx-cmt-add{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.cmt-add-btn{display:inline-flex;align-items:center;background:none;border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;color:var(--text2);cursor:pointer;transition:all var(--t)}
.cmt-add-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--nlight)}
.idx-cs,.idx-rs{display:none}
.idx-cs.open,.idx-rs.open{display:block;margin-top:10px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.idx-cs textarea,.idx-rs textarea{width:100%;min-height:64px;font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);resize:vertical}
.idx-cs textarea:focus,.idx-rs textarea:focus{outline:none;border-color:var(--navy)}
.idx-cs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.idx-cs-anon{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);cursor:pointer;user-select:none}
.idx-cs-row-r{display:flex;gap:6px}
.idx-cs-err{display:none;margin-top:6px;font-size:12.5px;color:var(--red)}
.idx-cs-err.on{display:block}

/* Admin strip */
.adm-strip{display:flex;gap:6px;padding:10px 20px;border-top:1px solid var(--border);background:rgba(var(--nrgb),.03);flex-wrap:wrap;align-items:center}
.adm-strip label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--muted);margin-right:4px;user-select:none}
.adm-strip input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--navy)}
.abtn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all var(--t);
  background:transparent;color:var(--text2);
  border:1px solid var(--border);
}
.abtn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.abtn svg{flex-shrink:0}
.ab-v{border-color:rgba(161,98,7,.35);color:var(--gold)}.ab-v:hover{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.ab-vd{border-color:rgba(52,199,89,.35);color:var(--green)}.ab-vd:hover{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.ab-e{border-color:rgba(0,110,219,.35);color:var(--teal)}.ab-e:hover{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}
.ab-d{border-color:rgba(255,59,48,.35);color:var(--red)}.ab-d:hover{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.ab-vt{border-color:rgba(var(--nrgb),.35);color:var(--navy)}.ab-vt:hover{background:var(--nlight);border-color:var(--navy);color:var(--navy)}
/* Contacted-business resolution tag — colour-coded pill, theme-aware.
   Typography mirrors .usb (DM Mono natural case, .05em tracking) for sitewide consistency. */
.ct-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);line-height:1.4;white-space:nowrap;}
.ct-tag.ct-ok  {color:var(--green); border-color:rgba(52,199,89,.30); background:var(--green-bg)}
.ct-tag.ct-warn{color:var(--orange);border-color:rgba(255,149,0,.30); background:var(--orange-bg)}
.ct-tag.ct-bad {color:var(--red);   border-color:rgba(255,59,48,.30); background:var(--red-bg)}
.ct-tag.ct-mute{color:var(--muted); border-color:var(--border);       background:var(--surface2)}

/* Queue (return-to-moderation) — warm orange outline, matches ab-* hover pattern */
.ab-q{border-color:rgba(255,149,0,.35);color:var(--orange)}.ab-q:hover{background:var(--orange-bg);border-color:var(--orange);color:var(--orange)}
/* Hide button — when post is currently hidden, show subtle green "Unhide" affordance */
.ab-h.on{border-color:rgba(52,199,89,.35);color:var(--green)}.ab-h.on:hover{background:var(--green-bg);border-color:var(--green);color:var(--green)}

/* Admin curator tags — applied by Founder/Admin/Moderator post-publication.
   Typography mirrors .usb / .ct-tag (DM Mono natural case, .05em tracking) for sitewide consistency. */
.at-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);line-height:1.4;white-space:nowrap;}
.at-tag.at-gold  {color:var(--gold);  border-color:var(--gold-bg);  background:var(--gold-bg)}
.at-tag.at-blue  {color:var(--navy);  border-color:var(--nlight);   background:var(--nlight)}
.at-tag.at-green {color:var(--green); border-color:rgba(52,199,89,.30); background:var(--green-bg)}
.at-tag.at-orange{color:var(--orange);border-color:rgba(255,149,0,.30); background:var(--orange-bg)}
.at-tag.at-teal  {color:var(--teal);  border-color:var(--teal-bg);  background:var(--teal-bg)}
.at-tag.at-red   {color:var(--red);   border-color:rgba(255,59,48,.30); background:var(--red-bg)}
.at-tag.at-navy  {color:var(--navy);  border-color:var(--border2);  background:var(--surface2)}

/* Admin "Tag" button — neutral outline, matches the .ab-* hover convention */
.ab-tg{border-color:var(--border2);color:var(--text2)}.ab-tg:hover{background:var(--surface2);border-color:var(--text2);color:var(--text)}

/* Admin status indicators (Pending, etc.) — non-clickable pill that mirrors
   .abtn outline aesthetic so it sits cleanly alongside Approve / Reject etc. */
.adm-status{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);line-height:1.4;white-space:nowrap;}
.adm-status-pending{color:var(--orange);border-color:rgba(255,149,0,.35);background:var(--orange-bg);}

/* Rant-detail status banners — pending / revision / rejected.
   Apple-elegant: neutral surface bg, thin coloured left-border accent.
   Only the icon and eyebrow carry the colour — body text stays in --text. */
.rd-banner{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--text2);border-radius:var(--r-sm);padding:18px 22px;margin-bottom:20px;display:flex;flex-direction:column;gap:12px;}
.rd-banner-title{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;display:flex;align-items:center;line-height:1.4;}
.rd-banner-sub{font-size:13px;color:var(--text2);line-height:1.6;}
.rd-banner-quote{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;color:var(--text);line-height:1.6;}
.rd-banner-eyebrow{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:6px;font-weight:600;}
.rd-banner-link{font-weight:600;text-decoration:none;}
.rd-banner-link:hover{text-decoration:underline;}
/* Pending — orange accent, single-row layout with action buttons on the right */
.rd-banner-pending{border-left-color:var(--orange);flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;}
.rd-banner-pending .rd-banner-msg{flex:1;font-size:13.5px;color:var(--text);line-height:1.55;display:flex;align-items:center;}
.rd-banner-pending .rd-banner-msg svg{color:var(--orange);flex-shrink:0;}
.rd-banner-pending .rd-banner-msg strong{font-weight:700;margin-right:4px;}
.rd-banner-pending .rd-banner-actions{display:flex;gap:8px;flex-shrink:0;}
/* Revision — orange accent, stacked layout */
.rd-banner-revision{border-left-color:var(--orange);}
.rd-banner-revision .rd-banner-title svg{color:var(--orange);flex-shrink:0;margin-right:8px;}
.rd-banner-revision .rd-banner-eyebrow{color:var(--orange);}
/* Rejected — red accent */
.rd-banner-rejected{border-left-color:var(--red);}
.rd-banner-rejected .rd-banner-title svg{color:var(--red);flex-shrink:0;margin-right:8px;}
.rd-banner-rejected .rd-banner-link{color:var(--red);}

/* Tag picker dropdown — anchored to the Tag button via JS */
.tag-picker-menu{position:absolute;z-index:9999;width:260px;max-height:420px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);padding:6px;animation:tpFadeIn .12s ease-out;}
@keyframes tpFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tag-picker-menu .tp-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:var(--text);transition:background .12s;}
.tag-picker-menu .tp-row:hover{background:var(--surface2);}
.tag-picker-menu .tp-row.on{background:var(--surface2);}
.tag-picker-menu .tp-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;flex-shrink:0;}
.tag-picker-menu .tp-ico.at-gold  {color:var(--gold);  background:var(--gold-bg)}
.tag-picker-menu .tp-ico.at-blue  {color:var(--navy);  background:var(--nlight)}
.tag-picker-menu .tp-ico.at-green {color:var(--green); background:var(--green-bg)}
.tag-picker-menu .tp-ico.at-orange{color:var(--orange);background:var(--orange-bg)}
.tag-picker-menu .tp-ico.at-teal  {color:var(--teal);  background:var(--teal-bg)}
.tag-picker-menu .tp-ico.at-red   {color:var(--red);   background:var(--red-bg)}
.tag-picker-menu .tp-ico.at-navy  {color:var(--navy);  background:var(--surface2)}
.tag-picker-menu .tp-lbl{flex:1;font-size:13px;font-weight:500;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;}
.tag-picker-menu .tp-chk{color:var(--navy);width:16px;display:inline-flex;justify-content:flex-end;flex-shrink:0;}
/* Auto-derived row (e.g. set automatically from contacted_business answer) */
.tag-picker-menu .tp-row.tp-auto{cursor:pointer;}
.tag-picker-menu .tp-row.tp-auto:hover{background:var(--surface2);}
.tag-picker-menu .tp-row.tp-auto .tp-chk{color:var(--muted);}
.tag-picker-menu .tp-auto-tag{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.05em;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:1px 6px;border-radius:var(--r-pill);line-height:1.4;text-transform:uppercase;}
/* When the curator has hidden an auto-derived tag, the row stays in the list
   but the icon + label dim to signal "won't show on the card", and the badge
   flips to an orange "Hidden" pill. */
.tag-picker-menu .tp-row.tp-hid .tp-ico{opacity:.45;}
.tag-picker-menu .tp-row.tp-hid .tp-lbl{color:var(--muted);}
.tag-picker-menu .tp-row.tp-hid .tp-auto-tag{color:var(--orange);background:var(--orange-bg);border-color:rgba(255,149,0,.35);}

.bulk-bar{display:none;align-items:center;gap:10px;padding:12px 18px;background:var(--nlight);border:1px solid rgba(var(--nrgb),.2);border-radius:var(--r-sm);margin-bottom:14px;font-size:13.5px;color:var(--navy)}
.bulk-bar.on{display:flex}

/* ─── Sidebar ───────────────────────────────────────────────── */
.sidebar{display:flex;flex-direction:column;gap:16px}
.sb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.sb-ttl{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:16px;font-weight:700}
/* Sidebar share CTA — navy blue to match all other primary share buttons (.btn-p) */
/* Softened CTA — tinted card matching the aurora palette instead of solid navy.
   The primary action still uses navy for hierarchy, but the card itself stays
   tonally consistent with the rest of the sidebar. */
.sb-cta{
  background:linear-gradient(135deg,rgba(0,113,227,.08),rgba(161,98,7,.05));
  border:1px solid var(--border);border-radius:var(--r);padding:22px;
  position:relative;overflow:hidden;
}
.sb-cta::before{
  content:'';position:absolute;left:-30%;top:-50%;width:80%;height:120%;
  background:radial-gradient(ellipse at center,rgba(0,113,227,.18) 0%,transparent 60%);
  filter:blur(35px);pointer-events:none;
}
.sb-cta > *{position:relative;z-index:1;}
[data-theme="dark"] .sb-cta{
  background:linear-gradient(135deg,rgba(48,176,199,.10),rgba(217,140,30,.06));
}
[data-theme="dark"] .sb-cta::before{
  background:radial-gradient(ellipse at center,rgba(48,176,199,.20) 0%,transparent 60%);
}
.sb-cta h3{font-family:var(--serif-display);font-size:19px;color:var(--text);margin-bottom:8px;letter-spacing:-.018em;font-weight:600;line-height:1.25}
.sb-cta p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:16px}
.sb-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;border-radius:var(--r-sm);
  background:var(--navy);border:none;color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:all var(--t);font-family:inherit;
}
.sb-cta-btn:hover{background:var(--text);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.sb-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t);font-size:14px;color:var(--text2)}
.sb-row:hover{background:var(--surface2);color:var(--text)}
.sb-l{display:inline-flex;align-items:center;gap:11px}
.sb-ico{width:16px;height:16px;flex-shrink:0;color:var(--muted);transition:color var(--t)}
.sb-row:hover .sb-ico{color:var(--text)}
.sb-cnt{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
/* Right-side cluster of count + 24h delta indicator on category rows. */
.sb-r{display:inline-flex;align-items:center;gap:8px;}
.sb-d{font-family:'DM Mono',monospace;font-size:10px;font-weight:700;color:var(--green);letter-spacing:.02em;}
.sb-d.dn{color:var(--muted);}
/* Footer note inside the merged Support card (former Grow content). */
.sb-support-note{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted);line-height:1.6;letter-spacing:.005em;
}

/* Top Countries leaderboard items */
.loc-item{display:flex;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--border)}
.loc-item:last-child{border-bottom:none}
.loc-rank{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.loc-icon{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.loc-body{flex:1;min-width:0}
.loc-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px}
.loc-name{font-weight:600;color:var(--text)}
.loc-cnt{font-family:var(--mono);font-size:11px;color:var(--muted)}
.loc-bar{height:2px;background:var(--surface2);margin-top:5px;border-radius:1px;overflow:hidden}
.loc-bar-in{height:100%;border-radius:1px;transition:width .3s}

/* ─── Modals ────────────────────────────────────────────────── */
.ov{
  position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.ov.on{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border-radius:18px;padding:36px;
  width:100%;max-width:460px;
  transform:translateY(16px);transition:transform .22s;
  box-shadow:var(--sh-lg);max-height:90vh;overflow-y:auto;
  border:1px solid var(--border);
}
.ov.on .modal{transform:translateY(0)}
.modal-lg{max-width:580px}
.modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-hd h2{font-size:24px;letter-spacing:-.02em;font-weight:700}
.modal-close{
  background:none;border:none;color:var(--muted);font-size:22px;
  cursor:pointer;padding:0;border-radius:50%;transition:all var(--t);
  line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{color:var(--text);background:var(--surface2)}
.modal-ft{font-size:13.5px;color:var(--muted);text-align:center;margin-top:16px}
.modal-ft a{color:var(--navy);cursor:pointer;font-weight:600}
.modal-ft a:hover{text-decoration:underline}
.legal-note{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px;
  font-size:12px;color:var(--text2);line-height:1.65;margin-bottom:14px;
}
.legal-note a{color:var(--navy)}

/* ─── Comments ──────────────────────────────────────────────── */
.cmt-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:24px}
.cmt-rules{font-size:12.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 14px;margin:12px 0;line-height:1.65}
.cmt-item{padding:18px 0;border-bottom:1px solid var(--border)}
.cmt-item:last-child{border-bottom:none}
.cmt-item-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px}
.cmt-who{display:flex;align-items:center;gap:8px}
.cmt-ava{
  width:30px;height:30px;border-radius:50%;
  background:var(--nlight);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--navy);flex-shrink:0;
}
.cmt-name{font-size:14px;font-weight:600}
/* (.cmt-date moved earlier in this file — Proposal B teal pill style) */
.cmt-body{font-size:14px;color:var(--text2);line-height:1.7}
.cmt-acts{display:flex;gap:10px;margin-top:8px}
.cmt-act-btn{background:none;border:none;font-size:12px;color:var(--muted);cursor:pointer;transition:color var(--t);font-weight:600}
.cmt-act-btn:hover{color:var(--navy)}
.cc{font-size:12px;color:var(--muted);font-family:var(--mono)}
.cc.warn{color:var(--red)}
.login-prompt{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:14px 18px;
  text-align:center;font-size:14px;color:var(--text2);margin-bottom:24px;
}

/* ─── Profile nav ───────────────────────────────────────────── */
.pnav{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px}
.pnav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--r-sm);
  font-size:14px;color:var(--text2);cursor:pointer;
  transition:all var(--t);border:none;background:none;width:100%;text-align:left;font-weight:500;font-family:inherit;
}
.pnav-item:hover{background:var(--surface2);color:var(--text)}
.pnav-item.on{background:var(--nlight);color:var(--navy);font-weight:600}
.pnav-div{height:1px;background:var(--border);margin:6px 0}

/* ─── Analytics ─────────────────────────────────────────────── */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px}
.stat-n{font-family:var(--serif-display);font-size:38px;font-weight:800;line-height:1;letter-spacing:-.03em}
.stat-l{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:8px;font-weight:600}
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;overflow-x:auto}
.dtbl{width:100%;border-collapse:collapse}
.dtbl th{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 18px;text-align:left;border-bottom:1px solid var(--border);background:var(--surface2);font-weight:700}
.dtbl td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.dtbl tr:last-child td{border-bottom:none}
.dtbl tr:hover td{background:var(--surface2)}

/* ─── Loader / empty ────────────────────────────────────────── */
.loader{padding:48px;text-align:center;color:var(--muted)}
.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:60px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.empty-ico{width:60px;height:60px;border-radius:18px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.empty h3{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.empty p{font-size:14px;color:var(--muted);max-width:300px;line-height:1.7;margin-bottom:22px}

/* ─── Lightbox ──────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;opacity:.7;line-height:1}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:22px;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-inner img,.lb-inner video{max-width:90vw;max-height:86vh;border-radius:8px;display:block;object-fit:contain}
.lb-cnt{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:12px;font-family:var(--mono)}

/* ─── Toast ─────────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:24px;right:24px;z-index:999;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:12px 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;
  opacity:0;transform:translateY(60px);
  transition:opacity .28s,transform .28s;
  box-shadow:var(--sh-lg);max-width:320px;pointer-events:none;
}

/* ─── Disclaimer ────────────────────────────────────────────── */
.disclaimer{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:24px 28px}
.disclaimer h4{font-family:inherit;font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.005em}
.disclaimer p{font-size:12.5px;color:var(--text2);line-height:1.85;margin-bottom:6px}
.disclaimer a{color:var(--navy);font-weight:600}

/* ─── Footer ────────────────────────────────────────────────── */
.footer{background:var(--surface2);border-top:1px solid var(--border);padding:56px 24px 36px}
.fg-grid{max-width:var(--mw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.fg-logo{margin-bottom:14px}
.fg-brand p{font-size:13px;color:var(--muted);line-height:1.7;max-width:240px;margin-top:0}
.fg-contacts{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.fg-contacts a{font-size:13px;color:var(--text2)}
.fg-contacts a:hover{color:var(--navy)}
.fg-col h4{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text);margin-bottom:14px;font-weight:700}
.fg-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fg-col ul a{font-size:13.5px;color:var(--text2);transition:color var(--t)}
.fg-col ul a:hover{color:var(--navy)}
.fg-bottom{
  max-width:var(--mw);margin:0 auto;padding-top:24px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.fg-copy{font-size:12px;color:var(--muted);line-height:1.6;max-width:560px}
.fg-links{display:flex;gap:18px}
.fg-links a{font-size:12px;color:var(--muted);transition:color var(--t)}
.fg-links a:hover{color:var(--navy)}

/* ─── Scroll progress bar (top of every page) ───────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#a16207,var(--navy));z-index:1000;transition:width .08s linear;width:0;pointer-events:none}

/* ─── Illustrated empty states (sitewide) ───────────────────── */
.empty-state{background:var(--surface);border:1px dashed var(--border2);border-radius:16px;padding:48px 30px;text-align:center}
.empty-state-art{margin:0 auto 22px;width:120px;height:120px;color:var(--text2);display:block}
.empty-state-h{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;font-weight:600;color:var(--text);margin-bottom:8px}
.empty-state-p{font-size:13.5px;color:var(--text2);max-width:340px;margin:0 auto 18px;line-height:1.7}
.empty-state-cta{display:inline-flex;align-items:center;background:var(--text);color:var(--bg);border:1.5px solid var(--text);border-radius:980px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter var(--t)}
.empty-state-cta:hover{filter:brightness(1.1);color:var(--bg)}
[data-theme="dark"] .empty-state-cta:hover{filter:brightness(.9)}
/* embedded inside a card shell — drop the dashed border + bg so the shell frames it */
.info-card .empty-state,.np-list .empty-state,.np-empty-host .empty-state{border:none;background:transparent;border-radius:0;padding:36px 24px}
/* tighter variant for the bell-popup canvas */
.empty-state.compact{padding:30px 18px}
.empty-state.compact .empty-state-art{width:80px;height:80px;margin-bottom:16px}
.empty-state.compact .empty-state-h{font-size:18px}
.empty-state.compact .empty-state-p{font-size:12.5px;max-width:240px}

/* ─── Responsive ────────────────────────────────────────────── */
@media(max-width:900px){.sidebar{display:none}.stats-g{grid-template-columns:1fr 1fr}.fg-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:768px){
  .nav-links{display:none}
  .flbl{display:none}
  .nav-r .btn-o{font-size:12px;padding:6px 10px}
  .nav-r .btn-p{font-size:12px;padding:7px 12px}
  .nav-r .su-pill{display:none!important}
  #navName{display:none}
  #srchBtn{display:none!important}
  #navLogout{display:inline-flex!important;font-size:12px;padding:6px 10px}
  #navProfile{display:inline-flex!important;font-size:12px;padding:6px 10px}
  .adm-msg span:last-child{display:none}
  .admin-bar.on{overflow:hidden;flex-direction:column;align-items:stretch;height:auto;gap:3px;padding:5px 14px 6px;justify-content:flex-start}
  .adm-msg{flex-shrink:0;white-space:nowrap;display:flex;align-items:center;justify-content:center;width:100%}
  .adm-links{display:flex;justify-content:space-around;width:100%;gap:0;align-items:flex-start}
  /* Censor toggle is desktop-only — rare action, no alternate path on
     mobile, but founders can hit it from desktop when needed. */
  #censorBtn{display:none!important}
}
/* Anti-flash hint: each admin page <head> has an inline <script> that
   reads localStorage.rec_role and adds .rec-staff-biz to <html> before
   first paint, so the Businesses nav link renders immediately for
   admin/founder. The !important overrides the inline
   `style="display:none"` on the nav anchors so post-load JS isn't
   needed to reveal them. */
html.rec-staff-biz #navBiz,
html.rec-staff-biz #navBizTop,
html.rec-staff-biz #navBizPage { display: inline-flex !important; }
/* Inverse: hide Businesses + Users + Analytics admin-bar links for non-staff
   (moderators). The mod sees only Moderate + Audit; the other three pages
   enforce access-denied anyway, so the link visibility now matches the
   page-level access rule. Toggled live by r.js _gateAdminBarLinks via the
   .rec-staff-biz class on <html>. */
html:not(.rec-staff-biz) .adm-links a[href$="admin-businesses.html"],
html:not(.rec-staff-biz) .adm-links a[href$="admin-users.html"],
html:not(.rec-staff-biz) .adm-links a[href$="admin-analytics.html"] {
  display: none !important;
}
@media(max-width:768px){
  /* Stack icon above label so all five admin links wrap identically.
     Without this, only the longer labels (Analytics, Businesses,
     Moderate) wrap below their icon while Audit/Users stay inline,
     producing a mix of vertical + horizontal items in the same row. */
  .adm-links a{font-size:11.5px;padding:4px 6px;flex:1;text-align:center;display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
  .adm-links a svg{margin-right:0!important;vertical-align:0!important}
  .adm-spacer{height:72px!important}
  .chip-row{gap:24px;padding:14px 16px}
}
@media(max-width:480px){
  .stats-g{grid-template-columns:1fr}
  .fg-grid{grid-template-columns:1fr}
  .modal{padding:24px}
  #notifPanel{width:calc(100vw - 32px);right:16px}
  #toast{left:16px;right:16px;bottom:16px;max-width:none}
  .nav-r .btn-o{font-size:11px;padding:5px 8px}
  #userNav .btn-p{display:none!important}
  /* Profile + Log Out both render at phone widths and were clipping the
     viewport. Switch to icon-only by hiding the .btn-lbl text spans —
     the SVG icon stays, button shrinks to a square hit-target. */
  #navProfile .btn-lbl, #navLogout .btn-lbl{display:none}
  #navProfile, #navLogout{padding:7px 9px;gap:0}
  .bulk-bar{flex-wrap:wrap}
  .react-bar{gap:4px}
}
/* ── iPhone SE / iPhone mini / mid-range Android (375–400px) ── */
@media(max-width:400px){
  /* Nav padding tightened from 24px → 10px at iPhone-mini width so the
     logo + nav-r cluster (dark toggle, bell, role pill, sign-in) fits
     within the viewport without horizontal scroll. Saves 28px total. */
  .nav-inner{padding:0 10px;gap:8px}
  /* Chip-row icons: tighten spacing so 8 chips don't push horizontal scroll out of reach */
  .chip-row{gap:16px;padding:10px 12px}
  .chip{font-size:12px;gap:5px}
  .chip .ico svg{width:16px;height:16px}
  /* Reaction bar (love/shocked/sad/skeptical/outraged + helpful/relatable/insightful) — wrap and shrink */
  .react-bar{gap:3px}
  .r-btn{font-size:11.5px;padding:5px 9px;gap:4px}
  .r-btn svg{width:13px;height:13px}
  .r-btn .r-cnt{font-size:10px}
  /* Comment composer — tighter padding so the textarea + footer fit phone screens */
  .cmt-block{padding:14px 12px}
  /* Hero card on the homepage — softer padding so headline doesn't crowd the edges */
  .hero-card{padding:34px 22px;border-radius:18px}
  .hero-card h1{font-size:30px;letter-spacing:-.3px}
  .hero-card .lede{font-size:14px}
  .hero-actions{gap:8px}
  .hero-actions .btn{font-size:13px;padding:9px 16px}
  /* Feed card — pull body padding in so titles don't truncate awkwardly */
  .rc-body,.lc-body-wrap{padding:14px 16px}
  .rc-meta{font-size:10px;gap:5px}
  .rc-title{font-size:15px;line-height:1.3}
  .rc-excerpt{font-size:13px;line-height:1.55}
  /* Sidebar already hidden via 900px rule, no further action needed */
  /* Friction-snapshot KPIs — collapse to a single column so the 25px
     KPI values don't clip on narrow phones */
  .fsnap-kpis{grid-template-columns:1fr}
  .fsnap-kpi-v{font-size:22px}
  /* Empty-state illustrations — keep icon visible on small screens */
  .empty-state{padding:34px 18px}
  .empty-state-art{width:96px;height:96px}
  .empty-state-h{font-size:19px}
  .empty-state-p{font-size:13px}
  /* Bell-popup empty state should never overflow viewport */
  #notifPanel .empty-state.compact{padding:24px 14px}
}
@media(max-width:360px){
  .nav-r .btn-o{display:none}
  .abtn{font-size:11px;padding:4px 8px}
  .modal{padding:20px 16px}
}

/* ── Skeleton shimmer — feed loading state ────────────────────────
   Replaces the spinner during loadRants() boot so the layout settles
   immediately and pages don't snap when real cards arrive. */
.sk-list{display:flex;flex-direction:column;gap:14px}
.sk-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.sk{background:linear-gradient(90deg,var(--surface2) 0%,var(--surface3) 50%,var(--surface2) 100%);background-size:200% 100%;border-radius:6px;animation:skShimmer 1.4s ease-in-out infinite}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-tag{height:14px;width:78px;border-radius:var(--r-pill);margin-bottom:12px}
.sk-t1{height:15px;width:92%;margin-bottom:7px}
.sk-t2{height:15px;width:64%;margin-bottom:14px}
.sk-m{height:11px;width:55%;margin-bottom:18px}
.sk-foot{display:flex;gap:10px}
.sk-pill{height:24px;width:50px;border-radius:var(--r-pill)}

/* ── Comment thread spine — gradient line connects reply chains ───
   Upgrades the flat 2px border into a teal-to-border gradient with a
   small connector tab from the spine to each reply head. */
.ci-replies{border-left:0 !important;padding-left:18px !important;position:relative}
.ci-replies::before{content:'';position:absolute;left:0;top:0;bottom:14px;width:1px;background:linear-gradient(180deg,var(--teal) 0%,var(--teal) 28%,var(--border) 100%);pointer-events:none}
.ci-replies .comment-item.is-reply{position:relative}
.ci-replies .comment-item.is-reply::before{content:'';position:absolute;left:-18px;top:30px;width:14px;height:1px;background:var(--border);pointer-events:none}
.ci-replies .ci-replies::before{background:linear-gradient(180deg,var(--border) 0%,var(--border) 100%);opacity:.7}
.cmt-row.cmt-reply{border-left:0 !important;padding-left:14px !important;position:relative}
.cmt-row.cmt-reply::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--teal) 0%,var(--border) 100%);pointer-events:none}
.cmt-row.cmt-reply::after{content:'';position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--border);pointer-events:none}

/* ── Hero spotlight — radial follow inside hero-card ──────────────
   Always-visible radial bloom over the existing mesh gradient that
   tracks the cursor via --hsx/--hsy custom properties (set by JS in
   index.html). No blend mode — straight overlay so the colour stays
   true to --teal. Disabled on touch via hover-none media query. */
.hero-card{--hsx:50%;--hsy:30%}
.hero-card::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(480px circle at var(--hsx) var(--hsy),rgba(0,110,219,.18),transparent 60%);transition:background .12s linear}
[data-theme="dark"] .hero-card::after{background:radial-gradient(480px circle at var(--hsx) var(--hsy),rgba(90,200,250,.22),transparent 60%)}
/* Lift content above the ::after spotlight WITHOUT clobbering .beta-pill's
   position:absolute (which would force it into the grid flow and double
   the hero height — discovered in the live audit). */
.hero-card > *:not(.beta-pill){position:relative;z-index:1}
@media(hover:none){.hero-card::after{display:none}}

/* ── Back-to-top ring — sitewide floating progress button ─────────
   Appears past 800px scroll. Teal arc fills proportional to scroll
   depth. Click smooth-scrolls to top. Hidden on print. */
.btt-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;display:none;align-items:center;justify-content:center;z-index:40;cursor:pointer}
.btt-fab.show{display:flex;animation:bttIn .35s ease both}
@keyframes bttIn{from{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
.btt-ring{position:absolute;inset:0;pointer-events:none}
.btt-ring circle{fill:none;stroke-width:2.2}
.btt-ring .tr{stroke:var(--border)}
.btt-ring .pr{stroke:var(--teal);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear}
.btt-btn{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.10);cursor:pointer;transition:all .18s;padding:0}
.btt-btn:hover{color:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
.btt-btn svg{width:16px;height:16px}
@media print{.btt-fab{display:none !important}}
@media(max-width:480px){.btt-fab{right:14px;bottom:14px;width:46px;height:46px}.btt-btn{width:32px;height:32px}}

/* ── Cmd+K command palette — sitewide keyboard navigator ──────────
   Triggered by ⌘K / Ctrl+K. Search experiences, jump to category,
   fire common actions. Role-aware rows surface only when the user
   has the matching capability. */
.ck-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1100;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.ck-overlay.show{display:flex;animation:ckIn .18s ease both}
@keyframes ckIn{from{opacity:0}to{opacity:1}}
.ck-panel{width:560px;max-width:92%;background:rgba(28,28,30,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;animation:ckPanelIn .22s cubic-bezier(.2,.9,.4,1) both}
@keyframes ckPanelIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.ck-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.ck-input svg{flex-shrink:0;color:rgba(255,255,255,.55)}
.ck-input input{flex:1;background:transparent;border:0;outline:0;font-size:15px;color:#fff;font-family:var(--sans);min-width:0}
.ck-input input::placeholder{color:rgba(255,255,255,.4)}
.ck-input .ck-kbd{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:2px 6px}
.ck-list{padding:8px;max-height:50vh;overflow-y:auto}
.ck-grp{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:10px 12px 6px}
.ck-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:7px;color:rgba(255,255,255,.85);font-size:13.5px;cursor:pointer;border:0;background:transparent;width:100%;text-align:left;font-family:var(--sans)}
.ck-row.on{background:linear-gradient(135deg,rgba(0,113,227,.4),rgba(0,110,219,.28));color:#fff}
.ck-row svg{color:rgba(255,255,255,.55);flex-shrink:0}
.ck-row.on svg{color:#fff}
.ck-row .ck-kbd{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:1px 6px}
.ck-empty{padding:24px;text-align:center;color:rgba(255,255,255,.45);font-size:13px}
@media(max-width:480px){.ck-overlay{padding-top:10vh}.ck-panel{width:96%}}

/* ── Author hover trigger (sitewide on .au[data-hc]) ──────────────
   Used on detail-page rant author + comment names where the author
   is NOT anonymous. Anonymous posts/comments render plain text and
   never receive the .au class — the popover never opens for them. */
.au{position:relative;cursor:pointer;}
.au::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.au:hover::after,.au:focus-visible::after{transform:scaleX(1);}
.au:hover,.au:focus-visible{color:var(--teal);}

/* Avatar context — suppress the underline (would draw a flat line
   across a circular div) and use a teal ring instead. Applies to
   comment-item avatars on detail page (.ci-av) and homepage comment
   previews (.cmt-av). */
.ci-av.au::after,.cmt-av.au::after{display:none;}
.ci-av.au,.cmt-av.au{transition:box-shadow .18s, transform .18s;}
.ci-av.au:hover,.cmt-av.au:hover,.ci-av.au:focus-visible,.cmt-av.au:focus-visible{box-shadow:0 0 0 2px var(--teal);transform:scale(1.05);outline:none;}

/* Incognito glyph in anonymous comment avatars — scale to ~65% of the
   circle so the icon reads at all avatar sizes (40px detail, 36px
   homepage top-level, 30px homepage reply). Forced solid black so it
   reads instantly as the anonymous indicator (overrides the avatar's
   inherited --navy color). Light mode #000, dark mode #fff so it's
   never invisible against the avatar background. */
.ci-av > svg,.cmt-av > svg{width:65%;height:65%;display:block;color:#000;}
[data-theme="dark"] .ci-av > svg,[data-theme="dark"] .cmt-av > svg{color:#fff;}

/* Hover-card banner variants — set via [data-banner="X"] from get_author_card.
   Default (data-banner unset or "navy-teal") falls through to the rule on
   .hc-banner above. data-banner="custom" indicates an uploaded image is set
   via inline style.background-image — the dot pattern is hidden so the
   image renders cleanly. */
.hc-banner[data-banner="gold-amber"]{background:linear-gradient(135deg,var(--gold) 0%,#f0a820 100%);}
.hc-banner[data-banner="green-teal"]{background:linear-gradient(135deg,var(--green) 0%,var(--teal) 100%);}
.hc-banner[data-banner="red-orange"]{background:linear-gradient(135deg,var(--red) 0%,var(--orange) 100%);}
.hc-banner[data-banner="purple-navy"]{background:linear-gradient(135deg,#7c3aed 0%,var(--navy) 100%);}
.hc-banner[data-banner="mono"]{background:linear-gradient(135deg,#1d1d1f 0%,#3a3a3c 100%);}
.hc-banner[data-banner="custom"]::after{display:none;}
.hc-banner[data-banner="custom"]{background-size:cover;background-position:center;background-repeat:no-repeat;}

/* Profile-settings hover-card banner picker (in profile.html panel-edit). */
.banner-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.banner-swatch{width:56px;height:38px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s, border-color .15s, box-shadow .15s;position:relative;overflow:hidden;}
.banner-swatch::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);background-size:8px 8px;}
.banner-swatch:hover{transform:translateY(-2px);}
.banner-swatch.act{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset, 0 6px 16px rgba(0,0,0,.10);}
.banner-swatch.banner-navy-teal{background:linear-gradient(135deg,var(--navy),var(--teal));}
.banner-swatch.banner-gold-amber{background:linear-gradient(135deg,var(--gold),#f0a820);}
.banner-swatch.banner-green-teal{background:linear-gradient(135deg,var(--green),var(--teal));}
.banner-swatch.banner-red-orange{background:linear-gradient(135deg,var(--red),var(--orange));}
.banner-swatch.banner-purple-navy{background:linear-gradient(135deg,#7c3aed,var(--navy));}
.banner-swatch.banner-mono{background:linear-gradient(135deg,#1d1d1f,#3a3a3c);}

/* Profile-settings inline toggle row */
.pf-toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);cursor:pointer;padding:6px 0;}
.pf-toggle input{width:16px;height:16px;accent-color:var(--navy);cursor:pointer;flex-shrink:0;margin:0;}

/* Banner preview — live preview in profile.html showing current banner.
   Mirrors .hc-banner styling so the user sees what others will see. */
.banner-preview{height:80px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--teal));position:relative;overflow:hidden;border:1px solid var(--border);margin-bottom:10px;}
.banner-preview::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);background-size:14px 14px;}
.banner-preview[data-banner="gold-amber"]{background:linear-gradient(135deg,var(--gold),#f0a820);}
.banner-preview[data-banner="green-teal"]{background:linear-gradient(135deg,var(--green),var(--teal));}
.banner-preview[data-banner="red-orange"]{background:linear-gradient(135deg,var(--red),var(--orange));}
.banner-preview[data-banner="purple-navy"]{background:linear-gradient(135deg,#7c3aed,var(--navy));}
.banner-preview[data-banner="mono"]{background:linear-gradient(135deg,#1d1d1f,#3a3a3c);}
.banner-preview[data-banner="custom"]::after{display:none;}
.banner-preview[data-banner="custom"]{background-size:cover;background-position:center;background-repeat:no-repeat;}
.banner-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.banner-actions .pf-btn-o{padding:7px 14px;font-size:12.5px;}

/* ── Author hover-card portal (#hcPortal in r.js) ─────────────────
   Single fixed-position element appended to body. Filled on hover via
   get_author_card RPC; cached per user_id for the page lifetime. */
.hc-portal{position:fixed;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.16);padding:0;z-index:1050;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .18s, transform .22s cubic-bezier(.2,.9,.4,1);pointer-events:none;overflow:hidden;}
.hc-portal.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
[data-theme="dark"] .hc-portal{box-shadow:0 18px 50px rgba(0,0,0,.5);}
.hc-banner{height:54px;background:linear-gradient(135deg,var(--navy),var(--teal));position:relative;}
.hc-banner::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);background-size:14px 14px;}
.hc-body{padding:0 18px 18px;margin-top:-26px;position:relative;}
.hc-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif-display);font-weight:700;font-size:22px;border:3px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;}
.hc-av img{width:100%;height:100%;object-fit:cover;display:block;}
.hc-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:8px;margin-bottom:4px;}
.hc-name{font-size:15.5px;font-weight:600;letter-spacing:-.25px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hc-handle{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-top:1px;}
.hc-level{display:inline-flex;align-items:center;gap:5px;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-bg);border:1px solid var(--teal);padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0;align-self:center;}
/* Role variants align with .su-pill (the canonical role pill in the
   nav/admin bar): same sans font, same 10px size, same weight + spacing,
   same charcoal/navy/dark palette. Keeps the level pill (teal mono) for
   regular members but swaps in the role-pill look the moment a user
   carries Founder / Admin / Moderator. */
.hc-level.role-founder,
.hc-level.role-admin,
.hc-level.role-mod{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:none;padding:3px 9px;}
.hc-level.role-founder{background:linear-gradient(135deg,#2a2a2c 0%,#0a0a0a 100%);color:#fff;border:1px solid rgba(255,255,255,.12);letter-spacing:.08em;box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);}
[data-theme="dark"] .hc-level.role-founder{background:linear-gradient(135deg,#f5f5f7 0%,#d6d6d8 100%);color:#1d1d1f;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5);}
/* Keep the 1px transparent border (inherited from .hc-level base, where it
   is teal) so admin/mod render the same height as the bordered founder
   pill and the bordered level pill for regular members. */
.hc-level.role-admin{background:var(--text);color:var(--bg);border-color:transparent;}
.hc-level.role-mod{background:var(--text);color:var(--bg);border-color:transparent;}
.hc-bio{font-size:12.5px;line-height:1.5;color:var(--text2);margin:6px 0 12px;}
/* Admin-only privileged view — surfaces real email of anonymous users to
   admin/owner viewers. Red pill so the viewer always knows they're seeing
   privileged data the target user did not consent to expose. */
.hc-admin-info{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;color:var(--red);background:var(--red-bg);border:1px solid var(--red);border-radius:7px;padding:6px 9px;margin:0 0 12px;overflow:hidden;}
.hc-admin-tag{font-weight:600;letter-spacing:.06em;background:var(--red);color:#fff;padding:2px 6px;border-radius:4px;font-size:9px;flex-shrink:0;}
.hc-admin-email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* When .au is applied to a badge (admin-only anonymous-lookup trigger), the
   default underline draws across the badge — looks broken. Suppress it. */
.badge.au::after{display:none;}
.badge.au{cursor:pointer;transition:filter .15s;}
.badge.au:hover{filter:brightness(1.08);}
.hc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:12px;}
.hc-stat-n{font-family:'DM Mono',monospace;font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.hc-stat-l{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.hc-recent-label{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.hc-recent-label::before{content:'';width:14px;height:1px;background:var(--border2);}
.hc-recent-item{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:12px;color:var(--text2);line-height:1.4;text-decoration:none;border-radius:6px;transition:background .15s, color .15s;}
.hc-recent-item:hover{color:var(--teal);background:var(--teal-bg);padding-left:6px;padding-right:6px;}
.hc-recent-item .t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.hc-recent-item .when{font-family:'DM Mono',monospace;color:var(--muted);font-size:10.5px;flex-shrink:0;}
.hc-empty-recent{font-size:11.5px;color:var(--muted);font-style:italic;padding:4px 0;}
.hc-portal.loading .hc-body > *:not(.hc-av-wrap){opacity:.4;}

/* ── Related experiences carousel (#6) ────────────────────────────
   Two horizontal scroll-snap rails on experience-detail.html below
   the comments. "More in [Category]" + "From [Seller]". */
.related-section{margin-top:28px;padding:24px 0 8px;border-top:1px solid var(--border);overflow:hidden;}
.related-section:not(:has(.rc-card)){display:none;}
.rc-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;padding:0 4px;}
.rc-hd h4{font-family:var(--serif-display);font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0;color:var(--text);}
.rc-hd h4 em{font-style:italic;color:var(--teal);}
.rc-controls{display:flex;gap:6px;}
.rc-arrow{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;transition:all .15s;padding:0;}
.rc-arrow:hover{border-color:var(--teal);color:var(--teal);}
.rc-arrow:disabled{opacity:.35;cursor:default;}
.rc-arrow:disabled:hover{border-color:var(--border);color:var(--text);}
.rc-arrow svg{width:13px;height:13px;}
.rc-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.rc-track::-webkit-scrollbar{display:none;}
.rc-card{flex:0 0 260px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);display:flex;flex-direction:column;}
.rc-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 8px 22px rgba(0,0,0,.06);}
[data-theme="dark"] .rc-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.4);}
.rc-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);margin-bottom:8px;border:1px solid;align-self:flex-start;}
.rc-tag.c-Product{color:var(--navy);border-color:var(--navy);background:var(--nlight);}
.rc-tag.c-Property{color:var(--green);border-color:var(--green);background:var(--green-bg);}
.rc-tag.c-Service{color:var(--teal);border-color:var(--teal);background:var(--teal-bg);}
.rc-tag.c-Food{color:var(--gold);border-color:var(--gold);background:var(--gold-bg);}
.rc-tag.c-Finance{color:var(--red);border-color:var(--red);background:var(--red-bg);}
.rc-tag.c-Healthcare{color:var(--purple);border-color:var(--purple);background:var(--purple-bg);}
.rc-tag.c-Travel{color:var(--orange);border-color:var(--orange);background:var(--orange-bg);}
.rc-h{font-size:13px;font-weight:600;line-height:1.4;margin:0 0 8px;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.1px;}
.rc-meta{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.rc-meta .rc-up{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.related-empty{padding:14px 4px;font-size:12.5px;color:var(--muted);font-style:italic;}
@media(max-width:480px){.rc-card{flex-basis:240px;}}

/* ── Friction Snapshot (Gap 2) ───────────────────────────────────── */
.fsnap{border:1px solid var(--border);border-radius:14px;padding:18px 20px;background:var(--surface);margin:0 0 22px;}
.fsnap-skel{height:160px;border-radius:14px;margin:0 0 22px;background:linear-gradient(90deg,var(--surface2),var(--surface3),var(--surface2));background-size:200% 100%;animation:skShimmer 1.4s linear infinite;}
.fsnap-skel-bar{display:none;}
.fsnap-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.fsnap-hd-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fsnap-eb{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;}
.fsnap-tt{font-family:var(--serif-display);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);}
.fsnap-trend{display:inline-flex;align-items:center;gap:4px;font-family:'DM Mono',monospace;font-size:11px;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0;}
.fsnap-trend.up{background:var(--red-bg);color:var(--red);}
.fsnap-trend.down{background:var(--green-bg);color:var(--green);}
.fsnap-trend.flat{background:var(--surface2);color:var(--muted);}
.fsnap-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fsnap-block{display:flex;flex-direction:column;gap:6px;min-width:0;}
.fsnap-lbl{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.fsnap-val{font-family:var(--serif-display);font-size:24px;font-weight:700;letter-spacing:-.012em;line-height:1.1;color:var(--text);}
.fsnap-val small{font-size:11px;color:var(--muted);font-weight:500;font-family:'DM Mono',monospace;margin-left:4px;letter-spacing:0;}
.fsnap-sub{font-size:11.5px;color:var(--muted);font-family:'DM Mono',monospace;}
.fsnap-bar{height:8px;border-radius:4px;background:var(--surface2);display:flex;overflow:hidden;margin-top:4px;}
.fsnap-bar > span{height:100%;}
.fsnap-leg{display:flex;gap:8px;flex-wrap:wrap;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);margin-top:4px;}
.fsnap-leg span{display:inline-flex;align-items:center;gap:4px;}
.fsnap-leg-dot{width:8px;height:8px;border-radius:2px;display:inline-block;}
.fsnap-sub-lbl{font-family:'DM Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px;}
.fsnap-freq{font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);display:flex;flex-wrap:wrap;gap:4px 10px;}
.fsnap-freq-k{color:var(--muted);}
.fsnap-freq-v{color:var(--text);font-weight:600;}
.fsnap-spark{margin-top:4px;}
.fsnap-spark-canvas{position:relative;width:100%;height:44px;color:var(--teal);}
.fsnap-spark-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.fsnap-spark-svg .fsnap-spark-line{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.fsnap-spark-svg .fsnap-spark-avg{stroke:var(--border);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;opacity:.7;}
.fsnap-spark-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--teal-bg);pointer-events:none;}
.fsnap-imp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed var(--border);font-size:12.5px;gap:8px;}
.fsnap-imp-row:last-child{border-bottom:0;}
.fsnap-imp-k{color:var(--text2);min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fsnap-imp-bar{flex:1;height:4px;background:var(--surface2);border-radius:2px;margin:0 8px;overflow:hidden;min-width:30px;}
.fsnap-imp-bar > span{display:block;height:100%;background:var(--teal);}
.fsnap-imp-v{font-family:'DM Mono',monospace;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.fsnap-empty{font-size:11.5px;color:var(--muted);font-style:italic;}
.fsnap-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  border:1px solid var(--border2);background:var(--surface);color:var(--muted);
  font-family:'DM Mono',monospace;font-size:9px;font-weight:600;line-height:1;
  margin-left:5px;vertical-align:middle;cursor:help;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.fsnap-help:hover{color:var(--text);border-color:var(--text2);background:var(--surface2);}
.fsnap-eb.tip-host,.fsnap-tt.tip-host,.fsnap-trend.tip-host{cursor:help;}
.fsnap-win-sel{
  display:inline-block;font-family:'DM Mono',monospace;font-size:9.5px;color:var(--teal);
  text-transform:uppercase;letter-spacing:.1em;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:1px 22px 1px 9px;margin-left:2px;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--teal) 50%),
                   linear-gradient(135deg, var(--teal) 50%, transparent 50%);
  background-position:calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
  transition:border-color var(--t),background-color var(--t);
}
.fsnap-win-sel:hover{border-color:var(--teal);background-color:var(--surface);}
.fsnap-win-sel:focus{outline:none;border-color:var(--teal);}
.fsnap-clickable{cursor:pointer;transition:border-color var(--t),box-shadow var(--t),transform var(--t);}
.fsnap-clickable:hover{border-color:var(--text2);box-shadow:0 6px 20px rgba(0,0,0,.06);transform:translateY(-1px);}
.fsnap-expand-hint{display:inline-block;margin-left:10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;font-weight:500;vertical-align:middle;opacity:.7;transition:opacity var(--t);}
.fsnap-clickable:hover .fsnap-expand-hint{opacity:1;}

/* ── Expanded friction snapshot modal (#fxdOverlay) ── */
.fxd-eb{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--text2);margin:-4px 0 18px;padding:10px 14px;background:var(--surface2);border-radius:var(--r-sm);line-height:1.6;letter-spacing:.02em;}
.fxd-eb b{color:var(--text);font-weight:600;}
.fxd-section{margin-bottom:22px;}
.fxd-section:last-child{margin-bottom:0;}
.fxd-section h3{font-family:var(--serif-display);font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 10px;border-bottom:1px solid var(--border);padding-bottom:7px;}
.fxd-row{display:grid;grid-template-columns:140px 1fr 90px;align-items:center;gap:12px;padding:6px 0;font-size:12.5px;}
.fxd-k{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fxd-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;}
.fxd-bar > span{display:block;height:100%;background:var(--teal);}
.fxd-v{font-family:'DM Mono',monospace;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;font-size:12px;}
.fxd-v small{color:var(--muted);font-weight:500;margin-left:4px;}
.fxd-fin{font-family:var(--serif-display);font-size:18px;font-weight:600;color:var(--text);}
.fxd-empty{font-size:12px;color:var(--muted);font-style:italic;padding:10px;text-align:center;background:var(--surface2);border-radius:var(--r-sm);}
.fxd-recent-row{display:block;padding:9px 12px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;transition:border-color var(--t),background var(--t);}
.fxd-recent-row:hover{border-color:var(--text2);background:var(--surface2);}
.fxd-recent-tt{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;line-height:1.3;}
.fxd-recent-meta{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);}
@media(max-width:600px){.fxd-row{grid-template-columns:1fr 90px;gap:6px;}.fxd-row .fxd-bar{grid-column:1/-1;order:3;}}

.fsnap-funnel{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.fsnap-fnl-step{display:flex;flex-direction:column;gap:3px;}
.fsnap-fnl-bar{height:8px;border-radius:4px;background:var(--surface2);overflow:hidden;}
.fsnap-fnl-fill{display:block;height:100%;background:var(--teal);transition:width .25s ease-out;}
.fsnap-fnl-fill.fsnap-fnl-good{background:var(--green);}
.fsnap-fnl-lbl{display:flex;justify-content:space-between;align-items:baseline;font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);gap:8px;}
.fsnap-fnl-lbl b{font-family:var(--serif-display);font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.fsnap-fnl-lbl span{color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;}
@media(max-width:600px){.fsnap-grid{grid-template-columns:1fr;}}

/* ── Friction snapshot — KPI tiles, anomaly, issue types, heatmap, benchmark ── */
.fsnap-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.fsnap-kpi{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:11px 13px;min-width:0;}
.fsnap-kpi-k{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;}
.fsnap-kpi-v{font-family:var(--serif-display);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.fsnap-kpi-u{font-size:12px;font-weight:500;color:var(--muted);font-family:'DM Mono',monospace;margin-left:1px;}
.fsnap-kpi-f{margin-top:7px;font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.fsnap-kpi-d{font-weight:600;}
.fsnap-kpi-d.good{color:var(--green);}
.fsnap-kpi-d.bad{color:var(--red);}
.fsnap-kpi-d.flat{color:var(--muted);}
.fsnap-anomaly{display:flex;align-items:flex-start;gap:9px;background:var(--red-bg);border:1px solid var(--red);border-radius:9px;padding:10px 13px;margin-bottom:16px;color:var(--red);}
.fsnap-anomaly svg{flex-shrink:0;margin-top:1px;}
.fsnap-anomaly p{margin:0;font-size:11.5px;line-height:1.55;color:var(--text2);}
.fsnap-anomaly strong{color:var(--text);font-weight:600;}
.fsnap-section{margin-top:18px;display:flex;flex-direction:column;gap:7px;}
.fsnap-iss-row{display:flex;align-items:center;gap:9px;font-size:12px;}
.fsnap-iss-k{color:var(--text2);flex-shrink:0;width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fsnap-iss-track{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;min-width:30px;}
.fsnap-iss-track > span{display:block;height:100%;background:var(--teal);border-radius:3px;}
.fsnap-iss-v{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;width:34px;text-align:right;}
.fsnap-heat{display:flex;flex-direction:column;gap:5px;margin-top:2px;}
.fsnap-heat-row{display:flex;align-items:center;gap:9px;}
.fsnap-heat-row > b{font-weight:400;font-size:10.5px;color:var(--text2);width:120px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fsnap-heat-cells{display:flex;gap:3px;flex:1;}
.fsnap-heat-cells > i{flex:1;height:14px;border-radius:2px;border:1px solid var(--border);}
.fsnap-heat-cap{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);margin-top:3px;}
.fsnap-bn{display:flex;flex-direction:column;gap:11px;margin-top:2px;}
.fsnap-bn-row{display:flex;flex-direction:column;gap:5px;}
.fsnap-bn-t{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--text);flex-wrap:wrap;}
.fsnap-bn-n{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);white-space:nowrap;}
.fsnap-bn-track{position:relative;height:8px;background:var(--surface2);border-radius:4px;}
.fsnap-bn-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;}
.fsnap-bn-fill.good{background:var(--green);}
.fsnap-bn-fill.bad{background:var(--red);}
.fsnap-bn-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);border-radius:1px;}
.fsnap-bn-leg{display:flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);margin-top:3px;}
.fsnap-bn-leg i{width:2px;height:10px;background:var(--text);border-radius:1px;flex-shrink:0;}
@media(max-width:600px){.fsnap-kpis{grid-template-columns:repeat(2,1fr);}.fsnap-iss-k{width:92px;}.fsnap-heat-row > b{width:80px;}}

/* ── Engagement audit modal (admin/founder reactor visibility) ── */
.ea-section{margin-bottom:22px;}
.ea-section:last-child{margin-bottom:0;}
.ea-section-hd{margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:8px;}
.ea-section-title{font-family:var(--serif-display);font-size:15px;font-weight:600;color:var(--text);}
.ea-section-count{display:inline-block;font-family:'DM Mono',monospace;font-size:10.5px;font-weight:500;color:var(--muted);background:var(--surface2);padding:1px 8px;border-radius:var(--r-pill);margin-left:6px;vertical-align:middle;}
.ea-section-sub{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.02em;line-height:1.55;}
.ea-list{display:flex;flex-direction:column;gap:8px;}
.ea-row{display:flex;align-items:flex-start;gap:12px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);}
.ea-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;font-family:var(--serif-display);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ea-who{flex:1;min-width:0;}
.ea-name{font-size:13px;color:var(--text);font-weight:600;line-height:1.3;}
.ea-email{font-family:'DM Mono',monospace;font-size:10px;color:var(--red);background:var(--red-bg);padding:1px 7px;border-radius:var(--r-pill);display:inline-block;margin-top:3px;letter-spacing:.02em;}
.ea-meta{margin-top:5px;font-size:11.5px;color:var(--muted);line-height:1.4;}
.ea-cmt-snippet{font-style:italic;color:var(--text2);text-decoration:none;border-bottom:1px dashed var(--border2);cursor:pointer;}
.ea-cmt-snippet:hover{color:var(--text);border-bottom-color:var(--text2);}
.ea-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;text-align:right;}
.ea-act{display:inline-flex;align-items:center;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.ea-act.ea-up{background:var(--teal-bg);color:var(--teal);}
.ea-act.ea-vt{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.ea-act.ea-em{background:transparent;font-size:15px;padding:0 4px;letter-spacing:0;text-transform:none;font-weight:400;border:0;line-height:1;}
.ea-ts{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}
.ea-empty{font-size:12px;color:var(--muted);font-style:italic;padding:10px;text-align:center;background:var(--surface2);border-radius:var(--r-sm);}

/* ── Linkable seller-tag (Gap 1) ─────────────────────────────────── */
a.seller-tag{text-decoration:none;}
a.seller-tag:hover{background:var(--nlight);border-color:var(--navy);color:var(--navy);}
[data-theme="dark"] a.seller-tag:hover{background:rgba(10,132,255,.12);}

/* ── Business detail page (Gap 1) ────────────────────────────────── */
.bdwrap{max-width:1100px;margin:0 auto;padding:32px 20px 80px;position:relative;}
.bdhd{padding:24px 26px 22px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%);border:1px solid var(--border);border-radius:18px;display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.bd-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--navy),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif-display);font-weight:800;font-size:26px;flex-shrink:0;}
.bd-meta{flex:1;min-width:200px;}
.bd-eb{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;}
.bd-name{font-family:var(--serif-display);font-size:28px;font-weight:700;margin:0 0 12px;letter-spacing:-.012em;line-height:1.15;}
.bd-pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.bd-pill{font-family:'DM Mono',monospace;font-size:10.5px;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--text2);}
.bd-pill b{color:var(--text);font-weight:700;}
.bd-pill.unclaimed{background:var(--surface2);color:var(--muted);}
.bd-pill.claimed{background:var(--green-bg);color:var(--green);border-color:rgba(52,199,89,.3);}
.bd-pill.unresp{background:var(--red-bg);color:var(--red);border-color:rgba(255,59,48,.25);}
.bd-act{display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.bd-claim-btn{font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--r-pill);background:var(--text);color:var(--bg);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:all .2s;}
.bd-claim-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.1);}
.bd-claim-sub{font-size:10.5px;color:var(--muted);font-family:'DM Mono',monospace;}
.bd-claimed-by{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green);background:var(--green-bg);padding:5px 10px;border-radius:var(--r-pill);font-family:'DM Mono',monospace;}
.bd-section-eb{font-family:'DM Mono',monospace;font-size:10px;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin:32px 0 14px;display:flex;align-items:center;gap:10px;}
.bd-section-eb::before{content:'';width:18px;height:1px;background:var(--teal);}
.bd-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;background:var(--surface);border:1px dashed var(--border);border-radius:14px;}

/* ── Claim form (multi-step) ──────────────────────────────────────── */
.cl-wrap{max-width:780px;margin:0 auto;padding:32px 20px 80px;}
.cl-hd{margin-bottom:22px;}
.cl-eb{font-family:'DM Mono',monospace;font-size:10px;color:var(--teal);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:10px;display:inline-flex;align-items:center;gap:10px;}
.cl-eb::before{content:'';width:18px;height:1px;background:var(--teal);}
.cl-hd h1{font-family:var(--serif-display);font-size:30px;font-weight:700;letter-spacing:-.018em;margin:0 0 8px;line-height:1.15;}
.cl-hd h1 em{font-style:normal;color:var(--text);font-weight:700;}
.cl-hd .lede{font-size:14.5px;color:var(--text2);line-height:1.55;max-width:600px;margin:0;}
.cl-prog{display:flex;gap:6px;margin:20px 0 24px;}
.cl-prog-step{flex:1;height:5px;border-radius:3px;background:var(--surface2);}
.cl-prog-step.done{background:var(--teal);}
.cl-prog-step.act{background:linear-gradient(90deg,var(--teal) 50%,var(--surface2) 50%);}
.cl-step-meta{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}
.cl-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;margin-bottom:20px;}
.cl-card h2{font-family:var(--serif-display);font-size:20px;font-weight:700;letter-spacing:-.012em;margin:0 0 6px;}
.cl-card .ledesm{font-size:13px;color:var(--text2);line-height:1.55;margin:0 0 18px;}
.cl-fld{margin-bottom:16px;}
.cl-fld label{display:block;font-family:'DM Mono',monospace;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-weight:600;}
.cl-fld label .req{color:var(--red);}
.cl-fld input[type=text],.cl-fld input[type=email],.cl-fld input[type=url],.cl-fld textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;font-family:var(--sans);outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;}
.cl-fld input:focus,.cl-fld textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,113,227,.08);}
.cl-fld .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.5;}
.cl-up{border:1.5px dashed var(--border2);border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface2);}
.cl-up:hover{border-color:var(--navy);background:var(--nlight);}
.cl-up.has-file{border-color:var(--green);background:var(--green-bg);border-style:solid;}
.cl-up input[type=file]{display:none;}
.cl-up-icon{font-family:var(--serif-display);font-size:24px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.cl-up-tt{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:4px;}
.cl-up-sub{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;}
.cl-up.has-file .cl-up-icon,.cl-up.has-file .cl-up-tt,.cl-up.has-file .cl-up-sub{color:var(--green);}
.cl-btnrow{display:flex;justify-content:space-between;gap:10px;margin-top:24px;}
.cl-btn-prim{font-family:var(--sans);font-size:14px;font-weight:600;padding:11px 22px;border-radius:var(--r-pill);background:var(--text);color:var(--bg);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.cl-btn-prim:disabled{opacity:.5;cursor:not-allowed;}
.cl-btn-sec{font-family:var(--sans);font-size:14px;font-weight:500;padding:11px 18px;border-radius:var(--r-pill);background:var(--surface);color:var(--text2);border:1px solid var(--border);cursor:pointer;}
.cl-btn-sec:hover{color:var(--text);border-color:var(--text);}
.cl-err{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,59,48,.25);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px;line-height:1.5;display:none;}
.cl-err.on{display:block;}
.cl-ok{background:var(--green-bg);color:var(--green);border:1px solid rgba(52,199,89,.25);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.55;}
.cl-checklist{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:13px;color:var(--text2);}
.cl-checklist b{color:var(--text);font-weight:600;}
.cl-checklist ul{margin:8px 0 0;padding-left:22px;line-height:1.7;}
.cl-success{text-align:center;padding:34px 20px;}
.cl-success-ico{width:64px;height:64px;border-radius:50%;background:var(--green-bg);color:var(--green);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:var(--serif-display);font-size:32px;font-weight:700;}
.cl-success h2{font-family:var(--serif-display);font-size:24px;font-weight:700;letter-spacing:-.012em;margin:0 0 10px;}
.cl-success p{font-size:14px;color:var(--text2);max-width:480px;margin:0 auto 14px;line-height:1.55;}

/* ── Admin businesses queue ──────────────────────────────────────── */
.cq-row{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
.cq-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.cq-tt{font-family:var(--serif-display);font-size:17px;font-weight:600;letter-spacing:-.012em;}
.cq-pill{font-family:'DM Mono',monospace;font-size:10.5px;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.cq-pill.pending{background:var(--gold-bg);color:var(--gold);border-color:rgba(161,98,7,.3);}
.cq-pill.review{background:var(--teal-bg);color:var(--teal);border-color:rgba(0,110,219,.3);}
.cq-pill.appr{background:var(--green-bg);color:var(--green);border-color:rgba(52,199,89,.3);}
.cq-pill.rej{background:var(--red-bg);color:var(--red);border-color:rgba(255,59,48,.25);}
.cq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;font-size:13px;}
.cq-fld{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cq-fld .k{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.cq-fld .v{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cq-fld .v a{color:var(--navy);text-decoration:none;}
.cq-fld .v a:hover{text-decoration:underline;}
.cq-docs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
.cq-doc{font-family:'DM Mono',monospace;font-size:11px;padding:5px 11px;border-radius:var(--r-pill);background:var(--teal-bg);color:var(--teal);border:1px solid rgba(0,110,219,.25);text-decoration:none;cursor:pointer;}
.cq-doc:hover{background:var(--teal);color:#fff;}
.cq-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.cq-acts button{font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);border:1px solid;cursor:pointer;}
.cq-act-appr{background:var(--green);color:#fff;border-color:var(--green);}
.cq-act-rej{background:var(--surface);color:var(--red);border-color:var(--red);}
.cq-act-rev{background:var(--surface);color:var(--teal);border-color:var(--teal);}
@media(max-width:600px){.cq-grid{grid-template-columns:1fr;}}

/* ── Country picker (Phase A routing) ────────────────────────── */
.rc-picker{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color var(--t),background var(--t);line-height:1;}
.rc-picker:hover{border-color:var(--navy);}
.rc-picker[aria-expanded="true"]{border-color:var(--navy);background:var(--surface2);}
.rc-picker .rc-flg{font-size:14px;line-height:1;}
.rc-picker .rc-lbl{font-size:12px;}
.rc-picker .rc-arr{font-size:9px;color:var(--muted);margin-left:1px;}
.rc-dropdown{position:fixed;display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 14px 40px rgba(0,0,0,.16);min-width:240px;max-height:70vh;overflow-y:auto;z-index:9500;padding:6px 0;font-family:var(--sans);}
.rc-dropdown.on{display:block;}
.rc-dropdown .rc-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;background:none;border:none;color:var(--text);font-size:13px;font-family:var(--sans);text-align:left;cursor:pointer;}
.rc-dropdown .rc-row:hover{background:var(--surface2);}
.rc-dropdown .rc-row.act{color:var(--navy);font-weight:600;}
.rc-dropdown .rc-row .rc-flg{font-size:15px;line-height:1;flex-shrink:0;}
.rc-dropdown .rc-row .rc-name{flex:1;}
.rc-dropdown .rc-row .rc-name small{color:var(--muted);font-weight:400;}
.rc-dropdown .rc-row .rc-tick{color:var(--teal);font-weight:700;}
.rc-dropdown .rc-row-global{font-weight:600;}
.rc-dropdown .rc-sep{height:1px;background:var(--border);margin:4px 0;}

/* First-visit landing overlay */
.rc-landing{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:9800;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.rc-landing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);max-width:640px;width:100%;padding:34px 32px;box-shadow:0 30px 80px rgba(0,0,0,.25);text-align:center;}
.rc-landing-eb{font-family:'DM Mono',monospace;font-size:10px;color:var(--teal);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.rc-landing-card h2{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;margin-bottom:10px;letter-spacing:-.4px;}
.rc-landing-lede{font-size:13.5px;color:var(--text2);max-width:480px;margin:0 auto 22px;line-height:1.6;}
.rc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:18px;}
.rc-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 10px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text);font-family:var(--sans);font-weight:500;position:relative;transition:border-color var(--t),background var(--t);}
.rc-tile:hover{border-color:var(--navy);background:rgba(var(--nrgb),.04);}
.rc-tile-rec{border-color:var(--teal);background:rgba(20,184,166,.05);}
.rc-tile .rc-tile-flg{font-size:15px;line-height:1;}
.rc-tile .rc-tile-rec-tag{font-family:var(--mono);font-size:9px;color:var(--teal);margin-left:4px;letter-spacing:.6px;text-transform:uppercase;}
.rc-global-row{display:flex;justify-content:center;}
.rc-tile-global{background:linear-gradient(135deg,rgba(0,113,227,.06),rgba(20,184,166,.04));border:1.5px solid var(--teal);min-width:240px;font-weight:600;}

/* Submit form: implicit-country pill (replaces the Country select) */
.rc-implicit{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface2);border:1px solid var(--border);font-family:var(--sans);font-size:13px;color:var(--text);}
.rc-implicit .rc-flg{font-size:15px;line-height:1;}
.rc-implicit a{font-size:11.5px;color:var(--teal);text-decoration:none;font-weight:500;margin-left:4px;}
.rc-implicit a:hover{text-decoration:underline;}

@media(max-width:480px){
  .rc-picker .rc-lbl{display:none;}
  .rc-dropdown{min-width:220px;}
}

/* ── SITE HIATUS banner + read-only freeze ─────────────────────────
   Mounted by r.js on every page (inserted right after #off) when
   site_config.hiatus_mode is on. Non-fixed: sits at the top of the content
   flow, just below the fixed nav, so it needs no offset math. */
.hiatus-banner{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--orange-bg); color:var(--orange);
  border-bottom:1px solid rgba(255,149,0,.30);
  padding:10px 18px; font-size:13.5px; font-weight:500; line-height:1.5;
  text-align:center; letter-spacing:.005em;
}
.hiatus-banner svg{ flex-shrink:0; }
.hiatus-banner .hiatus-banner-msg{ max-width:760px; }

/* experience.html: when a non-founder reaches the submit form during a
   hiatus, the form is hidden and #hiatusNotice shows in its place. */
body.hiatus-freeze .form-section,
body.hiatus-freeze .submit-area,
body.hiatus-freeze #modNotice{ display:none !important; }
#hiatusNotice{
  display:none; margin:8px 0 40px; padding:28px 26px;
  background:var(--surface); border:1.5px solid var(--orange);
  border-radius:var(--r-sm); text-align:center;
}
#hiatusNotice .hn-ico{ color:var(--orange); margin-bottom:12px; }
#hiatusNotice h2{ font-size:20px; font-weight:700; margin-bottom:8px; letter-spacing:-.2px; }
#hiatusNotice p{ font-size:14.5px; color:var(--text2); line-height:1.7; max-width:480px; margin:0 auto; }
@media(max-width:480px){ .hiatus-banner{ font-size:12.5px; padding:9px 12px; } }

/* iOS Safari auto-zooms the viewport when a focused text input has font-size
   < 16px. Bump the text-entry controls (search, submit-form fields, pagination
   jump, business-claim form) to 16px on touch-width viewports so focusing them
   doesn't trigger a zoom-in. Desktop keeps its compact 13-14px sizing. */
@media(max-width:768px){
  .srch-input, .fi, .fs, .ft, .pg-input,
  .cl-fld input[type=text], .cl-fld input[type=email],
  .cl-fld input[type=url], .cl-fld textarea { font-size:16px; }
}