/* ============================================================
   WEARKIN — the LEDGER design system.
   Ink and paper. Hairlines, never shadows. Serif only for the
   things a person recognises: names, dates, titles. The
   photographs are the brightest objects on every screen.
   One file, no build step, appended by section.
   ============================================================ */

/* ---------- 0 · Fonts (self-hosted: an offline PWA never waits) ---------- */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var.woff2") format("woff2");
}

/* ---------- 1 · Tokens ---------- */

:root {
  /* paper & ink — two materials, chrome is never saturated */
  --paper: #f6f3ee;
  --plate: #fffdfa;        /* PHOTO CARDS ONLY — stays near-white in dark mode */
  --plate-ink: #1b1917;    /* text that sits on a photo plate */
  --surface: #fffdfa;      /* every other card, row, sheet */
  --sunk: #f1ede6;
  --line: #e3ddd3;
  --line-strong: #cfc7ba;
  --dashed: #b9a98f;
  --dashed-bg: #f1ece1;
  --dashed-ink: #6a5c42;
  --ink: #1b1917;
  --ink-2: #6f6862;
  --ink-3: #8b8378;        /* uppercase metadata only, 12px+ */
  --danger: #a5261d;
  --danger-bg: #f8ecea;
  --danger-line: #e0b4b0;
  --danger-ink: #85201a;
  --hatch-a: #ece6dd;      /* stand-in when a photo hasn't loaded */
  --hatch-b: #e3dcd1;

  /* per-closet accent — spent in exactly two places: the monogram
     plate and the 2px rule under the active closet. Plus the focus
     ring, and washes on trip/plan/her-pick. PRIMARY BUTTONS ARE INK. */
  --accent: #a8536a;
  --accent-wash: #f2e7ea;
  --accent-ink: #813a4e;

  /* type: two faces, strict roles */
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 34px;
  --fs-name: 25px;
  --fs-lead: 17px;
  --fs-body: 16px;
  --fs-control: 15px;
  --fs-meta: 14px;
  --fs-label: 12px;
  --fs-status: 11px;

  /* space & form */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 14px;
  --s5: 20px;
  --s6: 26px;
  --s7: 34px;
  --gutter: 20px;
  --grid-gap: 12px;
  --tap: 44px;
  --tap-play: 56px;

  --r-xs: 6px;    /* status tags, counter discs */
  --r-sm: 9px;    /* calendar day cells, thumbs */
  --r-md: 12px;   /* buttons, cards, toolbar pills */
  --r-lg: 16px;   /* hero plate, closet chips, sheets */
  --r-play: 24px; /* play mode only */

  /* edge, not elevation — four things genuinely float */
  --sh-float: 0 8px 20px rgb(27 25 23 / 0.3);
  --sh-bar: 0 -1px 0 var(--line);
  --sh-sheet: 0 -10px 24px rgb(27 25 23 / 0.14);
  --scrim: rgb(27 25 23 / 0.45);

  /* motion — nothing bounces, nothing slides in from off-screen */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-instant: 90ms;
  --dur-quick: 160ms;
  --dur-normal: 240ms;
  --dur-hold: 2000ms;

  /* play mode's own world */
  --play-bg: #2b2036;
  --play-ink: #f8f1e8;
  --play-dim: #c3aed0;
  --play-well: #3b2c49;
  --play-well-line: #5d476f;
  --play-amber: #ffc978;
  --play-amber-dark: #cf9c4e;
  --play-green: #8fc7ae;

  color-scheme: light;
}

/* Two independent axes, kept independent on purpose: these rules declare
   WHICH accent (a light value and a dark value), and the theme rules below
   declare WHICH OF THE TWO. When both axes wrote --accent directly they
   tied on specificity and the later one silently won — every closet came
   out rose in dark mode. */
