/* ───────────────────────────────────────────────────────────────
   Content Engine — shared design system + nav + shell.
   ONE source of truth, linked by every page (in <head>, before the
   page's own <style>). The sidebar markup is rendered by nav.js into
   <aside class="side" id="nav-root">.

   CONTRACT:
   • Pages may NOT redefine .shell or .main — the structural shell is
     immutable so every page shares the exact same sidebar position
     and content gutter.
   • Pages route ALL content through <main class="main"><div class="wrap X">,
     where X is ONE width modifier: app | feed | read | home.
   • Pages reference tokens (var(--…)) — no raw hex in component CSS,
     except FIXED category/lane colors (which must never brand-swap).
   ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* ── surfaces: a 3-level ladder on near-black ── */
  --bg:#060608;            /* app canvas */
  --surface-1:#0d0d11;     /* cards / panels / details */
  --surface-2:#131318;     /* inputs / chips / raised controls */
  --surface-hover:#1a1a20; /* hover fill */
  /* ── ink ── */
  --ink:#F4F4F1; --ink-2:#C9C9CE; --mut:#8C8C95;
  --label:#7E7E88;         /* group / zone labels (AA on bg) */
  /* ── hairlines (two, used deliberately) ── */
  --line:#1e1e25;
  --line-strong:#2a2a33;
  /* ── accent: swapped per brand by nav.js (sets --acc + --acc-ink) ── */
  --acc:#C8FF3D;           /* decorative: borders, fills, bars, dots */
  --acc-ink:#C8FF3D;       /* AA-safe accent-as-TEXT/icon (purple gets lifted) */
  --acc-soft:color-mix(in srgb, var(--acc) 12%, #0b0b0e);
  --acc-line:color-mix(in srgb, var(--acc) 40%, transparent);
  /* ── semantic status (stop overloading the accent) ── */
  --ok:#7FE08A; --warn:#FFC861; --danger:#FF8A8A;
  /* ── fixed category lanes (NEVER brand-swap — tennis stays green) ── */
  --lane-running:#5AA9FF; --lane-tennis:#C8FF3D; --lane-climbing:#FF7A4D;
  --lane-pickleball:#FFD23D; --lane-gym:#FFD23D; --lane-hiking:#4FD6A8; --lane-community:#FF6F9C;
  /* ── layout ── */
  --side-w:248px;
  --w-app:1200px; --w-feed:760px; --w-read:680px; --w-home:1040px;
  /* ── 8px spacing scale ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* ── radius scale ── */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* ── elevation ── */
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.55);
  /* ── focus ring (accent-ink → passes 3:1 in both brands) ── */
  --ring:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb, var(--acc-ink) 75%, transparent);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}

/* global focus ring */
:where(a,button,input,textarea,select,summary,[tabindex],.chip,.tab,.brandrow .b):focus-visible{
  outline:none; box-shadow:var(--ring);
}
button:disabled{opacity:.5;cursor:not-allowed}

/* ── immutable shell ── */
.shell{display:flex;align-items:flex-start;min-height:100vh}        /* full-bleed — DO NOT cap/center */
.main{flex:1;min-width:0}                                            /* fills all width right of rail */
.main>.wrap{
  width:100%;
  max-width:var(--wrap-max, var(--w-app));
  margin:0;                                                          /* LEFT-anchored to the gutter */
  padding:clamp(24px,3.5vw,48px) clamp(20px,4vw,48px) 96px;
}
.wrap.app  { --wrap-max:var(--w-app); }
.wrap.feed { --wrap-max:var(--w-feed); }
.wrap.read { --wrap-max:var(--w-read); }
.wrap.home { --wrap-max:var(--w-home); }

/* page h1 — one display size on every page (hero on home is the only exception) */
.main h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.wrap.home h1{font-size:36px;line-height:1.08;letter-spacing:-.025em}

/* ── sidebar ── */
.side{width:var(--side-w);flex:none;position:sticky;top:0;height:100vh;
  padding:22px 14px;border-right:1px solid var(--line-strong);overflow-y:auto;
  display:flex;flex-direction:column;background:var(--bg)}
.side .brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  padding:0 8px;display:block;color:var(--ink)}
.side .brand b{color:var(--acc-ink)}
.side .brand small{display:block;color:var(--mut);font-size:11.5px;font-weight:500;margin-top:4px}

.side nav{margin-top:18px;display:flex;flex-direction:column;gap:2px;flex:1}
.side .grp{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--label);padding:14px 10px 5px}
.side .grp:first-child{padding-top:2px}
.side nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;font-weight:500;cursor:pointer;position:relative;
  transition:background .14s,color .14s}
.side nav a:hover{background:var(--surface-hover)}
.side nav a.active{background:var(--acc-soft);color:var(--ink)}
.side nav a.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)}
.side nav a .ico{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--mut)}
.side nav a .ico svg{width:17px;height:17px;display:block}
.side nav a:hover .ico,.side nav a.active .ico{color:var(--acc-ink)}
.side nav a .badge{margin-left:auto;color:var(--mut);font-size:11px;font-weight:600}

/* admin (Publish) items — hidden until unlocked */
.side .adminitem{display:none}
body.unlocked .side .adminitem{display:flex}
body.unlocked .side .grp.adminitem{display:block}

