/* The gated chassis: gate, the club shell (sidebar + topbar), deck slides, rail,
   notes pane, member nav. Shared by members.html, chat.html and every deck/ page.
   Tokens, fonts and the shared components come from site.css (imported below);
   page-specific overrides live in each page's own <style> block after this file. */
@import url(site.css?v=3);

:root{ --panew:320px; }

html.deck-page{scroll-snap-type:y mandatory}
@media (prefers-reduced-motion: no-preference){ html.deck-page{scroll-behavior:smooth} }
body{font-size:15.5px}
.display{font-family:var(--font-display); line-height:1.04; margin:0; text-wrap:balance}
body.locked{overflow:hidden}
body.locked .deck,body.locked .shell{visibility:hidden}

/* ===================== the club shell ===================== */
.shell{display:grid; grid-template-columns:248px 1fr; min-height:100svh}
.sidebar{background:var(--paper-2); border-right:1px solid var(--rule); display:flex; flex-direction:column; padding:16px 12px 14px; gap:14px; position:sticky; top:0; height:100svh; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin}
.sidebar .brand{display:flex; align-items:center; gap:9px; padding:0 6px; font-family:var(--font-display); font-weight:800; font-size:13.5px; color:var(--ink); white-space:nowrap; text-decoration:none; min-width:0}
.sidebar .brand span:last-child{overflow:hidden; text-overflow:ellipsis}
.sidebar .brand .logo{flex:none}
.sidebar .grp{display:flex; flex-direction:column; gap:1px}
.sidebar .grp .h{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:0 10px; margin-bottom:5px}
.navi{display:flex; align-items:center; gap:10px; min-height:32px; padding:0 10px; border-radius:var(--r-1); font-size:13.5px; font-weight:500; color:var(--ink-2); cursor:pointer; text-decoration:none; border:1px solid transparent}
.navi:hover{background:rgba(43,36,25,.05); color:var(--ink)}
.navi.here{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow-1); border-color:var(--rule)}
.navi .k{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-3)}
.navi .unread{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--tangerine)}
.navi .status{margin-left:auto}
.sidebar .me{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 10px 0; border-top:1px solid var(--rule)}
.sidebar .me .who{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.sidebar .me .who b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar .me .who span{font-size:11.5px; color:var(--ink-3)}
.sidebar .me .who button{border:none; background:none; color:var(--teal-deep); font-weight:600; cursor:pointer; font-size:11.5px; padding:0}
.main{display:flex; flex-direction:column; min-width:0}
.topbar{height:56px; display:flex; align-items:center; gap:14px; padding:0 28px; border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:5}
.topbar h1{font-size:18px; font-weight:700; letter-spacing:-.01em}
.crumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3)}
.crumb b{color:var(--ink); font-weight:600}
.status{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.shellbtn{display:none}
.rowlist{display:flex; flex-direction:column}
.rowlist > .r{display:grid; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--rule)}
.rowlist > .r:last-child{border-bottom:0}
.rowlist > .r:hover{background:rgba(43,36,25,.025)}
.acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule)}
.tab{height:38px; display:inline-flex; align-items:center; padding:0 14px; font-size:13.5px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; background:none; border-top:0; border-left:0; border-right:0}
.tab.on{color:var(--ink); border-bottom-color:var(--tangerine)}
.tab .n{margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3)}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; bottom:0; z-index:65; width:min(300px,88vw); height:auto; transform:translateX(-105%); box-shadow:8px 0 30px rgba(0,0,0,.14)}
  @media (prefers-reduced-motion: no-preference){ .sidebar{transition:transform .22s} }
  body.deck-open .sidebar{transform:none}
  .topbar{padding:0 16px}
  .shellbtn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--rule-2); border-radius:var(--r-1); background:none; cursor:pointer; color:var(--ink); font-size:16px; flex:none}
}