:root,
[data-closet-accent="rose"]   { --accent-l:#a8536a; --accent-d:#d0819a; --accent-wash-l:#f2e7ea; --accent-wash-d:#2c1d22; --accent-ink-l:#813a4e; --accent-ink-d:#e8a9bd; }
[data-closet-accent="pine"]   { --accent-l:#3f6f6a; --accent-d:#6ba59e; --accent-wash-l:#e6eeed; --accent-wash-d:#17241f; --accent-ink-l:#2d514d; --accent-ink-d:#96c8c1; }
[data-closet-accent="ochre"]  { --accent-l:#8a6a2f; --accent-d:#c39a52; --accent-wash-l:#f2ebdc; --accent-wash-d:#241d12; --accent-ink-l:#664e22; --accent-ink-d:#dcbb80; }
[data-closet-accent="indigo"] { --accent-l:#4a5b8c; --accent-d:#8195c9; --accent-wash-l:#e8ebf3; --accent-wash-d:#191c28; --accent-ink-l:#374468; --accent-ink-d:#a9b7e0; }
[data-closet-accent="plum"]   { --accent-l:#6b5a7d; --accent-d:#a08cb4; --accent-wash-l:#ece7f0; --accent-wash-d:#221c29; --accent-ink-l:#50435e; --accent-ink-d:#c1b0d1; }
[data-closet-accent="olive"]  { --accent-l:#4f6b3f; --accent-d:#86a374; --accent-wash-l:#e9eee4; --accent-wash-d:#1a1f16; --accent-ink-l:#3a4f2e; --accent-ink-d:#a9c39a; }

/* …and the theme picks one. */
:root { --accent: var(--accent-l); --accent-wash: var(--accent-wash-l); --accent-ink: var(--accent-ink-l); }

/* Dark mode: the app is opened at 6:45am in a dark bedroom. --plate does
   NOT flip — cutouts are stored on white, so a photo card stays near-white
   and gains a dark hairline instead. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f;
    --surface: #201d19;
    --sunk: #1e1b17;
    --line: #322d27;
    --line-strong: #443d35;
    --dashed: #6b5c46;
    --dashed-bg: #241f18;
    --dashed-ink: #c2ab86;
    --ink: #f2eee7;
    --ink-2: #b3aca4;
    --ink-3: #8d867d;
    --danger: #e08a80;
    --danger-bg: #2b1a18;
    --danger-line: #5a3230;
    --danger-ink: #eda79e;
    --hatch-a: #262019;
    --hatch-b: #2e2720;
    --sh-float: 0 8px 20px rgb(0 0 0 / 0.55);
    --sh-sheet: 0 -10px 24px rgb(0 0 0 / 0.5);
    --scrim: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
  :root { --accent: var(--accent-d); --accent-wash: var(--accent-wash-d); --accent-ink: var(--accent-ink-d); }
}

/* An explicit choice always beats the OS. */
:root[data-theme="light"] {
  --paper: #f6f3ee; --surface: #fffdfa; --sunk: #f1ede6;
  --line: #e3ddd3; --line-strong: #cfc7ba;
  --dashed: #b9a98f; --dashed-bg: #f1ece1; --dashed-ink: #6a5c42;
  --ink: #1b1917; --ink-2: #6f6862; --ink-3: #8b8378;
  --danger: #a5261d; --danger-bg: #f8ecea; --danger-line: #e0b4b0; --danger-ink: #85201a;
  --hatch-a: #ece6dd; --hatch-b: #e3dcd1;
  --scrim: rgb(27 25 23 / 0.45);
  --accent: var(--accent-l); --accent-wash: var(--accent-wash-l); --accent-ink: var(--accent-ink-l);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #14120f; --surface: #201d19; --sunk: #1e1b17;
  --line: #322d27; --line-strong: #443d35;
  --dashed: #6b5c46; --dashed-bg: #241f18; --dashed-ink: #c2ab86;
  --ink: #f2eee7; --ink-2: #b3aca4; --ink-3: #8d867d;
  --danger: #e08a80; --danger-bg: #2b1a18; --danger-line: #5a3230; --danger-ink: #eda79e;
  --hatch-a: #262019; --hatch-b: #2e2720;
  --scrim: rgb(0 0 0 / 0.6);
  --accent: var(--accent-d); --accent-wash: var(--accent-wash-d); --accent-ink: var(--accent-ink-d);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 1ms; --dur-quick: 1ms; --dur-normal: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 2 · Base ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* Reverted to the v11 shell at Arturo's call: the page scrolls, and the
   bottom bar is pinned with position: fixed. Two attempts to improve on
   this made it worse on his phone and neither Chromium nor WebKit could
   reproduce either failure, so it goes back to the arrangement he had
   before I touched it. diag.html is still deployed if we want to work out
   what the device is actually reporting. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }

/* The one transform in the system. */
button:active:not(:disabled) { transform: scale(0.98); }
button { transition: transform var(--dur-instant) var(--ease-out); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

svg { flex: none; }

h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Photo stand-in while an image loads or a cutout is missing. */
.hatch {
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 7px, var(--hatch-b) 7px 14px);
}

/* ---------- 3 · Shell ---------- */

.app-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 6px var(--gutter) var(--s3);
}
.wordmark { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.wm-name { font: 400 var(--fs-name) / 1 var(--font-serif); color: var(--ink); }
.wm-household {
  font: 500 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn {
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  display: grid; place-items: center;
  padding: 0;
}

/* Closet switcher — active chip shows the name and count, the rest
   collapse to a monogram plate. The 2px accent rule sits underneath. */
#switcher-slot { flex: 0 0 auto; }
.closet-switcher {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 var(--gutter);
  padding: 0 0 var(--s3);
  border-bottom: 2px solid var(--accent);
}
.closet-switcher::-webkit-scrollbar { display: none; }
.closet-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--sunk);
  min-height: var(--tap);
}
.closet-chip[aria-selected="true"] {
  flex: 1 1 auto;
  background: var(--surface);
  border-color: var(--ink);
  padding-right: var(--s3);
}
.closet-chip .mono {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-md);
  background: var(--chip-accent, var(--accent));
  color: #fff;
  display: grid; place-items: center;
  font: 400 19px/1 var(--font-serif);
  overflow: hidden;
}
.closet-chip .mono img { width: 100%; height: 100%; object-fit: cover; }
.closet-chip .chip-text { display: none; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.closet-chip[aria-selected="true"] .chip-text { display: flex; }
.chip-name {
  font: 600 var(--fs-body) / 1 var(--font-sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-count { font: 400 var(--fs-label) / 1 var(--font-sans); color: var(--ink-3); }

/* Type tabs — icon + word, four maximum, truncating labels not sizes */
.type-toggle {
  flex: 0 0 auto;
  display: flex;
  gap: 22px;
  padding: var(--s3) var(--gutter) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.type-toggle::-webkit-scrollbar { display: none; }
.type-toggle button {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 0 7px;
  border: 0; border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  font: 500 var(--fs-body) / 1 var(--font-sans);
  min-height: 34px;
  transition: color var(--dur-quick) var(--ease-out);
}
.type-toggle button.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.type-toggle:empty { display: none; }

#view {
  flex: 1;
  min-height: 0;
  padding: var(--s3) var(--gutter) 128px;
  overflow-x: hidden;
  overflow-x: clip; /* clip, not hidden: sticky feet keep the viewport as their reference */
}
#view.flush { padding-left: 0; padding-right: 0; }

/* Bottom bar — plate, one hairline, and the only floating button */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.bar-btn {
  width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; padding: 4px 0;
  color: var(--ink-3);
  font: 500 var(--fs-meta) / 1 var(--font-sans);
}
.bar-btn.active { color: var(--ink); font-weight: 600; }
.bar-btn.active::after {
  content: ""; width: 22px; height: 2px; background: var(--ink); border-radius: 1px;
}
.bar-btn:not(.active)::after { content: ""; width: 22px; height: 2px; background: transparent; }
.plus-btn {
  width: 60px; height: 60px; flex: none;
  margin-top: -24px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: var(--sh-float);
}

/* ---------- 4 · Buttons ---------- */

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-dashed {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--r-md);
  font: 600 var(--fs-control) / 1 var(--font-sans);
  padding: 15px 18px;
  border: 1px solid transparent;
  text-align: center;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:disabled { background: var(--sunk); color: var(--ink-3); cursor: not-allowed; }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink-2); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-dashed {
  background: transparent; border: 1px dashed var(--dashed); color: var(--dashed-ink);
}
.btn-block { display: flex; width: 100%; }
.btn-lead { font-size: var(--fs-lead); padding: 18px; }
.btn-sub {
  margin-top: var(--s2); text-align: center;
  font: 400 var(--fs-meta) / 1.4 var(--font-sans); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Toolbar — the row that owns a focus screen */
.toolbar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 2px 0 var(--s3);
}
.toolbar-title {
  font: 400 22px/1 var(--font-serif); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toolbar .spacer { flex: 1; }
.tb-btn {
  min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink);
  font: 600 var(--fs-control) / 1 var(--font-sans);
}
.tb-btn.plain { background: var(--surface); color: var(--ink-2); }
.tb-btn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tb-btn.icon { width: var(--tap); padding: 0; justify-content: center; }
.tb-btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }

/* ---------- 5 · Chips, pills, tags ---------- */

.filter-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  white-space: nowrap;
}
.pill.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.pill.count { color: var(--ink-3); }
.pill.on .pill-x { opacity: 0.85; }
.pill-accent {
  background: var(--accent-wash); color: var(--accent-ink);
  border: 0; font-weight: 600; font-size: var(--fs-meta); padding: 10px 13px;
}

.color-chip {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  padding: 0;
}
.color-chip.all {
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.color-chip.selected {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

/* Status tags on cards: PAIRED filled, everything else outlined */
.tag {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--sunk);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.tag.solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag.outline { background: var(--plate); border-color: var(--line-strong); color: #6f6862; }
.tag.accent { background: var(--accent-wash); border: 0; color: var(--accent-ink); }
.tag.br { top: auto; bottom: 8px; }
.tag.tr { left: auto; right: 8px; }

.wear-pill {
  position: absolute; bottom: 8px; left: 8px;
  padding: 5px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-ink);
  font: 600 var(--fs-label) / 1 var(--font-sans);
}
.wear-pill.quiet { background: var(--sunk); color: var(--ink-2); }

/* ---------- 6 · Cards & grids ---------- */

.item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-content: start;
}
.item-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.item-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }

.item-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--plate);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.item-card.tall { aspect-ratio: 3 / 4; }
.item-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--plate);
}
.item-card img.contain { object-fit: contain; padding: 8px; }
.item-card.dirty { background: var(--sunk); opacity: 0.55; }
.item-card.dirty img { filter: grayscale(0.85); }
.item-card.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.item-card.dashed {
  border: 1px dashed var(--dashed);
  background: transparent;
  color: var(--dashed-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  font: 600 var(--fs-control) / 1.35 var(--font-sans);
  text-align: center;
  padding: 0 var(--s4);
}

/* A composed outfit that has no picture yet: the two cutouts stacked. */
.stack-outfit {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--plate);
}
.stack-outfit img {
  flex: 1; min-height: 0;
  width: auto; height: auto;
  object-fit: contain;
  margin: 8px 22px 0;
}
.stack-outfit img:last-child { margin: 0 30px 8px; }

.check-disc {
  position: absolute; top: 7px; right: 7px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}
.check-disc.accent { background: var(--accent); color: #fff; }
.check-disc.small { width: 20px; height: 20px; top: 4px; right: 4px; }
.item-card[aria-pressed="false"] .check-disc {
  background: rgb(255 255 255 / 0.85);
  border: 1px solid var(--line-strong);
  color: transparent;
}

/* Card actions that sit on top of a photo */
.card-x {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--plate); color: #6f6862;
  display: grid; place-items: center;
  padding: 0;
}

/* ---------- 7 · Labels, banners, empty states ---------- */

.label {
  display: flex; align-items: center; gap: 7px;
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s5) 0 9px;
}
.label:first-child { margin-top: 0; }
.label .label-action {
  margin-left: auto;
  font: 600 var(--fs-meta) / 1 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none; border: 0; padding: 0;
}

