/* ATTEST mockups — shared stylesheet.
   Design source of truth: docs/attest-mockups.html (tokens + patterns lifted verbatim).
   Desktop: phone chassis on the felt backdrop. Real phone: screen goes full-bleed. */

:root {
  --pine:#12291C; --pine-deep:#0B1A12; --pine-slat:#183625;
  --ivory:#F3EEDF; --ivory-dim:#CFC9B4;
  --brass:#A98C4B; --brass-bright:#C9A85C;
  --score-red:#D0442F; --graphite:#33332F; --amber:#D99A2B;
  --hairline:rgba(243,238,223,.14);
  --paper:#F3EEDF; --paper-card:#FBF8EE; --paper-rule:#DDD5BE;
  --paper-head:#F4EFDF; --paper-mut:#8A8371; --paper-tab:#EAE4D0;
  /* Bottom-nav icon shapes (single-color SVG, tinted via mask + currentColor) */
  --ic-board: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21 L6 3'/><path d='M6 3 L18 6.4 L6 10 Z'/></svg>");
  --ic-scan: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l1.6-2.6a1 1 0 0 1 .86-.5h7.06a1 1 0 0 1 .86.5L18 6h3a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='3.6'/></svg>");
  --ic-enter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
  --ic-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'><path d='M4 7h16'/><path d='M4 12h16'/><path d='M4 17h16'/></svg>");
  --ic-back: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>");
  --ic-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--pine-deep);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--ivory);
  min-height: 100dvh;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(243,238,223,.025) 1px, transparent 1px);
  background-size: 5px 5px;
}
.stage { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; gap:14px; position:relative; z-index:1; }

/* Phone chassis */
.phone {
  width:376px; background:#060D09; border-radius:44px; padding:12px; position:relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(243,238,223,.08);
}
.notch { position:absolute; top:22px; left:50%; transform:translateX(-50%); width:104px; height:26px; background:#060D09; border-radius:14px; z-index:5; }
.screen { border-radius:34px; height:772px; overflow:hidden; display:flex; flex-direction:column; background:var(--pine); color:var(--ivory); }

/* Under-phone caption + prev/next */
.pagenav { width:376px; max-width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12.5px; color:var(--ivory-dim); }
.pagenav .cap { flex:1; line-height:1.45; }
.pagenav a { color:var(--brass-bright); text-decoration:none; font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }

/* Chrome */
.statusbar { display:flex; justify-content:space-between; padding:16px 26px 6px; font-family:'Oswald',sans-serif; font-size:12px; color:var(--ivory-dim); flex-shrink:0; }
.appbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px 0; flex-shrink:0; }
.appbar .brand { margin-right:auto; }
.brand { font-family:'Marcellus',serif; font-size:15px; letter-spacing:.3em; color:var(--brass-bright); }
/* Seal-coin lockup in the emulated appbar (docs/brand.html §2) — scoped so page navs/footers aren't hit */
.appbar .brand::before {
  content:''; display:inline-block; width:22px; height:22px;
  margin-right:10px; vertical-align:-5px;
  background:url('assets/logo-seal-coin.png') center/contain no-repeat;
}
/* App-bar icon buttons (hamburger / back) — tinted by currentColor, theme-aware */
.iconbtn { display:inline-block; width:23px; height:23px; flex-shrink:0; background:currentColor; text-decoration:none;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; color:var(--ivory-dim); }
.iconbtn:hover { color:var(--brass-bright); }
.iconbtn.menu { -webkit-mask-image:var(--ic-menu); mask-image:var(--ic-menu); }
.iconbtn.back { -webkit-mask-image:var(--ic-back); mask-image:var(--ic-back); }
.screen.paper .appbar .iconbtn { color:var(--paper-mut); }
.screen.paper .appbar .iconbtn:hover { color:var(--pine); }
.live { display:flex; align-items:center; gap:7px; font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--score-red); }
.live .dot { width:6px; height:6px; border-radius:50%; background:var(--score-red); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce){
  .live .dot, .pulse, .slat.fresh { animation:none !important; }
  .sc td.rd.ink, .sumline .done { animation:none !important; opacity:1; }
  .sumline .working { animation:none !important; opacity:0; }
  /* Motion engine off — reveal everything immediately */
  .screen > *, .board .slat, .drawer .drow { animation:none !important; opacity:1 !important; transform:none !important; }
  .drawer .panel, .drawer .scrim { transition:none !important; }
  * { transition-duration:.001s !important; }
}

