/* =====================================================================
   Holly — "the stationer's Christmas" design system
   Bodoni Moda for display, DM Sans for reading, Pinyon Script for the
   flourishes and Courier Prime for the typed labels. Ivory paper,
   cranberry pinstripe bands, polaroids under tape, wax seals, satin
   bows, gift tags and hand-circled dates. Seven palettes, one dark.
   ===================================================================== */
:root {
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --r: 14px; --r-sm: 10px; --bw: 1px;
  --side: 284px;
  --soft: 0 1px 2px rgb(40 10 12 / .06), 0 10px 28px -14px rgb(40 10 12 / .28);
  --lift: 0 1px 1px rgb(40 10 12 / .05), 0 18px 36px -18px rgb(40 10 12 / .38);
  --tk: 1;
}
:root, [data-theme="cranberry"] {
  --paper: #F7F2EA; --surface: #FFFCF7; --surface2: #F1E9DD; --ink: #2B1416; --ink2: #563A3B; --muted: #745A59; --line: #D8C8B6; --hair: #E8DDCE;
  --band: #7C1D25; --band2: #701A21; --band-ink: #FBF3E8; --band-muted: #EBCFC6;
  --accent: #9E1B2A; --accent-ink: #FFF8F0; --script-c: #9E1B2A; --gold: #B68A35; --gold-soft: #E8D3A2; --ribbon: #A3202E; --ribbon-dark: #6E1520; --seal: #8A1723; --leaf: #1F4A36; --berry: #B32234;
  --t1: #F0D9D3; --t2: #F5E3BE; --t3: #DCE7DA; --t4: #D9E6DE; --t5: #E9DCEB; --t6: #EDE5D8; --on: #2B1416;
  --good: #24683F; --warn: #94560A; --bad: #A61B2B;
  --c1: #9E1B2A; --c2: #B68A35; --c3: #1F6A4A; --c4: #6E7F96; --c5: #C66B4F;
}
[data-theme="mistletoe"] {
  --paper: #F4F2EA; --surface: #FFFDF8; --surface2: #ECE8DC; --ink: #16261E; --ink2: #3D4C43; --muted: #5E6A61; --line: #CFD3C4; --hair: #E2E2D6;
  --band: #1F4A36; --band2: #1B4130; --band-ink: #F6F2E6; --band-muted: #CFE0D2;
  --accent: #1F5A40; --accent-ink: #FBF8EE; --script-c: #9E1B2A; --gold: #A8843C; --gold-soft: #E5D3A6; --ribbon: #A3202E; --ribbon-dark: #6E1520; --seal: #8A1723; --leaf: #1F4A36; --berry: #B32234;
  --t1: #DCE8DE; --t2: #F2E4C3; --t3: #F0DAD5; --t4: #D6E7DB; --t5: #E4E0EE; --t6: #ECE7DA; --on: #16261E;
  --good: #24683F; --warn: #8F5A0C; --bad: #A61B2B;
  --c1: #1F6A4A; --c2: #A8843C; --c3: #9E1B2A; --c4: #6E7F96; --c5: #C66B4F;
}
[data-theme="champagne"] {
  --paper: #FBF5EF; --surface: #FFFDFA; --surface2: #F5EAE2; --ink: #3A2326; --ink2: #634649; --muted: #7C6164; --line: #E6D2C8; --hair: #F0E2DA;
  --band: #A4505C; --band2: #9A4954; --band-ink: #FFF7F1; --band-muted: #F6D8D3;
  --accent: #96404D; --accent-ink: #FFF8F3; --script-c: #96404D; --gold: #B48E55; --gold-soft: #EEDCBB; --ribbon: #C27A84; --ribbon-dark: #8E4652; --seal: #B0606C; --leaf: #5F7D66; --berry: #B5495A;
  --t1: #F5DCD8; --t2: #F3E5C9; --t3: #E2E9DD; --t4: #DCEADF; --t5: #ECDFEC; --t6: #F2E9E1; --on: #3A2326;
  --good: #3B7550; --warn: #95600F; --bad: #A6293A;
  --c1: #B0606C; --c2: #B48E55; --c3: #5F7D66; --c4: #7C86A6; --c5: #D08C72;
}
[data-theme="cocoa"] {
  --paper: #F5EFE6; --surface: #FFFCF6; --surface2: #ECE3D6; --ink: #2A1A15; --ink2: #523D35; --muted: #6E5A51; --line: #DACBB8; --hair: #E8DECF;
  --band: #4A2A22; --band2: #43251E; --band-ink: #F8EEDF; --band-muted: #E6D3C2;
  --accent: #7A3E28; --accent-ink: #FFF7EC; --script-c: #8F3A2A; --gold: #B9864F; --gold-soft: #EBD5B5; --ribbon: #9E3B2E; --ribbon-dark: #6A251C; --seal: #7E2B22; --leaf: #3D5A43; --berry: #A6362C;
  --t1: #EBD9CB; --t2: #F1E2C2; --t3: #DDE5D6; --t4: #D8E3D7; --t5: #E6DCE3; --t6: #EEE6DA; --on: #2A1A15;
  --good: #3C6E3A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #7A3E28; --c2: #B9864F; --c3: #3D6A4E; --c4: #6E7F96; --c5: #C0704E;
}
[data-theme="frost"] {
  --paper: #F2F5F8; --surface: #FDFEFF; --surface2: #E7EDF3; --ink: #14202F; --ink2: #3A4859; --muted: #586677; --line: #CAD5E1; --hair: #DFE6EE;
  --band: #1E3554; --band2: #1B304C; --band-ink: #F2F6FA; --band-muted: #C9D8E8;
  --accent: #23466F; --accent-ink: #F7FAFD; --script-c: #23466F; --gold: #8C9BAE; --gold-soft: #D9E1EA; --ribbon: #7E95B0; --ribbon-dark: #4D6584; --seal: #2E4D74; --leaf: #3D6670; --berry: #A33A4A;
  --t1: #D9E4EF; --t2: #E6E8EE; --t3: #DCEAE8; --t4: #D7E8E0; --t5: #E3E0EE; --t6: #EAEFF4; --on: #14202F;
  --good: #2E6E4A; --warn: #8A5A0E; --bad: #A12A3A;
  --c1: #23466F; --c2: #7E95B0; --c3: #3D7C7A; --c4: #A33A4A; --c5: #8C7AB0;
}
[data-theme="pewter"] {
  --paper: #F2F1EE; --surface: #FCFCFA; --surface2: #E8E6E1; --ink: #1C1D20; --ink2: #44464B; --muted: #5F6166; --line: #D3D0C9; --hair: #E2E0DA;
  --band: #33363B; --band2: #2E3135; --band-ink: #F3F1EC; --band-muted: #D5D2CA;
  --accent: #33363B; --accent-ink: #F7F6F2; --script-c: #6F5A2C; --gold: #A88E57; --gold-soft: #E3D8BE; --ribbon: #6B6F76; --ribbon-dark: #44474D; --seal: #4A4D53; --leaf: #4E5E52; --berry: #8A3B3B;
  --t1: #E1DFDA; --t2: #ECE3CC; --t3: #DCE2DA; --t4: #DAE3DC; --t5: #E2E0E6; --t6: #ECEAE5; --on: #1C1D20;
  --good: #2E6E4A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #44474D; --c2: #A88E57; --c3: #4E6E5A; --c4: #6E7F96; --c5: #A0584A;
}
[data-theme="midnight"] {
  --paper: #1B1214; --surface: #251A1C; --surface2: #301F22; --ink: #F3E9E2; --ink2: #DCCBC4; --muted: #B4A19A; --line: #4A3236; --hair: #3A272A;
  --band: #4A141B; --band2: #42111A; --band-ink: #F8EBDF; --band-muted: #E2C3BB;
  --accent: #D7B263; --accent-ink: #1B1214; --script-c: #E6C47C; --gold: #D7B263; --gold-soft: #E8D3A2; --ribbon: #B32A3A; --ribbon-dark: #7A1824; --seal: #8E1E2A; --leaf: #3D7356; --berry: #D04050;
  --t1: #4A2A2E; --t2: #4A3E25; --t3: #2A3D33; --t4: #283D32; --t5: #3A2D3E; --t6: #33292A; --on: #F3E9E2;
  --good: #8FD3A5; --warn: #F0C46E; --bad: #FF8E98;
  --c1: #E06070; --c2: #D7B263; --c3: #6FC59A; --c4: #93AACB; --c5: #E59A7A;
  --soft: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .7); --lift: 0 18px 40px -18px rgb(0 0 0 / .8); --tk: .6;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  background-image: repeating-linear-gradient(0deg, rgb(120 80 60 / .022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(120 80 60 / .018) 0 1px, transparent 1px 4px); }