/* ===================== the gate ===================== */
.gate{position:fixed; inset:0; z-index:100; background:var(--paper); display:grid; grid-template-columns:1fr 1fr; overflow:auto}
.gate .gate-lft{padding:clamp(28px,5vw,56px) clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:space-between; gap:32px; border-right:1px solid var(--rule); background:var(--paper-2)}
.gate .gate-lft .brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; font-size:17px}
.gate .gate-lft .big{font-family:var(--font-display); font-size:clamp(2rem,4vw,3.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.02; max-width:12ch}
.gate .keys{display:flex; flex-direction:column; gap:10px}
.gate .keys .k{display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:14px; color:var(--ink-2); line-height:1.5}
.gate .keys .k b{color:var(--ink)}
.gate .keys .k .i{width:20px; height:20px; border-radius:50%; background:var(--card); border:1px solid var(--rule-2); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10.5px; color:var(--tangerine); margin-top:1px}
.gate .gate-rgt{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.gate-card{width:min(440px,100%); background:var(--card); border:1px solid var(--rule); border-radius:var(--r-3); box-shadow:var(--shadow-2); padding:34px 36px 30px; display:flex; flex-direction:column; gap:14px; text-align:left; position:relative; z-index:1}
.gate-card .logo{display:none}
.gate h2{font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.gate p{color:var(--ink-2); font-size:14px}
.gate .gate-card p.lead{color:var(--ink-2)}
.gate input{width:100%; text-align:left}
.gate input.mono{font-family:var(--font-mono)}
.gate button{width:100%; height:48px; border:none; border-radius:var(--r-1); cursor:pointer; background:var(--tangerine); color:var(--on-tangerine); font-family:var(--font-body); font-weight:600; font-size:15px; box-shadow:0 1px 0 rgba(0,0,0,.08), 0 8px 18px -10px rgba(193,85,47,.7)}
.gate button:hover{background:var(--tangerine-deep)}
.gate button.plain{background:none; box-shadow:none; color:var(--teal-deep); height:auto; font-size:13px; text-decoration:underline; text-underline-offset:3px; width:auto; align-self:center; padding:0}
.gate .err{color:var(--tangerine); font-weight:600; font-size:13px; min-height:1.4em; margin:0; display:block}
.gate .split{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.gate .split::before,.gate .split::after{content:""; flex:1; height:1px; background:var(--rule)}
.gate .fine{font-size:12.5px; color:var(--ink-3); text-align:center}
@media (prefers-reduced-motion: no-preference){
  .gate-card.shake{animation:shake .4s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
}
@media (max-width:900px){
  .gate{grid-template-columns:1fr}
  .gate .gate-lft{display:none}
  .gate .gate-rgt{padding:24px 16px; align-items:flex-start}
  .gate-card{padding:26px 22px}
}

/* ===================== deck slides ===================== */
.deck{transition:margin-right .25s}
body.pane-open .deck{margin-right:var(--panew)}
body.pane-open .rail{right:calc(14px + var(--panew))}
body.pane-open .hint{display:none}
.slide{min-height:100svh; scroll-snap-align:start; position:relative; display:grid; place-items:center; padding:clamp(20px,4vw,56px); background:var(--paper)}
.slide.w-peach{background:var(--tangerine-wash)} .slide.w-mint{background:var(--teal-wash)} .slide.w-lemon{background:var(--lemon-wash)} .slide.w-sky{background:var(--sky-wash)} .slide.w-berry{background:var(--berry-wash)}
.slide::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:0; pointer-events:none;
  background-color:var(--card);
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--tangerine) 55%, transparent) 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--tangerine) 25%, transparent) 0 3px, transparent 3px 6px)}
.sheet{width:min(1060px,100%); display:flex; flex-direction:column; gap:clamp(18px,3vh,32px); position:relative; z-index:1}
.slide h1{font-size:clamp(2.6rem,7vw,5rem); font-weight:800; letter-spacing:-.025em; line-height:1.02}
.slide h2{font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; letter-spacing:-.02em; line-height:1.06}
.slide .chip{align-self:flex-start; height:auto; border-radius:4px; border:1px solid var(--rule-2); background:transparent; padding:4px 10px; font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); box-shadow:none}
.slide .chip .dot{width:8px; height:8px; border-radius:50%; background:var(--tangerine)}
.slide .lede{font-size:clamp(1.05rem,1.7vw,1.3rem); max-width:62ch}
.slide .kicker{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.2rem,2.2vw,1.6rem); max-width:56ch; line-height:1.25}
.slide .kicker .hl{color:var(--tangerine)}
.cards{display:grid; gap:clamp(14px,2vw,22px)}
.cards.c2{grid-template-columns:1fr 1fr}
.cards.c3{grid-template-columns:1fr 1fr 1fr}
.slide .card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-2); padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px}
.slide .card h3{font-family:var(--font-body); font-size:clamp(1.05rem,1.4vw,1.2rem); font-weight:700; letter-spacing:0; line-height:1.3}
.slide .card.a-teal h3{color:var(--teal-deep)} .slide .card.a-sky h3{color:var(--sky-deep)} .slide .card.a-berry h3{color:var(--berry-deep)} .slide .card.a-tangerine h3{color:var(--tangerine-deep)} .slide .card.a-lemon h3{color:var(--lemon-deep)}
.slide .card p{font-size:.95rem; color:var(--ink-2)}
.slide .steal{margin-top:auto; font-size:18px}
.sixgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,20px)}
.sixgrid .card{gap:8px}
.bignum{font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1}
.a-teal .bignum{color:var(--teal)} .a-sky .bignum{color:var(--sky)} .a-berry .bignum{color:var(--berry)} .a-tangerine .bignum{color:var(--tangerine)} .a-lemon .bignum{color:var(--lemon-deep)}
.level{align-items:center; text-align:center}
.level h3{font-size:clamp(1.2rem,2vw,1.5rem)}
.level .tag{font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); background:none; height:auto; padding:0}
.agenda{display:flex; flex-direction:column; max-width:720px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-2); box-shadow:var(--shadow-1); overflow:hidden}
.agenda > div{display:flex; gap:18px; padding:14px 22px; border-bottom:1px dashed var(--rule-2); align-items:baseline}
.agenda > div:last-child{border-bottom:none}
.agenda .t{font-family:var(--font-mono); font-weight:600; color:var(--tangerine); flex:none; width:56px; font-size:.9rem}
.agenda b{font-weight:700}
.agenda .d{color:var(--ink-2)}
.rules{list-style:none; margin:0; padding:0; max-width:680px; display:flex; flex-direction:column; counter-reset:rule}
.rules li{padding:12px 0 12px 40px; position:relative; font-size:1.02rem; border-bottom:1px solid var(--rule); counter-increment:rule}
.rules li::before{content:counter(rule, lower-roman) "."; position:absolute; left:0; top:13px; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--tangerine)}
.rules em{font-family:var(--font-display); font-style:italic; font-weight:500}
.statrow{display:flex; gap:clamp(14px,2vw,22px); flex-wrap:wrap}
.stat{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-2); padding:18px 24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:4px; min-width:180px}
.stat .n{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-.03em}
.stat .l{color:var(--ink-2); font-size:.9rem; max-width:22ch}
.stat.a-tangerine .n{color:var(--tangerine)} .stat.a-teal .n{color:var(--teal)} .stat.a-berry .n{color:var(--berry)}
.statsrc{font-size:.78rem; color:var(--ink-3)}
.cover{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,4vw,64px); align-items:center}
.cover .fig{text-align:center}
.motto{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--tangerine)}
.sprinkles{display:none}
.rail{position:fixed; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:40; transition:right .25s}
.rail button{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-3); background:transparent; padding:0; cursor:pointer; transition:background .2s, transform .2s}
.rail button.on{background:var(--tangerine); border-color:var(--tangerine); transform:scale(1.3)}
.rail button:focus-visible{outline:2px solid var(--tangerine); outline-offset:3px}
.hint{position:fixed; left:50%; bottom:10px; transform:translateX(-50%); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; z-index:40; opacity:.8}

