/* WichtelCircle
   Palette, winter 2026:
   cloud    #F0EEE9  Pantone 11-4201 Cloud Dancer (colour of the year 2026), the page
   paper    #FBFAF7  raised surfaces, inputs
   wax      #EDE3CC  the lots / slips (WGSN AW26/27 "Wax Paper")
   fir      #123C34  brand, hero field
   cranberry#B4233C  the one action colour + wax seal (holiday 2026 reds went deeper)
   gold     #D6B66B  string, tags, highlights on dark (champagne gold)
   ink      #202824  text
   teal     #1F6F6A  links + focus (nod to WGSN "Transformative Teal")
   Type: Young Serif (headlines), Hanken Grotesk (UI), Kalam (handwritten names on lots only). */

@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap;
  src: url(/static/fonts/young-serif-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap;
  src: url(/static/fonts/young-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url(/static/fonts/kalam-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url(/static/fonts/kalam-latin-700-normal.woff2) format("woff2"); }

:root {
  --cloud: #F0EEE9; --paper: #FBFAF7; --wax: #EDE3CC; --wax-2: #E3D6B9; --wax-ink: #2E2A22;
  --fir: #123C34; --fir-2: #1B4D43; --fir-3: #2A6356; --on-fir: #F0EEE9; --on-fir-2: rgba(240, 238, 233, .84);
  --cranberry: #B4233C; --cranberry-2: #951A30; --on-cranberry: #fff;
  --gold: #D6B66B; --brass: #7E621F;
  --ink: #202824; --ink-2: #47524C; --ink-3: #5E6863;
  --line: #DAD6CD; --line-2: #C8C3B8; --sage: #E3E8E0; --sage-2: #D3DCD0;
  --teal: #1F6F6A; --ok: #2D7350; --ok-bg: #E2EEE5; --warn: #8A5A00; --warn-bg: #F6ECD3; --err: #B4233C; --err-bg: #F7E3E5;
  --surface: var(--paper); --bg: var(--cloud);
  --shadow-1: 0 1px 2px rgba(18, 40, 34, .06), 0 2px 8px -2px rgba(18, 40, 34, .08);
  --shadow-2: 0 2px 4px rgba(18, 40, 34, .06), 0 18px 40px -18px rgba(18, 40, 34, .35);
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-hand: "Kalam", "Comic Sans MS", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cloud: #0E1A17; --paper: #15241F; --surface: #15241F; --bg: #0E1A17;
    --fir: #0B2A23; --fir-2: #12362D; --fir-3: #1E4A3F; --on-fir: #EEEBE4;
    --cranberry: #C9354F; --cranberry-2: #A92A42; --gold: #D9BC77; --brass: #D9BC77;
    --ink: #ECE9E2; --ink-2: #BCC3BD; --ink-3: #9AA39D;
    --line: #26372F; --line-2: #34483F; --sage: #182A24; --sage-2: #20352E;
    --teal: #6CC0B5; --ok: #7CC79B; --ok-bg: #16302A; --warn: #E2B85A; --warn-bg: #2E2715; --err: #F07A8C; --err-bg: #34191E;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 20px 40px -18px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cloud: #0E1A17; --paper: #15241F; --surface: #15241F; --bg: #0E1A17;
  --fir: #0B2A23; --fir-2: #12362D; --fir-3: #1E4A3F; --on-fir: #EEEBE4;
  --cranberry: #C9354F; --cranberry-2: #A92A42; --gold: #D9BC77; --brass: #D9BC77;
  --ink: #ECE9E2; --ink-2: #BCC3BD; --ink-3: #9AA39D;
  --line: #26372F; --line-2: #34483F; --sage: #182A24; --sage-2: #20352E;
  --teal: #6CC0B5; --ok: #7CC79B; --ok-bg: #16302A; --warn: #E2B85A; --warn-bg: #2E2715; --err: #F07A8C; --err-bg: #34191E;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 20px 40px -18px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--font-ui);
  font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .9em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--gold); color: #202824; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); padding: .5rem .9rem; border-radius: var(--r-m); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }
.narrow { max-width: 780px; }
.muted { color: var(--ink-3); }
.small, .hint { font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
.hint { margin: .35rem 0 0; }
.block { display: block; }
.prewrap { white-space: pre-line; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.45rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
.display-sm { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; }
.h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.12; letter-spacing: -.008em; text-wrap: pretty; margin-bottom: .6em; }
.h2-sm { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; margin-bottom: .4em; }
.h3 { font-family: var(--font-ui); font-size: 1.125rem; font-weight: 680; line-height: 1.3; letter-spacing: -.005em; display: flex; align-items: center; gap: .5rem; }
.lead { font-size: 1.1875rem; color: var(--ink-2); max-width: 62ch; margin-top: .6rem; }

/* -------------------------------------------------------------- topbar */
.topbar { position: relative; z-index: 20; }
.topbar-in { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; color: var(--fir); text-decoration: none; font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.01em; }
.wm-tag { width: 30px; height: 30px; flex: none; }
.wm-slip { fill: var(--wax); stroke: var(--fir); stroke-width: 1.3; }
.wm-crease { stroke: rgba(120, 95, 40, .5); stroke-width: 1; }
.wm-seal { fill: var(--cranberry); }
:root[data-theme="dark"] .wm-slip { stroke: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-slip { stroke: none; } }
@media (max-width: 640px) { .nav-demo { display: none; } .topnav > a { padding: .5rem .45rem; font-size: .9rem; } .wordmark { font-size: 1.12rem; } .wm-tag { width: 26px; height: 26px; } }
.topnav { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.topnav > a { color: var(--ink-2); text-decoration: none; font-weight: 560; font-size: .95rem; padding: .5rem .7rem; border-radius: var(--r-m); white-space: nowrap; }
.topnav > a:hover { background: var(--sage); color: var(--ink); }
.toggles { display: inline-flex; align-items: center; gap: .15rem; margin-left: .25rem; }
.langseg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-right: .2rem; border: 1px solid var(--line-2); border-radius: 999px; }
.langseg > * { display: inline-grid; place-items: center; min-width: 38px; height: 32px; padding: 0 .4rem; border-radius: 999px;
  font-weight: 700; font-size: .78rem; letter-spacing: .05em; line-height: 1; text-decoration: none; color: var(--ink-2); }
.langseg > a:hover { background: var(--sage); color: var(--ink); }
.langseg > .is-on { background: var(--ink); color: var(--bg); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-m); cursor: pointer; }
.icon-btn:hover { background: var(--sage); color: var(--ink); }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
.navmenu { display: none; position: relative; }
.navmenu summary { list-style: none; cursor: pointer; }
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 230px; display: grid; padding: .4rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); animation: pop .16s var(--ease) both; }
.navmenu-panel a, .navmenu-panel button { display: flex; align-items: center; min-height: 46px; padding: 0 .85rem; border: 0; border-radius: 8px; background: none;
  color: var(--ink); text-decoration: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.navmenu-panel a:hover, .navmenu-panel button:hover { background: var(--sage); }
.navmenu-panel .nav-demo { display: flex; }
@media (max-width: 700px) { .page-landing .topnav > .nav-guides { display: none; } }
@media (max-width: 600px) { .page-guide .topnav > .nav-guides { display: none; } }
.navmenu-panel .nav-guides { display: flex; }
@media (max-width: 374px) {
  .topbar-in { gap: .5rem; }
  .wordmark { font-size: 1.04rem; gap: .4rem; }
  .langseg { margin-right: 0; }
  .langseg > * { min-width: 32px; padding: 0 .3rem; }
}
@media (max-width: 540px) {
  .topnav.has-menu > a, .topnav.has-menu > .toggles > .theme-toggle { display: none; }
  .topnav.has-menu > .toggles { margin-left: 0; }
  .topnav.has-menu .navmenu { display: block; }
}
.page-app .topbar, .page-legal .topbar, .page-events .topbar { border-bottom: 1px solid var(--line); background: var(--bg); }

/* -------------------------------------------------------------- buttons */
.btn { --bh: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--bh);
  padding: 0 1.15rem; border-radius: var(--r-m); border: 1.5px solid transparent; font-weight: 640; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s var(--ease), border-color .15s, color .15s, transform .12s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-lg { --bh: 54px; padding: 0 1.45rem; font-size: 1.06rem; border-radius: 12px; }
.btn-sm { --bh: 38px; padding: 0 .85rem; font-size: .92rem; gap: .4rem; }
.btn-primary { background: var(--cranberry); color: var(--on-cranberry); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(80, 10, 20, .25); }
.btn-primary:hover { background: var(--cranberry-2); }
.btn-secondary { background: transparent; color: var(--fir); border-color: currentColor; }
.btn-secondary:hover { background: var(--sage); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sage); color: var(--ink); }
.btn-danger { background: transparent; color: var(--err); border-color: currentColor; }
.btn-danger:hover { background: var(--err-bg); }
.btn-quiet-dark { background: transparent; color: var(--on-fir); border-color: rgba(240, 238, 233, .38); }
.btn-quiet-dark:hover { background: rgba(240, 238, 233, .08); border-color: rgba(240, 238, 233, .7); }
:root[data-theme="dark"] .btn-secondary { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-secondary { color: var(--ink); } }
.linkish { color: var(--teal); text-decoration: underline; text-underline-offset: .18em; }

/* --------------------------------------------------------------- forms */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.field label, .label { font-weight: 620; font-size: .95rem; }
.opt { font-weight: 450; color: var(--ink-3); font-size: .85rem; }
.field-row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-half { max-width: calc(50% - .6rem); } }
input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: .65rem .85rem; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-m);
  font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select { appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6863' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 18px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .8; }
.is-invalid, input[aria-invalid="true"] { border-color: var(--err) !important; }
.field-error { margin: 0; color: var(--err); font-size: .875rem; font-weight: 560; min-height: 0; }
.field-error:empty { display: none; }
.input-group { display: flex; }
.input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group select { width: auto; flex: none; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: var(--sage); font-weight: 600; }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-weight: 560; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--paper); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check-box::after { content: ""; width: 11px; height: 6px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .18s var(--ease-spring); }
.check input:checked + .check-box { background: var(--fir-2); border-color: var(--fir-2); }
.check input:checked + .check-box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input:focus-visible + .check-box { outline: 3px solid var(--teal); outline-offset: 2px; }
.check-sm { font-size: .9rem; align-items: center; }
.check-sm .check-box { width: 20px; height: 20px; margin: 0; }
.switch { appearance: none; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s var(--ease); margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .22s var(--ease-spring); }
.switch:checked { background: var(--fir-2); }
:root[data-theme="dark"] .switch:checked { background: var(--teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .switch:checked { background: var(--teal); } }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .55; cursor: default; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row.is-fixed { cursor: default; }
.switch-row-plain { border: 0; padding: .5rem 0; }
.switch-row.is-disabled { opacity: .6; cursor: default; }
.more { border-top: 1px solid var(--line); padding-top: .4rem; }
.more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 620; color: var(--teal); padding: .5rem 0; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary .ic { transform: rotate(180deg); }
.more summary .ic { transition: transform .2s var(--ease); }
.more-body { display: grid; gap: 1.15rem; padding-top: .6rem; }
.form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.copyfield { display: flex; gap: .5rem; }
.copyfield input { font-size: .92rem; background: var(--sage); }

/* ---------------------------------------------------------------- hero */
.page-landing .topbar { background: var(--fir); color: var(--on-fir); }
.page-landing .wordmark { color: var(--on-fir); }
.page-landing .wm-slip { stroke: none; }
.page-landing .topnav > a, .page-landing .langseg > a, .page-landing .icon-btn { color: var(--on-fir-2); }
.page-landing .topnav > a:hover, .page-landing .langseg > a:hover, .page-landing .icon-btn:hover { background: rgba(240, 238, 233, .1); color: var(--on-fir); }
.page-landing .langseg { border-color: rgba(240, 238, 233, .3); }
.page-landing .langseg > .is-on { background: var(--on-fir); color: var(--fir); }
.hero { background: var(--fir); color: var(--on-fir); position: relative; overflow: hidden; isolation: isolate; }
/* one warm pool of light behind the lots, like a desk lamp at the Weihnachtsessen */
.hero::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -220px; top: -160px;
  background: radial-gradient(closest-side, rgba(214, 182, 107, .17), rgba(214, 182, 107, 0)); pointer-events: none; }
