/* ==========================================================================
   Theme H: "old American political cartoons, built for 2026" (ROADMAP.md)
   Turned on by class="skin-h" on <html>. Clean modern app frame; cream paper,
   faded flag red + navy + brass; slab headlines; modern sans for text and numbers.
   Green and red are kept only for owns/owes data.
   Stage 1 rebrand rule: build it on the Vote page first, then roll out.
   ========================================================================== */

@font-face{font-family:"Alfa Slab One";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/inter-latin-wght-normal.woff2) format("woff2")}

html.skin-h{
  --paper:#F3E9D2; --surface:#FBF6EA; --ink:#2E2216; --muted:#6B5B45; --rule:#E2D6BC; --hair:#DCCBA8; --hatch:#2E2216;
  --navy:#1E2F4F; --red:#A8423A; --brass:#B8892B; --brass-ink:#7A5A14;
  --lip:#A8423A; --lip-soft:#F1E0D6; --coin:#B8892B; --coin-soft:#F3E6C7; --cash:#1E2F4F; --cash-soft:#E7EBF2; --sky:#E7EBF2;
  --own:#2F6B45; --own-soft:#DCEBDF; --owe:#A8423A; --owe-soft:#F1E0D6; --you:#B8892B; --you-soft:#F3E6C7; --focus:#1E2F4F;
  --serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sans:var(--serif); --slab:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --pop:0 1px 0 #DCCBA8, 0 8px 22px rgba(46,34,22,.08);
  color-scheme:light;
}
/* Night edition: dark sepia paper, cream ink. Headlines and primary buttons go cream, accents brass. */
html.skin-h[data-theme="dark"]{
  --paper:#17120D; --surface:#221B14; --ink:#EFE5CE; --muted:#BEAE8E; --rule:#34291F; --hair:#43372A; --hatch:#EFE5CE;
  --navy:#EADBB8; --red:#E0907F; --brass:#D9AA4F; --brass-ink:#D9AA4F;
  --lip:#E0907F; --lip-soft:#3A2520; --coin:#D9AA4F; --coin-soft:#3A2E18; --cash:#EADBB8; --cash-soft:#2E2820; --sky:#2E2820;
  --own:#86C79C; --own-soft:#1F3326; --owe:#E0907F; --owe-soft:#3A2520; --you:#D9AA4F; --you-soft:#3A2E18; --focus:#D9AA4F;
  --pop:0 0 0 1px #34291F;
  color-scheme:dark;
}
html.skin-h[data-theme="dark"] .h-mark{border-color:#D9AA4F}
html.skin-h[data-theme="dark"] .btn{color:#17120D}
html.skin-h[data-theme="dark"] .btn.ghost{color:var(--navy);background:transparent}
html.skin-h[data-theme="dark"] .rx-cosign[aria-pressed="true"]{color:#17120D}
html.skin-h[data-theme="dark"] .pc-match{background:#2E2820;color:#EADBB8}

html.skin-h body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* Headlines: slab poster letters. Alfa Slab One has one weight; never fake-bold it. */
html.skin-h h1,html.skin-h h2,html.skin-h .x-title,html.skin-h .bal-hed,html.skin-h .sec-head h1,html.skin-h .dk-head h2,html.skin-h .live-head h2,html.skin-h .feed-head h2{
  font-family:var(--slab);font-weight:400;letter-spacing:0;font-variation-settings:normal;color:var(--navy)}
html.skin-h .sec-head h1{font-size:clamp(34px,7.5vw,56px);line-height:1.02}
html.skin-h h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}

/* ---------- app bar ---------- */
html.skin-h header.top{background:var(--paper);border-bottom:1px solid var(--hair)}
html.skin-h .mast-mark{display:none}
html.skin-h .h-mark{display:block !important;width:38px;height:38px;border-radius:999px;object-fit:cover;object-position:50% 8%;border:2px solid var(--brass);background:var(--surface)}
html.skin-h .brand{font-family:var(--slab);font-weight:400;font-size:25px;letter-spacing:0;color:var(--navy);font-variation-settings:normal}
html.skin-h .brand i{color:var(--red)}
html.skin-h #acct-btn{background:var(--surface);color:var(--navy);border:1px solid var(--hair);box-shadow:none;font-weight:700}

/* desktop tabs */
html.skin-h nav.tabs a{border:0 !important;color:var(--muted);font-weight:600;border-radius:999px;box-shadow:none}
html.skin-h nav.tabs a:hover{color:var(--ink)}
html.skin-h nav.tabs a[aria-current="page"]{background:var(--navy);color:var(--paper);box-shadow:none}
html.skin-h nav.tabs a[aria-current="page"]:hover{color:var(--paper)}

/* phones: floating pill tab bar */
@media (max-width:760px){
  html.skin-h header.top nav.tabs{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px;border:0;border-radius:32px;background:#1E2F4F;box-shadow:0 10px 26px rgba(30,47,79,.35)}
  html.skin-h header.top nav.tabs{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  html.skin-h[data-theme="dark"] header.top nav.tabs{background:#0B0806;box-shadow:0 0 0 1px #34291F,0 10px 26px rgba(0,0,0,.6)}
  html.skin-h nav.tabs a{color:#C9D1E0;font-size:11.5px;letter-spacing:-.01em;padding:10px 1px;border-radius:24px;white-space:nowrap;grid-column:auto !important}
  html.skin-h[data-theme="dark"] nav.tabs a{color:#BEAE8E}
  html.skin-h[data-theme="dark"] nav.tabs a[aria-current="page"]{background:#D9AA4F;color:#17120D}
  html.skin-h nav.tabs a[aria-current="page"]{background:#B8892B;color:#1E2F4F}
  html.skin-h main{padding-bottom:120px}
  html.skin-h .site-foot{padding-bottom:120px}
}

/* progress trail */
html.skin-h .trail-count{background:var(--navy);color:var(--paper)}
html.skin-h .trail-steps li.done .tk{background:var(--brass);color:#1E2F4F;border-color:var(--brass)}
html.skin-h .trail-next{background:var(--surface);color:var(--navy);border:1px solid var(--hair);box-shadow:none}

/* ---------- cards: soft paper, no hard outlines ---------- */
html.skin-h .composer,html.skin-h .post,html.skin-h .avg-card,html.skin-h .statement,html.skin-h .x-card,html.skin-h .pf-card,html.skin-h .quiz,html.skin-h .bal-lite,html.skin-h .budget-meter,html.skin-h .lvl,html.skin-h .idea,html.skin-h .callout,html.skin-h .dk,html.skin-h .promo,html.skin-h .pool,html.skin-h .lv-card{
  border:0 !important;border-radius:22px;box-shadow:var(--pop) !important;background:var(--surface)}
html.skin-h .composer{background:var(--surface);padding:18px}
html.skin-h .avg-card{background:var(--surface)}

/* ---------- buttons and controls ---------- */
html.skin-h .btn{background:var(--navy);color:var(--paper);border:0;border-radius:999px;box-shadow:none;font-weight:700;font-family:var(--serif)}
html.skin-h .btn:active:not(:disabled){transform:scale(.98);box-shadow:none}
html.skin-h .btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
html.skin-h #vote-save{background:var(--brass);color:#1E2F4F;font-size:17px;padding:14px 26px}
html.skin-h #vote-save:disabled{background:var(--rule);color:var(--muted)}
html.skin-h .switch{border:0;background:var(--rule);border-radius:999px;padding:3px;gap:2px;overflow:visible}
html.skin-h .switch button{border:0 !important;border-radius:999px;background:transparent;color:var(--muted);font-weight:600}
html.skin-h .switch button[aria-pressed="true"]{background:var(--surface);color:var(--navy);box-shadow:0 1px 3px rgba(46,34,22,.18)}
html.skin-h input:not([type=range]):not([type=checkbox]):not([type=radio]),html.skin-h select,html.skin-h textarea{border:1px solid var(--hair) !important;border-radius:14px;background:var(--surface) !important;color:var(--ink);font-family:var(--serif)}
html.skin-h input:not([type=range]):focus-visible,html.skin-h select:focus-visible,html.skin-h textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
html.skin-h .agree{border:1.5px solid var(--navy) !important;background:transparent;color:var(--navy);font-family:var(--serif)}
html.skin-h .agree[aria-pressed="true"]{background:var(--navy);color:var(--paper)}
html.skin-h .chip{font-family:var(--serif)}
html.skin-h .lv-badge{border:1px solid var(--hair);background:var(--surface);font-family:var(--serif)}
html.skin-h .lv-badge.boss{background:var(--navy);color:var(--paper);border-color:var(--navy)}
html.skin-h .stamp{background:var(--brass);color:#1E2F4F;border:0;border-radius:999px;font-family:var(--serif)}

/* ---------- Vote page ---------- */
html.skin-h .vote-art{grid-template-columns:1fr;gap:14px}
html.skin-h .vote-art > svg{display:none}
html.skin-h .hero-tag{background:none;border:0;box-shadow:none;transform:none;padding:0;margin:0 0 6px;color:var(--red);font-family:var(--serif);font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
html.skin-h .h-buck{display:flex !important;align-items:flex-end;gap:10px;max-width:560px}
html.skin-h .h-buck img{width:92px;height:112px;object-fit:cover;object-position:50% 0%;border-radius:18px;flex:none;background:var(--surface)}
html.skin-h .h-buck p{margin:0;background:var(--surface);border-radius:18px 18px 18px 4px;padding:11px 14px;font-size:15.5px;line-height:1.4;box-shadow:var(--pop)}
html.skin-h .h-buck b{color:var(--red)}

html.skin-h .lvl{background:var(--surface) !important;transform:none;color:var(--ink)}
html.skin-h .lvl.on{outline:2.5px solid var(--navy);outline-offset:-2.5px;box-shadow:var(--pop) !important;transform:none}
html.skin-h .lvl-name{font-family:var(--slab);font-weight:400;color:var(--navy);font-size:21px}
html.skin-h .stars i.full{color:var(--brass)}

html.skin-h .legend .l-mine::before{background:var(--navy) !important}

/* sliders: modern, thumb-friendly */
html.skin-h .vrow{border-color:var(--rule)}
html.skin-h .vrow .n{font-weight:700}
html.skin-h .vrow output{font-family:var(--slab);font-weight:400;color:var(--navy);font-size:18px}
html.skin-h .track input[type=range]{-webkit-appearance:none;appearance:none;background:transparent !important;border:0 !important;height:30px;accent-color:var(--navy)}
html.skin-h .track input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--navy) var(--fill,0%),var(--rule) var(--fill,0%))}
html.skin-h .track input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--rule)}
html.skin-h .track input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--navy)}
html.skin-h .track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:999px;background:#FFFFFF;border:2.5px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.25)}
html.skin-h .track input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:999px;background:#FFFFFF;border:2.5px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.25)}
html.skin-h .track input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:999px}
html.skin-h .track .tick{top:50%;height:18px;width:3px;transform:translate(-1px,-50%)}
html.skin-h .track .tick.actual{background:var(--ink)}
html.skin-h .track .tick.crowd{background:var(--red)}

html.skin-h .vfoot{background:var(--surface) !important;border-top:1px solid var(--rule)}
html.skin-h .remaining{font-family:var(--slab);font-weight:400;color:var(--navy);font-size:20px}
html.skin-h .remaining.over{color:var(--red)}
html.skin-h .bm-bar i{background:var(--navy)} html.skin-h .bm-bar i.over{background:var(--red)}
html.skin-h .mrow .track2 i{background:var(--navy)}
html.skin-h .post .who b button{font-family:var(--serif)}
html.skin-h .site-foot{border-top:1px solid var(--hair)}
html.skin-h .site-foot a{color:var(--navy)}
html.skin-h input[type=checkbox]{accent-color:var(--navy)}

/* Night edition switch: always labeled */
html.skin-h .theme-switch{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink);font:600 13px var(--serif);cursor:pointer;padding:4px}
html.skin-h .theme-switch .ts-label{display:inline !important}
html.skin-h .ts-short{display:none}
@media (max-width:760px){ html.skin-h .ts-long{display:none} html.skin-h .ts-short{display:inline} html.skin-h .brand{font-size:21px} html.skin-h .h-mark{width:34px;height:34px} html.skin-h .topbar{gap:8px} html.skin-h #acct-btn{padding:7px 12px;font-size:14px} }
html.skin-h .next-step{background:var(--surface)}

/* change chips: navy for "more", brass for "less" (green/red are reserved for owns/owes data) */
html.skin-h .chip{display:inline-flex;align-items:center;white-space:nowrap;border:0 !important;border-radius:999px;padding:3px 10px;font-weight:700;font-size:13px}
html.skin-h .chip.up{background:var(--cash-soft);color:var(--navy)}
html.skin-h .chip.down{background:var(--coin-soft);color:var(--brass-ink)}
html.skin-h[data-theme="dark"] .chip.up{background:#2E2820;color:#EADBB8}
html.skin-h[data-theme="dark"] .chip.down{background:#3A2E18;color:#E3B865}
html.skin-h .shifts{display:flex;flex-wrap:wrap;gap:6px}

/* Vote: big bucks counter, colored bucks bar, Post always in reach */
html.skin-h .vfoot{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
html.skin-h .vfoot-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
html.skin-h .remaining{font-size:27px;line-height:1.05}
html.skin-h #vote-save-top{padding:10px 22px;font-size:16px;background:var(--brass);color:#1E2F4F}
html.skin-h #vote-save-top:disabled{background:var(--rule);color:var(--muted)}
html.skin-h .bucks-bar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--rule)}
html.skin-h .bucks-bar[hidden]{display:none}
html.skin-h .bucks-bar i{display:block;height:100%}
html.skin-h #vote-actual{align-self:flex-start}
@media (max-width:760px){
  html.skin-h .vfoot{position:sticky !important;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:5;margin:0 -8px;border-radius:18px;border-top:0 !important;box-shadow:0 6px 20px rgba(46,34,22,.18)}
  html.skin-h[data-theme="dark"] .vfoot{box-shadow:0 0 0 1px #34291F,0 6px 20px rgba(0,0,0,.5)}
}