/* ============================================================
   Claire — Atelier Ledger · Design System
   • 6 themes (atelier · midnight · sage · plum · ocean · charcoal-dark)
   • 4 font pairings
   • Mobile-first responsive (drawer · rail · full sidebar)
   ============================================================ */

/* Alpine.js: hide elements with x-cloak until Alpine initialises them.
   Required for x-show / x-if blocks to stay hidden during initial paint;
   without this, conditionally-shown UI flashes visible on every page load. */
[x-cloak] { display: none !important; }

/* ── Theme: ATELIER (default) ──────────────────────────────── */
:root,
[data-theme="atelier"] {
  --paper:        #F5F0E2;
  --paper-2:      #ECE4CF;
  --paper-edge:   #DCD0B0;
  --card:         #FFFCF2;
  --card-hover:   #FAF4E0;
  --ink:          #1E1A14;
  --ink-2:        #463C2C;
  --muted:        #8A7E66;
  --rule:         #D6C8A8;
  --rule-soft:    #E5DBC1;
  --accent:       #B8462B;
  --accent-2:     #8E3417;
  --accent-soft:  #F1D9CC;
  --accent-on:    #FFFAF0;
  --ok:           #5C7A2C;
  --ok-soft:      #E0E8C7;
  --warn:         #B0801A;
  --warn-soft:    #F2E2B7;
  --danger:       #93311E;
  --danger-soft:  #EFCFC6;
  --hero-bg:      #1E1A14;
  --hero-glow-1:  rgba(184,70,43,.45);
  --hero-glow-2:  rgba(92,122,44,.25);
  --hero-em:      #F7C896;
  --grain-mix:    multiply;
  --grain-alpha:  .08;
}

[data-theme="midnight"] {
  --paper:        #E9EEF6;
  --paper-2:      #D7DFEE;
  --paper-edge:   #BAC6DA;
  --card:         #F6F9FF;
  --card-hover:   #E5ECF8;
  --ink:          #0E1B30;
  --ink-2:        #2B3C58;
  --muted:        #6E7C92;
  --rule:         #BAC6DA;
  --rule-soft:    #CFD8E6;
  --accent:       #C46A3A;
  --accent-2:     #934820;
  --accent-soft:  #F2D7C2;
  --accent-on:    #FFF8F0;
  --ok:           #2D7A6B;
  --ok-soft:      #C8E4DE;
  --warn:         #B6852A;
  --warn-soft:    #EDDDB2;
  --danger:       #993333;
  --danger-soft:  #ECC5C5;
  --hero-bg:      #0E1B30;
  --hero-glow-1:  rgba(196,106,58,.50);
  --hero-glow-2:  rgba(45,122,107,.30);
  --hero-em:      #F4C49A;
}

[data-theme="sage"] {
  --paper:        #EEF0E5;
  --paper-2:      #DDE2D0;
  --paper-edge:   #C0C8AC;
  --card:         #F8FAF1;
  --card-hover:   #E7ECDA;
  --ink:          #1B2A1B;
  --ink-2:        #3A4B36;
  --muted:        #7C896E;
  --rule:         #C8CFB6;
  --rule-soft:    #DAE0CB;
  --accent:       #A1492B;
  --accent-2:     #7C3617;
  --accent-soft:  #EBCEC0;
  --accent-on:    #FBF5EE;
  --ok:           #4F7728;
  --ok-soft:      #D9E4BD;
  --warn:         #B89322;
  --warn-soft:    #EFE0AE;
  --danger:       #87302A;
  --danger-soft:  #E8C8C5;
  --hero-bg:      #1B2A1B;
  --hero-glow-1:  rgba(161,73,43,.45);
  --hero-glow-2:  rgba(79,119,40,.30);
  --hero-em:      #E9C49A;
}

[data-theme="plum"] {
  --paper:        #F2EBE9;
  --paper-2:      #E4D5D1;
  --paper-edge:   #C9B0AB;
  --card:         #FAF3F2;
  --card-hover:   #ECDFDC;
  --ink:          #2A1820;
  --ink-2:        #4F2F3E;
  --muted:        #8B7178;
  --rule:         #D4BCB9;
  --rule-soft:    #E0CDCA;
  --accent:       #B58245;
  --accent-2:     #885F2D;
  --accent-soft:  #EBD7B3;
  --accent-on:    #FFF8EE;
  --ok:           #4F7256;
  --ok-soft:      #D2DFCC;
  --warn:         #B58A2A;
  --warn-soft:    #ECDCAE;
  --danger:       #8A2E32;
  --danger-soft:  #E6C6C8;
  --hero-bg:      #2A1820;
  --hero-glow-1:  rgba(181,130,69,.45);
  --hero-glow-2:  rgba(79,114,86,.25);
  --hero-em:      #E8C683;
}