.tabnav { margin-top:auto; display:flex; border-top:1px solid var(--hairline); background:rgba(6,13,9,.35); flex-shrink:0; }
.tabnav a { flex:1; text-align:center; padding:14px 0 22px; text-decoration:none; color:var(--ivory-dim); font-family:'Oswald',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.2em; }
/* Bottom-nav icons: single-color SVG masks tinted by currentColor (theme-aware) */
.tabnav .glyph { display:block; width:21px; height:21px; margin:0 auto 5px; background:currentColor;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.tabnav .glyph.board { -webkit-mask-image:var(--ic-board); mask-image:var(--ic-board); }
.tabnav .glyph.scan  { -webkit-mask-image:var(--ic-scan);  mask-image:var(--ic-scan); }
.tabnav .glyph.enter { -webkit-mask-image:var(--ic-enter); mask-image:var(--ic-enter); }
.tabnav a.on { color:var(--brass-bright); }
.screen.paper .tabnav { background:var(--paper-tab); border-top:1px solid var(--paper-rule); }
.screen.paper .tabnav a { color:var(--paper-mut); }
.screen.paper .tabnav a.on { color:var(--pine); }

/* Board */
.outing { padding:14px 24px 0; }
.outing h1 { font-family:'Marcellus',serif; font-size:26px; font-weight:400; color:var(--ivory); }
.outing .sub { font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ivory-dim); margin-top:5px; }
.outing .sub b { color:var(--brass-bright); font-weight:500; }
.board { margin:16px 18px 0; flex:1; overflow:hidden; }
.bhead { display:grid; grid-template-columns:34px 1fr 52px 62px; padding:0 14px 9px; border-bottom:1px solid var(--brass); font-family:'Oswald',sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--brass-bright); }
.bhead span:nth-child(3), .bhead span:nth-child(4) { text-align:right; }
.slat { display:grid; grid-template-columns:34px 1fr 52px 62px; align-items:center; padding:10px 14px; margin-top:7px; background:var(--pine-slat); border:1px solid rgba(243,238,223,.06); }
.slat .pos { font-family:'Marcellus',serif; font-size:16px; color:var(--ivory-dim); }
.slat .name { font-family:'Oswald',sans-serif; font-weight:500; font-size:15.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); }
.slat .name small { display:block; font-family:'Source Sans 3',sans-serif; font-weight:400; font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--ivory-dim); margin-top:2px; }
.slat .thru { font-family:'Oswald',sans-serif; font-size:13px; text-align:right; color:var(--ivory-dim); }
.slat .tot { font-family:'Oswald',sans-serif; font-weight:600; font-size:22px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ivory); }
.slat .tot.red { color:var(--score-red); }
.slat.lead { border-color:var(--brass); background:linear-gradient(180deg,#1B402C 0%,var(--pine-slat) 100%); }
.slat.lead .pos { color:var(--brass-bright); }
.slat.fresh { animation:settle 2.4s ease-out; }
@keyframes settle { 0%{background:#2A5238; border-color:var(--brass-bright);} 100%{background:var(--pine-slat); border-color:rgba(243,238,223,.06);} }
.boardfoot { display:flex; justify-content:space-between; align-items:center; margin:12px 18px 12px; font-size:12.5px; color:var(--ivory-dim); }
.boardfoot b { color:var(--brass-bright); font-weight:600; }
.chip { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-bright); border:1px solid var(--brass); border-radius:2px; padding:7px 13px; text-decoration:none; }

/* Segmented toggle (gross/net) */
.seg { display:inline-flex; align-self:flex-start; border:1px solid var(--brass); border-radius:2px; overflow:hidden; margin:16px 24px 0; }
.seg a { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:8px 18px; color:var(--ivory-dim); text-decoration:none; }
.seg a.on { background:var(--brass); color:var(--pine-deep); }

/* Dark forms (create / join / courses / settings) */
.formwrap { padding:0 24px; overflow:hidden; }
.flabel { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-bright); margin:20px 0 8px; }
.finput { background:var(--pine-slat); border:1px solid var(--hairline); border-radius:2px; padding:13px 14px; font-size:15px; color:var(--ivory); }
.finput .ph { color:var(--ivory-dim); opacity:.7; }
.frow { display:flex; align-items:center; justify-content:space-between; background:var(--pine-slat); border:1px solid rgba(243,238,223,.06); border-radius:2px; padding:12px 14px; margin-top:8px; text-decoration:none; color:var(--ivory); }
.frow.sel { border-color:var(--brass); }
.frow .fname { font-size:14.5px; color:var(--ivory); }
.frow .fname small { display:block; font-size:11.5px; color:var(--ivory-dim); margin-top:1px; }
.frow .fmark { font-family:'Marcellus',serif; font-size:14px; color:var(--brass-bright); }
.frow .gchip { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); border:1px solid var(--hairline); border-radius:2px; padding:4px 8px; }
.fadd { display:flex; align-items:center; justify-content:center; gap:8px; border:1px dashed rgba(243,238,223,.25); border-radius:2px; padding:12px 14px; margin-top:8px; font-size:13px; color:var(--ivory-dim); }
.cta { display:block; text-align:center; margin:24px 24px 0; padding:16px 0; background:var(--brass); color:var(--pine-deep); font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; border-radius:3px; text-decoration:none; }
.ftnote { text-align:center; font-size:12px; color:var(--ivory-dim); margin:14px 24px 0; }
.tgl { width:40px; height:22px; border-radius:3px; border:1px solid var(--brass); position:relative; flex-shrink:0; }
.tgl::after { content:''; position:absolute; top:2px; right:2px; width:16px; height:16px; background:var(--brass-bright); border-radius:2px; }
.tgl.off { border-color:var(--hairline); } .tgl.off::after { right:auto; left:2px; background:var(--ivory-dim); }

/* Paper screens */
.screen.paper { background:var(--paper); color:var(--graphite); }
.screen.paper .statusbar { color:var(--paper-mut); }
.screen.paper .brand { color:var(--pine); }
.steplabel { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mut); padding:18px 24px 0; }
.paperh1 { font-family:'Marcellus',serif; font-size:24px; font-weight:400; color:var(--graphite); padding:4px 24px 0; }
.cardphoto { margin:18px 20px 0; background:var(--paper-card); border:1px solid var(--paper-rule); box-shadow:0 6px 18px rgba(51,51,47,.12); padding:14px 14px 12px; transform:rotate(-.6deg); }
.cardphoto.flat { transform:none; }
.cname { font-family:'Marcellus',serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pine); text-align:center; padding-bottom:9px; border-bottom:1px solid var(--paper-rule); }
table.sc { border-collapse:collapse; width:100%; }
.sc th { width:11.1%; font-family:'Oswald',sans-serif; font-size:9px; font-weight:500; color:var(--paper-mut); background:var(--paper-head); border:1px solid var(--paper-rule); padding:5px 0; text-align:center; }
.sc td { width:11.1%; font-family:'Caveat',cursive; font-weight:600; font-size:21px; color:var(--graphite); border:1px solid var(--paper-rule); padding:6px 0; text-align:center; }
.sc td.flag { background:rgba(217,154,43,.16); outline:2px solid var(--amber); outline-offset:-2px; }
.sc td.empty { color:transparent; }