/* ===================== notes ===================== */
.pin{position:absolute; z-index:30; width:28px; height:28px; border-radius:50% 50% 50% 4px; background:var(--tangerine); color:#fff; border:2px solid var(--card);
  font-family:var(--font-mono); font-weight:600; font-size:.78rem; display:grid; place-items:center; cursor:pointer; transform:translate(-50%,-100%) rotate(-8deg); box-shadow:var(--shadow-2); padding:0}
.pin:hover{transform:translate(-50%,-100%) rotate(0deg) scale(1.1)}
.pin:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
@media (prefers-reduced-motion: no-preference){
  .pin.pulse{animation:pulse 1s ease 2}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(193,85,47,.75)}70%{box-shadow:0 0 0 20px rgba(193,85,47,0)}100%{box-shadow:0 0 0 0 rgba(193,85,47,0)}}
}
.pin.pulse{background:var(--berry)}
.pin.bounce{z-index:35; background:var(--berry); box-shadow:0 0 0 6px color-mix(in srgb, var(--tangerine) 40%, transparent), var(--shadow-2)}
@media (prefers-reduced-motion: no-preference){
  .pin.bounce{animation:pinbounce .8s ease-in-out infinite}
  @keyframes pinbounce{0%,100%{transform:translate(-50%,-100%) rotate(-8deg)}30%{transform:translate(-50%,-165%) rotate(4deg) scale(1.3)}55%{transform:translate(-50%,-95%) rotate(-10deg)}75%{transform:translate(-50%,-135%) rotate(0deg) scale(1.15)}}
}
@media (prefers-reduced-motion: reduce){ .pin.bounce{transform:translate(-50%,-100%) rotate(0deg) scale(1.4)} }
.popover{position:fixed; z-index:110; width:min(320px,calc(100vw - 24px)); background:var(--card); border:1px solid var(--rule); border-radius:var(--r-2); box-shadow:var(--shadow-2); padding:14px; display:flex; flex-direction:column; gap:10px}
.popover .who{font-weight:700; font-size:.95rem}
.popover .when{color:var(--ink-3); font-family:var(--font-mono); font-size:11px; font-weight:400}
.popover textarea{min-height:84px}
.popover .row{display:flex; gap:8px; justify-content:flex-end}
.popover .body{font-size:.95rem; white-space:pre-wrap}
.btn.warn{background:var(--tangerine); color:var(--on-tangerine)}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--rule-2)}
.popover .btn,.sidepane .btn{background:var(--teal); color:#FFFDF7; height:32px; padding:0 14px; font-size:13px}
.popover .btn.ghost,.sidepane .btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--rule-2)}
.popover .btn.warn{background:var(--tangerine); color:var(--on-tangerine)}
.notesbtn{position:fixed; right:16px; bottom:16px; z-index:50; border:1px solid var(--rule-2); border-radius:var(--r-1); height:36px; padding:0 14px; cursor:pointer; background:var(--card); color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:13px; box-shadow:var(--shadow-2); transition:right .25s}
body.pane-open .notesbtn{right:calc(16px + var(--panew))}
.notesbtn:hover{border-color:var(--ink)}
.notesbtn:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.deck-page .deckbtn{right:auto; left:16px; top:16px; bottom:auto}
.clickhint{position:fixed; left:50%; bottom:40px; transform:translateX(-50%); z-index:50; background:var(--card); color:var(--ink-3); border:1px solid var(--rule); border-radius:var(--r-1); padding:6px 12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.sidepane{position:fixed; top:0; right:0; bottom:0; width:var(--panew); z-index:60; background:var(--card); border-left:1px solid var(--rule); box-shadow:-8px 0 30px rgba(0,0,0,.08); display:none; flex-direction:column}
body.pane-open .sidepane{display:flex}
.sidepane > header{padding:16px 16px 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; border-bottom:1px solid var(--rule)}
.sidepane > header h3{font-size:16px; font-family:var(--font-body); font-weight:700}
.sync{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--paper-2); color:var(--ink-3)}
.sync.on{background:var(--teal-wash); color:var(--teal-deep)}
.sidepane .who{width:100%; font-size:12.5px; color:var(--ink-3)}
.sidepane .who button{border:none; background:none; color:var(--teal-deep); font-weight:600; cursor:pointer; font-size:12.5px; padding:0}
.sidepane .list{overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:14px; flex:1}
.group{display:flex; flex-direction:column; gap:6px}
.group .ghead{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); position:sticky; top:0; background:var(--card); padding:4px 2px}
.group.current .ghead{color:var(--tangerine)}
.note{background:var(--paper); border-radius:var(--r-1); padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border:1px solid var(--rule); opacity:.75}
.group.current .note{opacity:1}
.note:hover{border-color:var(--teal); opacity:1}
.note .meta{display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--ink-3)}
.note .meta .n{color:var(--tangerine); font-family:var(--font-mono); font-weight:600}
.note .txt{font-size:.92rem}
.note .del{align-self:flex-end; border:none; background:none; color:var(--ink-3); cursor:pointer; font-size:.75rem; font-weight:600; padding:0}
.note .del:hover{color:var(--tangerine)}
.sidepane footer{padding:10px 12px; display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--rule)}
.empty{color:var(--ink-3); text-align:center; padding:24px 12px; font-size:.92rem}
textarea.importbox{width:100%; min-height:70px; font-size:.8rem}
@media (max-width:1100px){
  body.pane-open .deck{margin-right:0}
  body.pane-open .rail{display:none}
  .sidepane{width:min(360px,100vw)}
  body.pane-open .notesbtn{right:16px; z-index:70}
}
@media (max-width:860px){
  .sixgrid{grid-template-columns:1fr 1fr}
  .cards.c3{grid-template-columns:1fr}
  .cover{grid-template-columns:1fr}
  .cover .fig{order:-1}
  .cover .fig svg{width:120px; height:120px}
  .rail,.hint,.clickhint{display:none}
}
@media (max-width:560px){
  .sixgrid{grid-template-columns:1fr}
  .cards.c2{grid-template-columns:1fr}
}
@media print{
  .slide{min-height:auto; break-after:page}
  .rail,.hint,.notesbtn,.clickhint,.gate,.sidepane,.deckbtn,.deckpane,.sidebar,.topbar{display:none}
  body.pane-open .deck{margin-right:0}
}