[data-theme="ocean"] {
  --paper:        #E7EDEF;
  --paper-2:      #D5DDE2;
  --paper-edge:   #B5C2C9;
  --card:         #F1F6F7;
  --card-hover:   #DCE6EA;
  --ink:          #142528;
  --ink-2:        #2F4854;
  --muted:        #6B7E85;
  --rule:         #BDC9CE;
  --rule-soft:    #D2DBDE;
  --accent:       #C76A4F;
  --accent-2:     #984B36;
  --accent-soft:  #EFCDC1;
  --accent-on:    #FFF8F2;
  --ok:           #2F6C5E;
  --ok-soft:      #C3DDD6;
  --warn:         #C09337;
  --warn-soft:    #EBD8AA;
  --danger:       #973F2E;
  --danger-soft:  #E5C7BD;
  --hero-bg:      #142528;
  --hero-glow-1:  rgba(199,106,79,.50);
  --hero-glow-2:  rgba(47,108,94,.30);
  --hero-em:      #F2BB99;
}

/* Mocha — warm coffee shop */
[data-theme="mocha"] {
  --paper:        #F0E6D5;
  --paper-2:      #DDD0B5;
  --paper-edge:   #BFAE8B;
  --card:         #F9F1DF;
  --card-hover:   #EBDFC4;
  --ink:          #2B1810;
  --ink-2:        #523C2A;
  --muted:        #8B7560;
  --rule:         #D2BC95;
  --rule-soft:    #E3D3B0;
  --accent:       #8B5A3C;
  --accent-2:     #6B4226;
  --accent-soft:  #E9D5BF;
  --accent-on:    #FBF5E8;
  --ok:           #6B7548;
  --ok-soft:      #DDDEC2;
  --warn:         #A5742B;
  --warn-soft:    #ECDDBA;
  --danger:       #8B3326;
  --danger-soft:  #EBC9BF;
  --hero-bg:      #2B1810;
  --hero-glow-1:  rgba(139,90,60,.55);
  --hero-glow-2:  rgba(107,117,72,.30);
  --hero-em:      #E9B988;
}

/* Sakura — soft cherry blossom */
[data-theme="sakura"] {
  --paper:        #F5E8E6;
  --paper-2:      #E8D4D2;
  --paper-edge:   #CFAFAD;
  --card:         #FCF1EF;
  --card-hover:   #F0DEDC;
  --ink:          #2E1A20;
  --ink-2:        #533640;
  --muted:        #8E7177;
  --rule:         #DEC2C0;
  --rule-soft:    #E8D2D0;
  --accent:       #9C3346;
  --accent-2:     #73202F;
  --accent-soft:  #ECCED1;
  --accent-on:    #FBEEF0;
  --ok:           #5C7256;
  --ok-soft:      #D6DECD;
  --warn:         #B68546;
  --warn-soft:    #ECD6B8;
  --danger:       #862838;
  --danger-soft:  #E6C2C8;
  --hero-bg:      #2E1A20;
  --hero-glow-1:  rgba(156,51,70,.55);
  --hero-glow-2:  rgba(92,114,86,.25);
  --hero-em:      #F0C9B8;
}

/* Marigold — saffron + curry leaf */
[data-theme="marigold"] {
  --paper:        #F5EDDC;
  --paper-2:      #E8DBBC;
  --paper-edge:   #C9B57F;
  --card:         #FCF6E5;
  --card-hover:   #EDE0B8;
  --ink:          #2A1E0A;
  --ink-2:        #524018;
  --muted:        #8B7A4A;
  --rule:         #D6C796;
  --rule-soft:    #E5D9B0;
  --accent:       #C76A1A;
  --accent-2:     #934811;
  --accent-soft:  #F0D5B0;
  --accent-on:    #FFF8EC;
  --ok:           #547239;
  --ok-soft:      #D8DEC0;
  --warn:         #A56720;
  --warn-soft:    #ECD7B0;
  --danger:       #8B2E1B;
  --danger-soft:  #ECC2B6;
  --hero-bg:      #2A1E0A;
  --hero-glow-1:  rgba(199,106,26,.55);
  --hero-glow-2:  rgba(84,114,57,.25);
  --hero-em:      #F2C677;
}

