/* Layout: "Thriller on Thatcher" party brand — poster greens, near-black lawn at night,
   brand orange for the big moments (count, buttons, headings), logo artwork and branch
   silhouettes as the scenery, glossy green goo dripping off the header and scoreboard.
   Everything you read or compare stays in a clean sans + mono so numbers scan easily.
   Views: Scoreboard (TV), Live (analysis), History (years); Log is its own page.
   Deliberately single-theme dark. */
@font-face{font-family:"Juicy Fruti";src:url("fonts/juicy-fruti.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Creepy Spooky";src:url("fonts/creepy-spooky.woff2") format("woff2");font-display:swap}
:root{
  color-scheme: dark;
  --ink:#08140c;          /* page ground: poster's near-black lawn */
  --crypt:#12291b;        /* panels */
  --crypt-2:#1c3d29;      /* controls, raised */
  --line:#2c5a3c;         /* hairlines, grid */
  --ghost:#f7f1e3;        /* primary text: bone */
  --ghost-2:#c7dbc9;      /* secondary text */
  --ghost-3:#8db497;      /* muted text, axis labels */
  --slime:#e97124;        /* UI accent: brand orange (name kept for history) */
  --slime-ink:#1c0b00;    /* text on orange */
  --pumpkin:#e97124;      /* brand orange */
  --grass:#499b5e;        /* brand green: goo, frame */
  --grass-hi:#6cc07f;     /* goo highlight */
  --grass-lo:#2b7343;     /* goo shadow */
  --sky:#00783c;          /* poster sky green */
  --outline:#071108;      /* logo outline */
  --good:#8be09b; --bad:#ff8a7a;
  --boy:#3987e5; --girl:#d55181;
  /* year series — validated on --crypt (band, adjacent CVD, contrast); lines are also direct-labeled */
  --y2022:#d55181; --y2023:#3987e5; --y2024:#c98500; --y2025:#9085e9; --y2026:#df6b21;
  --display:"Juicy Fruti", "Arial Black", Impact, sans-serif;   /* the ON THATCHER face: the count, big numbers */
  --spooky:"Creepy Spooky", "Juicy Fruti", fantasy;              /* the THRILLER face: page titles, the +3! pop */
  --poster:"Anton", "Oswald", Impact, sans-serif;
  --slab:"Juicy Fruti", "Rockwell", Georgia, serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:14px;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--ghost)}
body{font-family:var(--body);font-size:16px;line-height:1.45;min-height:100%;
  background-image:radial-gradient(90% 55% at 50% 120%, var(--crypt-2) 0%, transparent 62%),linear-gradient(180deg, #0b2a17 0%, var(--ink) 420px);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--slime);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ghost-3)}

/* header + goo */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ink)}
.bar{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px 6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand h1{margin:0;line-height:0}
.brand h1 img{height:54px;width:auto;display:block;filter:drop-shadow(0 2px 0 var(--outline))}
.brand .tag{display:grid;line-height:1.15}
.brand .tag b{font-family:var(--slab);font-weight:400;font-size:17px;color:var(--ghost);letter-spacing:.5px}
.brand .tag small{color:var(--ghost-3);font-size:13px;white-space:nowrap}
nav{display:flex;gap:4px;background:var(--crypt);padding:4px;border-radius:999px;border:1px solid var(--line)}
nav a{color:var(--ghost-2);text-decoration:none;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px}
nav a[aria-current="page"]{background:var(--slime);color:var(--slime-ink)}
.sync{font-size:12px;color:var(--ghost-3);display:flex;align-items:center;gap:6px}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block}
.sync[data-s="pending"] i{background:var(--pumpkin)}
.sync[data-s="local"] i,.sync[data-s="error"] i{background:var(--bad)}
.flag{background:var(--pumpkin);color:#2a1100;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}
.goo{position:absolute;left:0;right:0;top:calc(100% - 1px);height:72px;pointer-events:none;z-index:4}
.goo svg{display:block;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55))}