/* Machine-read row — photo above (Caveat, immutable), what ATTEST reads below (Oswald) */
.sc tr.rl td { font-family:'Oswald',sans-serif; font-size:8px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-mut); background:var(--paper-head); border:1px solid var(--paper-rule); padding:3px 0 2px; text-align:center; }
.sc td.rd { font-family:'Oswald',sans-serif; font-weight:500; font-size:15px; color:var(--pine); background:#FDFBF2; padding:5px 0; }
.sc td.rd.ink { opacity:0; animation:inkin .35s ease-out forwards; animation-delay:calc(.4s + var(--i)*.16s); }
@keyframes inkin { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.sumline { display:grid; margin-top:14px; padding:0 24px; text-align:center; font-size:13px; color:var(--paper-mut); line-height:1.5; }
.sumline span { grid-area:1/1; }
.sumline b { color:var(--pine); }
.sumline .done { opacity:0; animation:inkin .4s ease-out forwards; animation-delay:2.2s; }
.sumline .working { animation:fadeaway .3s ease-out forwards; animation-delay:2.2s; }
@keyframes fadeaway { to { opacity:0; } }

/* Review */
.readout { display:flex; gap:13px; padding:0 24px; margin-top:20px; }
.qmark { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--amber); color:#fff; font-family:'Marcellus',serif; font-size:19px; display:grid; place-items:center; }
.readout h4 { font-size:15.5px; font-weight:600; color:var(--graphite); }
.readout p { font-size:13px; color:var(--paper-mut); margin-top:3px; line-height:1.5; }
.evidence { margin:14px 24px 0; display:flex; align-items:center; gap:12px; background:var(--paper-card); border:1px solid var(--paper-rule); border-radius:3px; padding:9px 12px; }
.evidence .crop { width:52px; height:44px; flex-shrink:0; background:#EFE9D6; border:1px solid var(--paper-rule); display:grid; place-items:center; font-family:'Caveat',cursive; font-weight:600; font-size:26px; color:#4A4840; transform:rotate(1.2deg); filter:blur(.3px); }
.evidence p { font-size:12px; color:var(--paper-mut); line-height:1.45; }
.evidence b { color:var(--graphite); }
.choices { display:flex; gap:12px; padding:0 24px; margin-top:14px; }
.choice { flex:1; text-align:center; background:var(--paper-card); border:1px solid #CFC7AE; border-radius:3px; padding:13px 0 11px; cursor:pointer; }
.choice .big { font-family:'Marcellus',serif; font-size:30px; color:var(--graphite); display:block; }
.choice .why { display:block; font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mut); margin-top:5px; }
.choice.pick { background:var(--pine); border-color:var(--pine); }
.choice.pick .big { color:var(--ivory); }
.choice.pick .why { color:var(--brass-bright); }
.confirm { display:block; text-align:center; margin:20px 24px 0; padding:17px 0; background:var(--pine); color:var(--ivory); font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; border-radius:3px; text-decoration:none; }
.allgood { text-align:center; font-size:12.5px; color:var(--paper-mut); margin-top:13px; padding:0 24px; }
.allgood b { color:var(--pine); }

/* Scan / states */
.shutterbox { margin:22px 20px 0; border:1px dashed #CFC7AE; border-radius:3px; padding:44px 24px; text-align:center; display:block; text-decoration:none; }
.shutter { width:54px; height:54px; border-radius:50%; border:1.5px solid var(--brass); color:var(--brass); font-family:'Marcellus',serif; font-size:22px; display:grid; place-items:center; margin:0 auto 14px; }
.shutterbox p { font-size:14px; color:var(--graphite); }
.shutterbox small { display:block; font-size:12px; color:var(--paper-mut); margin-top:6px; }
.alt { display:block; text-align:center; margin-top:18px; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--pine); text-decoration:none; }
.centerstate { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 40px; text-align:center; }
.pulse { width:10px; height:10px; border-radius:50%; background:var(--amber); margin-bottom:18px; animation:pulse 2.2s ease-in-out infinite; }
.centerstate h3 { font-family:'Marcellus',serif; font-size:22px; font-weight:400; color:var(--graphite); }
.centerstate p { font-size:13.5px; color:var(--paper-mut); margin-top:8px; line-height:1.6; }
.checkring { width:44px; height:44px; border-radius:50%; background:var(--pine); color:var(--ivory); font-size:20px; display:grid; place-items:center; margin-bottom:18px; }

/* Manual entry */
.stepperbar { display:flex; align-items:center; justify-content:space-between; margin:18px 24px 0; background:var(--paper-card); border:1px solid var(--paper-rule); border-radius:3px; padding:12px 16px; }
.stepperbar .hlabel { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mut); }
.stepperbar .hlabel b { display:block; font-family:'Marcellus',serif; font-size:17px; letter-spacing:0; color:var(--graphite); margin-top:2px; }
.stepctl { display:flex; align-items:center; gap:16px; }
.stepbtn { width:40px; height:40px; border:1.5px solid var(--graphite); border-radius:3px; display:grid; place-items:center; font-size:20px; color:var(--graphite); }
.stepval { font-family:'Caveat',cursive; font-weight:600; font-size:34px; color:var(--graphite); min-width:30px; text-align:center; }

/* Corrections log (card viewer) */
.corr { margin:16px 24px 0; }
.corr .row { display:flex; justify-content:space-between; align-items:baseline; padding:9px 2px; border-bottom:1px solid var(--paper-rule); font-size:13px; color:var(--graphite); }
.corr .row small { color:var(--paper-mut); }
.corr .row .ok { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--pine); }
.corr .row .fix { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }

/* Share card */
.sharecard { margin:26px 32px 0; background:var(--pine); border:1px solid var(--brass); padding:28px 22px 22px; text-align:center; box-shadow:0 14px 34px rgba(0,0,0,.45); }
.sharecard .sc-brand { font-family:'Marcellus',serif; font-size:12px; letter-spacing:.34em; color:var(--brass-bright); }
.sharecard h2 { font-family:'Marcellus',serif; font-size:22px; font-weight:400; color:var(--ivory); margin-top:12px; }
.sharecard .sc-sub { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); margin-top:4px; }
.sharecard .sc-win { margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); }
.sharecard .sc-win .nm { font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); }
.sharecard .sc-win .score { font-family:'Oswald',sans-serif; font-weight:600; font-size:34px; color:var(--score-red); font-variant-numeric:tabular-nums; margin-top:2px; }
.sharecard .sc-line { font-size:12px; color:var(--ivory-dim); margin-top:12px; }