/* Carbon — modern dark with electric orange */
[data-theme="carbon"] {
  --logo-glow:    drop-shadow(0 0 1px rgba(255,255,255,.65)) drop-shadow(0 2px 10px rgba(255,255,255,.20));
  --hero-fg:      #F2F2F4;   /* readable light foreground for dark hero panels */
  --paper:        #0F0F11;
  --paper-2:      #1A1A1D;
  --paper-edge:   #2A2A2E;
  --card:         #1E1E22;
  --card-hover:   #28282D;
  --ink:          #E6E6E9;
  --ink-2:        #A8A8AE;
  --muted:        #6B6B72;
  --rule:         #2D2D32;
  --rule-soft:    #232328;
  --accent:       #FF7A45;
  --accent-2:     #D45A28;
  --accent-soft:  #3A1F12;
  --accent-on:    #0F0F11;
  --ok:           #9EE066;
  --ok-soft:      #1F2D15;
  --warn:         #F2C744;
  --warn-soft:    #2D2410;
  --danger:       #FF6B6B;
  --danger-soft:  #2D1515;
  --hero-bg:      #050507;
  --hero-glow-1:  rgba(255,122,69,.40);
  --hero-glow-2:  rgba(158,224,102,.18);
  --hero-em:      #FFA77A;
  --grain-mix:    screen;
  --grain-alpha:  .03;
}

/* DARK MODE — warm charcoal */
[data-theme="charcoal"] {
  --logo-glow:    drop-shadow(0 0 1px rgba(255,235,210,.55)) drop-shadow(0 2px 10px rgba(247,200,150,.22));
  --hero-fg:      #F5EBD8;   /* warm cream foreground for dark warm hero panel */
  --paper:        #1B1814;
  --paper-2:      #25221C;
  --paper-edge:   #3B342B;
  --card:         #28241D;
  --card-hover:   #312C24;
  --ink:          #ECE4CF;
  --ink-2:        #BFB392;
  --muted:        #8B7F66;
  --rule:         #3B342B;
  --rule-soft:    #2F2A22;
  --accent:       #E08056;
  --accent-2:     #B05F36;
  --accent-soft:  #4A2A1E;
  --accent-on:    #1B1814;
  --ok:           #A0BF6B;
  --ok-soft:      #2E3A1D;
  --warn:         #D8B05A;
  --warn-soft:    #3E2F14;
  --danger:       #DE7A6B;
  --danger-soft:  #3E1E18;
  --hero-bg:      #0F0D0A;
  --hero-glow-1:  rgba(224,128,86,.40);
  --hero-glow-2:  rgba(154,190,94,.20);
  --hero-em:      #F2B98D;
  --grain-mix:    screen;
  --grain-alpha:  .04;
}

/* ── Fonts ────────────────────────────────────────────────── */
:root,
[data-font="atelier"] {
  --font-display: 'Fraunces','Bai Jamjuree','IBM Plex Sans Thai Looped',serif;
  --font-body:    'IBM Plex Sans Thai Looped','IBM Plex Sans','Helvetica Neue',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Mono','IBM Plex Sans Thai Looped',ui-monospace,monospace;
  --display-vary: "opsz" 144, "wght" 480, "SOFT" 40;
  --display-em:   "opsz" 144, "wght" 460, "SOFT" 90;
}
[data-font="editorial"] {
  --font-display: 'Playfair Display','Sarabun',serif;
  --font-body:    'Sarabun','IBM Plex Sans Thai Looped',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 500;
  --display-em:   "wght" 600;
}
[data-font="modern"] {
  --font-display: 'Bricolage Grotesque','Bai Jamjuree',sans-serif;
  --font-body:    'Bai Jamjuree','IBM Plex Sans',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 600, "opsz" 60, "wdth" 100;
  --display-em:   "wght" 700, "opsz" 60, "wdth" 80;
}
[data-font="soft"] {
  --font-display: 'DM Serif Display','Prompt',serif;
  --font-body:    'Prompt','IBM Plex Sans Thai Looped',sans-serif;
  --font-mono:    'IBM Plex Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 400;
  --display-em:   "wght" 400;
}
[data-font="k2d"] {
  --font-display: 'K2D','Bai Jamjuree',sans-serif;
  --font-body:    'K2D','IBM Plex Sans Thai Looped',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 600;
  --display-em:   "wght" 700;
}
[data-font="itim"] {
  --font-display: 'Itim','Bai Jamjuree',cursive;
  --font-body:    'Itim','IBM Plex Sans Thai Looped',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 400;
  --display-em:   "wght" 400;
}
[data-font="mali"] {
  --font-display: 'Mali','Bai Jamjuree',sans-serif;
  --font-body:    'Mali','IBM Plex Sans Thai Looped',sans-serif;
  --font-mono:    'JetBrains Mono','IBM Plex Sans Thai Looped',monospace;
  --display-vary: "wght" 500;
  --display-em:   "wght" 600;
}