[data-theme="midnight"] body { background-image: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; line-height: 1.08; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
h3 { font-size: 1.12rem; }
h1 em, h2 em, h3 em { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--script-c); font-size: 1.22em; letter-spacing: 0; line-height: .9; padding: 0 .08em; }
.plain h1 em, .plain h2 em, .plain h3 em { font-family: var(--display); font-style: italic; font-size: 1em; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; color: var(--script-c); }
.plain .script { font-family: var(--display); font-style: italic; }
p { margin: 0 0 .8rem; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; }
.small { font-size: .85rem; } .muted { color: var(--muted); } .num { font-variant-numeric: tabular-nums lining-nums; }
.label { display: inline-flex; align-items: center; gap: .35rem; font: 700 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.label .ic { width: 14px; height: 14px; }
.hand { font-family: var(--script); font-weight: 400; color: var(--script-c); font-size: 1.25em; line-height: 1.1; }
.plain .hand { font-family: var(--display); font-style: italic; font-size: 1em; color: inherit; }
.pos { color: var(--good); } .neg { color: var(--bad); } .warn { color: var(--warn); }
.section { margin-top: 2rem; } .section-sm { margin-top: 1rem; }
.stack { display: grid; gap: .8rem; }
.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.big { font: 500 clamp(2rem, 4.6vw, 2.8rem)/1 var(--display); letter-spacing: -.02em; display: block; }
h3.mini { display: flex; align-items: center; gap: .4rem; font: 700 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 .55rem; }
h3.mini .ic { width: 15px; height: 15px; }
kbd { display: inline-block; min-width: 1.6em; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font: 700 .78rem/1.4 var(--mono); text-align: center; }

/* Gold sparkles */
.spk { width: 16px; height: 16px; fill: var(--gold); flex: none; vertical-align: -2px; }
.plain .spk { display: none; }

/* ---------- Ornaments ---------- */
.bow .bw-loop { fill: var(--ribbon); } .bow .bw-tail { fill: var(--ribbon-dark); } .bow .bw-knot { fill: var(--ribbon-dark); }
.bow .bw-fold { fill: none; stroke: var(--ribbon-dark); stroke-width: 2.5; opacity: .55; stroke-linecap: round; }
.seal .sl-wax { fill: var(--seal); } .seal .sl-ring { fill: none; stroke: rgb(0 0 0 / .22); stroke-width: 3; } .seal .sl-ring2 { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 1.5; }
.seal .sl-letter { fill: rgb(255 240 230 / .82); font: 400 34px var(--display); } .seal .sl-shine { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 3; stroke-linecap: round; }
.holly .hl-leaf { fill: var(--leaf); } .holly .hl-vein { fill: none; stroke: rgb(255 255 255 / .25); stroke-width: 1.2; } .holly .hl-berry { fill: var(--berry); } .holly .hl-glint { fill: rgb(255 255 255 / .6); }
.pen-circle { position: absolute; inset: -18% -32%; width: 164%; height: 136%; pointer-events: none; overflow: visible; }
.pen-circle path { fill: none; stroke: var(--berry); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: pen 1.1s .3s ease-out forwards; vector-effect: non-scaling-stroke; }
@keyframes pen { to { stroke-dashoffset: 0; } }
.plain .pen-circle, .plain .bow, .plain .holly { display: none; }
.gtag { display: inline-flex; align-items: center; gap: .25rem; padding: .14rem .6rem .14rem .35rem; border: 1px solid var(--line); border-radius: 4px 999px 999px 4px; background: var(--surface); font: 700 .66rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); padding-left: 12px; }
.gtag svg { width: 10px; height: 10px; fill: var(--paper); stroke: var(--line); }

/* ---------- Shell: the sticky sidebar ---------- */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 40; display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem 1rem 1rem; color: var(--band-ink); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent;
  background: repeating-linear-gradient(90deg, var(--band) 0 14px, var(--band2) 14px 28px); }