/* Final ceremony (board flips when the last card is confirmed) */
.final-flag { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-bright); border:1px solid var(--brass); border-radius:2px; padding:4px 9px; }
.champ { margin:14px 18px 0; padding:14px 16px 12px; text-align:center; background:linear-gradient(180deg,#1B402C 0%,var(--pine-slat) 100%); border:1px solid var(--brass); }
.champ .clabel { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-bright); }
.champ .cname2 { font-family:'Marcellus',serif; font-size:26px; color:var(--ivory); margin-top:4px; }
.champ .cscore { font-family:'Oswald',sans-serif; font-weight:600; font-size:30px; font-variant-numeric:tabular-nums; color:var(--score-red); }
.champ .cmeta { font-size:12px; color:var(--ivory-dim); margin-top:4px; }

/* Future-modes cards */
.modes { padding:0 20px; overflow:hidden; }
.modecard { display:block; background:var(--pine-slat); border:1px solid rgba(243,238,223,.06); padding:11px 14px; margin-top:8px; text-decoration:none; }
.modecard .mtitle { display:flex; justify-content:space-between; align-items:baseline; }
.modecard .mtitle h4 { font-family:'Marcellus',serif; font-size:16px; font-weight:400; color:var(--ivory); }
.modecard .mtag { font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-bright); border:1px solid var(--brass); border-radius:2px; padding:3px 7px; }
.modecard p { font-size:12.5px; color:var(--ivory-dim); margin-top:4px; line-height:1.45; }
.teamstrip { display:flex; margin:16px 20px 0; border:1px solid var(--brass); }
.teamstrip .side { flex:1; text-align:center; padding:10px 0; }
.teamstrip .side:first-child { background:var(--pine-slat); border-right:1px solid var(--brass); }
.teamstrip .tname { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); }
.teamstrip .tscore { font-family:'Marcellus',serif; font-size:26px; color:var(--brass-bright); margin-top:2px; }