.banner {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: 12px var(--s4);
  margin-bottom: var(--s3);
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: 500 var(--fs-control) / 1.35 var(--font-sans);
  text-align: left;
}
.banner > span:nth-child(2) { flex: 1; }
.banner .banner-action {
  font: 600 var(--fs-control) / 1 var(--font-sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.banner.dashed { border: 1px dashed var(--dashed); background: var(--dashed-bg); color: var(--dashed-ink); }
.banner.accent { background: var(--accent-wash); border: 0; color: var(--accent-ink); }
.banner.error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); }
.banner.error .banner-action { color: var(--danger); }

.empty-state {
  padding: var(--s6) 24px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px dashed var(--dashed);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
}
.empty-icon {
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-md);
  background: var(--sunk);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.empty-title { font: 400 22px/1.15 var(--font-serif); color: var(--ink); }
.empty-body { font: 400 var(--fs-control) / 1.45 var(--font-sans); color: var(--ink-2); }
.empty-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-3);
  font: 400 var(--fs-control) / 1.5 var(--font-sans);
}

.mono-detail {
  font: 400 13px/1.5 var(--font-mono);
  color: var(--ink-3);
}

/* ---------- 8 · Fields & switches (52px tall, 17px text) ---------- */

.stack { display: flex; flex-direction: column; gap: var(--s3); }

.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field > span, .field-label {
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input, .field textarea, .input {
  width: 100%;
  min-height: 52px;
  padding: 15px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 var(--fs-lead) / 1.2 var(--font-sans);
  outline: none;
}
.field input:focus, .input:focus { border-color: var(--ink); }
.field.invalid input, .input.invalid { border-color: var(--danger); }
.field-error {
  display: flex; align-items: center; gap: 6px;
  font: 400 var(--fs-meta) / 1.4 var(--font-sans);
  color: var(--danger-ink);
}
.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row > .field { flex: 1; }

.switch-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  width: 100%;
  text-align: left;
}
.switch-row.on { border-color: var(--ink); }
.switch-row .sr-text { flex: 1; min-width: 0; }
.switch-row .sr-title { display: block; font: 600 18px/1.2 var(--font-sans); color: var(--ink); }
.switch-row .sr-hint { display: block; margin-top: 3px; font: 400 var(--fs-meta) / 1.35 var(--font-sans); color: var(--ink-2); }
.switch {
  width: 54px; height: 32px; flex: none;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--line-strong);
  position: relative;
  appearance: none;
  transition: background var(--dur-quick) var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: left var(--dur-quick) var(--ease-out);
}
.switch:checked { background: var(--ink); border-color: var(--ink); }
.switch:checked::after { left: 24px; border-color: transparent; background: #fffdfa; }

/* ---------- 9 · Sheets ---------- */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  display: flex; align-items: flex-end;
  animation: fade-in var(--dur-normal) var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } }
.sheet {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s5) var(--gutter) calc(30px + env(safe-area-inset-bottom));
  box-shadow: var(--sh-sheet);
  animation: sheet-up var(--dur-normal) var(--ease-out);
}
@keyframes sheet-up { from { transform: translateY(14%); } }
.sheet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s4);
}
.sheet-title { font: 400 24px/1.15 var(--font-serif); color: var(--ink); }
.sheet-sub { margin-bottom: var(--s4); font: 400 var(--fs-control) / 1.4 var(--font-sans); color: var(--ink-2); }
.sheet-clear {
  background: none; border: 0; padding: 0;
  font: 600 var(--fs-control) / 1 var(--font-sans);
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.sheet-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  min-height: 52px;
  padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  color: var(--ink);
  font: 500 var(--fs-lead) / 1.2 var(--font-sans);
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row .row-main { flex: 1; min-width: 0; }
.sheet-row .row-hint { display: block; margin-top: 3px; font: 400 var(--fs-meta) / 1.35 var(--font-sans); color: var(--ink-2); }
.sheet-row .row-count { font: 400 var(--fs-control) / 1 var(--font-sans); color: var(--ink-3); }
.sheet-row.on {
  background: var(--sunk);
  margin: 0 calc(var(--gutter) * -1);
  padding-left: var(--gutter); padding-right: var(--gutter);
  font-weight: 600;
}
.sheet-row.on .row-count { color: var(--ink-2); }
.sheet-row.quiet { color: var(--ink-2); }
.sheet-foot { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* ---------- 10 · Toast ---------- */

.toast {
  position: fixed;
  left: 50%; bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 80;
  transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: var(--s4);
  max-width: min(92vw, 460px);
  padding: 14px 14px 14px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font: 500 var(--fs-control) / 1.35 var(--font-sans);
  box-shadow: 0 6px 18px rgb(27 25 23 / 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast .toast-msg { flex: 1; }
.toast .toast-undo {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px;
  color: var(--paper);
  font: 600 var(--fs-control) / 1 var(--font-sans);
}

/* ---------- 11 · Auth & onboarding ---------- */

.auth-screen {
  min-height: calc(100dvh - 120px);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s3);
  padding: 0 6px;
}
.auth-title { font: 400 46px/1 var(--font-serif); color: var(--ink); margin-bottom: 10px; }
.auth-heading { font: 400 var(--fs-display) / 1.12 var(--font-serif); color: var(--ink); margin-bottom: var(--s3); }
.auth-lead { font: 400 18px/1.5 var(--font-sans); color: var(--ink-2); max-width: 30ch; margin-bottom: var(--s7); }
.auth-note { font: 400 var(--fs-control) / 1.5 var(--font-sans); color: var(--ink-2); }
.auth-badge {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--sunk);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  margin-bottom: var(--s5);
}
.auth-badge.alarm { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.auth-foot {
  margin-top: auto;
  padding: var(--s5) 0 var(--s2);
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: var(--s3);
  color: var(--ink-2);
  font: 400 var(--fs-control) / 1.5 var(--font-sans);
}
.note-dashed {
  padding: var(--s4) var(--s4);
  border-radius: var(--r-md);
  border: 1px dashed var(--dashed);
  background: var(--dashed-bg);
  color: var(--dashed-ink);
  font: 400 var(--fs-control) / 1.5 var(--font-sans);
}
.detail-box {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 1px solid var(--line);
}
.detail-box summary {
  display: flex; align-items: center; gap: var(--s2);
  font: 600 var(--fs-meta) / 1.3 var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.detail-box summary::-webkit-details-marker { display: none; }

.steps { display: flex; gap: 6px; padding: 0 0 var(--s5); }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps span.done { background: var(--ink); }
.step-kicker {
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.step-title { font: 400 var(--fs-display) / 1.12 var(--font-serif); color: var(--ink); margin-bottom: var(--s2); }
.step-lead { font: 400 var(--fs-lead) / 1.5 var(--font-sans); color: var(--ink-2); margin-bottom: var(--s6); }
.step-foot {
  position: sticky; bottom: 0;
  margin: var(--s5) calc(var(--gutter) * -1) 0;
  padding: var(--s4) var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.suggest-chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.preview-card {
  margin-top: var(--s6);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Closet cards in onboarding + household */
.closet-card {
  width: 100%;
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}
.closet-card.open { border-color: var(--ink); }
.closet-card-head { display: flex; align-items: center; gap: var(--s3); }
.mono-plate {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-lg);
  background: var(--mono-accent, var(--accent));
  color: #fff;
  display: grid; place-items: center;
  font: 400 24px/1 var(--font-serif);
  overflow: hidden;
}
.mono-plate img { width: 100%; height: 100%; object-fit: cover; }
.mono-plate.sm { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 21px; }
.mono-plate.xs { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.mono-plate.xxs { width: 18px; height: 18px; border-radius: 6px; font-size: 10px; }
.closet-card .cc-name { display: block; font: 600 18px/1.2 var(--font-sans); color: var(--ink); }
.closet-card .cc-sub { display: block; margin-top: 2px; font: 400 13px/1.2 var(--font-sans); color: var(--ink-3); }
.accent-row { display: flex; gap: 9px; margin-top: var(--s4); flex-wrap: wrap; }
.accent-dot {
  width: 32px; height: 32px; border-radius: 999px; border: 0; padding: 0;
}
.accent-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.dashed-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s4);
  border-radius: var(--r-lg);
  border: 1px dashed var(--dashed);
  background: transparent;
}
.dashed-row .dashed-icon {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-lg);
  background: var(--sunk);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.dashed-row input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: 400 var(--fs-lead) / 1.2 var(--font-sans);
  color: var(--ink); outline: none;
}
.member-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 13px var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.member-row.pending { border-style: dashed; border-color: var(--dashed); }
.member-row .mr-main { flex: 1; min-width: 0; }
.member-row .mr-name { display: block; font: 600 var(--fs-control) / 1.3 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.member-row .mr-sub { display: block; font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); }
.member-row.pending .mr-sub { color: var(--dashed-ink); }
.info-box {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: 400 var(--fs-control) / 1.55 var(--font-sans);
}

/* ---------- 12 · Item detail ---------- */

.hero {
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: var(--s4);
}
/* A photograph a parent took is shown WHOLE. Cropping the hem off a shirt
   to fill a fixed 16:10 plate is exactly backwards for an app whose claim
   is that the photos are the brightest thing on screen. The plate takes
   the shape of the picture, capped so it never eats the whole screen, and
   a portrait shot letterboxes onto plate rather than losing its edges. */
.hero > img {
  display: block; width: 100%;
  height: auto;
  max-height: 46dvh;
  object-fit: contain;
  background: var(--plate);
}
.hero > .hero-photo {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--plate);
  overflow: hidden;
}
/* An outfit nobody has composed yet shows its two cutouts stacked. The
   hero's `display: block` was overriding the stack's flex column, so the
   pieces overflowed the plate instead of sharing it. */
.hero > .hero-photo.stack-outfit { display: flex; }
.hero > img.contain { padding: var(--s3); }
.hero-body { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); background: var(--surface); }
.hero-name { font: 400 var(--fs-name) / 1.15 var(--font-serif); color: var(--ink); margin-bottom: 4px; }
.hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 var(--fs-control) / 1.4 var(--font-sans); color: var(--ink-2);
}
.hero-meta .fact { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .sep { color: var(--line-strong); }
.hero.dirty > img { filter: grayscale(0.85); opacity: 0.6; }

.strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: var(--s4);
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: 0 0 auto; }
.strip .item-card { width: 96px; }
.strip .item-card.wide { width: 116px; }

.piece-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: 7px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}
.piece-row img {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--plate);
}
.piece-row .pr-main { flex: 1; min-width: 0; }
.piece-row .pr-name { display: block; font: 600 var(--fs-body) / 1.2 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-row .pr-sub { display: block; margin-top: 2px; font: 400 13px/1.3 var(--font-sans); color: var(--ink-3); }
.piece-row svg { color: var(--ink-3); }

/* ---------- 13 · Add & bulk ---------- */

.photo-plate {
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: var(--s4);
}
.photo-plate .pp-view {
  aspect-ratio: 16 / 11;
  display: grid; place-items: center;
  background: var(--plate);
  color: var(--ink-3);
  font: 400 var(--fs-control) / 1.4 var(--font-sans);
  text-align: center;
  padding: var(--s5);
}
.photo-plate img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: contain; background: var(--plate); }
.photo-plate .pp-actions {
  display: flex; gap: 10px; padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.photo-plate .pp-actions > * { flex: 1; }

.type-picker { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.type-picker button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 var(--fs-control) / 1 var(--font-sans);
  min-height: 76px;
}
.type-picker button.on {
  border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600;
}

.kind-chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.kind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap);
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 var(--fs-control) / 1 var(--font-sans);
}
.kind-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.kind-chip.skip { border-style: dashed; border-color: var(--dashed); color: var(--dashed-ink); background: transparent; }