.plain .side { background: var(--band); }
.side .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; padding: 0 .3rem; }
.brand b { display: block; font: 400 2.3rem/.9 var(--script); letter-spacing: 0; }
.plain .brand b { font: 500 1.6rem/1 var(--display); }
.brand small { display: block; font: 700 .64rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .78; margin-top: .3rem; }
.logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .3)); }
.logo .seal { width: 100%; height: 100%; }
.side .logo .seal .sl-wax { fill: color-mix(in srgb, var(--seal) 70%, #000); }
.side-year { display: grid; gap: .4rem; padding: .7rem .7rem .75rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 12px; background: rgb(0 0 0 / .12); }
.side-year .label { color: var(--band-muted); }
.years { display: flex; gap: .3rem; flex-wrap: wrap; }
.years button { all: unset; cursor: pointer; padding: .32rem .62rem; border-radius: 999px; font: 700 .82rem/1 var(--mono); letter-spacing: .04em; border: 1px solid rgb(255 255 255 / .28); color: var(--band-ink); }
.years button:hover { background: rgb(255 255 255 / .1); }
.years button[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold-soft); color: #2B1416; }
.years .yr-new { display: inline-grid; place-items: center; padding: .28rem .45rem; border-style: dashed; }
.years .yr-new .ic { width: 14px; height: 14px; }
.years button:focus-visible { outline: 2.5px solid var(--gold-soft); outline-offset: 2px; }
.years.on-hero { margin-top: 1rem; }
.side .dumpbox { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .25); }
.side .dumpbox .input { color: var(--band-ink); }
.side .dumpbox .input::placeholder { color: var(--band-muted); opacity: .85; }
.dumpbox { display: flex; align-items: center; gap: .3rem; padding: .25rem .25rem .25rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.dumpbox .input { border: 0; background: transparent; padding: .45rem 0; min-width: 0; flex: 1; box-shadow: none; font-size: .88rem; }
.dumpbox .input:focus { outline: none; }
.dumpbox:focus-within { outline: 2.5px solid var(--gold-soft); outline-offset: 2px; }
.dumpbox .icon-btn { width: 32px; height: 32px; background: var(--gold-soft); color: #2B1416; border-color: transparent; }
.modal-body .dumpbox .icon-btn { background: var(--accent); color: var(--accent-ink); }
.side-nav { display: grid; gap: .05rem; }
.side-link, .pillar > summary { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 9px; text-decoration: none; font-weight: 500; font-size: .9rem; cursor: pointer; list-style: none; color: var(--band-ink); }
.pillar > summary::-webkit-details-marker { display: none; }
.side-link:hover, .pillar > summary:hover { background: rgb(255 255 255 / .09); }
.side-link[aria-current="page"], .pillar > summary[aria-current="true"] { background: var(--band-ink); color: var(--band); }
.side-link .ic, .pillar > summary .ic { width: 19px; height: 19px; }
.pillar > summary span { flex: 1; }
.pillar .chev { width: 13px; height: 13px; opacity: .6; transition: transform .2s; }
.pillar[open] .chev { transform: rotate(180deg); }
.subs { display: grid; gap: 1px; margin: .15rem 0 .45rem 1.55rem; padding-left: .7rem; border-left: 1px solid rgb(255 255 255 / .22); }
.subs a { padding: .3rem .55rem; border-radius: 7px; text-decoration: none; font-size: .85rem; color: var(--band-muted); }
.subs a:hover { background: rgb(255 255 255 / .08); color: var(--band-ink); }
.subs a[aria-current="page"] { color: var(--band-ink); font-weight: 600; background: rgb(255 255 255 / .12); box-shadow: inset 3px 0 0 var(--gold-soft); }
.side-foot { margin-top: auto; display: grid; gap: .1rem; padding-top: .6rem; border-top: 1px solid rgb(255 255 255 / .2); }
.side :focus-visible { outline-color: var(--gold-soft); }
.main-col { margin-left: var(--side); min-height: 100vh; }
#main { max-width: 1240px; margin: 0 auto; padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 4rem; }
.top, .tabbar, .scrim { display: none; }
.demo-band { background: var(--ink); color: var(--paper); text-align: center; font-size: .8rem; padding: .4rem 1rem; }
.demo-band a { color: inherit; font-weight: 600; }
.archive-band { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; padding: .55rem 1rem; background: var(--gold-soft); color: #2B1416; font-size: .86rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.archive-band .btn { background: #FFFCF7; color: #2B1416; border-color: transparent; }
@media (max-width: 1080px) {
  .side { transform: translateX(-105%); transition: transform .25s ease; width: min(320px, 86vw); box-shadow: var(--lift); }
  .nav-on .side { transform: none; }
  .nav-on .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(20 8 10 / .45); }
  .main-col { margin-left: 0; }
  .top { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; color: var(--band-ink); background: var(--band); }
  .top .brand b { font-size: 1.9rem; } .top .logo { width: 34px; height: 34px; }
  .top .icon-btn { color: var(--band-ink); }
  .top-year { all: unset; cursor: pointer; padding: .3rem .7rem; border-radius: 999px; background: var(--gold-soft); color: #2B1416; font: 700 .85rem/1 var(--mono); }
  #main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; inset: auto 0 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--hair); padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { all: unset; position: relative; display: grid; justify-items: center; gap: 2px; padding: .3rem 0; font-size: .68rem; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 12px; }
  .tabbar .ic { width: 23px; height: 23px; }
  .tabbar [aria-current="page"] { color: var(--ink); } .tabbar [aria-current="page"] .ic { color: var(--accent); }
  .tabbar .fab { justify-self: center; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--surface); box-shadow: var(--soft); margin-top: -22px; }
  .tabbar .fab .ic { width: 26px; height: 26px; }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2.5px solid var(--accent); }
}

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .86rem/1.1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { background: var(--surface2); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.solid:hover { background: color-mix(in srgb, var(--accent) 88%, #000); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface2); border-color: var(--hair); }
.btn.danger, .btn.ghost.danger { color: var(--bad); }
.btn.sm { padding: .4rem .78rem; font-size: .79rem; } .btn.sm .ic { width: 15px; height: 15px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
label.btn.busy { opacity: .6; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--surface2); border-color: var(--hair); }
.icon-btn.sm { width: 30px; height: 30px; } .icon-btn.sm .ic { width: 15px; height: 15px; }
.link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: .84rem; font-weight: 500; color: var(--ink2); }
.link:hover { color: var(--accent); } .link:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.link-strong { all: unset; cursor: pointer; font-weight: 600; } .link-strong:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .link-strong:focus-visible { outline: 2.5px solid var(--accent); }
.link-plain { all: unset; cursor: pointer; text-decoration: none; display: inline; } .link-plain:hover { color: var(--accent); } .link-plain:focus-visible { outline: 2.5px solid var(--accent); }
a.link-plain { display: inline-flex; align-items: center; gap: .45rem; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); gap: 2px; flex-wrap: wrap; }
.seg button { all: unset; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; padding: .38rem .82rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink2); }
.seg button .ic { width: 15px; height: 15px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 2.5px solid var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips.filter { margin: 0 0 1.2rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .36rem .82rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--ink2); }
.chip:hover { border-color: var(--ink2); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2.5px solid var(--accent); }
.chip .ic { width: 14px; height: 14px; }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border-radius: 999px; font-size: .71rem; font-weight: 600; background: var(--surface2); color: var(--ink2); border: 1px solid var(--hair); white-space: nowrap; }
.tag .ic { width: 12px; height: 12px; }
.tag.t1, .tag.t2, .tag.t3, .tag.t4, .tag.t5, .tag.t6 { background: var(--tc); color: var(--on); border-color: color-mix(in srgb, var(--ink) 12%, var(--tc)); }
.t1 { --tc: var(--t1); } .t2 { --tc: var(--t2); } .t3 { --tc: var(--t3); } .t4 { --tc: var(--t4); } .t5 { --tc: var(--t5); } .t6 { --tc: var(--t6); }
/* Forms */
.field { display: grid; gap: .3rem; min-width: 0; }
.field > span { font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.field small { font-size: .76rem; }
.input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .95rem; }
.input:focus { outline: 2.5px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input.sm { padding: .36rem .55rem; width: 6.2rem; font-size: .85rem; }
textarea.input { resize: vertical; line-height: 1.55; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.switch { display: flex; gap: .7rem; align-items: center; cursor: pointer; font-size: .9rem; }
.switch.sm { font-size: .8rem; gap: .5rem; }
.switch input { appearance: none; width: 42px; height: 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch.sm input { width: 34px; height: 20px; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink2); transition: left .18s; }
.switch.sm input::after { width: 12px; height: 12px; }
.switch input:checked { background: var(--accent); border-color: var(--accent); } .switch input:checked::after { left: 21px; background: var(--accent-ink); } .switch.sm input:checked::after { left: 17px; }
.switch input:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.rating { display: flex; gap: .35rem; flex-wrap: wrap; }
.rate { position: relative; cursor: pointer; }
.rate input { position: absolute; opacity: 0; }
.rate span[aria-hidden] { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface); color: var(--gold); }
.rate input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rate input:focus-visible + span { outline: 2.5px solid var(--accent); }
.quick { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; }
.quick .input { padding: .5rem .75rem; border-style: dashed; }
.quick .input.sm { width: 5.5rem; }
.quick .icon-btn { background: var(--surface2); border-color: var(--hair); }
.quick.card { padding: .6rem; margin: 0 0 1.2rem; }
.quick-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .7rem; align-items: end; margin-bottom: 1.2rem; }
@media (max-width: 700px) { .quick-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .quick-add .field:first-child { grid-column: 1 / -1; } }
.toolbar { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.search { max-width: 320px; border-radius: 999px; }

/* ---------- Page head, tabs ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.4rem 0 1.5rem; }
.page-head > div:first-child { max-width: 48rem; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font: 700 .72rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.kicker::after { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .5; }
.page-head h1 { text-wrap: balance; }
.lede { margin: .8rem 0 0; color: var(--ink2); max-width: 62ch; }
.head-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem .9rem .8rem; text-decoration: none; font-weight: 600; font-size: .86rem; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a .ic { width: 17px; height: 17px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 1.2rem; align-content: start; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.grid.home-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 960px) { .grid.two, .grid.main-side, .grid.home-grid { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card-head .label { display: flex; margin-bottom: .35rem; }
.card-head h2 a { text-decoration: none; }
.card-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.empty { display: grid; justify-items: center; gap: .6rem; padding: 2.2rem 1.2rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.empty .spk { width: 22px; height: 22px; }
.empty p { margin: 0; max-width: 46ch; color: var(--ink2); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.3rem; }
.stats.two { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 0; }
.stat { display: grid; gap: .15rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); position: relative; }
.stat::before { content: ""; position: absolute; left: 1.1rem; top: 0; width: 26px; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; }
.stat b { font: 500 1.6rem/1.08 var(--display); letter-spacing: -.01em; }
.stat span { font-size: .78rem; color: var(--muted); font-weight: 500; }
.stat small { font-size: .74rem; color: var(--ink2); }
.stat.good b { color: var(--good); } .stat.warn b { color: var(--warn); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; }
.plain-list li { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--hair); }
.plain-list li > span:first-of-type { flex: 1; min-width: 0; }
.plain-list .ic { width: 16px; height: 16px; color: var(--accent); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--hair); font-size: .9rem; }
.ledger li small { display: block; font-size: .76rem; }
.mini-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .35rem; }
.mini-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; font-size: .87rem; }
.mini-list .ic { width: 16px; height: 16px; color: var(--accent); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist li { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--hair); font-size: .9rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist .t-title { flex: 1; min-width: 0; display: grid; }
.checklist .t-title small { font-size: .76rem; }
.checklist li.done .t-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--muted); }
.tick { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink2); border-radius: 6px; background: var(--surface); }
.tick .ic { width: 14px; height: 14px; opacity: 0; color: var(--accent-ink); }
.tick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); } .tick[aria-pressed="true"] .ic { opacity: 1; }
.tick:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* Progress */
.bar { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface2)); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width .5s ease;
  background: repeating-linear-gradient(135deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 82%, #fff) 8px 16px); }
.plain .bar i { background: var(--accent); }
.bar.near i { background: var(--warn); } .bar.over i { background: var(--bad); }
.ring { position: relative; display: inline-grid; place-items: center; width: 70px; height: 70px; flex: none; vertical-align: middle; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .r-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 6; }
.ring .r-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ring b { position: relative; font: 500 .95rem/1 var(--display); }

/* ---------- Charts ---------- */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--hair); stroke-width: 1; }
.chart .base { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.2; }
.chart .axis { fill: var(--muted); font: 500 12px var(--sans); }
.chart .hit { fill: transparent; }
.chart .mark { cursor: default; outline: none; }
.chart .mark:hover .bar-mark, .chart .mark:focus .bar-mark { filter: brightness(.9); }
.chart .mark:focus-visible .hit { stroke: var(--accent); stroke-width: 2; }
.bar-mark.c1, .key.c1, .dot-mark.c1 { fill: var(--c1); background: var(--c1); } .line-mark.c1 { stroke: var(--c1); }
.bar-mark.c2, .key.c2, .dot-mark.c2 { fill: var(--c2); background: var(--c2); } .line-mark.c2 { stroke: var(--c2); }
.bar-mark.c3, .key.c3, .dot-mark.c3 { fill: var(--c3); background: var(--c3); } .line-mark.c3 { stroke: var(--c3); }
.bar-mark.c4, .key.c4, .dot-mark.c4 { fill: var(--c4); background: var(--c4); } .line-mark.c4 { stroke: var(--c4); }
.bar-mark.c5, .key.c5, .dot-mark.c5 { fill: var(--c5); background: var(--c5); } .line-mark.c5 { stroke: var(--c5); }
.line-mark { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.dot-mark { stroke: var(--surface); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; font-size: .8rem; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.tip { position: fixed; z-index: 90; transform: translate(-50%, -100%); padding: .38rem .6rem; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 600; pointer-events: none; white-space: nowrap; box-shadow: var(--soft); }

/* ---------- Modal, toasts ---------- */
dialog#modal { border: 1px solid var(--line); padding: 0; border-radius: 18px; background: var(--surface); color: var(--ink); width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); box-shadow: 0 30px 80px -30px rgb(20 6 8 / .55); }
dialog#modal.narrow { width: min(480px, calc(100vw - 24px)); }
dialog#modal.photo { width: min(1100px, calc(100vw - 24px)); background: #120B0C; color: #F6EEE6; border-color: #120B0C; }
dialog#modal[open] { animation: popin .22s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes popin { from { transform: translateY(10px) scale(.98); opacity: 0; } }
dialog#modal::backdrop { background: rgb(30 8 12 / .55); backdrop-filter: blur(2px); }
.modal-inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 40px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem .6rem; border-top: 4px solid var(--accent); border-radius: 18px 18px 0 0; }
.modal-head h2 { font-size: 1.5rem; }
.modal-body { overflow-y: auto; padding: .4rem 1.4rem 1.4rem; }
.modal-foot { display: flex; gap: .5rem; justify-content: space-between; align-items: center; padding: .9rem 1.4rem; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.modal-foot .right { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 600px) { dialog#modal, dialog#modal.narrow { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; } .modal-inner { max-height: 92dvh; } .modal-foot { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); } dialog#modal.photo { margin: auto; border-radius: 14px; } }
#toasts { position: fixed; z-index: 95; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: grid; gap: .5rem; width: min(460px, calc(100vw - 24px)); }
@media (max-width: 1080px) { #toasts { bottom: calc(5.4rem + env(safe-area-inset-bottom)); } }
.toast { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: .88rem; font-weight: 500; box-shadow: var(--lift); animation: popin .2s; border-left: 4px solid var(--gold); }
.toast.err { background: var(--bad); color: #fff; border-left-color: #fff; }
.toast button { all: unset; cursor: pointer; font-weight: 700; text-decoration: underline; }
.pop { position: fixed; z-index: 99; pointer-events: none; }
.pop i { position: absolute; width: 7px; height: 7px; border-radius: 1px; animation: burst .9s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; }
.calm .pen-circle path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .pen-circle path { stroke-dashoffset: 0; } }

/* Snow */
.snowfall { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.snowfall i { position: absolute; top: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .8; box-shadow: 0 0 2px rgb(0 0 0 / .08); animation: snow var(--d) linear var(--delay) infinite; }
@keyframes snow { to { transform: translate(var(--drift), 105vh); } }
:root:not([data-theme="midnight"]) .snowfall i { background: color-mix(in srgb, var(--gold-soft) 60%, #fff); }
.calm .snowfall { display: none; }

/* ---------- Photos: drop zones, polaroids, masonry, lightbox ---------- */
img[data-photo] { background: color-mix(in srgb, var(--t1) 50%, var(--surface2)); object-fit: cover; }
img[data-photo]:not([src]) { animation: shimmer 1.4s ease-in-out infinite alternate; }
@keyframes shimmer { to { opacity: .55; } }
img.missing { opacity: .3; }
.vdrop { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.3rem; margin-bottom: 1.4rem; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r); cursor: pointer; transition: border-color .15s, background .15s;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--t1) 45%, transparent) 0 10px, transparent 10px 20px), var(--surface); }
.plain .vdrop { background: var(--surface); }
.vdrop:hover, .vdrop.drag, [data-drop].drag { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.vdrop > .ic { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-sizing: content-box; }
.vdrop b { display: block; font: 500 1.1rem/1.2 var(--display); }
.vdrop small { color: var(--ink2); }
.vdrop:focus-within { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.masonry { columns: 4 220px; column-gap: 1.3rem; }
.pola-tile { position: relative; break-inside: avoid; margin: 0 0 1.5rem; padding: .6rem .6rem .5rem; background: #FFFEFA; border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 16px 28px -18px rgb(30 10 10 / .55); transform: rotate(var(--tilt)); transition: transform .2s; color: #2B1416; }
.pola-tile:hover { transform: rotate(0) translateY(-3px); z-index: 2; }
.plain .pola-tile { transform: none; padding: 0; background: none; box-shadow: none; }
.tape { position: absolute; z-index: 2; top: -11px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgb(246 240 226 / .78); box-shadow: 0 1px 2px rgb(0 0 0 / .1);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }
.tape.r { transform: translateX(-50%) rotate(5deg); }
.plain .tape { display: none; }
.vt-img { all: unset; cursor: zoom-in; display: block; width: 100%; }
.vt-img img { width: 100%; height: auto; }
.plain .vt-img img { border-radius: var(--r-sm); }
.vt-img:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.pola-tile figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; padding: .55rem .2rem .15rem; min-height: 1.9rem; }
.pola-tile figcaption .hand { font-size: 1.32rem; line-height: 1.05; color: #8A1723; }
.plain .pola-tile figcaption .hand { color: var(--ink); font-size: .95rem; }
.pola-tile figcaption small { display: block; width: 100%; font-size: .74rem; color: #6A5556; }
.pt-year { font: 700 .7rem/1 var(--mono); letter-spacing: .08em; color: #8A1723; padding: .2rem .4rem; border: 1px solid currentColor; border-radius: 3px; }
.vt-tools { position: absolute; top: 1rem; right: 1rem; opacity: 0; transition: opacity .15s; }
.pola-tile:hover .vt-tools, .pola-tile:focus-within .vt-tools { opacity: 1; }
.vt-tools .icon-btn { background: #FFFEFA; color: #2B1416; box-shadow: var(--soft); }
@media (hover: none) { .vt-tools { opacity: 1; } }
.lightbox { position: relative; padding: 1rem; display: grid; gap: .8rem; }
.lightbox figure { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.lightbox img { max-height: calc(100dvh - 170px); width: auto; max-width: 100%; border-radius: 6px; object-fit: contain; background: transparent; }
.lightbox figcaption { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.lightbox .hand { font-size: 1.7rem; color: #F2C9A6; }
.lightbox .icon-btn { color: #F6EEE6; background: rgb(255 255 255 / .1); }
.lightbox .icon-btn:hover { background: rgb(255 255 255 / .2); }
.lb-close { position: absolute; top: .8rem; right: .8rem; z-index: 2; }
.lb-prev, .lb-next { position: absolute; top: 45%; z-index: 2; width: 46px; height: 46px; }
.lb-prev { left: .8rem; } .lb-next { right: .8rem; }
.lb-tools { display: flex; justify-content: center; gap: .5rem; }
.lb-tools .btn { background: rgb(255 255 255 / .1); color: #F6EEE6; border-color: rgb(255 255 255 / .25); }
/* Editor photos */
.ed-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.ed-ph { position: relative; margin: 0; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); }
.ed-ph img { width: 100%; height: 100%; }
.ed-ph .icon-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; background: rgb(255 255 255 / .9); color: #222; }
.ed-add { display: grid; place-items: center; align-content: center; gap: .3rem; width: 96px; height: 96px; padding: .4rem; border: 1.5px dashed var(--line); border-radius: 8px; font-size: .72rem; font-weight: 600; text-align: center; color: var(--ink2); cursor: pointer; }
.ed-add:hover { border-color: var(--accent); color: var(--ink); } .ed-add:focus-within { outline: 2.5px solid var(--accent); }
.ed-add.busy { opacity: .6; pointer-events: none; }

/* ---------- Home: the command centre ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 1.5rem 2rem; margin: .4rem 0 1.6rem; padding: 2rem clamp(1.2rem, 3vw, 2.4rem) 2.2rem; border-radius: 20px; color: var(--band-ink); overflow: hidden; box-shadow: var(--lift);
  background: repeating-linear-gradient(90deg, var(--band) 0 18px, var(--band2) 18px 36px); }
.plain .hero { background: var(--band); }
.hero::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--gold-soft) 55%, transparent); border-radius: 14px; pointer-events: none; }
.hero .label { color: var(--band-muted); }
.hero h1 { margin: .4rem 0 .3rem; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; }
.hero h1 .script { color: var(--band-ink); }
.hero p { color: var(--band-muted); margin: 0; max-width: 40ch; }
.hero .years button { border-color: rgb(255 255 255 / .35); }
.hero > .spk { position: absolute; fill: var(--gold-soft); }
.hero .spk.h1 { width: 26px; height: 26px; top: 14%; right: 46%; } .hero .spk.h2 { width: 16px; height: 16px; bottom: 18%; left: 52%; } .hero .spk.h3 { width: 20px; height: 20px; top: 22px; left: 30%; }
.hero-bow { position: absolute; width: 104px; top: 2px; right: 26px; z-index: 2; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
.hero-counts { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; position: relative; z-index: 1; }
.count-card { position: relative; display: grid; justify-items: center; min-width: 140px; padding: 1.3rem 1rem .9rem; border-radius: 8px; background: #FFFCF6; color: #2B1416; box-shadow: 0 2px 2px rgb(0 0 0 / .12), 0 20px 30px -18px rgb(0 0 0 / .6); transform: rotate(-1.5deg); }
.count-card + .count-card { transform: rotate(1.8deg); }
.plain .count-card { transform: none; }
.cc-rings { position: absolute; top: -8px; left: 14px; right: 14px; height: 16px; background: radial-gradient(circle at 8px 8px, #B9AFA4 0 4px, #6E6259 4.5px 6px, transparent 6.5px) 0 0 / 24px 16px repeat-x; }
.count-card::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; border-top: 1px dashed #D8C8B6; }
.count-card b { position: relative; font: 500 3.6rem/1 var(--display); color: #8A1723; margin-top: .4rem; }
.cc-unit { font: 400 1.6rem/1 var(--script); color: #8A1723; margin-top: .1rem; }
.plain .cc-unit { font: italic 500 1rem/1.2 var(--display); }
.cc-label { font: 700 .66rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6A5556; margin-top: .4rem; }
.count-card .pen-circle { inset: -22% -40%; width: 180%; height: 144%; }
.count-card.arch b { font-size: 2.6rem; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-counts { justify-content: flex-start; } .hero-bow { width: 84px; right: 8px; } }
@media (max-width: 420px) { .count-card { min-width: 0; flex: 1; } .count-card b { font-size: 2.8rem; } }
.pinned-notes { position: relative; margin: 0 0 1.6rem; padding: 1.4rem 1.6rem 1.2rem 5.2rem; border-radius: 6px; background: #FFFCF4; color: #2B1416; border: 1px solid #E6D9C3; box-shadow: var(--soft);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, #EADFCD 27px 28px); }
.pinned-notes .label { color: #8A1723; }
.pinned-notes h2 { margin: .25rem 0 .7rem; } .pinned-notes h2 .script { font-size: 1.5em; color: #8A1723; }
.pn-seal { position: absolute; left: 1.2rem; top: 1.2rem; width: 62px; transform: rotate(-12deg); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .25)); }
.plain .pn-seal { display: none; } .plain .pinned-notes { padding-left: 1.6rem; background-image: none; }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1.6rem; margin-bottom: .6rem; }
.pn-grid p { margin: .2rem 0 0; font-size: .92rem; }
.pinned-notes .link { color: #563A3B; }
@media (max-width: 600px) { .pinned-notes { padding-left: 1.2rem; padding-top: 4.4rem; } }
.hb-top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem; }
.hb-top b small { font-size: .55em; color: var(--muted); }
.pipe-mini { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-bottom: .4rem; }
.pm-step { display: grid; justify-items: center; gap: .1rem; padding: .5rem .1rem; text-decoration: none; background: var(--surface2); color: var(--muted); }
.pm-step:first-child { border-radius: 8px 0 0 8px; } .pm-step:last-child { border-radius: 0 8px 8px 0; }
.pm-step b { font: 500 1.3rem/1 var(--display); } .pm-step span { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pm-step.has { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); }
.pm-step:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
@media (max-width: 520px) { .pipe-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pm-step { border-radius: 6px !important; } }
.week { list-style: none; margin: 0; padding: 0; display: grid; }
.week li { display: grid; grid-template-columns: 5.6rem auto minmax(0, 1fr); gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--hair); font-size: .88rem; }
.week li:last-child { border-bottom: 0; }
.week .wk-day b { font: 700 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.week .ic { width: 16px; height: 16px; color: var(--ink2); }
.week a { text-decoration: none; display: grid; } .week a:hover { color: var(--accent); }
.week small { font-size: .75rem; }
.week li.warn .ic, .week li.warn .wk-day b { color: var(--warn); }
.board-strip .strip { display: flex; gap: 1rem; overflow-x: auto; padding: .6rem .3rem 1rem; scrollbar-width: thin; }
.strip-pola { all: unset; cursor: zoom-in; flex: none; width: 148px; padding: 7px 7px 6px; background: #FFFEFA; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 12px 20px -14px rgb(0 0 0 / .5); transform: rotate(var(--tilt)); transition: transform .2s; display: grid; gap: .25rem; color: #2B1416; }
.strip-pola img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.strip-pola .hand { font-size: 1rem; color: #8A1723; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-pola:hover { transform: rotate(0) translateY(-3px); } .strip-pola:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.plain .strip-pola { transform: none; }
.board-strip .vdrop { margin: 0; }
.start-card { overflow: hidden; margin-bottom: 1.6rem; }
.start-card h2 { margin: .3rem 0 1rem; }
.sc-holly { position: absolute; width: 110px; right: 12px; top: 6px; }
.steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.steps a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: var(--surface); font-weight: 500; font-size: .9rem; }
.steps a:hover { border-color: var(--accent); }
.steps .n { font: 500 1.2rem/1 var(--display); color: var(--accent); }
.steps .ic { width: 17px; height: 17px; color: var(--ink2); }

/* ---------- Gifts ---------- */
.tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1.3rem; }
.ptag { position: relative; display: grid; gap: .7rem; align-content: start; padding: 1.3rem 1.2rem 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft);
  border-radius: 6px 14px 14px 6px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); padding-left: 2.2rem; }
.ptag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.ptag-hole { position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.ptag header { display: flex; gap: .7rem; align-items: center; }
.ptag header > div { display: grid; min-width: 0; }
.ptag header .link-strong { font: 500 1.2rem/1.1 var(--display); }
.ptag header small { font: 700 .64rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ptag-seal { position: absolute; top: 10px; right: 10px; width: 40px; transform: rotate(10deg); }
.ptag-seal .seal { width: 100%; } .ptag-seal .sl-letter { font-size: 40px; }
.ptag.is-done { background: color-mix(in srgb, var(--t4) calc(60% * var(--tk)), var(--surface)); }
.ptag-money { display: grid; grid-template-columns: auto 1fr 1fr; gap: .8rem; align-items: end; }
.pm { display: grid; gap: .15rem; }
.pm > span { font: 700 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pm b { font-size: .95rem; }
.ptag-money .input.sm { width: 5.6rem; }
.ptag-gifts { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ptag-gifts li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .86rem; }
.ptag-gifts li .link { font-size: .86rem; text-decoration: none; color: var(--ink); } .ptag-gifts li .link:hover { text-decoration: underline; }
.ptag-gifts .ic { width: 14px; height: 14px; vertical-align: -2px; }
.ptag-gifts li.small { justify-content: flex-start; }
.ptag footer { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .3rem; border-top: 1px dashed var(--line); }
.avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--t1); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar b { font: 500 1.05rem/1 var(--display); color: var(--on); }
.avatar.lg { width: 82px; height: 82px; } .avatar.lg b { font-size: 1.6rem; }
.person-top { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.sizes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.sizes div { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); }
.sizes dt { font: 700 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sizes dd { margin: .15rem 0 0; font-weight: 600; font-size: .88rem; }
.hint-card { padding: .9rem 1rem; margin-bottom: 1.1rem; border-radius: 8px; background: #FFF8E3; color: #3A2A10; border: 1px solid #EBDDB0; box-shadow: 0 8px 16px -14px rgb(0 0 0 / .5); transform: rotate(-.4deg); }
.hint-card .label { color: #7A5A12; } .hint-card p { margin: .35rem 0 0; font-size: .92rem; } .hint-card .muted { color: #7A6A4A; }
[data-theme="midnight"] .hint-card { background: #3A3020; color: #F3E7C9; border-color: #5A4A2A; } [data-theme="midnight"] .hint-card .label { color: #E6C47C; }
.history { display: grid; gap: .5rem; }
.hist-year { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--hair); }
.hist-year b { font: 500 1.1rem/1.3 var(--display); color: var(--accent); }
.hist-year ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; font-size: .9rem; }
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0 0 1.2rem; padding: 0; }
.pipeline button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; gap: .15rem; padding: .7rem .7rem .65rem 1.1rem; background: color-mix(in srgb, var(--tc) calc(80% * var(--tk)), var(--surface)); color: var(--on); position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.pipeline li:first-child button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: .8rem; }
.pipeline b { font: 500 1.4rem/1 var(--display); } .pipeline span { font-size: .7rem; font-weight: 600; line-height: 1.15; }
.pipeline button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pipeline button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -4px; }
@media (max-width: 900px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pipeline button, .pipeline li:first-child button { clip-path: none; border-radius: 8px; padding-left: .8rem; } }
.gtable { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); overflow: hidden; }
.gt-row { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(80px, .8fr) minmax(150px, 1.2fr) minmax(70px, .7fr) minmax(110px, 1fr) minmax(90px, .9fr) minmax(120px, 1.2fr) minmax(104px, .9fr); gap: .8rem; align-items: center; padding: .65rem 1rem; border-top: 1px solid var(--hair); font-size: .88rem; }
.gt-head { border-top: 0; background: var(--surface2); padding: .6rem 1rem; }
.gt-head span { font: 700 .64rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.gt-gift { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.gt-gift > div { display: grid; min-width: 0; }
.gt-gift small { display: flex; gap: .3rem; align-items: center; } .gt-gift small .ic { width: 14px; height: 14px; }
.gt-thumb { all: unset; cursor: zoom-in; flex: none; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--surface2); border: 1px solid var(--hair); }
.gt-thumb img { width: 100%; height: 100%; }
.gt-thumb.empty { cursor: default; color: var(--muted); } .gt-thumb .ic { width: 18px; height: 18px; }
.gt-l { display: none; }
.stage-sel { width: 100%; padding-right: 1.9rem; font-weight: 600; font-size: .8rem; background-color: color-mix(in srgb, var(--tc) calc(70% * var(--tk)), var(--surface)); border-color: transparent; color: var(--on); }
.copy, .code { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; margin-left: .3rem; padding: .1rem .4rem; border-radius: 5px; border: 1px dashed var(--line); font: 700 .74rem/1.4 var(--mono); color: var(--ink2); }
.copy .ic, .code .ic { width: 12px; height: 12px; }
.copy:hover, .code:hover { border-color: var(--accent); color: var(--accent); }
.gt-hide { display: flex; gap: .3rem; align-items: center; } .gt-hide .ic { width: 14px; height: 14px; color: var(--muted); }
.wrap-tog { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px dashed var(--line); color: var(--ink2); }
.wrap-tog .ic { width: 15px; height: 15px; }
.wrap-tog[aria-pressed="true"] { border-style: solid; background: color-mix(in srgb, var(--t4) calc(90% * var(--tk)), var(--surface)); color: var(--on); border-color: transparent; }
.wrap-tog[aria-pressed="true"] .ic { color: var(--good); }
.wrap-tog:focus-visible { outline: 2.5px solid var(--accent); }
@media (max-width: 1100px) {
  .gt-head { display: none; }
  .gt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .9rem; padding: .9rem 1rem; }
  .gt-gift { grid-column: 1 / -1; }
  .gt-l { display: block; font: 700 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}
.ideas { columns: 4 220px; }
.idea { break-inside: avoid; margin: 0 0 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--soft); }
.idea .vt-img img { width: 100%; height: auto; }
.idea-body { display: grid; gap: .45rem; padding: .8rem .9rem .9rem; }
.idea-body h3 { font-size: 1.05rem; }
.idea-body p { margin: 0; }
.idea .pt-year { color: var(--accent); }
.stockings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.2rem; }
.stocking { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--soft); border-top: 6px solid var(--accent); }
.stocking header { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.stocking h3 { flex: 1; } .stocking header b { font: 500 1.05rem var(--display); }
.sock-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--t1); color: var(--on); } .sock-ic .ic { width: 17px; height: 17px; }
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
.spot { padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft); }
.spot header { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; flex-wrap: wrap; }
.spot header .ic { width: 20px; height: 20px; color: var(--accent); } .spot h3 { flex: 1; font-size: 1.05rem; }
.spot.none { border-style: dashed; background: color-mix(in srgb, var(--t2) calc(40% * var(--tk)), var(--surface)); }
.spot.none header .ic { color: var(--warn); }

/* ---------- Budget ---------- */
.budget-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); }
.budget-hero .big { margin: .3rem 0 .8rem; }
.budget-hero p { margin: .7rem 0 0; }
.bh-side { display: grid; gap: .7rem; }
@media (max-width: 760px) { .budget-hero { grid-template-columns: minmax(0, 1fr); } }
.btable { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); overflow: hidden; }
.bt-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(90px, .7fr) minmax(90px, .7fr) minmax(90px, .7fr) minmax(120px, 1.3fr); gap: .9rem; align-items: center; padding: .65rem 1.1rem; border-top: 1px solid var(--hair); font-size: .9rem; }
.bt-head { border-top: 0; background: var(--surface2); }
.bt-head span { font: 700 .64rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.bt-cat { display: flex; align-items: center; gap: .65rem; } .bt-cat > span:last-child { display: grid; } .bt-cat small { font-size: .74rem; }
.cat-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; color: #fff; }
.cat-ic .ic { width: 16px; height: 16px; }
.cat-ic.c1 { background: var(--c1); } .cat-ic.c2 { background: var(--c2); } .cat-ic.c3 { background: var(--c3); } .cat-ic.c4 { background: var(--c4); } .cat-ic.c5 { background: var(--c5); }
[data-theme="midnight"] .cat-ic { color: #1B1214; }
.bt-row.slush { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--t2) 40%, transparent) 0 8px, transparent 8px 16px); }
.bt-total { background: var(--surface2); }
@media (max-width: 760px) { .bt-head { display: none; } .bt-row { grid-template-columns: minmax(0, 1fr) auto auto; } .bt-row .bt-cat { grid-column: 1 / -1; } .bt-row .bt-bar { grid-column: 1 / -1; } .bt-row .gt-l { display: block; font: 700 .58rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bt-total { grid-template-columns: repeat(4, auto); } }
.compare { display: grid; gap: .6rem; }
.cmp-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 9rem; gap: .8rem; align-items: center; font-size: .86rem; }
.cmp-bars { display: grid; gap: 3px; }
.cmp-b { position: relative; height: 18px; display: flex; align-items: center; outline: none; }
.cmp-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.cmp-b i.prev { background: var(--c4); } .cmp-b i.now { background: var(--c1); }
.cmp-b span { position: relative; margin-left: auto; padding-left: .4rem; font-size: .74rem; }
.cmp-b:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 600px) { .cmp-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }

/* ---------- Feast ---------- */
.menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1.6rem; align-items: start; }
.menu-card { position: relative; display: grid; background: var(--surface); border-radius: 4px; box-shadow: var(--lift); overflow: hidden; }
.menu-photo { all: unset; cursor: zoom-in; display: block; height: 170px; } .menu-photo img { width: 100%; height: 100%; }
.menu-paper { position: relative; display: grid; gap: .6rem; justify-items: center; text-align: center; padding: 1.4rem 1.6rem 1.4rem; margin: 10px; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 4px; }
.menu-paper h2 { font-size: 2.6rem; line-height: 1; margin: .1rem 0 .2rem; }
.course { display: grid; gap: .1rem; justify-items: center; }
.course h3.mini { justify-content: center; margin-bottom: .2rem; color: var(--accent); }
.dish { all: unset; cursor: pointer; font: italic 500 1rem/1.35 var(--display); } .dish:hover { color: var(--accent); text-decoration: underline; } .dish:focus-visible { outline: 2px solid var(--accent); }
.clash { display: flex; gap: .4rem; align-items: flex-start; text-align: left; margin: .2rem 0; padding: .55rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--t2) 70%, var(--surface)); color: var(--on); }
.clash .ic { width: 16px; height: 16px; color: var(--warn); margin-top: 2px; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1.2rem; }
.recipe-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: var(--soft); }
.rc-img { all: unset; cursor: pointer; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface2); }
.rc-img img { width: 100%; height: 100%; }
.rc-blank { display: grid; place-items: center; height: 100%; color: var(--muted); } .rc-blank .ic { width: 34px; height: 34px; }
.rc-n { position: absolute; right: 8px; bottom: 8px; display: inline-flex; gap: .25rem; align-items: center; padding: .15rem .45rem; border-radius: 999px; background: rgb(255 252 246 / .92); color: #2B1416; font-size: .72rem; font-weight: 700; } .rc-n .ic { width: 13px; height: 13px; }
.rc-body { display: grid; gap: .35rem; align-content: start; padding: .8rem .95rem 1rem; border-top: 3px solid var(--accent);
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--c4) 22%, transparent) 23px 24px); background-position: 0 30px; }
.plain .rc-body { background-image: none; }
.rc-body h3 { font-size: 1.08rem; }
.rv-photos { display: flex; gap: .6rem; overflow-x: auto; margin-bottom: .8rem; }
.rv-photos button { all: unset; cursor: zoom-in; flex: none; width: 180px; height: 135px; border-radius: 6px; overflow: hidden; } .rv-photos img { width: 100%; height: 100%; }
.ingr { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .9rem; }
.method { font-size: .92rem; }
.aisles { columns: 2 320px; column-gap: 1.4rem; }
.aisle { break-inside: avoid; margin: 0 0 1.2rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft); }
.aisle .checklist small { margin-left: auto; font-size: .72rem; white-space: nowrap; }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); }
.diet-matrix { width: 100%; border-collapse: collapse; font-size: .88rem; }
.diet-matrix th, .diet-matrix td { padding: .65rem .8rem; border-bottom: 1px solid var(--hair); text-align: center; vertical-align: middle; }
.diet-matrix thead th { font: 700 .62rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); background: var(--surface2); }
.diet-matrix tbody th { text-align: left; font-weight: 600; } .diet-matrix tbody th small { display: block; font-weight: 400; font-size: .76rem; }
.diet-matrix td:last-child, .diet-matrix th:last-child { text-align: left; min-width: 220px; }
.dot-yes .ic { width: 18px; height: 18px; color: var(--accent); }