/* Index hub */
.hub { max-width:420px; width:100%; position:relative; z-index:1; }
.hub .mast { text-align:center; padding:26px 0 10px; }
.hub .mast .brand { font-size:22px; letter-spacing:.34em; }
.hub .mast p { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); margin-top:8px; }
.hub .grp { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-bright); margin:26px 0 6px; padding-bottom:6px; border-bottom:1px solid var(--brass); }
.hub .about { margin-top:10px; background:var(--pine-slat); border:1px solid rgba(243,238,223,.06); padding:16px 18px 14px; }
.hub .about .lede { font-size:14.5px; line-height:1.6; color:var(--ivory); }
.hub .about ul { list-style:none; margin-top:10px; }
.hub .about li { font-size:13px; line-height:1.55; color:var(--ivory-dim); padding-top:7px; }
.hub .about li b { color:var(--ivory); font-weight:600; }
.hub .about .kicker { margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline); font-size:13px; line-height:1.55; color:var(--brass-bright); }
.hub a.pg { display:flex; justify-content:space-between; align-items:center; background:var(--pine-slat); border:1px solid rgba(243,238,223,.06); padding:12px 14px; margin-top:8px; text-decoration:none; color:var(--ivory); }
.hub a.pg small { display:block; font-size:11.5px; color:var(--ivory-dim); margin-top:1px; }
.hub a.pg .no { font-family:'Marcellus',serif; color:var(--ivory-dim); margin-right:12px; }
.hub a.pg .go { font-family:'Marcellus',serif; color:var(--brass-bright); }
.hub .foot { text-align:center; font-size:12px; color:var(--ivory-dim); margin:30px 0 10px; }