/* Font card preview — each card shows its own font, not the active one */
.font-card[data-font="atelier"]   .sample { font-family: 'Fraunces','Bai Jamjuree',serif; font-variation-settings: "opsz" 60,"wght" 480; }
.font-card[data-font="atelier"]   .sample em { font-style: italic; font-variation-settings: "opsz" 60,"wght" 460; }
.font-card[data-font="editorial"] .sample { font-family: 'Playfair Display','Sarabun',serif; font-weight: 500; }
.font-card[data-font="editorial"] .sample em { font-style: italic; font-weight: 600; }
.font-card[data-font="modern"]    .sample { font-family: 'Bricolage Grotesque','Bai Jamjuree',sans-serif; font-weight: 600; font-variation-settings: "wdth" 100; }
.font-card[data-font="modern"]    .sample em { font-style: normal; font-weight: 700; font-variation-settings: "wdth" 85; }
.font-card[data-font="soft"]      .sample { font-family: 'DM Serif Display','Prompt',serif; font-weight: 400; }
.font-card[data-font="soft"]      .sample em { font-style: italic; }
.font-card[data-font="k2d"]       .sample { font-family: 'K2D','Bai Jamjuree',sans-serif; font-weight: 600; }
.font-card[data-font="k2d"]       .sample em { font-style: italic; font-weight: 700; }
.font-card[data-font="itim"]      .sample { font-family: 'Itim','Bai Jamjuree',cursive; font-weight: 400; }
.font-card[data-font="itim"]      .sample em { font-style: normal; }
.font-card[data-font="mali"]      .sample { font-family: 'Mali','Bai Jamjuree',sans-serif; font-weight: 500; }
.font-card[data-font="mali"]      .sample em { font-style: italic; font-weight: 600; }

/* ── Font-size scale (overridable per [data-fontsize]) ──── */
:root, [data-fontsize="normal"] { --fs-scale: 1; }
[data-fontsize="compact"]       { --fs-scale: 0.92; }
[data-fontsize="large"]         { --fs-scale: 1.10; }
[data-fontsize="xl"]            { --fs-scale: 1.20; }

/* ── Base typography ─────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-feature-settings: "ss01","cv11"; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--fs-scale));
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Reset <em>: by default browsers render italic. We use <em> as an upright
   colour accent in headlines, so default it to non-italic system-wide.
   Opt back in via .italic-serif or per-component rules (font previews, seal, etc). */
em { font-style: normal; }
.display, h1.display, h2.display, .font-display {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vary);
  letter-spacing: -0.01em;
  line-height: 1.22;     /* breathing room for Thai diacritics */
  color: var(--ink);
}
.serif { font-family: var(--font-display); font-variation-settings: "opsz" 30, "wght" 480; }
.italic-serif { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 30, "wght" 400; }
.mono, .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum","zero";
  letter-spacing: -0.02em;
}
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: calc(10.5px * var(--fs-scale));
  color: var(--muted);
}

/* ── Paper texture ────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--paper-edge) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, var(--accent-soft) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 240px 240px;
  mix-blend-mode: var(--grain-mix);
  opacity: var(--grain-alpha);
}
.app-shell > *, .topbar, .drawer { position: relative; z-index: 1; }

/* ── App shell ────────────────────────────────────────────── */
/* No z-index here on purpose: it would create a stacking context that
   traps the fixed-position sidebar below the mobile drawer mask. */
.app-shell { display: flex; min-height: 100vh; position: relative; }

/* ── Sidebar (desktop) ───────────────────────────────────── */
.sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  padding: 24px 16px 18px;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  transition: width .25s ease, transform .25s ease;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 6px 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: calc(38px * var(--fs-scale)); line-height: .85;
  color: var(--accent);
  flex: 0 0 auto;
}
.brand-logo {
  height: calc(60px * var(--fs-scale));
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  /* A gentle shadow lifts the logo off any background. Light themes get a
     soft warm-dark shadow (subtle depth); dark themes override --logo-glow
     with a bright halo so dark-on-dark marks read clearly. */
  filter: var(--logo-glow,
            drop-shadow(0 1px 2px rgba(60,40,20,.18))
            drop-shadow(0 4px 14px rgba(60,40,20,.10)));
}
.brand:has(> .brand-logo) {
  /* Logo-only brand: tight padding, less vertical breathing room. */
  justify-content: center;
  padding: 0 6px 10px;
  margin-bottom: 8px;
}
.brand-text { min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30, "wght" 560;
  font-size: calc(18px * var(--fs-scale)); letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-sub { display:block; font-size: calc(10px * var(--fs-scale)); color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top:1px; font-family: var(--font-mono); }

.side-section {
  font-size: calc(10px * var(--fs-scale)); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 10px 6px;
  font-family: var(--font-mono);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--ink-2);
  font-size: calc(14px * var(--fs-scale));
  text-decoration: none;
  position: relative;
  transition: background .15s, color .15s;
  min-width: 0;
}
.side-link .ic {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--muted);
  font-size: calc(16px * var(--fs-scale));
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, transform .15s;
}
.side-link .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link:hover { background: var(--card-hover); color: var(--ink); }
.side-link:hover .ic { color: var(--accent); }
.side-link.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-weight: 540;
}
.side-link.active::before {
  content: ''; position: absolute; left: -16px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.side-link.active .ic { color: var(--accent); }

.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.side-foot .who { color: var(--ink-2); font-weight: 540; }
.side-foot .who-row { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-on);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: "opsz" 30, "wght" 560;
  font-size: calc(14px * var(--fs-scale));
  flex: 0 0 auto;
}
.who-info { flex: 1; min-width: 0; }
.who-info .who, .who-info .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.who-info .em { font-size: calc(11px * var(--fs-scale)); color: var(--muted); }