/* ── WORKSPACE footer (state, not nav) — pinned to the sidebar floor ── */
.side .footer{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.side .fzone{padding:var(--s3);border-radius:var(--r-md);background:color-mix(in srgb, var(--ink) 3%, var(--bg));border:1px solid var(--line)}
.side .zt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--label);padding:0 2px 8px}
.brandrow{display:flex;gap:6px}
.brandrow .b{flex:1;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:7px 4px;font:600 12px 'Inter',sans-serif;color:var(--ink-2);cursor:pointer;
  background:transparent;transition:border-color .15s,background-color .15s}
.brandrow .b:hover{border-color:#3a3a44}
.brandrow .b.on{border-color:var(--acc-line);color:var(--acc-ink);background:var(--acc-soft)}
.side .lock .st{font-size:12px;color:var(--mut);margin-bottom:8px;line-height:1.4}
.side .lock .st b{color:var(--acc-ink)}
.side .lock button{width:100%;background:var(--surface-2);border:1px solid var(--line-strong);
  color:var(--ink);border-radius:var(--r-sm);padding:9px;font:600 13px 'Inter',sans-serif;cursor:pointer}
.side .lock button:hover{border-color:var(--acc-line);color:var(--acc-ink)}
.side .unlockform{display:flex;flex-direction:column;gap:6px}
.side .unlockform input{width:100%;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink);font:inherit;font-size:13px;padding:9px 11px}
.side .unlockform button{width:100%;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc-ink);border-radius:var(--r-sm);padding:9px;font:600 13px 'Inter',sans-serif;cursor:pointer}
.side .lockmsg{color:var(--danger);font-size:11.5px;margin-top:6px;min-height:14px}

/* ── private-page lock screen (visitor keeps the sidebar) ── */
body.gate-pending .main > .wrap{visibility:hidden}
.lockscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:62vh;padding:var(--s7) var(--s4)}
.lockscreen .ic{font-size:34px;margin-bottom:var(--s3);opacity:.75}
.lockscreen h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;margin:0 0 6px}
.lockscreen p{color:var(--mut);font-size:14px;max-width:44ch;line-height:1.55;margin:0 0 var(--s5)}
.lockform{display:flex;gap:8px}
.lockform input{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink);font:inherit;font-size:14px;padding:10px 13px;width:230px}
.lockform button{background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc-ink);border-radius:var(--r-sm);padding:10px 18px;font:600 14px 'Inter',sans-serif;cursor:pointer}
.lockform button:hover{filter:brightness(1.08)}
.lockmsg{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px}

/* ── public = view-only: admin/edit controls are shown but DISABLED until unlocked ── */
body:not(.unlocked) .toq,
body:not(.unlocked) .ebtn,
body:not(.unlocked) .fb-e,
body:not(.unlocked) .pcf .sv,
body:not(.unlocked) .addbar,
body:not(.unlocked) .note,
body:not(.unlocked) .tab[data-tab="saved"],
body:not(.unlocked) .tab[data-tab="removed"],
body:not(.unlocked) .qc .acts,
body:not(.unlocked) .qc .plats,
body:not(.unlocked) .qc .sch,
body:not(.unlocked) .qc .cap{pointer-events:none !important;opacity:.45}
body:not(.unlocked):not(.reactions-on) .fb{pointer-events:none;opacity:.45}

/* ── gallery "on this page" → sticky in-content chip-bar (the second-nav killer) ── */
.subnav{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  padding:var(--s3) 0;margin-bottom:var(--s2);position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(8px)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 13px;font:600 12.5px 'Inter',sans-serif;color:var(--ink-2);cursor:pointer;transition:.14s}
.subnav a:hover{border-color:var(--line-strong);color:var(--ink)}
.subnav a.active{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-ink)}
.subnav a .badge{color:var(--mut);font-size:11px}

/* ── designed empty state (distinct from .loading) ── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s7) var(--s4);color:var(--mut)}
.empty .ico{font-size:26px;opacity:.5;margin-bottom:var(--s3)}
.empty h3{font:600 15px 'Space Grotesk',sans-serif;color:var(--ink);margin:0 0 4px}
.empty p{font-size:13px;color:var(--mut);max-width:34ch;line-height:1.5;margin:0}

/* ── mobile: drawer + topbar (injected by nav.js) ── */
.topbar{display:none}
.scrim{display:none}
@media (max-width:1100px){ :root{ --side-w:212px } }
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;height:100%;width:280px;
    transform:translateX(-100%);transition:transform .25s ease;z-index:50;background:#0b0b0e}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;border:0}
  .topbar{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:12px;
    padding:11px 14px;background:rgba(6,6,8,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  .burger{width:38px;height:38px;flex:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);
    background:var(--surface-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .burger i,.burger i::before,.burger i::after{content:'';display:block;width:16px;height:2px;
    background:var(--ink);position:relative}
  .burger i::before{position:absolute;top:-5px}
  .burger i::after{position:absolute;top:5px}
  .tb-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px}
  .tb-title b{color:var(--acc-ink)}
  .main>.wrap{padding:16px clamp(16px,5vw,24px) 80px}
  .subnav{top:60px}            /* clear the injected mobile topbar (no double-sticky overlap) */
}