main{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:64px 56px}
section[data-view]{display:grid;gap:20px}
h2{font-family:var(--spooky);font-weight:400;font-size:40px;margin:0;line-height:1.05;color:var(--pumpkin);letter-spacing:.5px;text-wrap:balance;-webkit-text-stroke:5px var(--outline);paint-order:stroke fill;text-shadow:0 3px 0 var(--outline)}
h3{font-size:13px;margin:0;color:var(--ghost-3);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.panel{background:var(--crypt);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.lede{color:var(--ghost-2);margin:4px 0 0}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}

/* icons + avatars */
.ico{width:1em;height:1em;flex:none}
img.ico{border-radius:50%;object-fit:cover;vertical-align:middle;box-shadow:0 0 0 1.5px var(--outline)}
.tile .glyph img.ico{width:52px;height:52px;box-shadow:0 0 0 2px var(--outline)}
.label img.ico{width:32px;height:32px}
.ico.boy{color:var(--boy)} .ico.girl{color:var(--girl)}
.avatar{--s:44px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 35% 30%, var(--crypt-2), var(--ink));border:2px dashed var(--ghost-3);
  font-family:var(--slab);font-size:calc(var(--s)*.45);color:var(--ghost-2)}
.avatar.has-photo{border:3px solid var(--pumpkin);box-shadow:0 0 0 2px var(--outline)}
.avatar img{width:100%;height:100%;object-fit:cover}

/* stat tiles with YOY */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px}
.tile{background:var(--crypt);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;min-width:0}
.tile .glyph{font-size:44px;display:grid;place-items:center;width:52px;height:52px;flex:none}
.tile .glyph .avatar{--s:52px}
.tile .glyph.age{font-family:var(--slab);font-size:30px;color:var(--pumpkin);border:2px solid var(--pumpkin);border-radius:50%}
.tile b{display:block;font-family:var(--mono);font-size:30px;line-height:1.05;font-weight:800}
.tile .lbl{display:block;font-size:13px;color:var(--ghost-2);font-weight:700}
.delta{display:block;font-size:12.5px;color:var(--ghost-3);margin-top:2px}
.delta .up{color:var(--ghost)} .delta .down{color:var(--ghost)}
.delta i{font-style:normal;font-weight:700}

/* ---------- SCOREBOARD ----------
   Count on the left, the house on the right with its base on the horizon. app.js (layoutScene)
   places the title, count, house, branches and horizon so the house base always meets the
   horizon line and the house trees never touch the corner branches. */