/* Theme button (sidebar) */
.theme-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  font-size: calc(12.5px * var(--fs-scale));
  margin-top: 10px;
  transition: background .15s, border-color .15s;
}
.theme-trigger:hover { background: var(--card-hover); border-color: var(--ink-2); color: var(--ink); }
.theme-trigger .ic { font-size: calc(14px * var(--fs-scale)); color: var(--accent); }
.theme-trigger .label { flex: 1; text-align: left; }
.theme-trigger .swatch {
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--ink) 50%, var(--accent) 50%);
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}

/* ── Mobile top bar (hidden by default) ──────────────────── */
.topbar { display: none; }

/* ── Main area ───────────────────────────────────────────── */
.main { flex: 1; min-width: 0; padding: 28px 36px 56px; }
.main-inner { max-width: 1180px; margin: 0 auto; }

.page-head { margin-bottom: 22px; }
.page-head .eyebrow { display:block; margin-bottom: 4px; }
.page-head h1 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vary);
  font-size: calc(clamp(24px, 3.2vw, 34px) * var(--fs-scale)); line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.page-head h1 em { color: var(--accent); font-variation-settings: var(--display-em); }
.page-head .lede { color: var(--ink-2); font-size: calc(14px * var(--fs-scale)); margin-top: 6px; max-width: 60ch; }
.page-head .top-row { display:flex; align-items:flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  position: relative;
}
.card.soft { box-shadow: 0 1px 0 var(--rule), 0 2px 18px -8px rgba(0,0,0,.08); }
.card-p     { padding: 22px 24px; }
.card-pad   { padding: 28px 30px; }
.card-tight { padding: 14px 16px; }
.card-h {
  display:flex; align-items:baseline; justify-content: space-between; gap: 12px;
  padding: 16px 24px 14px; border-bottom: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.card-h h2 { font-family: var(--font-display); font-variation-settings:"opsz" 30,"wght" 560; font-size: calc(18px * var(--fs-scale)); color: var(--ink); margin: 0; }
.card-h .meta { font-size: calc(12px * var(--fs-scale)); color: var(--muted); font-family: var(--font-mono); letter-spacing: .04em; }

/* Stat card */
.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px 16px;
  position: relative;
  overflow: hidden;
}
.stat .label { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.stat .value { font-family: var(--font-display); font-variation-settings: var(--display-vary); font-size: calc(34px * var(--fs-scale)); line-height: 1.1; margin-top: 6px; color: var(--ink); letter-spacing: -0.02em; }
.stat .value.num { font-family: var(--font-mono); font-size: calc(28px * var(--fs-scale)); font-variation-settings: normal; }
.stat .unit { font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-left: 6px; }
.stat .sub  { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); margin-top: 4px; }
.stat.accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-color: var(--accent-2); color: var(--accent-on); }
.stat.accent .label, .stat.accent .sub { color: color-mix(in srgb, var(--accent-on) 75%, transparent); }
.stat.accent .value { color: var(--accent-on); }
.stat .corner-mark { position: absolute; top: 10px; right: 14px; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); color: var(--rule); letter-spacing: .08em; }
.stat.warn .value { color: var(--warn); }
.stat.ok   .value { color: var(--ok); }

/* ── Table (ledger style) ─────────────────────────────────── */
.ledger-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--fs-scale)); }
.ledger thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--fs-scale)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper-edge) 18%, transparent), transparent);
  white-space: nowrap;
}
.ledger tbody td { padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: var(--card-hover); }
.ledger tr.flagged td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ledger .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger .id { color: var(--muted); font-size: calc(12px * var(--fs-scale)); }
.ledger a { color: var(--ink); text-decoration: none; }
.ledger a:hover { color: var(--accent); }

/* Mobile card-list for tables (opt-in: add .ledger-cards) */
@media (max-width: 720px) {
  .ledger-cards.ledger thead { display: none; }
  .ledger-cards.ledger tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); }
  .ledger-cards.ledger tbody td { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border: 0; }
  .ledger-cards.ledger tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-right: 12px;
  }
  .ledger-cards.ledger tbody td.num { text-align: right; }
  .ledger-cards.ledger tbody td.no-label::before { display: none; }
}