.hero-in { display: grid; gap: 2rem; padding-block: 2.5rem 6rem; align-items: center; }
@media (min-width: 960px) { .hero-in { grid-template-columns: 1.08fr .92fr; gap: 4rem; padding-block: 4.4rem 8.4rem; } }
.hero-copy .display { color: var(--on-fir); max-width: 12ch; }
.hero-lead { font-size: clamp(1.06rem, 1.6vw, 1.3rem); color: var(--on-fir-2); max-width: 44ch; margin: 1rem 0 1.5rem; line-height: 1.5; }
@media (min-width: 960px) { .hero-lead { margin: 1.4rem 0 2rem; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; }
.hero-demo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .25rem; color: var(--on-fir); font-weight: 620;
  text-decoration: underline; text-decoration-color: rgba(240, 238, 233, .45); text-underline-offset: .28em; }
.hero-demo:hover { text-decoration-color: var(--gold); }
.hero-demo .ic { width: 1em; height: 1em; margin-right: .45rem; flex: none; }
@media (max-width: 560px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-cta { width: 100%; } }
.hero-note { margin: .9rem 0 0; font-size: .9rem; color: var(--on-fir-2); max-width: 46ch; }
.hero-note-m { display: none; }
@media (max-width: 560px) { .hero-copy .hero-note { display: none; } .hero-note-m { display: block; margin: 1.1rem auto 0; text-align: center; } }

.hero-sheet { position: relative; }
.sheet { background: var(--paper); color: var(--ink); border-radius: var(--r-l); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .05);
  transform: rotate(-1.2deg); overflow: hidden; max-width: 460px; margin-inline: auto; }