.screen-foot {
  position: sticky; bottom: 0;
  margin: var(--s5) calc(var(--gutter) * -1) 0;
  padding: var(--s4) var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* A focus screen owns the whole phone, so its commit button belongs at the
   bottom of the phone — not wherever the content happens to end. Sticky
   alone only pins once the content overflows; short screens left the
   footer floating with paper below it. The column fills the viewport and
   `margin-top: auto` pushes the footer down; sticky still does its job
   when the content IS long enough to scroll. */
#view.no-chrome {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - env(safe-area-inset-top));
}
#view.no-chrome > * { flex: 0 0 auto; }
#view.no-chrome > .screen-foot,
#view.no-chrome > .foot-actions { margin-top: auto; }

.progress-card {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.progress-card p { font: 500 var(--fs-control) / 1.35 var(--font-sans); color: var(--ink-2); margin-bottom: var(--s2); }
.progress-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; background: var(--ink); border-radius: 3px; transition: width var(--dur-normal) var(--ease-out); }

.bulk-cell { position: relative; }
.bulk-cell .bc-type {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  padding: 7px;
  border: 0; border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-label) / 1 var(--font-sans);
}
.bulk-cell .bc-photo { aspect-ratio: 1 / 1; }
.bulk-cell .bc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulk-cell.unsure { border-style: dashed; border-color: var(--dashed); }
.bulk-cell.unsure .bc-type { border-top-style: dashed; border-top-color: var(--dashed); color: var(--dashed-ink); }
.bulk-cell.working { background: var(--sunk); opacity: 0.6; }
.bulk-cell.working .bc-type { color: var(--ink-2); font-weight: 500; }
.bulk-cell.failed { border-color: var(--danger); }
.bulk-x {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--plate);
  color: var(--ink-2); display: grid; place-items: center; padding: 0;
}
/* Typing a whole selection at once: the three types sit side by side so
   the choice is one tap, not a sheet. Two or three buttons, never more —
   "One-pieces" is the long one, so the row runs at label size to keep all
   three on a single line at default text scaling. */
.bulk-types { display: flex; gap: var(--s2); }
.bulk-types button {
  flex: 1; min-width: 0;
  padding: 16px 6px; gap: 4px;
  font-size: calc(var(--fs-control) - 1px);
}
.bulk-types button:disabled { border-color: var(--line-strong); color: var(--ink-3); }
/* A picked photo must read as picked even while it is still dashed-unsure,
   so this has to beat .bulk-cell.unsure's border. */
.bulk-cell.selected, .bulk-cell.unsure.selected {
  border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* ---------- 14 · The camera (the one dark screen) ---------- */

.camera-screen {
  position: fixed; inset: 0; z-index: 70;
  background: #1b1917; color: #f6f3ee;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.camera-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 2px var(--s4) var(--s3);
}
.camera-bar .cb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap);
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid #4a453f;
  background: transparent;
  color: #f6f3ee;
  font: 600 var(--fs-control) / 1 var(--font-sans);
}
.camera-bar .spacer { flex: 1; }
.camera-bar .cb-btn.icon { width: var(--tap); padding: 0; justify-content: center; }
.camera-bar .cb-btn.on { background: #f6f3ee; color: #1b1917; border-color: #f6f3ee; }
.camera-view {
  flex: 1; position: relative;
  margin: 0 var(--s4);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #33302c 0 10px, #2c2926 10px 20px);
}
.camera-view video, .camera-view img.shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.camera-frame {
  position: absolute; inset: 44px 34px;
  border-radius: var(--r-md);
  border: 2px solid rgb(246 243 238 / 0.5);
  pointer-events: none;
}
.camera-hint {
  position: absolute; left: 0; right: 0; top: 14px;
  text-align: center;
}
.camera-hint span {
  display: inline-block;
  padding: 9px var(--s4);
  border-radius: 999px;
  background: rgb(27 25 23 / 0.72);
  font: 500 var(--fs-control) / 1 var(--font-sans);
}
.camera-trust {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: var(--s2);
}
.camera-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--s3);
  border-radius: 999px;
  background: rgb(27 25 23 / 0.72);
  font: 600 var(--fs-status) / 1 var(--font-sans);
  letter-spacing: 0.09em;
}
.camera-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--s4) calc(34px + env(safe-area-inset-bottom));
}
.camera-thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #33302c 0 6px, #2c2926 6px 12px);
  border: 0; padding: 0;
}
.camera-thumb img { width: 100%; height: 100%; object-fit: cover; }
.camera-shutter {
  width: 74px; height: 74px;
  border-radius: 999px;
  background: #f6f3ee; color: #1b1917;
  border: 0;
  display: grid; place-items: center;
}
.camera-count { width: 60px; text-align: right; font: 500 var(--fs-meta) / 1.3 var(--font-sans); color: #b3aca4; }

/* ---------- 15 · The pairing carousel ---------- */

.carousel-wrap { position: relative; margin: 0 calc(var(--gutter) * -1); padding: 0 6px; }
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--s3);
  padding: 0 var(--s4) var(--s2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.pair-slide {
  flex: 0 0 calc(100% - 28px);
  scroll-snap-align: center;
}
.pair-plate {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--line);
  padding: var(--s4);
  overflow: hidden;
  touch-action: none;
}
.pair-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
}
.pair-layer {
  position: absolute;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.pair-layer.top { top: 3%; left: 12%; width: 76%; height: 50%; z-index: 2; }
.pair-layer.bottom { top: 46%; left: 18%; width: 64%; height: 50%; z-index: 1; }
.pair-plate.tucked .pair-layer.bottom { z-index: 3; }
.pair-tuck {
  position: absolute; top: var(--s2); right: var(--s2); z-index: 5;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink-2);
  display: grid; place-items: center;
  padding: 0;
}
.pair-badge {
  position: absolute; top: var(--s2); left: var(--s2); z-index: 5;
  padding: 5px 9px; border-radius: var(--r-xs);
  background: var(--sunk); border: 1px solid var(--line);
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.09em; color: var(--ink-2);
  text-transform: uppercase;
}
.carousel-arrow {
  position: absolute; top: 46%;
  width: 32px; height: 54px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 0;
  transform: translateY(-50%);
  z-index: 6;
}
.carousel-arrow.left { left: 0; border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.carousel-arrow.right { right: 0; border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); }

.commit-row { display: flex; gap: 10px; padding: var(--s4) 0 var(--s3); }
.commit-row .skip {
  flex: 0 0 56px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink-2);
  padding: 18px 0;
}
.commit-row .commit { flex: 1; }

.hint-line {
  text-align: center;
  font: 400 var(--fs-control) / 1.45 var(--font-sans);
  color: var(--ink-2);
  padding: 0 2px var(--s3);
}
.hint-line strong { font-weight: 600; color: var(--ink); }
.hint-small {
  text-align: center;
  font: 400 13px/1.35 var(--font-sans);
  color: var(--ink-3);
  padding: 10px 0 var(--s5);
}

