/* ahq-calendar — themes are token sets on :root[data-theme]; the sheet SVG reads them too. */

:root,
:root[data-theme="paper"] {
  --page-bg: #EFECE3;
  --paper: #FBFAF6;
  --paper-edge: #E6E2D6;
  --line: #DCD8CC;
  --line-dash: none;
  --band-bg: #D9D8B4;
  --band-rule: transparent;
  --band-fg: #3F4128;
  --title-fg: #2E2E2A;
  --year-fg: #2E2E2A;
  --num: #2E2E2A;
  --num-muted: #8C887C;
  --num-today: #2E2E2A;
  --today-fill: none;
  --today-stroke: #B4443C;
  --weekend: #FBFAF6;
  --out: #F6F4EE;
  --tape: transparent;

  --ui-bg: #FFFFFF;
  --ui-fg: #2E2E2A;
  --ui-muted: #6E6B60;
  --ui-border: #E3DFD2;
  --ui-hover: #F3F1E8;
  --accent: #55582F;
  --accent-fg: #FFFFFF;
  --accent-soft: #E9E8CF;
  --shadow: 0 1px 2px rgba(60, 55, 40, .08), 0 8px 28px rgba(60, 55, 40, .10);

  --font-title: 'Jost', system-ui, sans-serif;
  --font-ui: 'Jost', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --title-weight: 500;
  --title-spacing: .2em;
  --title-case: uppercase;
  --title-style: normal;
  --wd-spacing: .18em;
  --wd-case: uppercase;
  --wd-weight: 600;
  --sheet-radius: 6px;

  --c-black: #2E2E2A;
  --c-blue: #2B4C9B;
  --c-red: #B4443C;
  --c-green: #3E7A4A;
  --c-orange: #C46A1B;
  --c-purple: #6B4C9A;
  --c-yellow: #F2D64B;
  --c-pink: #F08CB0;
  --hl-opacity: .45;
  --hl-blend: multiply;
  color-scheme: light;
}

:root[data-theme="kraft"] {
  --page-bg: #D8C8A8;
  --paper: #EBDDC3;
  --paper-edge: #CDBB98;
  --line: #B5A17C;
  --line-dash: 5 4;
  --band-bg: transparent;
  --band-rule: #1F3A5F;
  --band-fg: #1F3A5F;
  --title-fg: #1F3A5F;
  --year-fg: #6B5B40;
  --num: #1F3A5F;
  --num-muted: #8A7756;
  --num-today: #1F3A5F;
  --today-fill: none;
  --today-stroke: #A0412D;
  --weekend: #EBDDC3;
  --out: #E4D5B9;
  --tape: #C9D7C4;
  --ui-bg: #F6EEDD;
  --ui-fg: #2B2418;
  --ui-muted: #6B5B40;
  --ui-border: #CDBB98;
  --ui-hover: #EFE3CB;
  --accent: #1F3A5F;
  --accent-fg: #F6EEDD;
  --accent-soft: #E0D3B8;
  --font-title: 'Fraunces', Georgia, serif;
  --font-ui: 'Fraunces', Georgia, serif;
  --font-hand: 'Kalam', 'Segoe Print', cursive;
  --title-weight: 500;
  --title-spacing: 0;
  --title-case: none;
  --title-style: italic;
  --wd-spacing: 0;
  --wd-case: none;
  --wd-weight: 600;
  --sheet-radius: 2px;
  --c-black: #2B2418;
  --c-blue: #1F3A5F;
  --c-red: #A0412D;
  --c-green: #4E6B3A;
  --c-orange: #B5651D;
  --c-purple: #5E3F6E;
  --c-yellow: #E8C547;
  --c-pink: #E39AA8;
  color-scheme: light;
}

:root[data-theme="minimal"] {
  --page-bg: #F3F4F6;
  --paper: #FFFFFF;
  --paper-edge: #E5E7EB;
  --line: #E5E7EB;
  --line-dash: none;
  --band-bg: transparent;
  --band-rule: transparent;
  --band-fg: #6B7280;
  --title-fg: #111827;
  --year-fg: #0F6E66;
  --num: #111827;
  --num-muted: #9CA3AF;
  --num-today: #FFFFFF;
  --today-fill: #0F6E66;
  --today-stroke: none;
  --weekend: #FAFAFB;
  --out: #FFFFFF;
  --tape: transparent;
  --ui-bg: #FFFFFF;
  --ui-fg: #111827;
  --ui-muted: #6B7280;
  --ui-border: #E5E7EB;
  --ui-hover: #F3F4F6;
  --accent: #0F6E66;
  --accent-fg: #FFFFFF;
  --accent-soft: #E6F2F1;
  --font-title: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --title-weight: 700;
  --title-spacing: -.02em;
  --title-case: none;
  --wd-spacing: 0;
  --wd-case: none;
  --wd-weight: 500;
  --sheet-radius: 18px;
  --c-black: #111827;
  --c-blue: #1D4ED8;
  --c-red: #B91C1C;
  --c-green: #15803D;
  --c-orange: #C2410C;
  --c-purple: #7C3AED;
  --c-yellow: #FACC15;
  --c-pink: #F472B6;
  color-scheme: light;
}