:root[data-theme="dark"] .sheet { background: #F4F2EC; color: #202824; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet { background: #F4F2EC; color: #202824; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: #E7EBE4; border-bottom: 1px solid #D5D9CF; }
.sheet-tab { display: inline-flex; align-items: center; gap: .45rem; font-weight: 680; font-size: .92rem; color: #123C34; }
.sheet-count { font-size: .85rem; color: #4A554F; font-variant-numeric: tabular-nums; }
.sheet-row { display: grid; grid-template-columns: 38px 1fr; border-bottom: 1px solid #E2DED5; align-items: stretch; margin: 0; }
.sheet-row.is-new { animation: row-in .45s var(--ease) both; }
.sheet-cell { display: flex; align-items: center; min-height: 40px; padding: .45rem .7rem; color: #202824; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-row.is-more .sheet-cell { color: #4A554F; font-size: .9rem; white-space: normal; }
.sheet.is-over { box-shadow: 0 0 0 3px var(--gold), 0 30px 60px -30px rgba(0, 0, 0, .55); }
.sheet-file { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem 1rem; background: #F3F1EB; border-bottom: 1px solid #E2DED5; color: #123C34; font-size: .9rem; }
.sheet-file-text { flex: 1; min-width: 0; display: grid; }
.sheet-file-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-file-text span { color: #4A554F; font-size: .82rem; }
.sheet-file-clear { border: 0; background: transparent; color: #1F6F6A; font-weight: 620; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; padding: 0 .4rem; white-space: nowrap; }
.sheet-upload { display: grid; gap: .4rem; padding: .85rem 1rem 1rem; border-top: 1px dashed #CFCABE; text-align: center; }
.sheet-upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: 0 1rem; border-radius: 10px;
  border: 0; background: #123C34; color: #F0EEE9; font-weight: 650; font-size: .98rem; cursor: pointer; transition: background .15s; }
.sheet-upload-btn:hover { background: #1B4D43; }
.sheet-upload-btn .spinner { color: #F0EEE9; }
.sheet-upload-hint { font-size: .82rem; color: #4A554F; }
.sheet-n { display: grid; place-items: center; background: #F3F1EB; border-right: 1px solid #E2DED5; font-size: .78rem; color: #6E7872; font-variant-numeric: tabular-nums; }
.sheet-input { border: 0 !important; border-radius: 0 !important; min-height: 40px !important; padding: .45rem .7rem !important; background: transparent !important; box-shadow: none !important; color: #202824; font-size: 1rem; }
.sheet-input:focus { background: #FFF8E6 !important; box-shadow: inset 0 0 0 2px #1F6F6A !important; }
.sheet-add { display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 44px; border: 0; background: transparent; padding: .55rem 1rem; color: #1F6F6A; font-weight: 620; font-size: .92rem; cursor: pointer; text-align: left; }
.sheet-add:hover { background: #F3F1EB; }
.hero + .band { padding-top: 2.6rem; }
@media (min-width: 900px) { .hero + .band { padding-top: 4rem; } }

/* ----------------------------------------------------------------- slips */
.slip { --rot: 0deg; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 46px; padding: 0 14px;
  background: var(--wax); color: var(--wax-ink); border-radius: 3px; transform: rotate(var(--rot));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 18px -12px rgba(0, 0, 0, .55);
  background-image: linear-gradient(180deg, transparent 49%, rgba(120, 95, 40, .16) 50%, transparent 51%), linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .03)); }
:root[data-theme="dark"] .slip, :root[data-theme="dark"] .envelope { --wax: #E9DFC6; --wax-2: #DCCDAA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .slip, :root:not([data-theme="light"]) .envelope { --wax: #E9DFC6; --wax-2: #DCCDAA; } }
.slip-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; line-height: 1; white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; }
.slip.is-new { animation: slip-drop .55s var(--ease-spring) both; }
@keyframes slip-drop { from { opacity: 0; transform: translateY(-26px) rotate(calc(var(--rot) * -3)); } to { opacity: 1; transform: rotate(var(--rot)); } }
.slip-hero { min-width: 150px; height: 70px; margin: 0 auto 1.4rem; display: flex; width: max-content; }
.slip-hero .slip-name { font-size: 1.5rem; }
.slip.is-folded::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D9475C, var(--cranberry) 60%, #7C1426); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.slip.is-folded .slip-name { padding-right: 14px; }
.slipboard { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.slip-board { min-width: 0; height: 44px; padding: 0 12px; }
.slip-board .slip-name { font-size: 1.05rem; }
.slip-board:not(.is-open)::after { content: ""; position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D9475C, #B4233C 60%, #7C1426); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.slip-board.is-open { background: transparent; background-image: none; box-shadow: none; border: 1.5px solid var(--gold); color: var(--ink-2); transform: none; }
.slip-board.is-open .slip-name { color: var(--ink-2); font-weight: 400; }
.slip-board.is-open::before { content: ""; position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202824' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }

/* ---------------------------------------------------------------- bands */
.band { padding-block: 4.5rem; }
@media (min-width: 900px) { .band { padding-block: 6.5rem; } }
.band-sage { background: var(--sage); }
.band-paper { background: var(--paper); border-block: 1px solid var(--line); }
.band-fir { background: var(--fir); color: var(--on-fir); }
.band-fir .h2 { color: var(--on-fir); }
.band-fir p, .band-fir .split-copy p { color: var(--on-fir-2); }
.split { display: grid; gap: 2.5rem; align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; gap: 4.5rem; } .split-rev .split-copy { order: 2; } }
.split-copy p { color: var(--ink-2); max-width: 52ch; }
.links-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.grid-demo { margin: 0; background: var(--paper); border-radius: var(--r-l); box-shadow: var(--shadow-2); overflow: hidden; }
.grid-demo .grid { display: block; overflow-x: auto; }
@media (max-width: 400px) { .grid-demo .grid { font-size: .82rem; } .grid-demo .grid td, .grid-demo .grid th { padding: .45rem .4rem; } }
.grid-issues { padding: .9rem 1.1rem 1.1rem; display: grid; gap: .4rem; border-top: 1px solid var(--line); }
.issue { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .9rem; }
.issue .ic { margin-top: .2em; }
.issue-error { color: var(--err); } .issue-warn { color: var(--warn); }
.board-demo { margin: 0; background: var(--paper); border-radius: var(--r-l); box-shadow: var(--shadow-2); padding: 1.4rem; display: grid; gap: 1.3rem; }
.board-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.board-stats div { display: grid; padding-inline: .5rem; border-left: 1px solid var(--line); }
.board-stats div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 420px) { .board-stats { grid-template-columns: 1fr 1fr; row-gap: .9rem; } .board-stats div:nth-child(3) { border-left: 0; padding-left: 0; } }
.board-stats strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.board-stats span { font-size: .8rem; color: var(--ink-3); line-height: 1.3; }
.facts { display: grid; gap: 0 3rem; margin: 2rem 0 0; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { padding: 1.3rem 0; border-top: 1px solid var(--line); }
.fact dt { font-weight: 700; font-size: 1.06rem; margin-bottom: .3rem; }
.fact dd { margin: 0; color: var(--ink-2); }
.facts-dark { margin: 0; }
.facts-dark .fact { border-color: rgba(240, 238, 233, .18); }
.facts-dark dt { color: var(--on-fir); } .facts-dark dd { color: var(--on-fir-2); }
@media (min-width: 900px) { .band-fir .split { align-items: start; } }
.faq { border-top: 1px solid var(--line); margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; cursor: pointer; font-weight: 650; font-size: 1.08rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { transition: transform .22s var(--ease); color: var(--ink-3); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item p { color: var(--ink-2); margin: 0 0 1.2rem; max-width: 64ch; }
.closing { padding-block: 5rem 6rem; }
.closing-in { display: grid; gap: 1.8rem; justify-items: start; position: relative; }
.closing-slips { display: none; }
@media (min-width: 900px) {
  .closing-in { grid-template-columns: 1fr auto; align-items: center; }
  .closing-in > .btn { grid-column: 1; }
  .closing-slips { display: block; grid-column: 2; grid-row: 1 / span 2; position: relative; width: 380px; height: 260px; }
  .closing-slips .slip { position: absolute; }
}
.closing .display-sm { max-width: 18ch; color: var(--fir); }
:root[data-theme="dark"] .closing .display-sm { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .closing .display-sm { color: var(--ink); } }

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; font-size: .92rem; color: var(--ink-3); }
.footer-in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.footer-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); color: var(--fir); font-size: 1.05rem; }
:root[data-theme="dark"] .footer-brand, :root[data-theme="dark"] .wordmark { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-brand, :root:not([data-theme="light"]) .wordmark { color: var(--ink); } }
.footer-brand .wm-tag { width: 24px; height: 24px; }
.footer nav { display: flex; gap: .3rem 1.2rem; flex-wrap: wrap; }   /* rows: the 44px tap height already spaces them */
.footer nav a { color: var(--ink-2); }
.footer-note { width: 100%; margin: 0; }

/* ------------------------------------------------------------- wizard */
.topbar-app .topbar-in { gap: 1.5rem; }
.progress { list-style: none; display: flex; gap: .25rem; margin: 0 auto; padding: 0; counter-reset: none; }
.progress-step button { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; padding: .4rem .6rem; border-radius: 99px; color: var(--ink-3); font-weight: 600; font-size: .9rem; cursor: default; }
.progress-step button:not([disabled]) { cursor: pointer; }
.progress-step button:not([disabled]):hover { background: var(--sage); }
.progress-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: .82rem; font-variant-numeric: tabular-nums; transition: background .25s, border-color .25s, color .25s; }
.progress-step.is-done .progress-n { background: var(--fir-2); border-color: var(--fir-2); color: #fff; }
.progress-step.is-current button { color: var(--ink); }
.progress-step.is-current .progress-n { background: var(--cranberry); border-color: var(--cranberry); color: #fff; }
.progress-step + .progress-step::before { content: ""; width: 18px; height: 1.5px; background: var(--line-2); align-self: center; margin-right: .1rem; }
.progress-step { display: flex; }
@media (max-width: 899px) { .progress-label { display: none; } .progress-step.is-current .progress-label { display: inline; } }
@media (max-width: 560px) { .topbar-app .topbar-in { gap: .6rem; } .topbar-app .wm-text { display: none; } .progress-step.is-current .progress-label { display: none; } .topbar-app .topnav .langseg { display: none; } .progress-step + .progress-step::before { width: 8px; } .progress-step button { padding: .3rem .25rem; } }
.wizard { max-width: 820px; padding-top: 2.2rem; padding-bottom: 8rem; }
.wizard-where { font-size: .88rem; font-weight: 650; color: var(--ink-3); margin-bottom: .6rem; min-height: 1.3em; }
.wstep .lead { margin-bottom: 2rem; }
.wstep.is-entering { animation: step-in .38s var(--ease) both; }
.wstep.is-entering-back { animation: step-in-back .38s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.actionbar-in { display: flex; align-items: center; gap: 1rem; min-height: 74px; max-width: 820px; }
.actionbar-info { flex: 1; text-align: center; font-size: .9rem; color: var(--ink-3); }
@media (max-width: 560px) { .actionbar-info { display: none; } .actionbar-in { justify-content: space-between; } .actionbar .btn-primary { flex: 1; } }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--sage); border-radius: 12px; margin-bottom: 1.4rem; }
.segmented button { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; padding: .6rem .95rem; border-radius: 9px; font-weight: 620; font-size: .95rem; color: var(--ink-2); cursor: pointer; min-height: 42px; }
.segmented button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
@media (max-width: 560px) { .segmented { display: grid; grid-template-columns: 1fr; width: 100%; } }
.method { margin-bottom: 2.2rem; }
.plist-head { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.6rem; margin-bottom: .6rem; }
.count { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 .45rem; border-radius: 99px; background: var(--sage); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plist { list-style: none; margin: 0; padding: 0; }
.prow { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.prow.is-new { animation: row-in .4s var(--ease) both; }
@keyframes row-in { from { background: color-mix(in srgb, var(--gold) 30%, transparent); } to { background: transparent; } }
.prow-main { flex: 1; min-width: 0; display: grid; }
.prow-name { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-sub { font-size: .85rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 650; padding: .12rem .45rem; border-radius: 5px; background: var(--sage); color: var(--ink-2); white-space: nowrap; }
.tag-gold { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--brass); }
.empty { color: var(--ink-3); padding: 1.2rem 0; }
.avatar { --av: var(--fir-2); flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--av); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.avatar-sm { width: 28px; height: 28px; font-size: .68rem; }
.av-1 { --av: #1B4D43; } .av-2 { --av: #B4233C; } .av-3 { --av: #7E621F; } .av-4 { --av: #1F6F6A; } .av-5 { --av: #5B4A6E; } .av-6 { --av: #8A4B2A; }
.addform { display: grid; gap: .9rem; align-items: end; }
@media (min-width: 760px) { .addform { grid-template-columns: 1.2fr 1.2fr 1fr auto; } .addform-error { grid-column: 1 / -1; } }
.signup-box { display: grid; gap: .6rem; padding-top: 1rem; }

/* importer */
.drop { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 2.4rem 1.2rem; border: 2px dashed var(--line-2); border-radius: var(--r-l); background: var(--paper); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.drop:hover, .drop.is-over { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--paper)); }
.drop.is-over { transform: scale(1.01); }
.drop-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sage); color: var(--fir-2); margin-bottom: .4rem; }
:root[data-theme="dark"] .drop-icon { color: var(--teal); }
.drop-icon .ic { width: 26px; height: 26px; }
.drop-title { font-weight: 680; font-size: 1.1rem; }
.drop-sub { color: var(--ink-2); }
.importer-tpl { font-size: .9rem; color: var(--ink-3); margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.upload-progress { display: grid; gap: .4rem; margin-top: 1rem; }
.bar { display: block; height: 6px; border-radius: 99px; background: var(--sage); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--fir-2); border-radius: 99px; transition: width .2s var(--ease); }
.review { margin-top: .4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.review-file { display: flex; align-items: center; gap: .5rem; margin: 0; flex: 1; min-width: 0; }
.review-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-pick { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }
.sheet-pick select { min-height: 38px; padding-block: .3rem; width: auto; }
.mapping { background: var(--sage); border-radius: var(--r-m); padding: 1rem; }
.mapping-title { font-weight: 650; margin-bottom: .7rem; font-size: .95rem; }
.mapping-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mapping-grid label { display: grid; gap: .25rem; font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.mapping-grid select { min-height: 40px; padding-block: .35rem; font-size: .92rem; }

.review-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.review-summary { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.review-summary .ok { color: var(--ok); } .review-summary .bad { color: var(--err); } .review-summary .mid { color: var(--ink-3); }
.grid-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--sage); text-align: left; font-weight: 700; font-size: .8rem; color: var(--ink-2); padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.grid td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; vertical-align: top; }
.grid-n { width: 1%; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.grid tr.has-error td { background: color-mix(in srgb, var(--err-bg) 60%, transparent); }
.cell-error { box-shadow: inset 0 -2px 0 var(--err); color: var(--err); font-weight: 600; }
.cell-warn { background: color-mix(in srgb, var(--warn-bg) 70%, transparent); }
.grid-edit td { padding: 0; }
.grid-edit td.grid-n, .grid-edit td.grid-issue, .grid-edit td.grid-skip { padding: .55rem .6rem; }
.grid-edit input:not(.rowcheck) { border: 0; border-radius: 0; min-height: 40px; padding: .5rem .6rem; background: transparent; font-size: .92rem; min-width: 120px; }
.grid-edit input:not(.rowcheck):focus { box-shadow: inset 0 0 0 2px var(--teal); background: var(--paper); }
.grid-edit td.is-err input { box-shadow: inset 0 -2px 0 var(--err); color: var(--err); }
.grid-edit tr.is-skipped td:not(.grid-skip) { opacity: .45; text-decoration: line-through; }
.grid-issue { font-size: .84rem; line-height: 1.4; padding: .1rem .6rem .55rem !important; }
.grid-issue .e { color: var(--err); display: block; } .grid-issue .w { color: var(--ink-3); display: block; }
.grid-skip { width: 1%; white-space: nowrap; }
.rowcheck { width: 18px; height: 18px; accent-color: var(--fir-2); cursor: pointer; margin: .1rem 0 0; }
.review-foot { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; }
.review-foot .hint { margin: 0; flex: 1; }
@media (max-width: 560px) { .review-foot { flex-direction: column; align-items: stretch; } .review-foot .hint { flex: none; } }

/* rules */
.rule-list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--line); }
.excl { margin-bottom: 2rem; }
.excl .h3 { margin-bottom: .2rem; }
.excl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: center; margin-top: 1rem; }
.excl-form .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 760px) { .excl-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; } .excl-form .btn { grid-column: auto; } }
.excl-and { color: var(--cranberry); display: grid; place-items: center; }
.pairs { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pair { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .75rem; border-radius: 99px; background: var(--paper); border: 1px solid var(--line-2); font-weight: 600; font-size: .92rem; }
.pair .ic-ban { color: var(--cranberry); width: 1em; height: 1em; }
.pair button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); }
.pair button:hover { background: var(--err-bg); color: var(--err); }
.feas { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--sage); min-height: 56px; }
.feas:empty { display: none; }
.feas .ic { width: 1.4em; height: 1.4em; margin-top: .05em; }
.feas p { margin: 0; }
.feas.is-ok { background: var(--ok-bg); color: var(--ok); }
.feas.is-ok p { color: var(--ink); }
.feas.is-bad { background: var(--err-bg); color: var(--err); }
.feas.is-bad p { color: var(--ink); }
.feas strong { display: block; margin-bottom: .15rem; }
.feas.is-loading { color: var(--ink-3); }

/* review step */
.summary { display: grid; margin: 0 0 2.2rem; border-top: 1px solid var(--line); }
.summary > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--ink-3); font-weight: 560; }
.summary dd { margin: 0; font-weight: 600; }
.summary dd .hint { font-weight: 400; display: block; }
.choice { border: 0; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .7rem; }
.choice legend { margin-bottom: .8rem; padding: 0; }
.choice-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1.5px solid var(--line-2); border-radius: var(--r-m); background: var(--paper); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.choice-card:hover { border-color: var(--ink-3); }
.choice-card:has(input:checked) { border-color: var(--fir-2); box-shadow: 0 0 0 1px var(--fir-2); }
:root[data-theme="dark"] .choice-card:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.choice-card input { margin-top: .25rem; accent-color: var(--fir-2); width: 18px; height: 18px; flex: none; }
.choice-card.is-disabled { opacity: .55; cursor: not-allowed; }
.choice-body { display: grid; gap: .2rem; }
.choice-title { display: flex; align-items: center; gap: .5rem; font-weight: 680; }
.choice-text { color: var(--ink-2); font-size: .94rem; }
.notice { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--warn-bg); color: var(--ink); margin: 0 0 1.4rem; }
.notice > .ic { color: var(--warn); margin-top: .2em; }
.notice p { margin: .15rem 0 .6rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-ok { background: var(--ok-bg); } .notice-ok > .ic { color: var(--ok); }
.notice-quiet { background: var(--sage); }
.notice-err { background: var(--err-bg); } .notice-err > .ic { color: var(--err); }
.notice .btn { margin-top: .3rem; }

/* ----------------------------------------------------------- dashboard */
.demo-banner { background: var(--gold); color: #202824; }
.demo-in { display: flex; align-items: center; gap: .8rem; padding-block: .6rem; flex-wrap: wrap; }
.demo-in p { margin: 0; flex: 1; min-width: 220px; font-weight: 560; font-size: .95rem; }
.dash { padding-top: 2rem; padding-bottom: 5rem; }
.banners:empty { display: none; }
.evhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; margin-bottom: 1.8rem; }
.evhead-main { min-width: 0; flex: 1 1 420px; }
.evhead-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); margin-bottom: .5rem; }
.evhead-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--ink-3)); }
.st-open { --st: var(--gold); } .st-drawn { --st: var(--ok); } .st-archived { --st: var(--ink-3); } .st-draft { --st: var(--line-2); }
.evhead-title { overflow-wrap: anywhere; }
.evhead-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: var(--ink-2); margin: .6rem 0 0; }
.evhead-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.evhead-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; padding: .85rem .9rem; font-weight: 620; color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 48px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cranberry); }
.tab-badge { min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 99px; background: var(--cranberry); color: #fff; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }
.panel.is-entering { animation: fade-in .25s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 2.2rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.1rem 1rem 1.2rem; border-left: 1px solid var(--line); display: grid; gap: .1rem; }
.stat:nth-child(odd) { border-left: 0; padding-left: 0; }
@media (min-width: 760px) { .stat:nth-child(odd) { border-left: 1px solid var(--line); padding-left: 1rem; } .stat:first-child { border-left: 0; padding-left: 0; } }
@media (max-width: 759px) { .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
.stat-n { font-family: var(--font-display); font-size: 2.3rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .88rem; color: var(--ink-3); }
.stat-sub { font-size: .8rem; color: var(--ink-3); }
.ov-grid { display: grid; gap: 2.5rem; }
@media (min-width: 980px) { .ov-grid { grid-template-columns: 1fr 340px; gap: 3rem; } }
.next { margin-bottom: 2.4rem; }
.next:empty { display: none; }
.next-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .4rem; }
.next p { color: var(--ink-2); max-width: 60ch; }
.next-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1.1rem; }
.board-head .hint { margin: 0; }
.infocard { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem; background: var(--paper); margin-bottom: 1.4rem; display: grid; gap: .8rem; }
.infocard dl { margin: 0; display: grid; gap: .7rem; }
.infocard dt { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.infocard dd { margin: 0; font-weight: 560; overflow-wrap: anywhere; }
.infocard .countdown-big { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--fir); }
:root[data-theme="dark"] .infocard .countdown-big { color: var(--gold); }
.own { border: 1.5px dashed var(--gold); border-radius: var(--r-l); padding: 1.1rem 1.2rem; margin-bottom: 1.4rem; display: grid; gap: .5rem; justify-items: start; }
.own .hint { margin: 0; }
.activity .h3 { margin-bottom: .6rem; }
.activity-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.activity-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.activity-list time { color: var(--ink-3); white-space: nowrap; font-size: .82rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.toolbar-gap { flex: 1; }
.search { position: relative; flex: 1 1 220px; max-width: 360px; }
.search .ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search input { padding-left: 2.4rem; min-height: 42px; }
.toolbar select { width: auto; min-height: 42px; padding-block: .4rem; }
.add-panel, .import-panel { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem; margin-bottom: 1.4rem; background: var(--paper); }
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { text-align: left; font-size: .8rem; font-weight: 700; color: var(--ink-3); padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); }
.ptable td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tr.is-new td { animation: row-in .6s var(--ease) both; }
.pcell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.pcell-name { font-weight: 620; display: block; }
.pcell-sub { font-size: .82rem; color: var(--ink-3); display: block; }
.ptable .email { color: var(--ink-2); font-size: .92rem; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 650; padding: .18rem .5rem; border-radius: 6px; background: var(--sage); color: var(--ink-2); white-space: nowrap; }
.chip .ic { width: .95em; height: .95em; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-gold { background: color-mix(in srgb, var(--gold) 32%, transparent); color: var(--brass); }
.chip-err { background: var(--err-bg); color: var(--err); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.rowactions { display: flex; justify-content: flex-end; gap: .2rem; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 230px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2); padding: .35rem; display: grid; animation: pop .16s var(--ease) both; }
.menu-list.up { top: auto; bottom: calc(100% + 4px); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-list button { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; text-align: left; padding: .6rem .7rem; border-radius: 7px; cursor: pointer; font-size: .94rem; color: var(--ink); min-height: 42px; }
.menu-list button:hover, .menu-list button:focus-visible { background: var(--sage); }
.menu-list button.danger { color: var(--err); }
.menu-list button[disabled] { opacity: .45; cursor: not-allowed; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; }
.show-sm { display: none !important; }
@media (max-width: 640px) { .hide-sm { display: none; } .show-sm { display: block !important; overflow-wrap: anywhere; } }
.drawstate { margin-bottom: 2.5rem; }
.drawstate .next-title { font-size: 1.7rem; }
.meter { height: 10px; border-radius: 99px; background: var(--sage); overflow: hidden; margin: 1rem 0 .4rem; max-width: 520px; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--fir-2), var(--teal)); border-radius: 99px; transition: width .6s var(--ease); }
.rules-locked { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.rules-locked ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.share-grid { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .share-grid { grid-template-columns: 1fr 1fr; } }
.sharecard, .signupcard { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.3rem; background: var(--paper); display: grid; gap: .5rem; align-content: start; }
.sharecard p { color: var(--ink-2); margin: 0; }
.sharecard-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.signupcard { grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 760px) { .signupcard { grid-template-columns: 1fr auto; } }
.signupcard p { color: var(--ink-2); margin: 0; }
.qr { background: #fff; padding: 12px; border-radius: var(--r-m); border: 1px solid var(--line); justify-self: start; }
.qr img { width: 176px; height: 176px; }
.zone { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.6rem; display: grid; gap: .6rem; justify-items: start; }
.zone-danger .h3 { color: var(--err); }
.zone-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: .6rem 0; flex-wrap: wrap; }
.zone-row p { margin: 0; flex: 1; min-width: 220px; }
.fs { border: 0; padding: 0; margin: .4rem 0 0; display: grid; gap: .6rem; }
.fs legend { margin-bottom: .3rem; }
.pill { font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; background: var(--sage); color: var(--ink-2); white-space: nowrap; }
.pill-drawn { background: var(--ok-bg); color: var(--ok); }
.pill-open { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--brass); }
.pill-draft { background: transparent; border: 1px dashed var(--line-2); }

/* events list */
.events { padding-top: 2.4rem; padding-bottom: 4rem; }
.events-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.evlist { list-style: none; margin: 0 0 2.5rem; padding: 0; border-top: 1px solid var(--line); }
.evrow { display: flex; align-items: center; gap: 1rem; padding: 1rem .4rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 4px; }
.evrow:hover { background: var(--sage); }
.evrow-main { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.evrow-name { font-weight: 680; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evrow-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: var(--ink-3); font-size: .9rem; }
.evrow > .ic { color: var(--ink-3); }
.empty-state { text-align: center; padding: 2.5rem 1rem 3rem; border: 1px dashed var(--line-2); border-radius: var(--r-l); margin-bottom: 2.5rem; }
.empty-state p { color: var(--ink-2); max-width: 46ch; margin-inline: auto; }
.login-box { border-top: 1px solid var(--line); padding-top: 1.6rem; display: grid; gap: .5rem; justify-items: start; }
.loginform { display: flex; flex-wrap: wrap; gap: .6rem; width: 100%; max-width: 520px; }
.loginform input { flex: 1 1 240px; }
.loginform .hint { width: 100%; }
.center-page { padding-block: 4rem 5rem; text-align: center; display: grid; justify-items: center; gap: .6rem; }
.center-page .lead { margin-inline: auto; }

/* ----------------------------------------------------------- participant */
.pwrap { max-width: 720px; padding-top: 2.2rem; padding-bottom: 4rem; }
.phead { text-align: center; margin-bottom: 2.2rem; }
.phead-kicker { color: var(--ink-3); font-weight: 600; margin-bottom: .5rem; }
.phead .display-sm { color: var(--fir); overflow-wrap: anywhere; }
:root[data-theme="dark"] .phead .display-sm { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phead .display-sm { color: var(--ink); } }
.phead-facts { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; color: var(--ink-2); }
/* Inline, not flex: a long place that wraps keeps its pin in front of the first word, lines centred. */
.phead-facts li { display: inline-block; max-width: 100%; }
.phead-facts li .ic { display: inline-block; vertical-align: -.16em; margin-right: .4rem; }
.phead-facts .ic { color: var(--brass); }
.reveal { margin-bottom: 1.8rem; }
.slipcard { background: var(--fir); color: var(--on-fir); border-radius: 22px; padding: 2.4rem 1.4rem 2.2rem; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.slipcard::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto; height: 120%; background: radial-gradient(closest-side, rgba(214, 182, 107, .2), transparent); pointer-events: none; }
.slipcard .h2 { color: var(--on-fir); margin: 1.6rem 0 .5rem; }
.slipcard p { color: var(--on-fir-2); max-width: 44ch; margin-inline: auto; }
.slipcard .muted { color: var(--on-fir-2); }
.slipcard .btn-lg { margin-top: 1rem; }
.slipcard-wait .slip-hero { margin-bottom: 0; }
.hand-name { font-family: var(--font-hand); font-weight: 700; font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1.05; color: var(--gold); display: block; }
.envelope { --w: min(320px, 78vw); position: relative; width: var(--w); height: calc(var(--w) * .62); margin: .4rem auto 0; perspective: 900px; }
.env-body, .env-flap, .envelope::before { position: absolute; left: 0; right: 0; }
.envelope::before { content: ""; top: 0; bottom: 0; background: var(--wax-2); border-radius: 8px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); }
.env-slip { position: absolute; left: 7%; right: 7%; top: 8%; height: 84%; z-index: 2; background: #FBF8F0; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: #2E2A22; padding: .6rem;
  transition: transform .9s var(--ease) .5s; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.env-for { font-size: .82rem; font-weight: 650; color: #6E6450; opacity: 0; transition: opacity .4s .9s; }
.env-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: #B4233C; opacity: 0; transition: opacity .4s 1s; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-body { bottom: 0; top: 0; z-index: 3; background: var(--wax); border-radius: 8px; clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%); }
.env-flap { top: 0; height: 62%; z-index: 4; background: var(--wax); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center;
  transition: transform .6s var(--ease), z-index 0s .3s; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)); border-radius: 8px 8px 0 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .08)); }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 62%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D9475C, #B4233C 55%, #7C1426); display: grid; place-items: center; color: var(--gold);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 -2px 4px rgba(0, 0, 0, .25); transition: transform .35s var(--ease), opacity .3s; }