/* ============================================================
   MOTION ENGINE — premium, restrained. Easings are shared so
   every surface moves with the same hand. Guarded by the
   prefers-reduced-motion block above.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);      /* settle — decelerate hard */
  --ease-io:cubic-bezier(.65,0,.35,1);       /* symmetric ease-in-out    */
}

/* Chromeless scroll — no visible scrollbars anywhere */
html, body, .menu-list, .formwrap, .board, .modes, .drawer-body, .screen{
  scrollbar-width:none; -ms-overflow-style:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .menu-list::-webkit-scrollbar,
.formwrap::-webkit-scrollbar, .board::-webkit-scrollbar, .modes::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar, .screen::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Anchor for the in-screen drawer overlay */
.screen{ position:relative; }

/* --- Screen entrance: content rises and settles on every load --- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.screen > *{ animation:riseIn .52s var(--ease-out) both; }
.screen > .statusbar{ animation:none; }         /* status bar is fixed chrome */
.screen > .drawer{ animation:none; }            /* drawer runs its own timing  */
.screen > *:nth-child(2){ animation-delay:.03s; }
.screen > *:nth-child(3){ animation-delay:.08s; }
.screen > *:nth-child(4){ animation-delay:.13s; }
.screen > *:nth-child(5){ animation-delay:.18s; }
.screen > *:nth-child(6){ animation-delay:.23s; }
.screen > *:nth-child(7){ animation-delay:.28s; }
.screen > *:nth-child(8){ animation-delay:.33s; }

/* --- Board rows deal in one at a time, like cards on felt --- */
.board .slat{ animation:riseIn .5s var(--ease-out) both; }
.board .slat:nth-child(1){ animation-delay:.10s; }
.board .slat:nth-child(2){ animation-delay:.17s; }
.board .slat:nth-child(3){ animation-delay:.24s; }
.board .slat:nth-child(4){ animation-delay:.31s; }
.board .slat:nth-child(5){ animation-delay:.38s; }
.board .slat:nth-child(6){ animation-delay:.45s; }
.board .slat:nth-child(7){ animation-delay:.52s; }

/* --- Tactile press: everything tappable answers to the finger --- */
.pg, .cta, .confirm, .chip, .choice, .modecard, .ohist, .course,
.frow, .shutterbox, .seg a, .alt, .stepbtn, .drow{
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background-color .18s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.pg:active, .cta:active, .confirm:active, .choice:active, .modecard:active,
.ohist:active, .course:active, .frow:active, .shutterbox:active, .drow:active{
  transform:scale(.985);
}
.stepbtn:active{ transform:scale(.9); }
.iconbtn{ transition:color .18s var(--ease-out), transform .18s var(--ease-out); -webkit-tap-highlight-color:transparent; }
.iconbtn:active{ transform:scale(.86); }

/* ============================================================
   SLIDE-OUT DRAWER — the hamburger's real home. Lives inside the
   phone, slides from the right over a dimmed, blurred board.
   Built + wired by attest.js.
   ============================================================ */
.drawer{ position:absolute; inset:0; z-index:60; visibility:hidden; }
.drawer .scrim{
  position:absolute; inset:0; background:rgba(6,13,9,.5);
  opacity:0; transition:opacity .34s var(--ease-out);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:83%; max-width:322px;
  background:var(--pine-deep); border-left:1px solid var(--brass);
  box-shadow:-30px 0 70px rgba(0,0,0,.55);
  transform:translateX(101%); transition:transform .42s var(--ease-out);
  display:flex; flex-direction:column;
}
.drawer.open{ visibility:visible; }
.drawer.open .scrim{ opacity:1; }
.drawer.open .panel{ transform:none; }

.drawer .dhead{ display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 16px; border-bottom:1px solid var(--hairline); flex-shrink:0; }
.drawer .dhead .brand{ font-size:14px; }
.drawer .dclose{ width:22px; height:22px; flex-shrink:0; background:currentColor; color:var(--ivory-dim);
  border:0; cursor:pointer; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
  -webkit-mask-image:var(--ic-close); mask-image:var(--ic-close); transition:color .18s var(--ease-out), transform .18s var(--ease-out); }
.drawer .dclose:hover{ color:var(--brass-bright); } .drawer .dclose:active{ transform:scale(.86); }
.drawer-body{ flex:1; overflow-y:auto; padding:6px 20px 22px; }
.drawer .dgroup{ font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-bright); margin:18px 2px 7px; }
.drawer .drow{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 2px; border-bottom:1px solid rgba(243,238,223,.05); text-decoration:none; color:var(--ivory); }
.drawer .drow .dname{ font-family:'Oswald',sans-serif; font-weight:500; font-size:14.5px;
  letter-spacing:.06em; color:var(--ivory); }
.drawer .drow .dname small{ display:block; font-family:'Source Sans 3',sans-serif; font-weight:400;
  font-size:11.5px; letter-spacing:0; color:var(--ivory-dim); margin-top:2px; }
/* No-round state (home): dim children, not the row — the cascade animation
   owns the row's opacity (fill:forwards would override a row-level value). */
.drawer .drow.off{ pointer-events:none; }
.drawer .drow.off .dname{ opacity:.38; }
.drawer .dhint{ font-family:'Source Sans 3',sans-serif; font-size:11.5px; color:var(--ivory-dim);
  margin:-2px 2px 4px; }
.drawer .drow.here .dname{ color:var(--brass-bright); }
.drawer .drow.here::after{ content:'●'; font-size:8px; color:var(--brass-bright); }

/* Rows cascade in after the panel lands */
@keyframes drowIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.drawer .drow, .drawer .dgroup{ opacity:0; }
.drawer.open .drow, .drawer.open .dgroup{ animation:drowIn .4s var(--ease-out) forwards; }
.drawer.open .dgroup{ animation-delay:.12s; }
.drawer.open .drow:nth-of-type(1){ animation-delay:.14s; }
.drawer.open .drawer-body > *:nth-child(n){ }
.drawer.open .drow{ animation-delay:calc(.14s + var(--di,0) * .045s); }

/* Real phone: full-bleed */
@media (max-width:480px) {
  .stage { padding:0; gap:0; }
  .phone { width:100%; border-radius:0; padding:0; box-shadow:none; }
  .notch { display:none; }
  .screen { border-radius:0; height:100dvh; }
  .statusbar { display:none; }
  .pagenav { padding:10px 14px; }
  .hub { padding:16px; }
}

/* ============================================================
   Store badges (plan: docs/plans/2026-07-23-store-badges.html)
   Official Apple badge (untouched artwork, 44px) + site-styled
   "Coming soon on Google Play" pill — NO Google artwork; the
   pill is non-interactive by design. Swap recipe for Android
   launch lives in the plan's Task 5.
   ============================================================ */
.storebadges{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.asbadge-link{ display:block; line-height:0; }
.asbadge{ width:132px; height:44px; display:block; }
.playsoon{ display:inline-flex; flex-direction:column; justify-content:center; gap:3px; height:44px;
  padding:0 16px; border:1px solid rgba(207,201,180,.30); border-radius:7px; cursor:default; }
.playsoon .t{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(207,201,180,.52); line-height:1; }
.playsoon .n{ font-family:'Oswald',sans-serif; font-weight:500; font-size:17px;
  color:rgba(207,201,180,.78); letter-spacing:.02em; line-height:1; }
footer .trademarks{ flex-basis:100%; font-size:12px; line-height:1.6; color:rgba(207,201,180,.55); }