/* ---------- 16 · Composer ---------- */

.composer-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: var(--r-md);
  background: #fff;
  touch-action: none;
}
.composer-plate {
  border-radius: var(--r-lg);
  background: var(--plate);
  border: 1px solid var(--line);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.composer-tools { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.composer-tools button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap);
  padding: 13px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 var(--fs-meta) / 1 var(--font-sans);
}
.composer-tools button.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* ---------- 17 · Diary ---------- */

.diary-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 var(--s4);
}
.diary-title { text-align: center; }
.diary-month { font: 400 var(--fs-name) / 1.1 var(--font-serif); color: var(--ink); }
.diary-sub {
  margin-top: 3px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 var(--fs-label) / 1 var(--font-sans); color: var(--ink-3);
}
.diary-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  text-align: center;
  font: 600 var(--fs-status) / 1 var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-bottom: 6px;
}
.diary-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.diary-day {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 5px;
  overflow: hidden;
  font: 600 var(--fs-status) / 1 var(--font-sans);
  color: var(--ink-3);
  text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
}
.diary-day img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diary-day .d-num { position: relative; z-index: 1; }
.diary-day.worn { border-color: transparent; padding: 4px 5px; }
.diary-day.worn .d-num { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgb(0 0 0 / 0.45); }
.diary-day.planned { border: 1px dashed var(--dashed); background: var(--dashed-bg); color: var(--dashed-ink); }
.diary-day.planned .d-plan { position: relative; z-index: 1; align-self: flex-end; }
.diary-day.trip { border: 2px solid var(--accent); background: var(--accent-wash); color: var(--accent-ink); padding: 4px; }
.diary-day.worn.trip { box-shadow: inset 0 0 0 2px var(--accent); border-color: transparent; background: none; }
.diary-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.diary-day .d-count {
  position: absolute; right: 3px; bottom: 3px; z-index: 1;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 700 9px/16px var(--font-sans);
  text-align: center;
  padding: 0 3px;
}
.diary-legend {
  display: flex; gap: var(--s3); justify-content: center; align-items: center; flex-wrap: wrap;
  margin-top: var(--s5);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font: 500 var(--fs-label) / 1 var(--font-sans);
  color: var(--ink-2);
}
.diary-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; }
.legend-plan {
  padding: 4px 8px; border-radius: var(--r-xs);
  border: 1px dashed var(--dashed); color: var(--dashed-ink);
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase;
}
.legend-trip {
  padding: 3px 7px; border-radius: var(--r-xs);
  border: 2px solid var(--accent); color: var(--accent);
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase;
}

.wear-card {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: var(--s3);
}
.wear-card > img {
  display: block; width: 100%;
  height: auto; max-height: 46dvh;
  object-fit: contain;
  background: var(--plate);
}
.wear-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}
.wear-card-head .wc-title { flex: 1; font: 600 var(--fs-body) / 1.2 var(--font-sans); color: var(--ink); }
.wear-chips { display: flex; gap: 10px; padding: 0 var(--s4) var(--s4); }
.wear-chip {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0;
  padding: var(--s2);
  border-radius: var(--r-sm);
  background: var(--sunk);
  border: 0;
  text-align: left;
}
.wear-chip img { width: 38px; height: 38px; flex: none; border-radius: var(--r-xs); object-fit: cover; background: var(--plate); }
.wear-chip span { font: 500 var(--fs-meta) / 1.2 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wear-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.wear-row > img { width: 58px; height: 58px; flex: none; border-radius: var(--r-sm); object-fit: cover; background: var(--plate); }
.wear-row .wr-main { flex: 1; min-width: 0; }
.wear-row .wr-title { display: block; font: 600 var(--fs-body) / 1.2 var(--font-sans); color: var(--ink); }
.wear-row .wr-sub { display: block; margin-top: 2px; font: 400 13px/1.3 var(--font-sans); color: var(--ink-3); }
.row-icon-btn {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink-2);
  display: grid; place-items: center;
  padding: 0;
}

.foot-actions {
  position: sticky; bottom: 0;
  margin: var(--s5) calc(var(--gutter) * -1) 0;
  padding: var(--s4) var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}
.foot-actions > * { flex: 1; }

/* ---------- 18 · Trips ---------- */

.trip-card {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--accent);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.trip-card.quiet { border: 1px solid var(--line); }
.trip-card-body { padding: var(--s4); }
.trip-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: 4px; }
.trip-name { font: 400 var(--fs-name) / 1.1 var(--font-serif); color: var(--ink); }
.trip-dates { font: 400 var(--fs-control) / 1.4 var(--font-sans); color: var(--ink-2); margin-bottom: var(--s4); }
.trip-people { display: flex; gap: 10px; margin-bottom: var(--s4); flex-wrap: wrap; }
.trip-person {
  flex: 1 1 40%;
  display: flex; align-items: center; gap: 9px;
  padding: 9px;
  border-radius: var(--r-md);
  background: var(--sunk);
  font: 500 var(--fs-meta) / 1.2 var(--font-sans);
  color: var(--ink);
}
.trip-derived {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
  color: var(--ink-2);
  font: 500 var(--fs-control) / 1.35 var(--font-sans);
}
.trip-card-foot { display: flex; border-top: 1px solid var(--line); }
.trip-card-foot button {
  flex: 1; padding: 15px; border: 0; background: transparent;
  font: 600 var(--fs-control) / 1 var(--font-sans); color: var(--ink);
}
.trip-card-foot button + button { border-left: 1px solid var(--line); color: var(--ink-2); }
.trip-list-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  text-align: left;
}
.trip-list-row.past { background: var(--sunk); opacity: 0.85; }
.trip-list-row .tl-main { flex: 1; min-width: 0; }
.trip-list-row .tl-name { display: block; font: 600 var(--fs-lead) / 1.2 var(--font-sans); color: var(--ink); }
.trip-list-row .tl-sub { display: block; margin-top: 3px; font: 400 var(--fs-meta) / 1.35 var(--font-sans); color: var(--ink-2); }
.trip-summary {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
}
.trip-summary .ts-counts { font: 600 var(--fs-lead) / 1.25 var(--font-sans); color: var(--ink); margin-bottom: 3px; }
.trip-summary .ts-verdict { font: 400 var(--fs-control) / 1.35 var(--font-sans); color: var(--ink-2); }

/* ---------- 19 · Settings & household ---------- */

.settings-group {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 var(--s4);
  margin-bottom: var(--s5);
}
.settings-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s4) 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  min-height: 52px;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .st-main { flex: 1; min-width: 0; }
.settings-row .st-title { display: block; font: 600 var(--fs-body) / 1.3 var(--font-sans); color: var(--ink); }
.settings-row .st-hint { display: block; font: 400 13px/1.35 var(--font-sans); color: var(--ink-2); }
.settings-row .st-value { font: 400 var(--fs-control) / 1 var(--font-sans); color: var(--ink-2); }
.settings-row svg { color: var(--ink-3); }
.settings-row.danger .st-title { color: var(--danger); }
.household-row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: 11px var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: var(--s4);
  text-align: left;
}