/* ── Pills / Badges ──────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: calc(11.5px * var(--fs-scale)); font-family: var(--font-mono);
  letter-spacing: 0.06em; border: 1px solid currentColor;
  color: var(--ink-2); background: transparent; line-height: 1.6;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.solid::before { background: var(--paper); }
.pill.raw   { color: var(--ink-2); }
.pill.semi  { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.product { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.pill.ok      { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.pill.danger  { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.pill.warn    { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.ghost   { color: var(--muted); border-color: var(--rule); }

.tag { display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 4px; font-size: calc(11px * var(--fs-scale)); background: var(--paper-2); color: var(--ink-2); font-family: var(--font-mono); letter-spacing: .04em; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px;
  font-size: calc(13.5px * var(--fs-scale)); font-weight: 540;
  border: 1px solid transparent;
  background: transparent; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  font-family: inherit;
}
.btn .ic { font-size: calc(13px * var(--fs-scale)); display: inline-flex; align-items: center; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-on); }
.btn-accent  { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-accent:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ok      { background: var(--ok); color: var(--accent-on); border-color: var(--ok); }
.btn-ok:hover:not(:disabled) { filter: brightness(.9); }
.btn-warn    { background: var(--warn); color: var(--accent-on); border-color: var(--warn); }
.btn-warn:hover:not(:disabled) { filter: brightness(.9); }
.btn-ghost   { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.btn-ghost:hover:not(:disabled) { background: var(--card); border-color: var(--ink-2); color: var(--ink); }
.btn-sm   { padding: 6px 12px; font-size: calc(12.5px * var(--fs-scale)); }
.btn-icon { width: 36px; padding: 0; justify-content: center; }
.btn-block { width: 100%; justify-content: center; }

/* ── Forms ────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--fs-scale)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink-2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: calc(14px * var(--fs-scale)); color: var(--ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.num, .num.input { font-family: var(--font-mono); }
.helper { font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-top: 6px; }

/* ── Tom Select skin ──────────────────────────────────────── */
.ts-wrapper .ts-control {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-bottom-color: var(--ink-2) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-height: 38px;
  font-family: inherit !important;
  font-size: calc(14px * var(--fs-scale)) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.ts-wrapper.focus .ts-control { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.ts-wrapper .ts-dropdown {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.25) !important;
  margin-top: 4px !important;
  padding: 4px !important;
  color: var(--ink) !important;
}
.ts-dropdown .option { padding: 8px 12px !important; border-radius: 4px !important; color: var(--ink-2) !important; font-size: calc(14px * var(--fs-scale)); }
.ts-dropdown .option.active { background: var(--accent-soft) !important; color: var(--accent-2) !important; }
.ts-dropdown .option.selected { background: var(--paper-2) !important; color: var(--ink) !important; font-weight: 540; }
.ts-dropdown .no-results { color: var(--muted); padding: 10px 12px; font-style: italic; }
.ts-wrapper.plugin-clear_button .clear-button { color: var(--muted) !important; }
.ts-wrapper.multi .item { background: var(--accent-soft) !important; color: var(--accent-2) !important; border: 0 !important; }

/* ── Flatpickr Thai skin ──────────────────────────────────── */
.flatpickr-calendar {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.25) !important;
  font-family: inherit !important;
}
.flatpickr-months { background: var(--paper-2) !important; border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; }
.flatpickr-month, .flatpickr-current-month, .flatpickr-weekdays { color: var(--ink) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-family: var(--font-display) !important;
  font-variation-settings:"opsz" 30,"wght" 560;
  font-size: calc(16px * var(--fs-scale)) !important; color: var(--ink) !important;
}
.flatpickr-weekday { font-family: var(--font-mono) !important; font-size: calc(10px * var(--fs-scale)) !important; letter-spacing: .12em; color: var(--muted) !important; }
.flatpickr-day { color: var(--ink-2) !important; border-radius: 4px !important; }
.flatpickr-day.today { border-color: var(--accent) !important; color: var(--accent) !important; }
.flatpickr-day.selected { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-on) !important; }
.flatpickr-day:hover { background: var(--accent-soft) !important; }
.flatpickr-day.disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--rule) !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--ink-2) !important; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: var(--hero-bg);
  color: var(--hero-fg, var(--paper));
  border-radius: 10px;
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 10%, var(--hero-glow-1), transparent 45%),
    radial-gradient(circle at 5% 110%, var(--hero-glow-2), transparent 55%);
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: color-mix(in srgb, var(--hero-fg, var(--paper)) 60%, transparent); }
.hero h2 { font-family: var(--font-display); font-variation-settings: var(--display-vary); font-size: calc(clamp(20px, 2.8vw, 28px) * var(--fs-scale)); line-height: 1.25; margin: 8px 0 0; max-width: 28ch; }
.hero h2 em { color: var(--hero-em); font-variation-settings: var(--display-em); }
.hero .meta { color: color-mix(in srgb, var(--hero-fg, var(--paper)) 60%, transparent); font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .14em; text-transform: uppercase; margin-top: 18px; }
.hero .seal {
  position: absolute; top: 22px; right: 28px;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--paper) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-variation-settings:"opsz" 144, "wght" 540;
  font-size: calc(22px * var(--fs-scale)); color: color-mix(in srgb, var(--paper) 85%, transparent);
  text-align: center;
}
.hero .stamp {
  position: absolute; bottom: 16px; right: 26px;
  font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale));
  color: color-mix(in srgb, var(--paper) 50%, transparent);
  letter-spacing: .2em; text-transform: uppercase;
}