/* ---------- Events ---------- */
.calendar { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); overflow: hidden; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--accent); color: var(--accent-ink); }
.cal-head span { padding: .55rem; font: 700 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { position: relative; min-height: 110px; padding: .4rem .45rem .5rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; align-content: start; gap: .2rem; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.pad { background: repeating-linear-gradient(-45deg, var(--surface2) 0 6px, transparent 6px 12px); }
.cal-num { all: unset; cursor: pointer; position: relative; justify-self: start; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .2rem; border-radius: 50%; font: 500 1.15rem/1 var(--display); }
.cal-num:hover { background: var(--surface2); } .cal-num:focus-visible { outline: 2.5px solid var(--accent); }
.cal-cell.today .cal-num { background: var(--ink); color: var(--paper); }
.cal-cell.special { background: color-mix(in srgb, var(--t1) calc(45% * var(--tk)), var(--surface)); }
.cal-cell.xmas .cal-num { color: var(--accent); font-size: 1.5rem; }
.cal-sp { font: 400 1.05rem/1 var(--script); color: var(--script-c); }
.plain .cal-sp { font: 700 .62rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cal-ev { all: unset; cursor: pointer; display: flex; gap: .25rem; align-items: center; padding: .15rem .35rem; border-radius: 5px; background: var(--surface2); font-size: .72rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-decoration: none; }
.cal-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev .ic { width: 12px; height: 12px; flex: none; color: var(--accent); }
.cal-ev.menu { background: color-mix(in srgb, var(--t2) 80%, var(--surface)); color: var(--on); }
.cal-ev:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); } .cal-ev:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 760px) { .cal-cell { min-height: 64px; padding: .25rem; } .cal-ev span, .cal-sp { display: none; } .cal-ev { justify-content: center; padding: .15rem; } .cal-num { font-size: .95rem; min-width: 24px; height: 24px; } .cal-head span { letter-spacing: 0; padding: .4rem .1rem; } }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ev-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft); }
.ev-row.past { opacity: .65; box-shadow: none; }
.ev-date { display: grid; place-items: center; width: 54px; padding: .35rem 0 .3rem; border-radius: 6px; background: var(--accent); color: var(--accent-ink); line-height: 1; }
.ev-date b { font: 500 1.5rem/1 var(--display); } .ev-date small { font: 700 .62rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ev-main { display: grid; gap: .1rem; } .ev-main small { display: flex; gap: .3rem; align-items: center; font-size: .78rem; } .ev-main small .ic { width: 14px; height: 14px; }
.ev-ic .ic { width: 22px; height: 22px; color: var(--accent); }
details > summary.label { cursor: pointer; margin-bottom: .8rem; }
.trad-head { position: relative; display: flex; gap: 1rem; align-items: center; margin-bottom: 1.3rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); overflow: hidden; }
.trad-head p { margin: 0; } .trad-head .hand { font-size: 1.6rem; }
.trad-holly { position: absolute; right: 12px; width: 90px; opacity: .9; }
.trad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
.trad-group { padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--soft); }