:root[data-theme="night"] {
  --page-bg: #121417;
  --paper: #1B1E23;
  --paper-edge: #2A2F37;
  --line: #30353E;
  --line-dash: none;
  --band-bg: #2A2F37;
  --band-rule: transparent;
  --band-fg: #C9CED6;
  --title-fg: #F2C26B;
  --year-fg: #F2C26B;
  --num: #E6E8EB;
  --num-muted: #6E7581;
  --num-today: #F2C26B;
  --today-fill: none;
  --today-stroke: #F2C26B;
  --weekend: #1B1E23;
  --out: #181A1F;
  --tape: transparent;
  --ui-bg: #252931;
  --ui-fg: #E6E8EB;
  --ui-muted: #9AA1AB;
  --ui-border: #343944;
  --ui-hover: #2E333C;
  --accent: #F2C26B;
  --accent-fg: #1B1E23;
  --accent-soft: #3A3427;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
  --c-black: #E6E8EB;
  --c-blue: #8CC4FF;
  --c-red: #FF9C8A;
  --c-green: #8FD6A8;
  --c-orange: #FFB870;
  --c-purple: #C7A8FF;
  --c-yellow: #F2C26B;
  --c-pink: #FF9ECF;
  --hl-opacity: .4;
  --hl-blend: normal;
  color-scheme: dark;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; --zoom: 1; touch-action: pan-x pan-y; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ui-fg);
  font: 16px/1.45 var(--font-ui);
  overflow-anchor: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .35; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ui-muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* Palette slots: one class drives fill/stroke/background wherever a colour appears. */