.board{position:relative;overflow:hidden;border-radius:22px;border:2px solid var(--outline);background:var(--ink);display:grid;grid-template-columns:minmax(0,1fr)}
.board > *{min-width:0}
#v-board:fullscreen{background:var(--ink);padding:0;overflow:auto;display:block}
#v-board:fullscreen .board{min-height:100%;border:none;border-radius:0;align-content:start}
#v-board:fullscreen .scene{min-height:0}
.scene{position:relative;overflow:hidden;min-height:420px;
  background:radial-gradient(60% 55% at 62% 18%, #009a47 0%, rgba(0,154,71,0) 70%), linear-gradient(180deg, var(--sky) 0%, #06703a 55%, #0a5f31 100%)}
.horizon{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.branches{position:absolute;top:0;width:auto;height:0;z-index:1;pointer-events:none}
.branches.left{left:0} .branches.right{right:0}
.branches.fade{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.stage{position:relative;z-index:2;height:420px}
.scene-top{position:absolute;display:grid;justify-items:center;gap:2px;text-align:center}
.scene-top .title{font-family:var(--poster);font-size:clamp(17px,2.1vw,32px);color:var(--outline);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;text-wrap:balance}
.scene-top .clock{font-family:var(--poster);font-size:clamp(14px,1.5vw,22px);color:var(--outline);letter-spacing:.06em;opacity:.85}
.count-wrap{position:absolute;display:grid;justify-items:center;align-items:end}
.count{font-family:var(--display);font-size:200px;line-height:.86;color:var(--pumpkin);white-space:nowrap;
  -webkit-text-stroke:.075em var(--outline);paint-order:stroke fill;text-shadow:0 .05em 0 var(--outline);letter-spacing:.01em}
.count-measure{position:absolute;visibility:hidden;pointer-events:none;left:-9999px;top:0}
.pop{position:absolute;right:-6%;top:-14%;font-family:var(--spooky);font-size:.42em;color:var(--ghost);-webkit-text-stroke:.09em var(--outline);paint-order:stroke fill;opacity:0;pointer-events:none;z-index:3;white-space:nowrap}
.count-wrap .pop{font-size:clamp(48px,7vw,120px)}
.pop.go{animation:pop 1.8s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translateY(30px) scale(.6) rotate(-10deg)}15%{opacity:1;transform:translateY(0) scale(1.15) rotate(4deg)}70%{opacity:1}100%{opacity:0;transform:translateY(-80px) scale(1) rotate(-2deg)}}
.scene img.hero{position:absolute;z-index:2;height:auto;display:block;max-width:none}
.hill-row{position:relative;z-index:3;height:90px}
.count-sub{position:absolute;top:14px;text-align:center;font-family:var(--poster);font-size:clamp(18px,2vw,30px);color:var(--outline);letter-spacing:.05em;text-transform:uppercase;line-height:1.1}
.ground{position:relative;z-index:3;height:clamp(64px,8vw,110px);margin-bottom:-1px;background:linear-gradient(#07130a,#07130a) left bottom / 100% 3px no-repeat, url("images/grass.png") repeat-x left bottom / auto 100%}
.pumpkin{position:absolute;bottom:0;height:auto;z-index:2}
.pumpkin.left{left:clamp(4px,2vw,30px);width:clamp(84px,11vw,180px)}
.pumpkin.right{right:clamp(4px,2.5vw,36px);width:clamp(60px,7.5vw,124px)}
.bell{position:absolute;right:calc(clamp(4px,2.5vw,36px) + clamp(60px,7.5vw,124px) + 14px);bottom:clamp(8px,1vw,14px);z-index:6;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:rgba(7,17,8,.85);color:var(--ghost-3);display:grid;place-items:center;padding:0}
.bell svg{width:22px;height:22px}
.bell .slash{position:absolute;width:26px;height:3px;background:currentColor;border-radius:2px;transform:rotate(-45deg)}
.bell[aria-pressed="true"]{color:var(--slime-ink);background:var(--pumpkin);border-color:var(--outline)}
.bell[aria-pressed="true"] .slash{display:none}
.bell.ring svg{animation:ring .9s ease-in-out}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.underworld{position:relative;margin-top:-2px;background:linear-gradient(180deg, #07130a 0%, #0b2416 70%, #0e2b1b 100%);padding:6px clamp(16px,3vw,36px) 26px;display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.underworld > *{min-width:0}
.info-row{position:relative;min-height:64px}
.info-left,.info-right{position:absolute;top:0;display:grid;justify-items:center;align-content:center;text-align:center;gap:4px;min-height:64px}
.info-row.stacked{display:grid;gap:12px;min-height:0}
.info-row.centered{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 56px;min-height:56px}
.info-row.centered .info-left{display:none}
.info-row.centered .info-right{position:static;display:contents}
.hill-pace{position:absolute;display:flex;justify-content:center}
.hill-pace .pill{background:var(--outline);border-color:var(--outline);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.info-row.stacked .info-left,.info-row.stacked .info-right{position:static;min-height:0}
.board .pill{font-size:clamp(16px,1.7vw,24px);background:var(--crypt-2);border-color:var(--line)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-weight:700;background:var(--crypt-2);border:1px solid var(--line);width:fit-content;font-size:17px}
.pill.up{color:var(--good)} .pill.down{color:var(--bad)}
.proj{font-size:clamp(15px,1.5vw,21px);color:var(--ghost-2)}
.proj b{color:var(--pumpkin)}
.ticker{font-size:clamp(15px,1.5vw,20px);color:var(--ghost);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.ticker .ico{font-size:1.3em}
.board .tiles{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.board .tile{background:rgba(28,61,41,.45);border-color:var(--line);padding-top:30px}
/* goo shelf: slime coating the top of each stat tile */
.shelf{position:relative}
.shelf-goo{position:absolute;inset:0;pointer-events:none;z-index:2}
.goo-piece{position:absolute;height:34px;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.goo-piece svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45))}
.board .tile b{font-size:clamp(30px,3.4vw,46px)}
.board-chart{background:rgba(7,17,8,.55);border-radius:var(--r);padding:12px 6px 4px;border:1px solid var(--line)}
.bats{position:absolute;inset:0 0 50% 0;pointer-events:none;z-index:1;overflow:hidden}
.bat{position:absolute;width:52px;color:var(--outline);animation:fly linear infinite}
.bat svg{width:100%;height:auto;animation:flap .32s ease-in-out infinite alternate;transform-origin:center}
.bat:nth-child(1){top:14%;animation-duration:26s;animation-delay:-4s}
.bat:nth-child(2){top:44%;width:34px;animation-duration:34s;animation-delay:-18s}
.bat:nth-child(3){top:26%;width:42px;animation-duration:30s;animation-delay:-9s;animation-direction:reverse}
.bat:nth-child(4){top:60%;width:28px;animation-duration:40s;animation-delay:-25s;animation-direction:reverse}
@keyframes fly{from{left:-70px;transform:translateY(0)}50%{transform:translateY(-30px)}to{left:calc(100% + 70px);transform:translateY(10px)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
.board-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.board-tools #soundBtn[aria-pressed="true"]{border-color:var(--pumpkin);color:var(--pumpkin)}
#v-board:fullscreen .board-tools{display:none}
#v-board:fullscreen .board-chart{display:none}
#v-board:fullscreen .underworld{gap:14px;padding-bottom:22px}

/* ---------- LIVE ---------- */
.live-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:820px){.live-top{grid-template-columns:1fr}}
.hero{display:grid;gap:10px;align-content:start}
.hero .big{font-family:var(--display);font-size:clamp(90px,14vw,160px);line-height:.9;color:var(--pumpkin);-webkit-text-stroke:8px var(--outline);paint-order:stroke fill;text-shadow:0 6px 0 var(--outline)}
.hero .big small{font-family:var(--body);font-size:20px;color:var(--ghost-2);margin-left:10px;font-weight:700;text-shadow:none;-webkit-text-stroke:0}
.pace{width:100%;border-collapse:collapse;font-size:15px}
.pace th{text-align:left;color:var(--ghost-3);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:6px 4px;border-bottom:1px solid var(--line)}
.pace td{padding:9px 4px;border-bottom:1px solid var(--line)}
.pace td.n,.pace th.n{text-align:right;font-family:var(--mono)}
.sw{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:8px;vertical-align:middle}
.chart-wrap{overflow-x:auto;position:relative}
.chart-wrap svg{display:block;width:100%;min-width:560px;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ghost-2)}
.legend span{display:flex;align-items:center}
.tip{position:absolute;pointer-events:none;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:3}
.tip div{display:flex;justify-content:space-between;gap:12px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.replay-banner{background:var(--crypt-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.btn{height:46px;border-radius:10px;border:1px solid var(--line);background:var(--crypt-2);padding:0 18px;font-weight:700}
.btn:hover{border-color:var(--ghost-3)}
.btn.small{height:34px;padding:0 12px;font-size:14px}
.btn.slime{background:var(--slime);border-color:var(--slime);color:var(--slime-ink)}
.btn.danger{border-color:#6b2b44;color:#ffc0cc}

/* ---------- LOG ---------- */
.log-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.log-grid{grid-template-columns:1fr}}
form#entry{display:grid;gap:20px}
.field{display:grid;gap:10px}
.label{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.label .ico{font-size:28px}
.doors{display:flex;gap:10px;flex-wrap:wrap}
.doors button{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;border:2px solid var(--line);background:var(--crypt-2);font-weight:700;font-size:16px}
.doors button .avatar{--s:40px}
.doors button[aria-pressed="true"]{border-color:var(--slime);background:#3a2010;color:var(--ghost)}
.doors button.other{padding:6px 18px;height:56px}
.picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.picker .n{min-width:44px;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--crypt-2);font-family:var(--mono);font-weight:700;font-size:18px}
.picker .n[aria-pressed="true"]{background:var(--slime);color:var(--slime-ink);border-color:var(--slime)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:6px}
.stepper button{width:40px;height:46px;border:0;background:var(--crypt-2);font-size:22px;font-weight:700}
.stepper output{min-width:50px;text-align:center;font-family:var(--mono);font-weight:800;font-size:18px}
.stepper.big{border-color:var(--slime)} .stepper.big output{color:var(--slime)}
.age-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#age{width:130px;height:60px;border-radius:10px;border:2px solid var(--line);background:var(--ink);font-family:var(--mono);font-size:30px;font-weight:800;text-align:center}
#age:focus{border-color:var(--slime)}
.save-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn.primary{background:var(--slime);border:3px solid var(--outline);color:var(--slime-ink);font-size:20px;padding:0 30px;height:60px;font-family:var(--slab);font-weight:400;letter-spacing:.5px;box-shadow:0 4px 0 var(--outline)}
.btn.primary:disabled{opacity:.35;cursor:not-allowed}
.preview{color:var(--ghost-2);font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.editing{background:#2d1f10;border:1px solid #7a4b14;color:var(--pumpkin);border-radius:10px;padding:8px 12px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toast{min-height:24px;color:var(--good);font-weight:700}
.toast.err{color:var(--bad)}
.tonight{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tonight div{background:var(--ink);border-radius:10px;padding:10px 12px}
.tonight b{display:block;font-family:var(--mono);font-size:28px;line-height:1.1}
.tonight span{font-size:12px;color:var(--ghost-3)}
.recent{list-style:none;margin:0;padding:0;display:grid}
.recent li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.recent .t{font-family:var(--mono);color:var(--ghost-2);font-size:14px}
.recent .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.recent .who .ico{font-size:20px}
.recent .who .avatar{--s:24px;border-width:1px}
.recent .acts{display:flex;gap:6px}
.empty{color:var(--ghost-3);padding:12px 0}
.switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.switch input{width:20px;height:20px;accent-color:var(--slime)}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- HISTORY ---------- */
.hist-charts{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
@media (max-width:860px){.hist-charts{grid-template-columns:1fr}}
.hist-charts .chart-wrap svg{min-width:0}
.ledger{width:100%;border-collapse:collapse;font-size:14px;min-width:900px}
.ledger th{text-align:left;color:var(--ghost-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.ledger th.n{text-align:right}
.ledger td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ledger td.n{font-family:var(--mono);text-align:right;white-space:nowrap}
.ledger .yr{font-family:var(--slab);font-size:24px;letter-spacing:.5px}
.ledger .mix{display:inline-flex;gap:10px;align-items:center}
.ledger .mix span{display:inline-flex;gap:3px;align-items:center}
.ledger .doorcell{display:flex;gap:10px;flex-wrap:wrap}
.ledger .doorcell span{display:inline-flex;gap:5px;align-items:center}
.ledger .doorcell .avatar{--s:22px;border-width:1px}
.wx{width:160px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:13px}
.scroll{overflow-x:auto}
.foot{display:grid;gap:10px;color:var(--ghost-3);font-size:14px}


/* standalone page reset (outside Claude) */
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.auth{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ghost-3)}
.auth button{background:none;border:1px solid var(--line);border-radius:999px;color:var(--ghost-2);padding:4px 12px;font-size:13px;font-weight:700}
.auth button:hover{border-color:var(--ghost-3)}
.banner{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:34px 0}
.banner div{background:#2d1f10;border:1px solid #7a4b14;color:var(--pumpkin);border-radius:10px;padding:10px 14px;font-size:14px}
.banner + main{padding-top:20px}
footer{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px;color:var(--ghost-3);font-size:13px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
footer button{background:none;border:0;color:var(--ghost-2);text-decoration:underline;font-size:13px;padding:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bats{display:none}}

/* private log page + preview chrome */
.gate{display:grid;gap:14px;max-width:560px;justify-items:start}
.toast.floating{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 14px;z-index:30;max-width:calc(100% - 32px)}
.toast.floating:empty{display:none}
.toplink{color:var(--ghost-2);font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.toplink:hover{border-color:var(--ghost-3)}
.preview-bar{background:#000;color:#fff;font:600 13px/1.3 var(--body);display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:2px solid var(--pumpkin)}
.preview-bar b{color:var(--pumpkin);letter-spacing:.08em;text-transform:uppercase}
.preview-bar button{background:#222;color:#fff;border:1px solid #444;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px}
.preview-bar button[aria-pressed="true"]{background:var(--pumpkin);color:#2a1100;border-color:var(--pumpkin)}
.preview-bar span{color:#aaa;font-weight:400}
.switch{flex-wrap:nowrap;align-items:flex-start}.switch input{margin-top:2px;flex:none}.switch label{flex:1;min-width:0}
/* clear the header goo */
.banner{padding-block:74px 0}
@media (max-width:520px){
  .board .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board .tile{flex-direction:column;align-items:flex-start;gap:8px}
  .board .tile .glyph{width:40px;height:40px;font-size:34px}
  .board .tile .glyph .avatar{--s:40px}
  .board .tile:last-child:nth-child(odd){grid-column:1/-1}
}