/* ---------- 20 · Play mode: a different world ---------- */

.play-mode {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--play-bg);
  color: var(--play-ink);
  padding-top: env(safe-area-inset-top);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
.play-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: 6px 18px 0;
}
.play-title { font: 400 var(--fs-name) / 1 var(--font-serif); color: var(--play-amber); text-align: center; }
.play-owner { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.play-owner .po-face {
  width: var(--tap); height: var(--tap);
  border-radius: var(--s4);
  border: 2px solid var(--play-amber);
  overflow: hidden;
  background: var(--play-well);
}
.play-owner .po-face img { width: 100%; height: 100%; object-fit: cover; }
.play-lead {
  text-align: center;
  padding: var(--s4) 24px var(--s4);
  font: 500 var(--fs-control) / 1.45 var(--font-sans);
  color: var(--play-dim);
}

/* The hold: a ring that fills. A tap does nothing but reset it. */
.hold-btn {
  position: relative;
  width: 60px; height: 60px; flex: none;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0;
  color: var(--play-ink);
}
.hold-btn .hb-face {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--play-well);
  border: 3px solid var(--play-well-line);
}
.hold-btn .hb-ring {
  position: absolute; inset: -4px;
  border-radius: 999px;
  background: conic-gradient(var(--play-amber) calc(var(--held, 0) * 1turn), transparent 0);
  mask: radial-gradient(circle, transparent 61%, #000 62%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
  pointer-events: none;
}
.hold-btn svg { position: relative; z-index: 1; }
.hold-btn.holding .hb-ring { animation: hold-fill var(--dur-hold) linear forwards; }
@keyframes hold-fill { from { --held: 0; } to { --held: 1; } }
@property --held { syntax: "<number>"; inherits: false; initial-value: 0; }
.hold-btn.pretend .hb-face {
  background: var(--play-amber); border-color: var(--play-amber);
  box-shadow: 0 5px 0 var(--play-amber-dark);
}
.hold-btn.pretend { color: var(--play-bg); }
.hold-btn.forreal .hb-face { background: var(--play-well); border-color: var(--play-green); }
.hold-btn.forreal { color: var(--play-green); }
.hold-btn.small { width: 58px; height: 58px; }

.play-hub {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  align-content: start;
  padding: 0 18px calc(20px + env(safe-area-inset-bottom));
}
.play-tile {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px;
  border: 0;
  border-radius: var(--r-play);
  background: var(--play-ink);
  color: var(--play-bg);
  box-shadow: 0 6px 0 var(--tile-shadow, var(--play-amber-dark));
  text-align: left;
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
}
.play-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tile-shadow, var(--play-amber-dark)); }
.play-tile .pt-photo {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
}
.play-tile .pt-photo img { width: 100%; height: 100%; object-fit: contain; }
.play-tile .pt-icon {
  position: absolute; top: 6px; left: 6px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #fffdfa;
  display: grid; place-items: center;
  color: var(--play-bg);
}
.play-tile .pt-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.play-tile .pt-name { font: 400 21px/1 var(--font-serif); }
.play-tile .pt-stars { display: inline-flex; gap: 1px; color: #8b8378; }

.play-stage {
  flex: 0 0 auto;
  position: relative;
  margin: 0 18px var(--s4);
  border-radius: var(--r-play);
  background: var(--play-ink);
  padding: var(--s4);
  touch-action: none;
}
.play-doll {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
}
.play-doll img {
  position: absolute;
  object-fit: contain;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.play-doll img.slot-top { top: 2%; left: 12%; width: 76%; height: 50%; z-index: 2; }
.play-doll img.slot-bottom { top: 46%; left: 18%; width: 64%; height: 50%; z-index: 1; }
.play-doll img.slot-one { top: 4%; left: 14%; width: 72%; height: 88%; z-index: 2; }
.play-undo {
  position: absolute; top: var(--s5); right: var(--s5); z-index: 5;
  width: var(--tap); height: var(--tap);
  border-radius: 999px;
  border: 0;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--accent-ink);
}
.play-rails {
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.play-rail { display: flex; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.play-rail::-webkit-scrollbar { display: none; }
.play-rail-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: var(--play-well);
  display: grid; place-items: center;
  color: var(--play-dim);
}
.play-piece {
  width: 72px; height: 72px; flex: none;
  border-radius: 18px;
  background: var(--play-ink);
  border: 0; padding: 0;
  overflow: hidden;
  box-shadow: 0 5px 0 var(--piece-shadow, var(--accent));
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
}
.play-piece img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.play-piece:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--piece-shadow, var(--accent)); }
.play-piece.worn { box-shadow: 0 5px 0 var(--play-amber-dark), inset 0 0 0 3px var(--play-amber); }
.play-piece.basket {
  background: var(--play-well);
  box-shadow: none;
  display: grid; place-items: center;
  color: #8f7fa0;
}
.play-cta {
  width: 100%;
  min-height: var(--tap-play);
  padding: 20px;
  border: 0;
  border-radius: var(--r-play);
  background: var(--play-amber);
  color: var(--play-bg);
  font: 700 20px/1 var(--font-sans);
  box-shadow: 0 6px 0 var(--play-amber-dark);
}
.play-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--play-amber-dark); }
.play-cta:disabled { opacity: 0.45; box-shadow: none; }
.play-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.play-prompt {
  margin: var(--s1) 0 var(--s3);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--play-ink);
  color: var(--play-bg);
  font: 400 21px/1.1 var(--font-serif);
  text-align: center;
}
.play-anchor {
  flex: 1; min-height: 120px;
  display: grid; place-items: center;
  width: 100%;
}
.play-anchor img { max-height: 100%; max-width: min(64vw, 260px); object-fit: contain; }
.play-choices { display: flex; gap: var(--s3); justify-content: center; padding-top: var(--s3); flex-wrap: wrap; }
.play-choice {
  width: min(28vw, 116px);
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-play);
  background: var(--play-ink);
  padding: 8px;
  box-shadow: 0 6px 0 var(--play-amber-dark);
}
.play-choice img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.play-choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--play-amber-dark); }
.play-choice.right { box-shadow: 0 6px 0 #4f8f6d, inset 0 0 0 4px var(--play-green); }
.play-choice.wrong { animation: wobble 0.45s var(--ease-out); opacity: 0.7; }
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px) rotate(-3deg); }
  75% { transform: translateX(7px) rotate(3deg); }
}
.play-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  text-align: center;
  color: var(--play-dim);
  font: 400 var(--fs-lead) / 1.5 var(--font-sans);
  padding: 0 30px;
}
.play-celebrate {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.play-celebrate .pc-msg { font: 400 var(--fs-display) / 1.1 var(--font-serif); color: var(--play-amber); }
.play-stars { display: inline-flex; gap: 2px; color: var(--play-amber); }
.play-confetti { position: absolute; top: -30px; pointer-events: none; animation: confetti-fall 2.2s ease-in forwards; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0.5; } }
.play-bins { display: flex; gap: var(--s4); justify-content: center; padding-top: var(--s3); }
.play-bin {
  position: relative;
  width: min(26vw, 108px);
  aspect-ratio: 1 / 0.92;
  background: none; border: 0; padding: 0;
}
.play-bin .pb-body {
  position: absolute; inset: 12% 4% 0;
  border-radius: 10px 10px 18px 18px;
  box-shadow: inset 0 -10px 16px rgb(0 0 0 / 0.16);
}
.play-bin .pb-lip {
  position: absolute; top: 4%; left: 0; right: 0; height: 16%;
  border-radius: 999px;
  background: var(--play-ink);
  opacity: 0.8;
}
.play-bin.right { animation: throb 0.5s var(--ease-out) 2; }
.play-bin.wrong { animation: wobble 0.45s var(--ease-out); opacity: 0.7; }
@keyframes throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.play-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; width: min(92vw, 380px);
  align-content: center; flex: 1;
}
.play-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(84vw, 340px); }
.play-card {
  aspect-ratio: 1;
  border: 0; border-radius: var(--r-play);
  background: var(--play-ink);
  padding: 8px;
  position: relative;
  box-shadow: 0 5px 0 var(--play-amber-dark);
}
.play-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.play-card.found { box-shadow: 0 5px 0 #4f8f6d, inset 0 0 0 4px var(--play-green); }
.play-card.wrong { animation: wobble 0.45s var(--ease-out); opacity: 0.7; }
.play-slots { display: flex; gap: 10px; padding: 4px 0 var(--s2); }
.play-slot {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px dashed var(--play-well-line);
  display: grid; place-items: center;
  font: 700 var(--fs-lead) / 1 var(--font-sans);
  color: var(--play-bg);
}
.play-slot.filled { background: var(--play-amber); border: 2px solid var(--play-amber); }
.mem-card { aspect-ratio: 3 / 3.4; background: none; border: 0; padding: 0; perspective: 600px; }
.mem-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s var(--ease-out); }
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-front, .mem-back {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--r-play);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mem-front { background: var(--play-well); border: 3px solid var(--play-well-line); color: var(--play-amber); }
.mem-back { background: var(--play-ink); transform: rotateY(180deg); padding: 8px; }
.mem-back img { width: 100%; height: 100%; object-fit: contain; }
.mem-card.matched .mem-back { box-shadow: inset 0 0 0 4px var(--play-green); }