.c-black { --c: var(--c-black); } .c-blue { --c: var(--c-blue); } .c-red { --c: var(--c-red); } .c-green { --c: var(--c-green); }
.c-orange { --c: var(--c-orange); } .c-purple { --c: var(--c-purple); } .c-yellow { --c: var(--c-yellow); } .c-pink { --c: var(--c-pink); }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--page-bg); /* fallback: iOS < 16.2 has no color-mix */
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ui-border);
}
.tb-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.household { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-label { font-size: 15px; color: var(--ui-muted); white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 4px; flex: none; }
.tb-btn {
  position: relative; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-fg);
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-btn:hover:not(:disabled) { background: var(--ui-hover); }
.picker {
  position: fixed; z-index: 30; top: calc(60px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: min(300px, calc(100vw - 24px)); padding: 12px; background: var(--ui-bg); border: 1px solid var(--ui-border);
  border-radius: 16px; box-shadow: var(--shadow);
}
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.picker-year { font-weight: 600; font-size: 17px; }
.picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.picker-grid button { min-height: 44px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-bg); font-size: 15px; }
.picker-grid button:hover { background: var(--ui-hover); }
.picker-grid button[aria-current="date"] { border-color: var(--accent); font-weight: 600; }
.picker-grid button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tb-pct.at-fit { display: none; }
.zoompop {
  position: fixed; z-index: 30; top: calc(60px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--ui-bg);
  border: 1px solid var(--ui-border); border-radius: 999px; box-shadow: var(--shadow);
}
.zoompop .tb-btn { width: 44px; height: 44px; }
.tb-pct { width: auto; padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.tb-pill { height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-bg); font-size: 14px; font-weight: 500; }
.tb-pill:hover { background: var(--ui-hover); }
.avatar {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 999px;
  background: var(--c, var(--accent)); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1;
}
.avatar.me { margin-left: 4px; }
.avatar.small { width: 26px; height: 26px; font-size: 12px; }
.presence { display: flex; padding-left: 6px; }
.presence .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--page-bg); }
.sync { width: 8px; height: 8px; border-radius: 999px; margin-right: 4px; background: var(--c-green); transition: background .3s; }
.sync.pending { background: var(--c-orange); }
.sync.offline { background: var(--c-red); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ------------------------------------------------------------ months */
.months {
  position: fixed; inset: 0; overflow: auto; overscroll-behavior: contain; outline: none;
  overflow-anchor: none; /* we re-anchor ourselves when months are added above; the browser doing it too doubled the jump */
}
.months:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sheets {
  padding: calc(72px + env(safe-area-inset-top)) 12px calc(110px + env(safe-area-inset-bottom));
  width: max-content; min-width: 100%;
}
.sentinel { height: 1px; }
.month { scroll-margin-top: calc(68px + env(safe-area-inset-top)); margin: 0 auto 28px; width: calc(min(100vw - 24px, 1120px) * var(--zoom)); }
.sheet-wrap {
  position: relative; container-type: inline-size;
  border-radius: var(--sheet-radius); box-shadow: var(--shadow); overflow: hidden; background: var(--paper);
}
.sheet { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* The calendar owns every touch: one-finger scroll, two-finger pan + pinch-zoom (see main.js). */
.months { touch-action: none; -webkit-user-select: none; user-select: none; }
.sheets.pinching { will-change: transform; }
.note.lifted { stroke: var(--c); stroke-opacity: .28; stroke-width: 9px; stroke-linejoin: round; paint-order: stroke; }
body[data-active-tool="pen"] .sheet, body[data-active-tool="hl"] .sheet { cursor: crosshair; }
body[data-active-tool="text"] .sheet { cursor: text; }
body[data-active-tool="text"] .note { cursor: move; }
body[data-active-tool="eraser"] .sheet { cursor: cell; }

/* sheet artwork — font sizes are in sheet units (1000 wide) */
.paper { fill: var(--paper); }
.tape { fill: var(--tape); opacity: .85; }
.title { font-family: var(--font-title); font-size: 30px; font-weight: var(--title-weight); letter-spacing: var(--title-spacing); text-transform: var(--title-case); fill: var(--title-fg); }
.t-month { font-style: var(--title-style); }
.t-year { fill: var(--year-fg); }
:root[data-theme="kraft"] .t-month { font-size: 1.5em; }
:root[data-theme="kraft"] .t-year { font-size: .75em; font-weight: 600; }
:root[data-theme="minimal"] .title { font-size: 34px; }
.band-bg { fill: var(--band-bg); }
:root[data-theme="night"] .band-bg { rx: 5px; }
.band-rule { stroke: var(--band-rule); stroke-width: 2; }
.wd { font-family: var(--font-ui); font-size: 11px; font-weight: var(--wd-weight); letter-spacing: var(--wd-spacing); text-transform: var(--wd-case); fill: var(--band-fg); text-anchor: middle; dominant-baseline: central; }
.wd-short { display: none; }
:root[data-theme="kraft"] .wd { font-style: italic; font-size: 14px; }
:root[data-theme="minimal"] .wd { font-size: 13px; }
.cell { fill: var(--paper); }
.cell.weekend { fill: var(--weekend); }
.cell.out { fill: var(--out); }
.grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: var(--line-dash); vector-effect: non-scaling-stroke; }
.daynum { font-family: var(--font-ui); font-size: 14px; font-weight: 500; fill: var(--num); text-anchor: middle; dominant-baseline: central; }
.daynum.out { fill: var(--num-muted); }
.daynum.today { fill: var(--num-today); font-weight: 600; }
.today-mark { fill: var(--today-fill); stroke: var(--today-stroke); stroke-width: 1.6; }
:root[data-theme="kraft"] .daynum { font-size: 16px; font-weight: 600; }
:root[data-theme="night"] .today-mark { stroke-width: 1.2; }

@container (max-width: 820px) {
  .title { font-size: 38px; }
  .wd { font-size: 15px; }
  .daynum { font-size: 20px; }
  .dn { transform: translate(3px, 3px); }
  .today-mark { transform: scale(1.35); }
}
@container (max-width: 520px) {
  .title { font-size: 50px; }
  :root[data-theme="minimal"] .title { font-size: 50px; }
  .wd { font-size: 22px; }
  .wd-long { display: none; }
  .wd-short { display: inline; }
  .daynum { font-size: 28px; }
  .dn { transform: translate(7px, 7px); }
  .today-mark { transform: scale(1.75); }
}

/* what people put on the paper */
.ink, .hl { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.hl { stroke-opacity: var(--hl-opacity); mix-blend-mode: var(--hl-blend); }
.note { fill: var(--c); white-space: pre; }
.note.editing { visibility: hidden; }
.f-hand { font-family: var(--font-hand); font-weight: 600; }
.f-print { font-family: var(--font-ui); font-weight: 500; }
.eraser-ring { fill: var(--ui-muted); fill-opacity: .12; stroke: var(--ui-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.note-editor {
  position: absolute; z-index: 5; margin: 0; padding: 0 2px; min-width: 48px;
  border: 1px dashed var(--accent); border-radius: 4px; background: var(--paper);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-user-select: text; user-select: text; /* the calendar disables selection; iOS then refuses a caret here */
  color: var(--c); line-height: 1.2; resize: none; overflow: hidden; white-space: pre; outline: none;
  transform-origin: 0 0;
}

/* ------------------------------------------------------------ toolbar dock */
.dock {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 16px);
}
.toolbar {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 999px; box-shadow: var(--shadow);
}
.toolbar button {
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-fg);
  display: inline-flex; align-items: center; justify-content: center;
}
.toolbar button:hover:not(:disabled) { background: var(--ui-hover); }
.toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="kraft"] .toolbar button[aria-pressed="true"],
:root[data-theme="night"] .toolbar button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.toolbar .sep { width: 1px; height: 24px; background: var(--ui-border); margin: 0 3px; }
.dot { width: 22px; height: 22px; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 3.5px var(--c); }
.dot.muted { opacity: .3; }
@media (max-width: 420px) {
  .toolbar button { width: 40px; }
  .toolbar .sep { margin: 0 1px; }
  .month-label { display: none; }
  .tb-right { gap: 0; }
  /* phones: one compact zoom button (shows the %) opens − / Fit / + instead of three buttons */
  #zoom-in, #zoom-out { display: none; }
  .tb-pct.at-fit { display: inline-flex; }
}
@media (max-width: 360px) {
  .toolbar { padding: 3px; gap: 0; }
  .toolbar button { width: 36px; height: 42px; }
  .tb-pill { padding: 0 10px; }
}

.pop {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; max-width: 340px;
  background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--shadow);
}
.pop-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pop-hint { margin: 0; font-size: 14px; color: var(--ui-muted); text-align: center; }
.swatch {
  display: inline-block; flex: none;
  width: 36px; height: 36px; border: 0; border-radius: 999px; padding: 0; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
button.swatch { width: 40px; height: 40px; }
.swatch[aria-pressed="true"], .swatch-radio input:checked + .swatch { box-shadow: 0 0 0 3px var(--ui-bg), 0 0 0 5px var(--c); }
.seg { gap: 0; border: 1px solid var(--ui-border); border-radius: 12px; overflow: hidden; flex-wrap: nowrap; }
.seg-btn { flex: 1; min-height: 40px; padding: 0 12px; border: 0; background: transparent; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.seg-btn + .seg-btn { border-left: 1px solid var(--ui-border); }
.seg-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg-btn.f-hand { font-size: 19px; }
.nib { display: block; border-radius: 999px; background: var(--ui-fg); }
.nib-fine { width: 4px; height: 4px; } .nib-medium { width: 7px; height: 7px; } .nib-bold { width: 11px; height: 11px; }

/* ------------------------------------------------------------ auth screens */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: min(420px, 100%); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 14px; box-shadow: var(--shadow);
}
.auth-card.wide { width: min(640px, 100%); }
.auth-card h1 { margin: 0 0 4px; font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-spacing); text-transform: var(--title-case); font-size: 26px; color: var(--title-fg); }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lede { margin: 0; color: var(--ui-muted); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 14px; font-weight: 500; }
.field-hint { font-size: 13px; color: var(--ui-muted); }
input:not([type=checkbox]):not([type=radio]), select {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-bg); width: 100%;
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
/* 2-step enrolment: the scannable code stays dark-on-light in every theme (scanners need the contrast) */
.qr { width: min(220px, 70vw); aspect-ratio: 1; margin: 0 auto; }
.qr-svg { display: block; width: 100%; height: 100%; border-radius: 6px; }
.enrol-key {
  display: block; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; word-break: break-word; user-select: all;
}
.error { margin: 0; min-height: 1em; color: var(--c-red); font-size: 14px; }
.error:empty { display: none; }
.btn {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-bg);
  font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--ui-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.who { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.who-btn {
  min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-bg); font-weight: 500;
}
.who-btn[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Short screens (small phones, any phone on its side): a tighter card, so sign-in with its code field fits */
@media (max-height: 600px) {
  .auth { padding: 8px 16px; }
  .auth-card { padding: 14px 20px; gap: 8px; }
  .auth-card h1 { font-size: 22px; }
  .who-btn { min-height: 52px; flex-direction: row; }
}
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch-radio { position: relative; display: inline-flex; cursor: pointer; padding: 4px; }
.swatch-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch-radio input:focus-visible + .swatch { outline: 2px solid var(--accent); outline-offset: 4px; }

/* theme cards (setup + settings) */
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--ui-border); border-radius: 12px; cursor: pointer; background: var(--ui-bg); }
.theme-card input { position: absolute; opacity: 0; }
.theme-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-name { font-weight: 600; font-size: 14px; }
.theme-blurb { font-size: 12px; color: var(--ui-muted); line-height: 1.35; }
.theme-preview { display: grid; grid-template-rows: 10px 6px 1fr; gap: 4px; height: 70px; padding: 8px; border-radius: 6px; }
.tp-title { width: 60%; border-radius: 2px; }
.tp-band { border-radius: 1px; }
.tp-grid { border-radius: 1px; background-size: 14.28% 33.3%; }
.tp-paper { background: #FBFAF6; box-shadow: inset 0 0 0 1px #E6E2D6; }
.tp-paper .tp-title { background: #2E2E2A; width: 55%; height: 6px; }
.tp-paper .tp-band { background: #D9D8B4; }
.tp-paper .tp-grid { background-image: linear-gradient(#DCD8CC 1px, transparent 1px), linear-gradient(90deg, #DCD8CC 1px, transparent 1px); }
.tp-kraft { background: #EBDDC3; }
.tp-kraft .tp-title { background: #1F3A5F; width: 45%; box-shadow: 0 0 0 4px #C9D7C4; }
.tp-kraft .tp-band { border-bottom: 2px solid #1F3A5F; }
.tp-kraft .tp-grid { background-image: linear-gradient(#B5A17C 1px, transparent 1px), linear-gradient(90deg, #B5A17C 1px, transparent 1px); }
.tp-minimal { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E5E7EB; border-radius: 10px; }
.tp-minimal .tp-title { background: linear-gradient(90deg, #111827 65%, #0F6E66 65%); }
.tp-minimal .tp-band { background: transparent; }
.tp-minimal .tp-grid { background-image: linear-gradient(#E5E7EB 1px, transparent 1px), linear-gradient(90deg, #E5E7EB 1px, transparent 1px); }
.tp-night { background: #1B1E23; }
.tp-night .tp-title { background: #F2C26B; height: 6px; }
.tp-night .tp-band { background: #2A2F37; }
.tp-night .tp-grid { background-image: linear-gradient(#30353E 1px, transparent 1px), linear-gradient(90deg, #30353E 1px, transparent 1px); }
.tp-auto { background: linear-gradient(110deg, #FBFAF6 50%, #1B1E23 50%); box-shadow: inset 0 0 0 1px #E6E2D6; }
.tp-auto .tp-title { background: linear-gradient(90deg, #2E2E2A 50%, #F2C26B 50%); width: 100%; height: 6px; }
.tp-auto .tp-band { background: linear-gradient(90deg, #D9D8B4 50%, #2A2F37 50%); }
.tp-auto .tp-grid { background-image: linear-gradient(#DCD8CC 1px, transparent 1px); }

/* ------------------------------------------------------------ settings dialog */
.settings {
  width: min(640px, calc(100vw - 16px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--ui-border); border-radius: 18px;
  background: var(--ui-bg); color: var(--ui-fg); box-shadow: var(--shadow); overflow: auto;
}
.settings::backdrop { background: rgba(20, 18, 12, .35); }
.set-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 12px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); }
.set-head h2 { margin: 2px 0 0; font-family: var(--font-title); font-size: 22px; font-weight: var(--title-weight); }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--ui-hover); }
.set-section { padding: 16px 20px; border-bottom: 1px solid var(--ui-border); display: flex; flex-direction: column; gap: 10px; }
.set-section h3 { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.set-section p { margin: 0; }
.set-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 160px; width: auto; }
.inline-label { display: flex; align-items: center; gap: 8px; }
.inline-label select { width: auto; }
.toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.toggle input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.member-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.member-name { flex: 1; font-weight: 500; }
.badge { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.link { min-height: 36px; border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0 4px; }
.link.danger { color: var(--c-red); }
details summary { cursor: pointer; font-weight: 500; min-height: 32px; }
.add-member { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }

/* ------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; top: calc(68px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px;
  background: var(--ui-fg); color: var(--ui-bg); font-size: 14px; box-shadow: var(--shadow);
  pointer-events: none; /* a message must never swallow a tap on what's underneath */
}

/* ?trace diagnostics (see js/trace.js) */
.trace-badge { position: fixed; left: 8px; bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 99; padding: 2px 8px; border-radius: 999px; background: var(--c-red); color: #fff; font-size: 11px; pointer-events: none; }