/* ── Flash ────────────────────────────────────────────────── */
.flash {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: calc(13.5px * var(--fs-scale));
  display: flex; align-items: center; gap: 10px;
  border-left: 3px solid;
}
.flash.success { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.flash.error   { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ── Misc ─────────────────────────────────────────────────── */
.rule { height: 1px; background: var(--rule); border: 0; }
.rule-dashed { height: 0; border: 0; border-top: 1px dashed var(--rule); }
.divide-rule > * + * { border-top: 1px solid var(--rule-soft); }

.icon-btn { display:inline-flex; align-items:center; justify-content:center; width: 32px; height: 32px; border-radius: 6px; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }

.empty {
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 44px 28px;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.empty .mark { font-family: var(--font-display); font-style:italic; font-variation-settings:"opsz" 144,"wght" 540; font-size: calc(42px * var(--fs-scale)); color: var(--rule); margin-bottom: 8px; line-height:1; }
.empty a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.callout {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: calc(13px * var(--fs-scale));
  color: var(--ink-2);
}

/* ── uicons sizing helpers ────────────────────────────────── */
.fi { display: inline-flex; line-height: 0; vertical-align: middle; }
i.fi::before { line-height: 1; }

/* ── Modal ────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal.open { display: flex; }
.modal-mask {
  position: absolute; inset: 0;
  background: rgba(20,15,10,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: modalIn .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Theme drawer ────────────────────────────────────────── */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(20,15,10,.45);
  backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 92vw;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  z-index: 50;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 40px -20px rgba(0,0,0,.20);
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.drawer-head h3 { font-family: var(--font-display); font-variation-settings:"opsz" 30,"wght" 560; font-size: calc(22px * var(--fs-scale)); margin: 0; color: var(--ink); }
.drawer-body { padding: 22px 24px 32px; overflow-y: auto; flex: 1; }
.drawer-section + .drawer-section { margin-top: 24px; }
.drawer-section h4 { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale)); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--card);
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  font-family: inherit;
  transition: transform .12s, border-color .15s;
}
.theme-card:hover { transform: translateY(-1px); border-color: var(--ink-2); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-card .name { font-family: var(--font-display); font-variation-settings:"opsz" 30,"wght" 540; font-size: calc(15px * var(--fs-scale)); color: var(--ink); }
.theme-card .swatches { display: flex; gap: 4px; }
.theme-card .swatches i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.06); display: block; }

.fs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fs-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-2);
  transition: border-color .15s, background .15s;
  min-height: 70px;
}
.fs-card:hover { border-color: var(--ink-2); color: var(--ink); }
.fs-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--accent); }
.fs-card .fs-sample { font-family: var(--font-display); font-variation-settings: "wght" 540; line-height: 1; color: var(--ink); }
.fs-card[aria-pressed="true"] .fs-sample { color: var(--accent); }
.fs-card .fs-id { font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lang-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  font-size: calc(14px * var(--fs-scale));
  transition: border-color .15s, background .15s;
}
.lang-card:hover { border-color: var(--ink-2); }
.lang-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lang-card .flag { font-size: calc(18px * var(--fs-scale)); }
.lang-card .name { font-weight: 540; }