/* ---------- 21 · Odds & ends ---------- */

.crop-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgb(27 25 23 / 0.94);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  color: #f6f3ee;
}
.crop-overlay .crop-title { text-align: center; font: 500 var(--fs-control) / 1.5 var(--font-sans); }
.crop-canvas {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  touch-action: none;
  border: 1px solid rgb(246 243 238 / 0.4);
}
.crop-actions { display: flex; gap: 10px; justify-content: center; }
.crop-actions button {
  min-height: var(--tap); padding: 13px 20px;
  border-radius: var(--r-md);
  border: 1px solid #4a453f;
  background: transparent;
  color: #f6f3ee;
  font: 600 var(--fs-control) / 1 var(--font-sans);
}
.crop-actions button.primary { background: #f6f3ee; color: #1b1917; border-color: #f6f3ee; }

.suggest-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s4); }
.suggest-strip::-webkit-scrollbar { display: none; }
.suggest-strip .item-card { width: 80px; flex: 0 0 auto; }

.date-row {
  display: flex; align-items: center; gap: 11px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.date-row > span { flex: 1; font: 500 var(--fs-body) / 1.2 var(--font-sans); }
.date-row input {
  padding: 9px 13px; border-radius: var(--r-sm);
  background: var(--sunk); border: 1px solid var(--line);
  font: 600 var(--fs-control) / 1 var(--font-sans); color: var(--ink);
}

.section-bands { display: flex; flex-direction: column; gap: var(--s5); }
.band-label {
  font: 600 var(--fs-label) / 1 var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s2);
}

@media (min-width: 640px) {
  #view { max-width: 620px; margin: 0 auto; }
  .app-header, .closet-switcher, .type-toggle { max-width: 620px; margin-left: auto; margin-right: auto; }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item-grid.three { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 22 · Bigger text: follow the phone's own size ---------- */
/* Only the text a person READS scales. Controls keep their 44px floor,
   so a larger size never breaks the thumb targets. */

:root[data-bigtext="on"] {
  font-size: calc(16px * var(--text-scale, 1));
}
:root[data-bigtext="on"] body { font-size: calc(16px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .hero-name,
:root[data-bigtext="on"] .empty-title,
:root[data-bigtext="on"] .sheet-title,
:root[data-bigtext="on"] .trip-name,
:root[data-bigtext="on"] .diary-month { font-size: calc(25px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .step-title,
:root[data-bigtext="on"] .auth-heading { font-size: calc(34px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .auth-lead,
:root[data-bigtext="on"] .step-lead,
:root[data-bigtext="on"] .sheet-row,
:root[data-bigtext="on"] .field input,
:root[data-bigtext="on"] .input { font-size: calc(17px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .hero-meta,
:root[data-bigtext="on"] .empty-body,
:root[data-bigtext="on"] .banner,
:root[data-bigtext="on"] .hint-line,
:root[data-bigtext="on"] .info-box,
:root[data-bigtext="on"] .btn-primary,
:root[data-bigtext="on"] .btn-secondary,
:root[data-bigtext="on"] .btn-danger,
:root[data-bigtext="on"] .btn-dashed,
:root[data-bigtext="on"] .tb-btn { font-size: calc(15px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .settings-row .st-title,
:root[data-bigtext="on"] .piece-row .pr-name,
:root[data-bigtext="on"] .member-row .mr-name,
:root[data-bigtext="on"] .chip-name { font-size: calc(16px * var(--text-scale, 1)); }
:root[data-bigtext="on"] .btn-sub,
:root[data-bigtext="on"] .settings-row .st-hint,
:root[data-bigtext="on"] .piece-row .pr-sub,
:root[data-bigtext="on"] .member-row .mr-sub { font-size: calc(14px * var(--text-scale, 1)); }

/* the sheet's last row must not double the footer's rule */
.sheet-row:last-of-type { border-bottom: 0; }

/* the status tags carry a gap between glyph and word */
.legend-trip, .legend-plan { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- 24 · Two-line rows read as two lines everywhere ---------- */
.st-title, .st-hint, .st-value,
.mr-name, .mr-sub,
.pr-name, .pr-sub,
.wr-title, .wr-sub,
.tl-name, .tl-sub,
.cc-name, .cc-sub { display: block; }
.st-value { display: inline; }
.household-row .st-title { font: 600 var(--fs-body) / 1.3 var(--font-sans); color: var(--ink); }
.household-row .st-hint { font: 400 13px/1.35 var(--font-sans); color: var(--ink-2); margin-top: 2px; }
.household-row .st-main, .settings-row .st-main { flex: 1; min-width: 0; }