/* ---------- Deals ---------- */
.deals { display: grid; gap: .7rem; }
.deal { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--soft); }
.deal.passed { opacity: .65; box-shadow: none; }
.deal-price { position: relative; display: grid; gap: .1rem; } .deal-price b { font: 500 1.45rem/1 var(--display); } .deal-price s { font-size: .8rem; }
.deal-off { justify-self: start; padding: .15rem .45rem; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 700 .72rem/1.2 var(--mono); }
.deal-main { display: grid; gap: .15rem; } .deal-main small { display: flex; gap: .3rem; align-items: center; font-size: .78rem; } .deal-main small .ic { width: 14px; height: 14px; }
.deal-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.deal-tools .code { margin: 0; padding: .35rem .6rem; border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) { .deal { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .deal-tools { justify-content: flex-start; } }

/* ---------- Cards & addresses ---------- */
.abook { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--soft); overflow: hidden; }
.ab-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 7rem 7rem 9.5rem; gap: .9rem; align-items: center; padding: .75rem 1.1rem; border-top: 1px solid var(--hair); }
.ab-head { border-top: 0; background: var(--surface2); }
.ab-head span { font: 700 .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.ab-row.paused { opacity: .55; }
.ab-name address { font-style: normal; font-size: .82rem; color: var(--ink2); margin-top: .2rem; line-height: 1.45; }
.stampbox { all: unset; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 4px; border: 1.5px dashed var(--line); color: var(--muted); }
.stampbox .ic { width: 20px; height: 20px; }
.stampbox .seal { width: 44px; height: 44px; } .stampbox .seal .sl-letter { font-size: 44px; }
.stampbox.on { border-color: transparent; }
.stampbox.got { background: color-mix(in srgb, var(--t1) 80%, var(--surface)); color: var(--accent); border-style: solid; }
.stampbox:hover { border-color: var(--accent); } .stampbox:focus-visible { outline: 2.5px solid var(--accent); }
@media (max-width: 760px) { .ab-head { display: none; } .ab-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ab-name { grid-column: 1 / -1; } .ab-row .gt-l { display: block; font: 700 .58rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } }
.portrait-now { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; }
@media (max-width: 760px) { .portrait-now { grid-template-columns: minmax(0, 1fr); } }
.frame-big { margin: 0; padding: 14px 14px 10px; background: #FFFEFA; box-shadow: var(--lift); transform: rotate(-1deg); display: grid; gap: .5rem; color: #2B1416; }
.plain .frame-big { transform: none; }
.frame-big > button { all: unset; cursor: zoom-in; display: block; } .frame-big img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.frame-big figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .frame-big .script { font-size: 2rem; color: #8A1723; }
.frame-empty { display: grid; place-items: center; align-content: center; gap: .4rem; min-height: 320px; border: 1.5px dashed #D8C8B6; cursor: pointer; text-align: center; padding: 1rem; color: #563A3B; }
.frame-empty .ic { width: 38px; height: 38px; color: #9E1B2A; } .frame-empty b { font: 500 1.2rem var(--display); }
.frame-empty:focus-within, .frame-empty.drag { outline: 2.5px solid var(--accent); }
.portrait-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.6rem; margin-top: 1.4rem; }
.pola-tile.por { margin: 0; }
.por-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: #9A8A86; background: #F1E9DD; } .por-empty .ic { width: 30px; height: 30px; }
.year-gallery { margin-bottom: 2.6rem; }
.yg-head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.yg-head h2 .script { font-size: 1.4em; color: var(--script-c); }
.yg-portrait { all: unset; cursor: zoom-in; flex: none; width: 92px; height: 92px; padding: 5px; background: #FFFEFA; box-shadow: var(--soft); transform: rotate(-3deg); }
.yg-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Decor ---------- */
.decor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; }
.decor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; padding: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--soft); }
.decor.rep { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--t2) calc(35% * var(--tk)), var(--surface)); }
.dc-img { all: unset; cursor: zoom-in; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--surface2); }
.dc-img img { width: 100%; height: 100%; } .dc-img.blank { cursor: default; color: var(--muted); } .dc-img .ic { width: 28px; height: 28px; }
.dc-body { display: grid; gap: .3rem; align-content: start; min-width: 0; } .dc-body h3 { font-size: 1.02rem; }
.dc-meta { margin: 0; display: grid; gap: .15rem; font-size: .8rem; color: var(--ink2); }
.dc-meta div { display: flex; gap: .35rem; align-items: center; } .dc-meta dt .ic { width: 14px; height: 14px; color: var(--accent); } .dc-meta dd { margin: 0; }
.boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; }
.box-label { padding: 1rem 1.1rem; border-radius: 6px; background: #D9BF98; color: #2E2215; box-shadow: var(--soft);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgb(0 0 0 / .03) 0 1px, transparent 1px 5px); }
.box-label header { display: flex; gap: .7rem; align-items: center; margin: -1rem -1.1rem .8rem; padding: .8rem 1.1rem; background: #FBF6EA; border-bottom: 2px dashed #B79C74; border-radius: 6px 6px 0 0; }
.box-label h3 { font: 700 1rem/1.2 var(--mono); letter-spacing: .02em; } .box-label small { font-size: .78rem; color: #6A5440; }
.box-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2E2215; color: #FBF6EA; } .box-ic .ic { width: 18px; height: 18px; }
.box-label ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font: 400 .9rem/1.4 var(--mono); }
.box-label li { display: list-item; } .box-label li .tag { margin-left: .3rem; } .box-label .muted { color: #6A5440; }
.box-label.loose { background: var(--surface2); color: var(--ink); } .box-label.loose header { background: var(--surface); border-color: var(--line); }
.shop-list { display: grid; gap: .7rem; }
.shop-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--warn); border-radius: 10px; box-shadow: var(--soft); }
.shop-row > div { display: grid; gap: .1rem; } .shop-row small { font-size: .8rem; }
.dc-mini { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface2); color: var(--muted); } .dc-mini img { width: 100%; height: 100%; }