.env-seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(214, 182, 107, .55); }
.env-seal .ic { width: 22px; height: 22px; }
.envelope.is-opening .env-seal { transform: scale(1.25) rotate(-12deg); opacity: 0; }
.envelope.is-open .env-flap, .envelope.is-opening .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.is-open .env-slip, .envelope.is-opening .env-slip { transform: translateY(-46%); }
.envelope.is-open .env-for, .envelope.is-open .env-name, .envelope.is-opening .env-for, .envelope.is-opening .env-name { opacity: 1; }
.envelope.is-open .env-seal { display: none; }
.slipcard.is-revealed .envelope { margin-top: calc(var(--w, 320px) * .3); }
.slipcard.is-revealed .h2 { margin-top: 1.2rem; }
.reveal-result { margin-top: 1.4rem; text-align: left; }
.reveal-result.is-entering { animation: fade-in .5s var(--ease) both; }
.wishtag { background: #FBF8F0; color: #202824; border-radius: 14px; padding: 1.2rem 1.3rem; position: relative; }
.wishtag::before { content: ""; position: absolute; top: -9px; left: 28px; width: 18px; height: 18px; border-radius: 50%; background: var(--fir); box-shadow: 0 0 0 3px var(--gold); }
.wishtag-title, .slipcard .wishtag-title { font-weight: 700; margin: 0 0 .8rem; color: #123C34; max-width: none; }
.slipcard .wishtag p, .slipcard .wishtag dd { color: #202824; }
.slipcard .wishtag .muted { color: #5E6863; }
.wishtag .muted { color: #5E6863; margin: 0; }
.wishtag-list { margin: 0; display: grid; gap: .7rem; }
.wishtag-list dt { font-size: .8rem; font-weight: 700; color: #5E6863; }
.wishtag-list dd { margin: 0; }
.wl-out-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.wl-out-links a { color: #1F6F6A; display: inline-flex; align-items: center; gap: .35rem; overflow-wrap: anywhere; }
.revealed-at { color: var(--on-fir-2) !important; margin-top: 1rem !important; }
.countdown { text-align: center; font-family: var(--font-display); font-size: 1.3rem; color: var(--fir); margin: 0 0 2.4rem; }
:root[data-theme="dark"] .countdown { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .countdown, :root:not([data-theme="light"]) .infocard .countdown-big { color: var(--gold); } }
.psec { border-top: 1px solid var(--line); padding-top: 1.8rem; margin-top: 2rem; }
.psec .h3 { margin-bottom: .6rem; }
.pinstr { display: flex; gap: .5rem; color: var(--ink-2); }
.pinstr .ic { margin-top: .25em; color: var(--brass); }
.pprivacy p { color: var(--ink-2); }
.welcome { margin-bottom: 1.6rem; }
.welcome p { margin: .2rem 0 .6rem; }

/* --------------------------------------------------------------- toasts */
.toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.page-setup .toasts { bottom: calc(90px + env(safe-area-inset-bottom)); }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: 12px; background: #17322B; color: #F0EEE9; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); font-size: .95rem; font-weight: 520; animation: toast-in .32s var(--ease-spring) both; }
.toast .ic { margin-top: .1em; color: var(--gold); }
.toast.is-error { background: #5B1220; } .toast.is-error .ic { color: #FFC2CB; }
.toast.is-leaving { animation: toast-out .22s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------- dialog */
.dialog { border: 0; padding: 0; border-radius: 18px; background: var(--paper); color: var(--ink); width: min(520px, calc(100vw - 24px)); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); }
.dialog::backdrop { background: rgba(8, 22, 18, .5); backdrop-filter: blur(3px); opacity: var(--sheet-dim, 1); }
.dialog.is-leaving::backdrop, .exp.is-leaving::backdrop { transition: opacity .22s ease-in; }
.dialog[open] { animation: dlg-in .26s var(--ease-spring) both; }
.dialog[open]::backdrop { animation: fade-in .2s ease both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog-in { display: grid; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem .4rem; }
.dialog-body { padding: .4rem 1.3rem 1rem; display: grid; gap: .9rem; color: var(--ink-2); max-height: 65vh; overflow: auto; }
.dialog-body p { margin: 0; }
.dialog-body ul { margin: 0; padding-left: 1.2rem; }
.dialog-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.3rem 1.2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dialog-foot .btn-primary.is-danger { background: var(--err); }
/* Phones: a bottom sheet with a grab handle. Drag it down or tap outside to close (WC.sheet in ui.js). */
.sheet-grip { display: none; }
.sheet-grip::before { content: ""; display: block; width: 40px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: var(--line-2); }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes dim-in { from { opacity: 0; } }
@media (max-width: 560px) {
  .dialog { margin: auto auto 0; border-radius: 20px 20px 0 0; width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px); }
  .dialog[open] { animation: sheet-up .34s cubic-bezier(.2, .8, .2, 1) backwards; }
  .dialog[open]::backdrop { animation: dim-in .26s ease backwards; }
  .dialog .sheet-grip { display: block; height: 22px; }
  .dialog-head { padding-top: .25rem; }
  .dialog-body { max-height: calc(100dvh - 190px); overscroll-behavior: contain; }
  .dialog.is-info .dialog-body { max-height: calc(100dvh - 110px); padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
  .dialog-foot { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
  .dialog-foot .btn { flex: 1; }
  html:has(.dialog[open]) { overflow: hidden; }
}

/* skeleton */
.skel { display: block; height: 1em; border-radius: 6px; background: linear-gradient(90deg, var(--sage) 25%, var(--sage-2) 50%, var(--sage) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .ic { display: none; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; }

/* legal */
.legal { padding-block: 2.6rem 4rem; }
.legal .h3 { margin: 1.8rem 0 .5rem; }
.legal p { color: var(--ink-2); max-width: 70ch; }
.legal .lead { margin-bottom: 1.6rem; }

/* ---------------------------------------------------------------- print */
.page-print { background: #e8e6e0; }
.print-tools { background: var(--paper); border-bottom: 1px solid var(--line); }
.print-tools-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; }
.print-tools .hint { margin: 0; }
.sheetpage { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; max-width: 210mm; margin: 1.5rem auto 3rem; background: #fff; color: #202824; }
.pslip { border: 1px dashed #b9b4a8; display: grid; grid-template-rows: 1fr 1fr; min-height: 66mm; break-inside: avoid; }
.pslip-out { display: grid; place-content: center; text-align: center; gap: .1rem; padding: .7rem; border-bottom: 1px dashed #d7d2c6; background: #F7F1E2; }
.pslip-for { font-size: .78rem; color: #6E6450; font-weight: 650; }
.pslip-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: #123C34; }
.pslip-ev { font-size: .72rem; color: #6E6450; }
.pslip-in { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; transform: rotate(180deg); }
.pslip-qr svg { width: 26mm; height: 26mm; }
.pslip-text { display: grid; gap: .15rem; font-size: .74rem; line-height: 1.3; color: #47524C; }
.pslip-text strong { font-size: .86rem; color: #202824; }
.pslip-url { font-size: .58rem; word-break: break-all; color: #6E7872; }
@media print {
  @page { size: A4; margin: 10mm; }
  .noprint, .toasts { display: none !important; }
  body, .page-print { background: #fff; }
  .sheetpage { margin: 0; max-width: none; grid-template-columns: 1fr 1fr; }
}


/* -------------------------------------------------------------- christmas
   One string of fairy lights, slow snow and a snowy fir edge. All decorative
   (aria-hidden), behind the content, and still for reduced motion. */
.xmas-snow, .xmas-lights, .snowedge { position: absolute; z-index: -1; pointer-events: none; }
.xmas-snow { inset: 0; width: 100%; height: 100%; }
.xmas-lights { top: 0; left: 0; right: 0; height: 64px; }
.garland { display: block; width: 100%; height: 100%; overflow: visible; }
.garland-wire { fill: none; stroke: #0A221D; stroke-width: 1.6; }
.garland-nail { fill: #0A221D; }
.bulb .sock { fill: #33423C; }
.bulb .glass { fill: currentColor; }
.bulb { color: #FFF1C9; }
.bulb .halo { animation: twinkle 3.4s ease-in-out infinite; }
.bulb.cran { color: #FF7489; }
.bulb.gold { color: #F4CF73; }
.bulb .tw2 { animation-duration: 4.1s; animation-delay: -1.2s; }
.bulb .tw3 { animation-duration: 3.7s; animation-delay: -2.3s; }
.bulb .tw4 { animation-duration: 4.6s; animation-delay: -.6s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.snowedge { left: 0; right: 0; bottom: -1px; width: 100%; height: 130px; }
.fir-back { fill: #1D4A40; }
.snow-ground { fill: var(--bg); }
.fir-front { fill: #0A2520; }
:root[data-theme="dark"] .fir-front { fill: #1E4238; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fir-front { fill: #1E4238; } }
.slipcard .xmas-lights { height: 64px; }
.slipcard { padding-top: 4.2rem; }


/* ------------------------------------------------------------ review fixes */
/* Dark mode by system setting gets the same accents as the manual toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .choice-card:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
  :root:not([data-theme="light"]) .drop-icon { color: var(--teal); }
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: block; }
  :root:not([data-theme="light"]) .choice-card input, :root:not([data-theme="light"]) .rowcheck { accent-color: var(--teal); }
}
:root[data-theme="dark"] .choice-card input, :root[data-theme="dark"] .rowcheck { accent-color: var(--teal); }
:root[data-theme="light"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: none; }

/* Focus moved by script (step titles, revealed name, main) needs no ring; keyboard focus keeps it. */
[tabindex="-1"]:focus { outline: none; }

/* Row menu floats above the scrolling table. */
.menu-list.is-floating { position: fixed; right: auto; top: 0; z-index: 70; }

/* Import grid: readable e-mail column, issues on their own line under the row. */
.grid-edit td.col-email input { min-width: 230px; }
.grid-edit td.col-name input { min-width: 170px; }
.grid-edit td.col-exclusions input, .grid-edit td.col-previous input { min-width: 170px; }
.grid-edit tr[data-i] td { border-bottom: 0; }
.grid-edit tr.issue-row td { border-bottom: 1px solid var(--line); }
.grid-edit tr[data-i]:has(+ .issue-row[hidden]) td { border-bottom: 1px solid var(--line); }
.grid-edit tr.issue-row.has-error td { background: color-mix(in srgb, var(--err-bg) 60%, transparent); }
.grid-edit .grid-issue .e, .grid-edit .grid-issue .w { display: inline; margin-right: .9rem; }
.rowcheck-hit { display: grid; place-items: center; min-width: 36px; min-height: 36px; cursor: pointer; }
.mapping-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .7rem; }
.mapping-top .mapping-title { margin: 0; }

/* Demo banner second button sits on gold. */
.demo-banner .btn-secondary { color: #202824; border-color: rgba(32, 40, 36, .55); }
.demo-banner .btn-secondary:hover { background: rgba(255, 255, 255, .3); }

/* Touch screens: every control reaches 44 px. */
@media (pointer: coarse) {
  .btn-sm { --bh: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .pair button { width: 40px; height: 40px; }
  .rowcheck-hit { min-width: 44px; min-height: 44px; }
  .progress-step button { min-height: 44px; min-width: 44px; justify-content: center; }
  .footer nav a, .importer-tpl a { display: inline-flex; align-items: center; min-height: 44px; }
  .sheet-file-clear, .hero-demo { min-height: 44px; }
}
.footer nav a { padding-block: .35rem; }

/* Phone: tabs scroll sideways, the fade says there is more. */
@media (max-width: 640px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tab { padding-inline: .7rem; }
}

/* Phone: participant table becomes a list (name, then status, actions on the right). */
@media (max-width: 640px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody { display: block; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem .5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .ptable td { padding: 0; border: 0; }
  .ptable td:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
  .ptable td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; padding-left: 48px; }
  .ptable td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .pcell-name { overflow-wrap: anywhere; }
}



/* ------------------------------------------------------------- So funktioniert's (explainer) */
.ex-head { max-width: 680px; }
.ex-lead { color: var(--ink-2); margin: 0 0 1.1rem; }
.ex-watch .ic { width: 1em; height: 1em; }
.ex-body { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.ex-stagewrap { min-width: 0; }
.ex-stage, .exp-stage { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #FBF8F0; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.ex-stage svg, .exp-stage svg { width: 100%; height: 100%; }
.ex-svg .ex-ui { font-family: var(--font-ui); }
.ex-svg .ex-b { font-weight: 600; }
.ex-svg .ex-bb { font-weight: 700; }
.ex-svg .ex-serif { font-family: var(--font-display); }
.ex-svg .ex-lnum { font-variant-numeric: lining-nums; font-feature-settings: "lnum"; }
.ex-svg .ex-hand { font-family: var(--font-hand); font-weight: 700; }
.ex-bar { display: flex; align-items: center; gap: .45rem; margin-top: .75rem; }
.ex-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.ex-btn:hover { border-color: var(--ink-3); }
.ex-btn:disabled { opacity: .4; cursor: default; }
.ex-btn .ic { width: 20px; height: 20px; }
.ex-toggle { background: var(--fir-2); border-color: var(--fir-2); color: #F0EEE9; }
.ex-toggle:hover { background: var(--fir); border-color: var(--fir); }
.ex-toggle .ic { fill: currentColor; stroke: none; }
.ex-segs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.ex-seg { display: grid; gap: .35rem; align-content: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink-3); font: inherit; }
.ex-seg-track { display: block; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.ex-seg-fill { display: block; height: 100%; background: var(--cranberry); transform-origin: 0 50%; transform: scaleX(0); }
.ex-seg-label { display: none; font-size: .78rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-seg[aria-current] { color: var(--ink); }
@media (min-width: 600px) { .ex-seg-label { display: block; } .ex-seg { align-content: start; padding-top: .55rem; } }
.ex-count { margin: .3rem 0 0; font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.ex-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ex-step { padding: .7rem .2rem .7rem .9rem; border-left: 3px solid var(--line); }
.ex-step.is-active { border-left-color: var(--cranberry); }
.ex-step-title { margin: 0 0 .25rem; }
.ex-step-title button { display: flex; align-items: baseline; gap: .6rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; text-align: left; }
.ex-num { color: var(--cranberry); min-width: 1ch; }
.ex-step-text { margin: 0; color: var(--ink-2); }
.ex-step-more { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-3); }
.explainer[data-mode="narrow"] .ex-step:not(.is-active) .ex-step-more { display: none; }
.explainer[data-mode="narrow"] .ex-step:not(.is-active) .ex-step-text { color: var(--ink-3); }
.ex-final { margin-top: 1.4rem; display: grid; gap: .7rem; justify-items: start; }
.ex-final-title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.ex-steps { grid-template-columns: minmax(0, 1fr); }
.ex-final .btn, .exp-end-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
@media (min-width: 900px) {
  .ex-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "steps stage"; gap: 4rem; align-items: start; margin-top: 1rem; }
  .ex-stagewrap { grid-area: stage; position: sticky; top: max(5.5rem, calc(50vh - 17rem)); }
  .ex-steps { grid-area: steps; gap: 0; padding-block: 4vh 22vh; }
  .ex-step { border-left: 0; padding: 0; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; }
  .explainer[data-mode="wide"] .ex-step { opacity: .34; transition: opacity .35s var(--ease); }
  .explainer[data-mode="wide"] .ex-step.is-active { opacity: 1; }
  .ex-step-title button { flex-direction: column; gap: .5rem; font-size: 1.65rem; }
  .ex-num { font-size: 2.8rem; line-height: 1; }
  .ex-step-text { font-size: 1.12rem; }
  .explainer[data-mode="wide"] .ex-toggle, .explainer[data-mode="wide"] .ex-replay { display: none; }
}

/* Guided player */
html.ex-lock { overflow: hidden; }
.exp { padding: 0; border: 0; background: transparent; color: var(--ink); width: min(780px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px); overflow: visible; }
.exp::backdrop { background: rgba(6, 20, 17, .74); }
.exp-in { position: relative; display: grid; gap: .8rem; padding: 12px 12px 14px; background: var(--paper); border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); max-height: calc(100dvh - 16px); overflow: auto; }
@media (min-width: 640px) { .exp-in { padding: 16px 18px 18px; } }
.exp-stage { box-shadow: none; border-radius: 16px; max-height: 56dvh; margin-inline: auto; width: 100%; }
.exp-close { position: absolute; top: 20px; right: 20px; z-index: 1; background: rgba(251, 248, 240, .9); color: #202824; border-color: #DAD6CD; }
@media (min-width: 640px) { .exp-close { top: 26px; right: 28px; } }
@media (max-width: 639px) {
  .exp { margin: auto auto 0; width: 100vw; max-height: calc(100dvh - 12px); }
  .exp[open] { animation: sheet-up .34s cubic-bezier(.2, .8, .2, 1) backwards; }
  .exp::backdrop { opacity: var(--sheet-dim, 1); }
  .exp-in { border-radius: 22px 22px 0 0; padding: 0 12px calc(14px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 12px); overscroll-behavior: contain; }
  .exp .sheet-grip { display: block; height: 22px; margin-bottom: -.55rem; }
  .exp-close { top: 33px; }
}
.exp-copy { padding: 0 .3rem; min-height: 6.4rem; }
.exp-copy .ex-count { margin: 0 0 .2rem; }
.exp-title { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.2; margin: 0 0 .3rem; color: var(--ink); }
.exp-text { margin: 0; color: var(--ink-2); max-width: 56ch; }
.exp-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .7rem; }
.exp-demo { font-weight: 620; color: var(--teal); min-height: 44px; display: inline-flex; align-items: center; }
.exp-bar { margin-top: 0; flex-wrap: wrap; justify-content: center; }
.exp-bar .ex-segs { order: -1; flex-basis: 100%; }
@media (min-width: 640px) { .exp-bar { flex-wrap: nowrap; } .exp-bar .ex-segs { order: 0; flex-basis: auto; margin-left: .5rem; } }

/* ------------------------------------------------------------- Wunschliste */
.wish { border-top: 0; padding-top: 0; }
.wish-letter { position: relative; background: color-mix(in srgb, var(--wax) 22%, var(--paper)); border: 1px solid var(--line);
  border-radius: 22px; padding: 1.4rem 1.2rem 1.2rem; box-shadow: var(--shadow-1);
  background-image: repeating-linear-gradient(180deg, transparent 0 35px, color-mix(in srgb, var(--line) 28%, transparent) 35px 36px); }
@media (min-width: 640px) { .wish-letter { padding: 2rem 2rem 1.6rem; } }
:root[data-theme="dark"] .wish-letter { background-color: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wish-letter { background-color: var(--paper); } }
.wish-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.wish-art { width: 96px; height: 96px; flex: none; object-fit: contain; }
@media (min-width: 640px) { .wish-art { width: 132px; height: 132px; } }
/* Phones: the title gets the full width, the envelope sits beside the lead line. */
@media (max-width: 639px) {
  .wish-head { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; row-gap: 0; align-items: start; margin-bottom: 1.1rem; }
  .wish-head > div { display: contents; }
  .wish-head .h2-sm { grid-column: 1 / -1; grid-row: 1; font-size: 1.5rem; }
  .wish-lead { grid-column: 1; grid-row: 2; }
  .wish-art { grid-column: 2; grid-row: 2; width: 76px; height: 76px; margin-top: -.2rem; transform: rotate(4deg); }
}
.wish-head .h2-sm { margin: 0 0 .2rem; }
.wish-lead { margin: 0; color: var(--ink-2); }
.wish-editor { display: grid; gap: 1.5rem; }
.wish-block { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; min-width: 0; }
.wish-label { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; margin: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: 0; }
.wish-label .opt { font-family: var(--font-ui); font-size: .78rem; }
.wish-block .hint { margin: 0 0 .1rem; }
.wish-block > .btn { justify-self: start; }
.wish-block textarea { min-height: 64px; background: color-mix(in srgb, var(--paper) 85%, transparent); line-height: 1.5; resize: none; overflow: hidden; }
/* Two-way switch: surprise me / go by my list (none chosen is fine too). */
.wish-pref { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; max-width: 440px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper)); border: 1px solid var(--line); }
.pref-chip { min-height: 42px; padding: .35rem .7rem; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: .95rem; font-weight: 620; line-height: 1.2; cursor: pointer; transition: background .15s, color .15s; }
.pref-chip:hover { color: var(--ink); }
.pref-chip[aria-pressed="true"] { background: var(--fir-2); color: #F0EEE9; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
/* Narrow phones: the labels do not fit side by side, so the two choices stack and get radio dots. */
@media (max-width: 400px) {
  .wish-pref { grid-template-columns: 1fr; border-radius: 16px; }
  .pref-chip { display: flex; align-items: center; gap: .65rem; border-radius: 12px; padding-left: .85rem; text-align: left; }
  .pref-chip::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); box-sizing: border-box; }
  .pref-chip[aria-pressed="true"]::before { border-color: #F0EEE9; background: radial-gradient(circle, #F0EEE9 0 3.5px, transparent 4px); }
}
.tagcloud { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.tag { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 560; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tag:hover { border-color: var(--ink-3); color: var(--ink); }
.tag.is-on, .tag[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 26%, var(--paper)); border-color: var(--gold); color: var(--ink); }
.tag.is-custom .ic { width: .9em; height: .9em; opacity: .7; }
.tagcloud.is-static .tag { cursor: default; min-height: 0; padding: .3rem .7rem; font-size: .9rem; }
@media (pointer: coarse) { .tag { min-height: 40px; } }
.tag.tag-more { border-style: dashed; background: transparent; color: var(--teal); font-weight: 620; }
.tag-add { display: flex; gap: .5rem; max-width: 420px; }
.tag-add input { min-height: 42px; }
.is-pop { animation: wish-pop .42s var(--ease-spring); }
@keyframes wish-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }

.giftcards { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.giftcard { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: center; padding: .7rem .8rem;
  border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.giftcard.is-top { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.giftcard.is-new { animation: gift-in .45s var(--ease-spring) both; }
@keyframes gift-in { from { opacity: 0; transform: translateY(8px) scale(.97) rotate(-.6deg); } to { opacity: 1; transform: none; } }
.giftcard-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--sage); }
.giftcard-ribbon { position: relative; width: 56px; height: 56px; border-radius: 10px; background: var(--cranberry);
  background-image: linear-gradient(90deg, transparent 44%, var(--gold) 44% 56%, transparent 56%), linear-gradient(180deg, transparent 44%, var(--gold) 44% 56%, transparent 56%); }
.giftcard-ribbon::after { content: ""; position: absolute; left: 50%; top: 6px; width: 18px; height: 10px; margin-left: -9px; border: 3px solid var(--gold); border-radius: 50% 50% 40% 40%; border-bottom: 0; }
.giftcard:nth-child(3n+2) .giftcard-ribbon { background-color: var(--fir-2); }
.giftcard:nth-child(3n) .giftcard-ribbon { background-color: var(--brass); }
.giftcard-body { display: grid; gap: .15rem; min-width: 0; }
.giftcard-title { font-weight: 680; overflow-wrap: break-word; }
.giftcard-desc { font-size: .9rem; color: var(--ink-2); overflow-wrap: break-word; }
.giftcards-edit .giftcard:not(.is-editing) { cursor: pointer; }
@media (max-width: 480px) {
  .giftcard { grid-template-columns: 48px 1fr auto; gap: .7rem; }
  .giftcard-img, .giftcard-ribbon { width: 48px; height: 48px; }
}
/* Add a wish: one dashed slot instead of an empty-state line plus a button. */
.wish-add { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 58px; padding: .65rem .9rem; border: 1.5px dashed var(--line-2);
  border-radius: 14px; background: color-mix(in srgb, var(--paper) 55%, transparent); color: var(--ink); font: inherit; font-weight: 620; text-align: left; cursor: pointer;
  transition: border-color .15s, color .15s; }
.wish-add:hover { border-color: var(--teal); }
.wish-add > .ic { flex: none; width: 1.15rem; height: 1.15rem; color: var(--teal); }
.wish-add small { display: block; font-size: .85rem; font-weight: 450; color: var(--ink-3); }
.giftcard-host { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ink-3); }
.giftcard-top { font-size: .75rem; font-weight: 700; color: var(--brass); }
.giftcard-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; margin-top: .15rem; overflow-wrap: anywhere; }
.giftcard-actions { display: flex; gap: .1rem; }
.giftcard.is-editing { grid-template-columns: 1fr; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.giftcard-form { display: grid; gap: .55rem; }
.giftcard-form input, .giftcard-form textarea { min-height: 44px; }
.giftcard-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.giftcard-row.is-end { justify-content: flex-end; }
.giftcard-photo { display: flex; align-items: center; gap: .6rem; }
.star-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .4rem .8rem; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.star-toggle span { color: var(--line-2); font-size: 1.1rem; transition: color .2s; }
.star-toggle[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.star-toggle[aria-pressed="true"] span { color: var(--brass); }
.giftcard-undo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .4rem .4rem .9rem; border-radius: 12px;
  background: var(--sage); font-size: .92rem; }
.wish-unfold { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .2rem; border: 0; background: none;
  color: var(--teal); font-family: var(--font-display); font-size: 1.05rem; cursor: pointer; }
.wish-extras { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: -.5rem; }
.wish-extras > .wish-block, .wish-extras > div:has(> .wish-block:not([hidden])) { flex-basis: 100%; }
.wish-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--line-2); }
.wish-foot [data-wish-preview] { margin-left: auto; }
.wish-status { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink-3); min-height: 1.4em; }
.wish-status.is-saved { color: var(--ok); }
.wish-status.is-saving .ic { animation: spin 1s linear infinite; }
.wish-status.is-error, .wish-status.is-invalid, .wish-status.is-offline { color: var(--err); }
.wish-status.is-restored { color: var(--brass); }
.wish-error { margin-top: .2rem; }

/* The card the Secret Santa sees: an ivory paper card in every theme. */
.wishcard { background: #FBF8F0; color: #202824; border-radius: 16px; padding: 1.2rem 1.25rem 1.1rem; display: grid; gap: 1rem; text-align: left;
  --paper: #FFFFFF; --line: #E2DED5; --ink: #202824; --ink-2: #47524C; --ink-3: #5E6863; --sage: #E3E8E0; --gold: #D6B66B; --brass: #7E621F;
  --teal: #1F6F6A; --fir-2: #1B4D43; --cranberry: #B4233C; --line-2: #C8C3B8; }
.wishcard-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: #123C34; margin: 0; }
.wishcard-pref { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: #F1EADA; font-weight: 600; }
.wishcard-pref.is-surprise { background: color-mix(in srgb, #D6B66B 30%, #FBF8F0); }
.wishcard-block h4 { margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; color: #5E6863; letter-spacing: .01em; }
.wishcard-block p { margin: 0; color: #202824; max-width: none; }
.wishcard-block.is-avoid p { color: #8F1A2F; }
.wishcard-hand { font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.35; }
.wishcard-updated { margin: 0; font-size: .8rem; color: #5E6863 !important; }
.wishcard-empty { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.wishcard-empty img { width: 120px; height: 120px; object-fit: contain; }
.wishcard-empty p { margin: 0; color: #47524C; }
.wishcard.is-updated { animation: card-glow 1.6s var(--ease) 1; }
@keyframes card-glow { 0% { box-shadow: 0 0 0 0 rgba(214, 182, 107, .9); } 100% { box-shadow: 0 0 0 14px rgba(214, 182, 107, 0); } }
.slipcard .wishcard p { color: #202824; }
.slipcard .wishcard .wishcard-empty p, .slipcard .wishcard .wishcard-updated { color: #47524C; }
.dialog .wishcard { margin: .2rem 0; }
.dialog-body .wishcard ul { padding-left: 0; }
@media (max-width: 560px) { .dialog .wishcard { padding: 1rem 1rem .9rem; } }

/* Organizer: progress only */
.wlprog { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem 1.2rem; margin-bottom: 2rem; background: var(--paper); display: grid; gap: .5rem; justify-items: start; }
.wlprog .h3 .ic { color: var(--cranberry); }
.wlprog-line { display: flex; align-items: baseline; gap: .7rem; margin: 0; flex-wrap: wrap; }
.wlprog-pct { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.wlprog .meter { width: 100%; margin: .2rem 0; }
.wlprog .hint { margin: 0; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .explainer[data-mode="wide"] .ex-step { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------- Ratgeber (guides)
   Long-form pages: paper hero with breadcrumb, sticky contents on desktop, an
   article column under 70ch. The lots (wax slips) carry over from the app:
   summary boxes and the rules note are wax paper, budget filters are gift tags. */
.page-guide .topbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.topnav > a[aria-current="page"] { color: var(--ink); background: var(--sage); }

.g-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: 1.4rem 2.2rem; }
@media (min-width: 900px) { .g-hero { padding-block: 2.2rem 3.2rem; } }
.g-hero-in { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .g-hero-in { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; } .g-hero-hub .g-hero-in { grid-template-columns: minmax(0, 1fr); } }
.g-hero-copy { min-width: 0; }
.g-crumbs ol { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-size: .875rem; color: var(--ink-3); }
.g-crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--ink-3); }
.g-crumbs a { color: var(--ink-2); text-decoration: none; }
.g-crumbs a:hover { text-decoration: underline; }
.g-title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.07; letter-spacing: -.012em; color: var(--fir); text-wrap: balance; max-width: 22ch; }
.g-lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 1rem 0 0; }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; margin: 1.2rem 0 0; font-size: .875rem; color: var(--ink-3); }
.g-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.g-meta .ic { width: 1em; height: 1em; }

.g-art { display: none; position: relative; }
@media (min-width: 900px) { .g-art { display: block; height: 250px; } }
.g-art-slip { position: absolute; }
.g-art-sheet { position: absolute; left: 0; right: 34px; top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-2); transform: rotate(-2deg); overflow: hidden; font-size: .8rem; }
.g-art-row { display: grid; grid-template-columns: .9fr 1fr 1.1fr; border-bottom: 1px solid var(--line); }
.g-art-row:last-child { border-bottom: 0; }
.g-art-row span { padding: .42rem .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.g-art-row span + span { border-left: 1px solid var(--line); }
.g-art-head { background: var(--sage); }
.g-art-head span { font-weight: 700; font-size: .72rem; color: var(--ink-2); }
.g-art-office .g-art-slip-1 { right: 0; bottom: 4px; --rot: 7deg; }
.g-art-office .g-art-slip-2 { right: 104px; bottom: -14px; --rot: -5deg; }
.g-die { position: absolute; left: 34px; top: 34px; width: 104px; height: 104px; padding: 16px 22px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-2); transform: rotate(-12deg);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); place-items: center; }
.g-die i { width: 15px; height: 15px; border-radius: 50%; background: var(--ink); }
.g-art-rules .g-art-slip-1 { left: 180px; top: 30px; --rot: 8deg; }
.g-art-rules .g-art-slip-2 { left: 120px; top: 168px; --rot: -6deg; }
.g-art-rules .g-art-slip-3 { left: 232px; top: 118px; --rot: 3deg; }
.g-art-gifts img { width: 230px; margin: 0 auto; transform: rotate(4deg); }

/* layout: contents + article */
.g-layout { display: grid; gap: 1.6rem; padding-block: 1.6rem 4rem; }
@media (min-width: 1020px) { .g-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 4.5rem; padding-block: 3rem 6rem; align-items: start; } }
.g-toc { font-size: .95rem; }
.g-toc details { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.g-toc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 50px; padding: 0 1rem; font-weight: 700; cursor: pointer; }
.g-toc summary::-webkit-details-marker { display: none; }
.g-toc-chev { color: var(--ink-3); transition: transform .2s var(--ease); }
.g-toc details[open] .g-toc-chev { transform: rotate(180deg); }
.g-toc ol { list-style: none; margin: 0; padding: 0 .5rem .6rem; }
.g-toc a { display: block; padding: .5rem .55rem; border-radius: 8px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.g-toc a:hover { background: var(--sage); color: var(--ink); }
@media (min-width: 1020px) {
  .g-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; }
  .g-toc details { border: 0; border-radius: 0; background: none; }
  .g-toc summary { min-height: 0; padding: 0 0 .7rem .95rem; font-size: .85rem; color: var(--ink-3); pointer-events: none; }
  .g-toc-chev { display: none; }
  .g-toc ol { padding: 0; border-left: 1px solid var(--line); }
  .g-toc a { margin-left: -1px; padding: .42rem .9rem; border-radius: 0; border-left: 2px solid transparent; }
  .g-toc a:hover { background: none; color: var(--ink); }
  .g-toc a.is-active { border-left-color: var(--cranberry); color: var(--ink); font-weight: 650; }
}

.g-body { min-width: 0; max-width: 70ch; font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 720px) { .g-body { font-size: 1.1rem; } }
.g-body h2, .g-h2 { font-family: var(--font-display); font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.006em; color: var(--fir);
  margin: 3.2rem 0 .9rem; text-wrap: balance; scroll-margin-top: 1.2rem; }
.g-body h3 { font-size: 1.18rem; font-weight: 700; line-height: 1.3; margin: 2.2rem 0 .5rem; scroll-margin-top: 1.2rem; }
.g-body ul, .g-body ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
.g-body li { margin: .35rem 0; }
.g-body ul > li::marker { color: var(--brass); }
.g-body .g-list > li { margin: .65rem 0; }

.g-sum { position: relative; margin: 0 0 2.6rem; padding: 1.25rem 1.4rem 1.15rem; border-radius: 4px; background: var(--wax); color: var(--wax-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 26px -18px rgba(0, 0, 0, .5); }
.g-sum::after { content: ""; position: absolute; top: 18px; right: 18px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D9475C, var(--cranberry) 60%, #7C1426); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.g-body .g-sum-title { margin: 0 0 .45rem; padding-right: 2rem; font-size: 1.3rem; color: var(--wax-ink); }
.g-body .g-sum ul { margin: 0; padding-left: 1.15rem; }
.g-body .g-sum li { margin: .28rem 0; color: var(--wax-ink); }
.g-body .g-sum li::marker { color: var(--cranberry); }

.g-body .g-steps { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; counter-reset: gstep; }
.g-body .g-steps > li { position: relative; margin: 0; padding: 0 0 1.4rem 3.4rem; counter-increment: gstep; }
.g-steps > li::before { content: counter(gstep); position: absolute; z-index: 1; left: 0; top: -.05rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--fir); background: var(--bg); color: var(--fir); font-family: var(--font-display); font-size: 1.1rem;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum"; line-height: 1; }
.g-steps > li::after { content: ""; position: absolute; left: calc(1.15rem - .75px); top: 2.3rem; bottom: .15rem; width: 1.5px; background: var(--line-2); }
.g-body .g-steps > li:last-child { padding-bottom: 0; }
.g-steps > li:last-child::after { display: none; }
.g-body .g-steps h3 { margin: .2rem 0 .3rem; font-size: 1.12rem; }
.g-steps p { margin: 0; }
.g-body .g-steps-compact > li { padding: 0 0 .85rem 2.8rem; }
.g-steps-compact > li::before { width: 1.9rem; height: 1.9rem; font-size: .95rem; top: .02rem; }
.g-steps-compact > li::after { left: calc(.95rem - .75px); top: 1.95rem; }

.g-table-wrap { margin: 1.3rem 0 1.5rem; }
.g-table { width: 100%; border-collapse: collapse; font-size: .97rem; line-height: 1.45; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--line); }
.g-table thead th { padding-top: 0; border-bottom: 2px solid var(--fir); font-size: .82rem; font-weight: 700; color: var(--ink-3); }
.g-table tbody th { font-weight: 700; }
.g-table td { color: var(--ink-2); }
@media (max-width: 640px) {
  .g-table { border-top: 2px solid var(--fir); }
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g-table tbody, .g-table tr, .g-table th, .g-table td { display: block; }
  .g-table tr { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .g-table th, .g-table td { padding: 0; border: 0; }
  .g-table tbody th { font-size: 1.02rem; }
  .g-table td::before { content: attr(data-label); display: block; margin-top: .4rem; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
}

.g-tip { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--fir-3); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--sage); }
.g-tip p { margin: 0; }

.g-media { display: grid; gap: .8rem 1.6rem; align-items: start; }
.g-media img { width: 120px; height: auto; }
@media (min-width: 640px) { .g-media { grid-template-columns: 150px minmax(0, 1fr); } .g-media img { width: 150px; transform: rotate(-4deg); } }
.g-media p:last-child { margin-bottom: 0; }

.g-excel { margin: 1.5rem 0 1.8rem; padding: 1rem; display: grid; gap: 1.2rem; border-radius: var(--r-l); background: var(--sage); }
@media (min-width: 720px) { .g-excel { padding: 1.4rem; } }
.g-excel-sheet { overflow: hidden; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-1); }
.g-excel-map { display: grid; grid-template-columns: auto auto 1fr; gap: .3rem .55rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.3; }
.g-excel-map span { color: var(--ink-3); }
.g-excel-map strong { color: var(--ok); }
.g-excel-map .ic { width: 1em; height: 1em; color: var(--ink-3); }
.g-excel .grid { display: block; overflow-x: auto; font-size: .85rem; line-height: 1.4; }
.g-excel .grid th { position: static; }
.g-body .g-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.g-body .g-checks li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: 1rem; line-height: 1.5; }
.g-checks .ic { margin-top: .22em; color: var(--ok); }
.g-excel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }

.g-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.g-seg button, .g-seg label span { display: grid; place-items: center; min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); font-weight: 650; font-size: .92rem; line-height: 1.2; text-align: center; cursor: pointer; }
.g-seg button[aria-pressed="true"], .g-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.g-seg label { position: relative; display: grid; }
.g-seg label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.g-seg input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 1px; }
.g-seg-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-seg-3 label span { padding: .3rem .4rem; font-size: .88rem; hyphens: auto; }

.g-letter { margin: 1.3rem 0 1.6rem; display: grid; gap: 1rem; justify-items: start; }
.g-letter-panel { justify-self: stretch; padding: 1.2rem 1.2rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.g-body .g-letter-label { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.g-letter.is-switchable .g-letter-label { display: none; }
.g-letter-text { margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: break-word; font: inherit; font-size: .98rem; line-height: 1.6; color: var(--ink); }

.g-check { margin: 1.3rem 0 2rem; display: grid; gap: 1.3rem; }
.g-check-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem; padding: 1rem 1.1rem; border-radius: var(--r-l); background: var(--sage); }
.g-check-date { display: grid; gap: .3rem; font-size: .88rem; font-weight: 650; color: var(--ink-2); }
.g-check-date input { min-height: 44px; padding: 0 .7rem; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); }
.g-body .g-check-progress { margin: 0; font-size: .95rem; font-weight: 650; color: var(--ink-2); }
.g-check-phase { margin: 0; padding: 0; border: 0; min-width: 0; }
.g-check-phase legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; margin-bottom: .35rem; padding: 0; font-weight: 700; font-size: 1.02rem; }
.g-check-when { font-size: .9rem; font-weight: 600; color: var(--teal); }
.g-check-item { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .15rem; border-top: 1px solid var(--line); line-height: 1.45; cursor: pointer; }
.g-check-item input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: .12rem 0 0;
  border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--surface); cursor: pointer; }
.g-check-item input:checked { border-color: var(--fir-3); background: var(--fir-3); }
.g-check-item input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.g-check-item input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.g-check-item input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }

.g-hat { margin: 1.4rem 0 1.6rem; padding: 1.2rem; border-radius: var(--r-l); background: var(--sage); }
.g-body .g-hat-title { margin: 0 0 .8rem; font-weight: 700; }
.g-hat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.g-hat-n { flex: 1 1 200px; display: grid; gap: .3rem; font-size: .92rem; font-weight: 650; color: var(--ink-2); }
.g-hat-n input { width: 100%; accent-color: var(--cranberry); }
.g-hat-result:not(:empty) { display: grid; gap: .7rem; margin-top: 1.1rem; }
.g-body .g-hat-result p { margin: 0; font-size: .97rem; color: var(--ink-2); }
.g-body .g-hat-result .g-hat-big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--fir); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum"; }
.g-hat-big small { margin-left: .45rem; font-family: var(--font-ui); font-size: .95rem; color: var(--ink-3); }
.g-hat-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.g-hat-grid i { aspect-ratio: 1; border-radius: 2px; background: var(--fir-3); }
.g-hat-grid i.is-bad { background: var(--cranberry); }
.g-body .g-hat-result .g-hat-legend { display: flex; gap: 1.2rem; font-size: .85rem; color: var(--ink-3); }
.g-hat-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: .4rem; border-radius: 2px; background: var(--fir-3); vertical-align: -1px; }
.g-hat-legend .is-bad::before { background: var(--cranberry); }

.g-body .g-pills { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1.2rem; padding: 0; }
.g-body .g-pills li { margin: 0; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .95rem; line-height: 1.4; }

.g-gen { margin: 1.3rem 0 2rem; display: grid; gap: 1.4rem; }
@media (min-width: 1180px) { .g-gen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.g-gen-form { display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.g-gen-field { display: grid; gap: .35rem; min-width: 0; margin: 0; padding: 0; border: 0; font-size: .92rem; }
.g-gen-field > span, .g-gen-field > legend { padding: 0; margin-bottom: .1rem; font-weight: 650; color: var(--ink-2); }
.g-gen-field input[type="text"], .g-gen-field input[type="number"], .g-gen-field input[type="date"], .g-gen-field select {
  width: 100%; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--paper); font-size: 1rem; }
.g-gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.g-gen-check { display: flex; align-items: center; gap: .6rem; min-height: 38px; font-size: .98rem; line-height: 1.35; cursor: pointer; }
.g-gen-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--fir-3); }
.g-gen-out { display: grid; gap: .9rem; justify-items: start; }
.g-note { position: relative; justify-self: stretch; padding: 1.3rem 1.3rem 1.05rem; border-radius: 4px; background: var(--wax); color: var(--wax-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 16px 28px -18px rgba(0, 0, 0, .55); }
.g-body .g-note-title { margin: 0 0 .5rem; font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--wax-ink); }
.g-body .g-note ol { margin: 0; padding-left: 1.4rem; }
.g-body .g-note li { margin: .4rem 0; font-size: 1rem; line-height: 1.5; color: var(--wax-ink); }
.g-note li::marker { color: var(--cranberry); font-weight: 700; }
:root[data-theme="dark"] .g-note, :root[data-theme="dark"] .g-tagbtn-tag, :root[data-theme="dark"] .g-tier-tag { --wax: #E9DFC6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-note, :root:not([data-theme="light"]) .g-tagbtn-tag, :root:not([data-theme="light"]) .g-tier-tag { --wax: #E9DFC6; } }

.g-cta { position: relative; margin: 3.2rem 0 1rem; padding: 2rem 1.4rem; display: grid; gap: 1.5rem; overflow: hidden; border-radius: 22px; background: var(--fir); color: var(--on-fir); }
@media (min-width: 760px) { .g-cta { grid-template-columns: minmax(0, 1fr) 180px; align-items: center; padding: 2.4rem 2.2rem; } }
.g-body .g-cta h2, .g-hub .g-cta h2 { margin: 0 0 .6rem; color: var(--on-fir); font-family: var(--font-display); font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.15; }
.g-cta p { margin: 0; color: var(--on-fir-2); }
.g-cta .g-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.g-cta-slips { display: none; position: relative; height: 170px; }
@media (min-width: 760px) { .g-cta-slips { display: block; } }
.g-cta-slips .slip { position: absolute; }
.g-cta-slips .slip:nth-child(1) { left: 0; top: 8px; --rot: -7deg; }
.g-cta-slips .slip:nth-child(2) { left: 60px; top: 64px; --rot: 5deg; }
.g-cta-slips .slip:nth-child(3) { left: 10px; top: 118px; --rot: -2deg; }

.g-faq { margin-top: .5rem; }
.g-related { margin-top: 3.6rem; }
.g-body .g-related ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .g-body .g-related ul { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.g-body .g-related li { margin: 0; border-bottom: 1px solid var(--line); }
.g-related a { display: grid; gap: .3rem; padding: 1.1rem 0; color: var(--ink); text-decoration: none; }
.g-related strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--fir); }
.g-related span { font-size: .97rem; line-height: 1.5; color: var(--ink-2); }
.g-related strong { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.g-related .g-go { margin-top: .2rem; color: var(--teal); font-size: .95rem; }

/* whole guide entry is one tap target: the title link stretches over it, "Zur Anleitung" is the visible cue */
.g-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.g-stretch:focus-visible { outline: none; }
:is(.g-hub-item, .lp-guides-list li):has(.g-stretch:focus-visible) { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 6px; }
.g-go { display: inline-flex; align-items: center; gap: .25rem; color: var(--teal); font-family: var(--font-ui); font-weight: 650; font-size: .95rem; line-height: 1.3; }
.g-go .ic { width: 1.05em; height: 1.05em; transition: transform .18s var(--ease); }
:is(.g-hub-item, .lp-guides-list li, .g-related a):hover .g-go .ic { transform: translateX(3px); }
:is(.g-hub-item, .lp-guides-list li, .g-related a):hover :is(.g-stretch, strong) { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
:is(.g-hub-item, .lp-guides-list li):active { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .g-go .ic { transition: none; } }

/* gift ideas: full-width tool under the hero */
.g-ideas { padding-block: 2rem 3rem; border-bottom: 1px solid var(--line); scroll-margin-top: .5rem; }
@media (min-width: 900px) { .g-ideas { padding-block: 3rem 4rem; } }
.g-ideas-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 2rem; }
.g-ideas .g-h2 { margin: 0 0 .3rem; }
.g-ideas-note { max-width: 48ch; margin: 0; font-size: .9rem; color: var(--ink-3); }
.g-filter { display: grid; gap: 1rem; margin: 1.4rem 0 1.8rem; }
.g-filter-row { display: grid; gap: .55rem; }
@media (min-width: 900px) { .g-filter-row { grid-template-columns: 200px minmax(0, 1fr); align-items: center; } }
.g-filter-label { font-weight: 700; font-size: .95rem; }
.g-tagrow { display: flex; flex-wrap: wrap; gap: .55rem .5rem; padding-block: 3px; }
.g-tagbtn { --rot: 0deg; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; transform: rotate(var(--rot)); transition: transform .18s var(--ease); }
.g-tagbtn:nth-child(odd) { --rot: -2deg; }
.g-tagbtn:nth-child(even) { --rot: 1.5deg; }
.g-tagbtn:hover { --rot: 0deg; }
.g-tagbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.g-tagbtn-tag, .g-tier-tag { position: relative; display: inline-flex; align-items: center; background: var(--wax); color: var(--wax-ink); font-family: var(--font-hand); font-weight: 700; line-height: 1; }
.g-tagbtn-tag { min-height: 44px; padding: .15rem 1rem 0 1.7rem; font-size: 1.15rem; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
.g-tagbtn-tag::before, .g-tier-tag::before { content: ""; position: absolute; top: 50%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2); }
.g-tagbtn-tag::before { left: 12px; width: 7px; height: 7px; margin-top: -3.5px; }
.g-tagbtn[aria-pressed="true"] .g-tagbtn-tag { background: var(--cranberry); color: #fff; }
.g-chiprow { display: flex; flex-wrap: wrap; gap: .4rem; }
.g-chipbtn { min-height: 38px; padding: 0 .85rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: .92rem; cursor: pointer; }
@media (pointer: coarse) { .g-chipbtn { min-height: 42px; } }
.g-chipbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.g-chipbtn[aria-pressed="true"] { border-color: var(--fir-2); background: var(--fir-2); color: var(--on-fir); }
.g-filter-count { margin: 0; font-size: .92rem; color: var(--ink-3); }
.g-tiers { display: flex; flex-direction: column; gap: 2.4rem; }
.g-tier.is-first { order: -1; }
.g-tier-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; color: var(--fir); }
.g-tier-tag { flex: none; min-height: 34px; padding: .12rem .8rem 0 1.4rem; font-size: 1.02rem; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.g-tier-tag::before { left: 9px; width: 6px; height: 6px; margin-top: -3px; }
.g-idea-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 2.2rem; }
@media (min-width: 720px) { .g-idea-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .g-idea-list { grid-template-columns: repeat(3, 1fr); } }
.g-idea { padding: 1rem 0 1.25rem; border-top: 1px solid var(--line); }
.g-idea h4 { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; }
.g-idea p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.g-idea .g-idea-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .65rem; }
.g-idea-tags span { padding: .1rem .5rem; border-radius: 5px; background: var(--sage); color: var(--ink-2); font-size: .76rem; font-weight: 650; }
.g-ideas-empty { margin: 0; padding: 1.2rem; border: 1px dashed var(--line-2); border-radius: var(--r-l); color: var(--ink-2); }
.g-linkbtn { padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-size: .97rem; font-weight: 600; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; }
.g-linkbtn:hover { text-decoration-thickness: 2px; }
.g-body .g-showtag { margin-top: -.3rem; }
.g-body .g-inline-cta { margin: 1.3rem 0 0; }

/* hub */
.g-hub { max-width: 980px; padding-block: 2rem 4.5rem; }
.g-hub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.g-hub-item { display: grid; gap: .9rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .g-hub-item { grid-template-columns: 150px minmax(0, 1fr); gap: 2rem; align-items: start; } }
.g-hub-slip { --rot: -3deg; justify-self: start; }
.g-hub-slip.is-folded .slip-name, .lp-guides-list .slip.is-folded .slip-name { padding-right: 22px; }
.g-hub-item:nth-child(2) .g-hub-slip { --rot: 2deg; }
.g-hub-item h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; text-wrap: balance; }
.g-hub-item { position: relative; }
.g-hub-item h2 a { color: var(--fir); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 55%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.g-hub-item p { max-width: 62ch; margin: 0; color: var(--ink-2); }
.g-hub-item .g-hub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; margin-top: .9rem; font-size: .875rem; color: var(--ink-3); }
.g-quick { margin-top: 3rem; }
.g-quick .g-h2 { margin-top: 0; }
.g-quick ul { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 2rem; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .g-quick ul { grid-template-columns: 1fr 1fr; } }
.g-quick li { border-bottom: 1px solid var(--line); }
.g-quick a { display: block; padding: .85rem 0; line-height: 1.4; }

/* landing band */
.lp-guides-head { max-width: 62ch; }
.lp-guides-head p { color: var(--ink-2); }
.lp-guides-list { list-style: none; margin: 2rem 0 1.6rem; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 860px) { .lp-guides-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem; } }
.lp-guides-list li { position: relative; display: grid; gap: .7rem; align-content: start; justify-items: start; }
.lp-guides-list .slip { --rot: -3deg; }
.lp-guides-list li:nth-child(2) .slip { --rot: 2deg; }
.lp-guides-list li:nth-child(3) .slip { --rot: -1deg; }
.lp-guides-list a { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--fir); text-wrap: balance;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.lp-guides-list p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* dark mode */
:root[data-theme="dark"] :is(.g-title, .g-body h2, .g-h2, .g-related strong, .g-tier-title, .g-hub-item h2 a, .lp-guides-list a, .g-body .g-hat-result .g-hat-big) { color: var(--ink); }
:root[data-theme="dark"] .g-steps > li::before { border-color: var(--gold); color: var(--gold); }
:root[data-theme="dark"] .g-sum { background: color-mix(in srgb, #EDE3CC 9%, var(--paper)); color: var(--ink); }
:root[data-theme="dark"] .g-body .g-sum li, :root[data-theme="dark"] .g-body .g-sum-title { color: var(--ink); }
:root[data-theme="dark"] .g-tip { border-left-color: var(--teal); }
:root[data-theme="dark"] .g-table thead th, :root[data-theme="dark"] .g-table { border-color: var(--line-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.g-title, .g-body h2, .g-h2, .g-related strong, .g-tier-title, .g-hub-item h2 a, .lp-guides-list a, .g-body .g-hat-result .g-hat-big) { color: var(--ink); }
  :root:not([data-theme="light"]) .g-steps > li::before { border-color: var(--gold); color: var(--gold); }
  :root:not([data-theme="light"]) .g-sum { background: color-mix(in srgb, #EDE3CC 9%, var(--paper)); color: var(--ink); }
  :root:not([data-theme="light"]) .g-body .g-sum li, :root:not([data-theme="light"]) .g-body .g-sum-title { color: var(--ink); }
  :root:not([data-theme="light"]) .g-tip { border-left-color: var(--teal); }
  :root:not([data-theme="light"]) .g-table thead th, :root:not([data-theme="light"]) .g-table { border-color: var(--line-2); }
}
@media (prefers-reduced-motion: reduce) { .g-tagbtn { transition: none; } }

/* security notices */
/* Above the envelope, so it is in the first screen; the bottom margin leaves room for the open flap,
   the solid background keeps the snow out of the text. */
.slipcard .tamper { position: relative; z-index: 2; display: flex; gap: .55rem; align-items: flex-start; max-width: 46ch; margin: 0 auto calc(min(320px, 78vw) * .44); padding: .8rem 1rem; text-align: left;
  border-radius: var(--r-m); background: #314F3D; background: color-mix(in srgb, var(--fir) 84%, var(--gold)); border: 1px solid rgba(214, 182, 107, .45); color: var(--on-fir); font-size: .95rem; line-height: 1.45; }
.slipcard .tamper .ic { margin-top: .15em; color: var(--gold); }
.slipcard .tamper p { margin: 0 0 .6rem; color: var(--on-fir); max-width: none; }
.slipcard .tamper .btn { margin: 0; }
.icon-btn.is-sealed { color: var(--ink-3); }
.auth-what { max-width: 52ch; margin: 1rem auto 1.4rem; padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--sage); color: var(--ink); }
.auth-what strong { display: block; margin-top: .3rem; }