.font-list { display: flex; flex-direction: column; gap: 8px; }
.font-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--card);
  cursor: pointer; text-align: left;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s;
}
.font-card:hover { border-color: var(--ink-2); }
.font-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* Font preview samples are demos — keep literal size, don't scale with user pref. */
.font-card .sample { font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.font-card .sample em { font-style: italic; color: var(--accent); }
.font-card .key { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Page-load motion */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise > * { opacity: 0; animation: rise .55s cubic-bezier(.2,.7,.2,1) forwards; }
.rise > *:nth-child(1){ animation-delay:.04s; }
.rise > *:nth-child(2){ animation-delay:.10s; }
.rise > *:nth-child(3){ animation-delay:.16s; }
.rise > *:nth-child(4){ animation-delay:.22s; }
.rise > *:nth-child(5){ animation-delay:.28s; }
.rise > *:nth-child(6){ animation-delay:.34s; }
.rise > *:nth-child(7){ animation-delay:.40s; }

/* ============================================================
   Responsive — tablet rail + mobile drawer + content stacks
   ============================================================ */

/* Tablet: collapsed sidebar rail (icons only) */
@media (min-width: 721px) and (max-width: 1023px) {
  .sidebar {
    width: 72px; flex: 0 0 72px; padding: 22px 10px 14px;
  }
  .brand { padding: 0 0 18px; justify-content: center; }
  .brand-text, .side-section, .side-foot .who-info, .side-foot .em,
  .theme-trigger .label, .theme-trigger .swatch { display: none; }
  .side-link { justify-content: center; padding: 10px; }
  .side-link .label { display: none; }
  .side-link.active::before { left: -10px; }
  .side-foot .who-row { justify-content: center; }
  .theme-trigger { justify-content: center; padding: 8px; }
  .main { padding: 32px 28px 56px; }
}

/* Mobile: hide sidebar, show topbar, slide-in drawer */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; flex: none;
    transform: translateX(-100%);
    z-index: 60;
    box-shadow: 20px 0 40px -20px rgba(0,0,0,.20);
  }
  .sidebar.open { transform: translateX(0); }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40;
    height: 56px; padding: 0 14px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .topbar .menu-btn, .topbar .theme-btn {
    width: 40px; height: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--ink-2);
    font-size: calc(18px * var(--fs-scale)); cursor: pointer;
  }
  .topbar .menu-btn:hover, .topbar .theme-btn:hover { background: var(--card-hover); color: var(--ink); }
  .topbar .brand-mini { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
  .topbar .brand-mini .brand-mark { font-size: calc(26px * var(--fs-scale)); }
  .topbar .brand-mini .brand-name { font-size: calc(15px * var(--fs-scale)); }

  .main { padding: 22px 18px 80px; }
  .page-head { margin-bottom: 22px; }
  .page-head .top-row { gap: 14px; }
  .page-head h1 { font-size: calc(clamp(26px, 7vw, 34px) * var(--fs-scale)); }
  .page-head .lede { font-size: calc(14px * var(--fs-scale)); }

  .hero { padding: 24px 22px; }
  .hero .seal { width: 64px; height: 64px; font-size: calc(18px * var(--fs-scale)); top: 18px; right: 18px; }
  .page-head .folio { text-align: left !important; }
  /* in normal flow on phones so it never overlaps the bottleneck line */
  .hero .stamp { position: static; display: block; margin-top: 16px; text-align: right; font-size: calc(9px * var(--fs-scale)); }

  .card-pad { padding: 22px 18px; }
  .card-p { padding: 18px 18px; }
  .card-h { padding: 14px 18px 12px; }

  .stat { padding: 16px 16px 18px; }
  .stat .value { font-size: calc(36px * var(--fs-scale)); }
  .stat .value.num { font-size: calc(30px * var(--fs-scale)); }

  .ledger thead th, .ledger tbody td { padding: 10px 12px; font-size: calc(13px * var(--fs-scale)); }
  .grid-2-mobile-1 { grid-template-columns: 1fr !important; }

  .drawer { width: 100%; max-width: 100%; }
}

/* Very small phones */
@media (max-width: 380px) {
  .main { padding: 18px 14px 80px; }
  .card-pad { padding: 18px 14px; }
  .hero { padding: 20px 18px; }
  .hero h2 { font-size: calc(22px * var(--fs-scale)); }
  .hero .seal { display: none; }
}

/* ── Drag-and-drop file zone ─────────────────────────────── */
.dropzone {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.dropzone:hover { border-color: var(--ink-2); background: var(--card-hover, var(--paper-2)); }
.dropzone:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dropzone.is-over {
  border-color: var(--accent); border-style: solid;
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dropzone.has-file { border-style: solid; border-color: var(--ok); }
.dropzone .dz-input {
  /* visually hidden but still submitted with the form */
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.dropzone .dz-icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--accent);
  font-size: calc(18px * var(--fs-scale));
  transition: transform .15s;
}
.dropzone.is-over .dz-icon { transform: translateY(-2px); background: var(--card); }
.dropzone .dz-text { min-width: 0; flex: 1; }
.dropzone .dz-title { font-size: calc(13.5px * var(--fs-scale)); color: var(--ink); font-weight: 500; }
.dropzone .dz-title .dz-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dropzone .dz-hint { font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-top: 2px; }
.dropzone .dz-file {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: calc(11.5px * var(--fs-scale));
  color: var(--ok);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropzone .dz-file.dz-error { color: var(--danger); white-space: normal; }

/* Print friendly */
@media print {
  body::before, .sidebar, .topbar, .drawer, .drawer-mask, .btn, .icon-btn { display: none !important; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}