/* ---------- Wrap-up ---------- */
.letter-paper { position: relative; display: grid; gap: 1.1rem; max-width: 820px; padding: 2.2rem clamp(1.2rem, 4vw, 3rem) 2rem; background: #FFFCF4; color: #2B1416; border: 1px solid #E6D9C3; border-radius: 4px; box-shadow: var(--lift); }
.letter-paper .input { background: transparent; color: #2B1416; border-color: #E2D4BC; }
.letter-paper .input.lined { border: 0; border-bottom: 1px solid #E2D4BC; border-radius: 0; padding: .3rem .1rem; line-height: 28px; background-image: repeating-linear-gradient(0deg, transparent 0 27px, #EADFCD 27px 28px); background-attachment: local; }
.lp-seal { position: absolute; right: -16px; top: -16px; width: 76px; transform: rotate(14deg); filter: drop-shadow(0 4px 4px rgb(0 0 0 / .25)); }
.plain .lp-seal { display: none; }
.lp-greet .script { font-size: 2.4rem; color: #8A1723; }
.lp-q { display: grid; gap: .3rem; } .lp-q > span:first-child { font: 500 1.08rem/1.3 var(--display); }
.lp-rate .rate span[aria-hidden] { color: #B68A35; background: transparent; border-color: #E2D4BC; }
.lp-rate .rate input:checked + span { background: #9E1B2A; color: #FFF8F0; border-color: #9E1B2A; }
.lp-save { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem; align-items: center; } .lp-save small { color: #6A5556; }
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .lp-foot .muted { color: #6A5556; }
.letter-paper .btn.solid { background: #9E1B2A; color: #FFF8F0; border-color: #9E1B2A; }
.lp-holly { position: absolute; left: -20px; bottom: -18px; width: 110px; transform: rotate(-12deg); }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1.4rem; }
.letter-card { display: grid; gap: .8rem; align-content: start; padding: 1.4rem 1.5rem; background: #FFFCF4; color: #2B1416; border: 1px solid #E6D9C3; border-radius: 4px; box-shadow: var(--soft); }
.letter-card header { display: flex; justify-content: space-between; align-items: baseline; } .letter-card .script { font-size: 2rem; color: #8A1723; }
.stars { color: #B68A35; letter-spacing: .1em; }
.lc-q .label { color: #8A1723; } .lc-q p { margin: .2rem 0 0; font-size: .92rem; }

/* ---------- Settings, guide, rollover ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.theme-opt { all: unset; cursor: pointer; display: grid; gap: .3rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.theme-opt:hover { border-color: var(--ink2); }
.theme-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-opt:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.theme-sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); }
.theme-sw i { flex: 1; } .theme-sw i:nth-child(2) { flex: 2.2; }
.theme-opt b { font: 500 1.05rem/1.2 var(--display); } .theme-opt small { font-size: .78rem; color: var(--muted); }
.settings .card { max-width: 980px; }
.settings .plain-list li { flex-wrap: wrap; }
.inline-form, form.inline { display: flex; gap: .5rem; flex-wrap: wrap; }
form.inline .input { max-width: 320px; }
.rollover { display: grid; gap: 1rem; }
.rollover .plain-list li { align-items: flex-start; font-size: .9rem; padding: .4rem 0; }
.guide-years { border-top: 5px solid var(--accent); }
.guide-years h2 { margin: .3rem 0 .8rem; }
.card h2 a.link-plain .ic { width: 20px; height: 20px; color: var(--accent); }

/* ---------- Sign in ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-art { position: relative; display: grid; align-content: space-between; gap: 2rem; padding: clamp(1.6rem, 4vw, 3.2rem); color: var(--band-ink); overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--band) 0 18px, var(--band2) 18px 36px); }
.aa-top { display: flex; align-items: center; gap: .8rem; } .aa-top .label { color: var(--band-muted); }
.aa-seal { width: 56px; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)); }
.aa-title { display: grid; gap: .4rem; } .aa-title .script { font-size: clamp(5rem, 12vw, 8.5rem); line-height: .85; color: var(--band-ink); }
.aa-sub { font: 500 1.1rem/1.3 var(--display); font-style: italic; color: var(--band-muted); }
.aa-frames { position: relative; height: 270px; }
.aa-frames .pola { position: absolute; margin: 0; width: 180px; padding: 9px 9px 0; background: #FFFEFA; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .6); color: #8A1723; }
.aa-frames .pola figcaption { font: 400 1.3rem/2.2 var(--script); text-align: center; }
.aa-frames .ph { aspect-ratio: 1; }
.aa-frames .g1 { background: url(../demo/wrapping_t.webp) center / cover, #E9DFC9; } .aa-frames .g2 { background: url(../demo/table_t.webp) center / cover, #5A1820; } .aa-frames .g3 { background: url(../demo/portrait2_t.webp) center / cover, #F1E6D3; }
.aa-frames .p1 { left: 0; top: 30px; transform: rotate(-7deg); } .aa-frames .p2 { left: 150px; top: 0; transform: rotate(3deg); z-index: 1; } .aa-frames .p3 { left: 310px; top: 40px; transform: rotate(-2deg); }
.aa-frames .spk { position: absolute; fill: var(--gold-soft); } .aa-frames .s1 { width: 30px; height: 30px; left: 120px; top: -20px; } .aa-frames .s2 { width: 18px; height: 18px; left: 480px; top: 20px; } .aa-frames .s3 { width: 22px; height: 22px; left: 40px; top: 250px; }
.aa-bow { position: absolute; left: 196px; top: -34px; width: 100px; z-index: 3; filter: drop-shadow(0 4px 5px rgb(0 0 0 / .4)); }
.aa-foot { max-width: 48ch; color: var(--band-muted); margin: 0; } .aa-foot b { color: var(--band-ink); font-weight: 600; }
.auth-form { display: grid; place-items: center; padding: 2rem 1.2rem; background: var(--paper); }
.auth-card { display: grid; gap: 1rem; width: min(400px, 100%); }
.auth-card h2 { font-size: 2rem; }
.key-input { font: 700 1.2rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.error-text { color: var(--bad); font-weight: 600; margin: 0; }
.boot { display: grid; place-items: center; min-height: 100vh; font: 400 4rem var(--script); color: var(--accent); }
@media (max-width: 860px) { .auth { grid-template-columns: minmax(0, 1fr); } .aa-frames { height: 220px; transform: scale(.8); transform-origin: left top; } }

/* ---------- Print: the box locator, the grocery list ---------- */
@media print {
  .side, .top, .tabbar, .tabs, .demo-band, .archive-band, .head-actions, .toolbar, .snowfall, #toasts, .btn, .quick, .vdrop { display: none !important; }
  .main-col { margin: 0; } #main { padding: 0; max-width: none; } body { background: #fff; }
  .card, .box-label, .aisle, .stat { box-shadow: none !important; break-inside: avoid; }
}
.letter-paper .label, .letter-card .label { color: #6A3A3E; }