/* Companion app.
   Same design system as the TV board (tokens.css is generated from the same
   source), but at "arm's length" density rather than the 10-foot layout: the
   TV's type scale is roughly 3x this one. */

*, *::before, *::after { box-sizing: border-box; }

/* On the ground, a filled button is the theme's own accent (see the card
   scope below for buttons on cards). */
:root { --accent-fill: var(--accent); --on-accent-fill: var(--on-accent); }

/* A class that sets `display` outranks the UA sheet's `[hidden] { display: none }`,
   so anything toggled via the hidden attribute (the settings sheet, the time row)
   would stay visible without this. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.45;
  padding-bottom: 3rem;
}

h1, h2, h3, .num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- focus
   Same treatment as the TV's D-pad indicator - accent outline plus offset -
   so keyboard use here reads like remote use there. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.topbar-inner {
  max-width: 44rem; margin: 0 auto;
  padding: 0.9rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand-row { display: flex; align-items: center; gap: 0.5rem; }
.brand-mark {
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto; box-sizing: border-box;
  border-radius: 50%; background: var(--disc); border: 2px solid var(--disc-edge);
  display: flex; align-items: center; justify-content: center;
}
.brand h1 {
  margin: 0; font-family: var(--font-brand); font-weight: 600;
  letter-spacing: -0.01em; font-size: calc(1.35rem * var(--font-scale));
}
.household { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

.icon-btn {
  background: var(--surface); color: var(--ink);
  border: none; border-radius: 8px;
  width: 2.5rem; height: 2.5rem; font-size: 1.2rem;
  cursor: pointer; line-height: 1;
}
.icon-btn:hover { background: var(--surface2); }

/* ---------------------------------------------------------- tabs
   Calendar / To-dos / Shopping. Same chip vocabulary as the filters, one step
   larger, because this switches screens rather than narrowing one. */
.tabs {
  max-width: 44rem; margin: 0 auto;
  padding: 0 1rem 0.7rem;
  display: flex; gap: 0.4rem;
}
.tab {
  flex: 1 1 0;
  font-family: var(--font-display); font-size: calc(0.95rem * var(--font-scale));
  font-weight: 600; letter-spacing: -0.01em;
  background: var(--surface); color: var(--ink-soft);
  border: none; border-radius: 8px; padding: 0.5rem 0.6rem; cursor: pointer;
}
.tab.is-on { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* minmax(0, 1fr), not the default auto column: an auto column grows to its
   widest content (two date inputs side by side, a long recipe URL), which
   pushed To-dos and Recipes past a 390px phone. */
main { max-width: 44rem; margin: 0 auto; padding: 1rem; display: grid; gap: 1.5rem;
       grid-template-columns: minmax(0, 1fr); }
.screen { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------- form */
.card { background: var(--surface); border-radius: 10px; padding: 1.1rem 1.1rem 1.25rem; }

/* Anything painted with a card surface reads the card ink, not the ground ink.
   Identical in light mode; in dark mode the ground ink is near-white and the
   cards stay cream, so without this every heading and label on a card
   vanished. Same split the TV makes with inkGround / inkCard. */
.card, .icon-btn, .tab, .chip, .item, .empty, .group-count, .btn-quiet,
.form-error, .notice, .set-card, .bsheet, .adult-card, .install-guide, .kid-row, .totp-key, .code-boxes.is-card {
  /* A filled button on a card: the design keeps it the light-theme accent
     with cream text in both themes, as it does every card colour. */
  --accent-fill: var(--accent-card);
  --on-accent-fill: var(--on-accent-card);
  --ink: var(--ink-card);
  --ink-soft: var(--ink-soft-card);
  --accent-ink: var(--accent-ink-card);
  --sel: var(--selected-card);
  --on-sel: var(--on-selected-card);
}
/* Native controls (checkboxes, date and select arrows) follow the app's theme,
   not the phone's - and a cream card is always a light surface. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] :is(.card, .item) { color-scheme: light; }
/* body's colour was resolved with the ground ink, and headings inherit that
   resolved value - so the containers set their own. */
.card, .item { color: var(--ink); }
/* Fields sit on --bg, which in dark mode is the dark ground - a dark well
   holding dark card ink. On a card they take the deeper cream instead. */
[data-theme="dark"] .card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
                              textarea, select),
[data-theme="dark"] .card .seg input:not(:checked) + span {
  background: var(--surface2);
}
.card h2 { margin: 0 0 0.9rem; font-size: calc(1.1rem * var(--font-scale)); }

.field { display: grid; gap: 0.35rem; margin-bottom: 0.85rem; border: 0; padding: 0; }
.field > label, .field .label, .field legend {
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0;
}
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.75; }

input[type="text"], input[type="url"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="search"], input[type="email"], textarea {
  font-family: var(--font-body); font-size: calc(1rem * var(--font-scale));
  color: var(--ink); background: var(--bg);
  border: 2px solid transparent; border-radius: 8px;
  padding: 0.6rem 0.7rem; width: 100%;
}
input:hover, textarea:hover { border-color: color-mix(in oklab, var(--ink) 15%, transparent); }
textarea { resize: vertical; }

.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.row input { min-width: 0; }
.field-check { align-self: end; }
.checkline { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0;
             font-size: calc(0.95rem * var(--font-scale)); font-weight: 600; color: var(--ink);
             text-transform: none; letter-spacing: 0; }
.checkline input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

/* segmented radio group */
.segmented { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.seg { flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.55rem 0.7rem; border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font-size: calc(0.95rem * var(--font-scale)); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg input:checked + span .swatch { box-shadow: 0 0 0 2px var(--on-accent); }

/* category swatches - the design's colour coding, identical on every surface */
.swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block;
          background: var(--ink-soft); flex: 0 0 auto; }
.seg-activity .swatch, .swatch-activity { background: var(--c-act); }
.seg-food     .swatch, .swatch-food     { background: var(--c-food); }
.seg-todo     .swatch, .swatch-todo     { background: var(--c-todo); }
.swatch-teal { background: oklch(0.505 0.100 168); }
.swatch-plum { background: oklch(0.480 0.135 305); }

.actions { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
/* Three or four choices do not fit across a phone, and shrinking them
   to fit makes the primary one no easier to hit than the rest. */
.actions-stack { flex-direction: column; align-items: stretch; }
.btn {
  font-family: var(--font-body); font-size: calc(1rem * var(--font-scale)); font-weight: 700;
  border: none; border-radius: 8px; padding: 0.7rem 1.1rem; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-quiet { background: var(--surface2); color: var(--ink); }
.btn:disabled { opacity: 0.55; cursor: default; }

.form-error {
  margin: 0 0 0.75rem; padding: 0.6rem 0.7rem; border-radius: 8px;
  background: color-mix(in oklab, var(--c-todo) 18%, var(--surface));
  color: var(--ink); font-size: 0.9rem;
  border-left: 4px solid var(--c-todo);
}

/* ---------------------------------------------------------- list */
.list-head { display: flex; flex-wrap: wrap; gap: 0.75rem;
             align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.list-head h2 { margin: 0; font-size: calc(1.1rem * var(--font-scale)); }
.filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: none; border-radius: 8px; padding: 0.4rem 0.75rem; cursor: pointer;
}
.chip.is-on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.chip.is-on .swatch { box-shadow: 0 0 0 2px var(--on-accent); }

.day-group { margin-bottom: 1.1rem; }
.day-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-soft);
  margin: 0 0 0.4rem; display: flex; align-items: baseline; gap: 0.5rem;
}
.day-label .num { font-size: calc(1.3rem * var(--font-scale)); color: var(--ink); font-weight: 700; }
.day-group.is-today .day-label .num { color: var(--accent-ink); }
.day-group.is-today .day-label::after {
  content: "Today"; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--accent); color: var(--on-accent);
  padding: 0.1rem 0.45rem; border-radius: 999px;
}

.item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--surface); border-radius: 8px;
  padding: 0.7rem 0.8rem; margin-bottom: 0.4rem;
  border-left: 6px solid var(--ink-soft);
}
.item[data-category="activity"] { border-left-color: var(--c-act); }
.item[data-category="food"]     { border-left-color: var(--c-food); }
.item[data-category="todo"]     { border-left-color: var(--c-todo); }

.item-time {
  font-family: var(--font-display); font-weight: 600; color: var(--ink-soft);
  font-size: calc(0.9rem * var(--font-scale)); min-width: 3.6rem; padding-top: 0.1rem;
}
.item-body { flex: 1 1 auto; min-width: 0; }
.item-title { font-weight: 700; font-size: calc(1rem * var(--font-scale)); line-height: 1.25;
              overflow-wrap: anywhere; }
.item-notes { color: var(--ink-soft); font-size: calc(0.88rem * var(--font-scale));
              margin-top: 0.15rem; overflow-wrap: anywhere; }
.item-actions { display: flex; gap: 0.3rem; flex: 0 0 auto; }
.mini {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  padding: 0.3rem 0.5rem; border-radius: 6px;
}
.mini:hover { background: var(--surface2); color: var(--ink); }
.mini-del:hover { color: var(--c-todo); }

/* to-do checkbox - the design's colored square with a checkmark glyph */
.tick {
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto; margin-top: 0.05rem;
  border-radius: 5px; border: 3px solid var(--ink-soft); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: transparent; padding: 0; line-height: 1;
}
.item.is-done .tick { background: var(--c-todo); border-color: var(--c-todo); color: var(--check-ink); }
.item.is-done .item-title { color: var(--ink-soft); text-decoration: line-through;
                            text-decoration-thickness: 2px; }

.empty { color: var(--ink-soft); background: var(--surface); border-radius: 8px;
         padding: 1.5rem; text-align: center; }

/* ---------------------------------------------------------- grouped lists
   Used by both the to-do groups (planned / due soon / no date) and the
   shopping list's per-store sections. The hint line under a to-do heading is
   there to answer "why is this one showing?" without the reader guessing. */
.group { margin-bottom: 1.4rem; }
.group-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem; }
.group-title {
  margin: 0; font-size: calc(1rem * var(--font-scale)); color: var(--ink);
}
.group-count {
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  background: var(--surface2); color: var(--ink-soft);
  padding: 0.05rem 0.45rem; border-radius: 999px;
}
.group-hint {
  margin: 0 0 0.5rem; color: var(--ink-soft);
  font-size: calc(0.8rem * var(--font-scale)); line-height: 1.35;
}

/* a small fact attached to a row: a quantity, a due date, how late it is */
.item-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--surface2); color: var(--ink-soft);
  padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.badge-late {
  background: color-mix(in oklab, var(--c-todo) 22%, var(--surface));
  color: var(--ink);
}

/* A meal linked to a recipe. The row opens it, so it needs to look tappable -
   done with the existing surface step and the food colour, no new tokens. */
.item.is-linked .item-body { cursor: pointer; }
.item.is-linked:hover { background: var(--surface2); }
.badge-recipe {
  background: color-mix(in oklab, var(--c-food) 20%, var(--surface));
  color: var(--ink);
}

/* explanatory line under a pair of form fields */
.field-note {
  margin: -0.35rem 0 0.9rem; color: var(--ink-soft);
  font-size: calc(0.8rem * var(--font-scale)); line-height: 1.4;
}

.btn-small { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

/* ---------------------------------------------------------- recipes
   Built from the same card / field / chip vocabulary as the other screens -
   no new design tokens, only new arrangements of the existing ones. */

/* a field and its button sitting on one line */
.row-tight { display: flex; gap: 0.5rem; align-items: center; }
.row-tight > input, .row-tight > select { flex: 1 1 auto; min-width: 0; }
.row-tight > .btn { flex: 0 0 auto; }

.recipe-thumb {
  flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: 6px;
  overflow: hidden; background: var(--surface2);
}
.recipe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-edit { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.photo-edit img {
  width: 5rem; height: 5rem; border-radius: 8px; object-fit: cover; background: var(--surface2);
}

/* ---------------------------------------------------------------- photos */
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.6rem;
}
/* The TV's Home photo card is about 7:5, so tiles use the same shape and
   preview the crop the TV will actually show. */
.photo-tile {
  position: relative; aspect-ratio: 7 / 5; border-radius: 8px; overflow: hidden;
  background: var(--surface2);
}
.photo-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer;
}
#photo-focus { scroll-margin-top: 9rem; }   /* clear of the sticky header */
.photo-focus-pick {
  position: relative; display: inline-block; max-width: 100%; margin-top: 0.4rem;
  line-height: 0;
}
.photo-focus-pick img {
  display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto;
  border-radius: 8px; cursor: crosshair;
}
.photo-focus-dot {
  position: absolute; width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem;
  border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55); pointer-events: none;
}
.photo-focus-preview { max-width: 20rem; margin-bottom: 0.4rem; }
.photo-focus-preview img { cursor: default; }
.photo-tile .mini {
  position: absolute; top: 0.2rem; right: 0.2rem;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  line-height: 1;
}
#photo-add-label.is-disabled { opacity: 0.5; pointer-events: none; }

select {
  font-family: var(--font-body); font-size: calc(1rem * var(--font-scale));
  color: var(--ink); background: var(--bg);
  border: 2px solid transparent; border-radius: 8px;
  padding: 0.6rem 0.7rem; width: 100%;
}
select:hover { border-color: color-mix(in oklab, var(--ink) 15%, transparent); }

/* the recipe library's "Show" dropdown, sitting on the ground like the chips
   it replaced - so it takes their cream surface and card ink */
.filter-select { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.filter-select-label {
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.filter-select select {
  --ink: var(--ink-card);
  flex: 1 1 auto; background: var(--surface); color: var(--ink-card); font-weight: 600;
}
[data-theme="dark"] .filter-select select { color-scheme: light; }

/* "we read the page and this is what we got" - information, not an error */
.notice {
  margin: 0 0 0.75rem; padding: 0.6rem 0.7rem; border-radius: 8px;
  background: var(--surface2); color: var(--ink);
  font-size: calc(0.9rem * var(--font-scale)); line-height: 1.4;
  border-left: 4px solid var(--ink-soft);
}
.notice-warn { border-left-color: var(--c-food); }

/* the parse, shown before anything is saved */
.preview-head { border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
                padding-top: 0.9rem; margin-top: 0.3rem; }
.preview-head h3 { margin: 0; font-size: calc(1.15rem * var(--font-scale)); }
.preview-meta { margin: 0.2rem 0 0; color: var(--ink-soft);
                font-size: calc(0.88rem * var(--font-scale)); }

.preview-cols { display: grid; gap: 1rem; margin: 0.9rem 0 0.3rem; }
.preview-cols h4 {
  margin: 0 0 0.4rem; font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.preview-cols .count { text-transform: none; letter-spacing: 0; font-weight: 400; }
.preview-list {
  margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem;
  font-size: calc(0.95rem * var(--font-scale)); line-height: 1.4;
  max-height: 16rem; overflow-y: auto;
}
.preview-list li { overflow-wrap: anywhere; }
/* a HowToSection heading, sitting inside the ordered list without a number */
.preview-section {
  list-style: none; margin-left: -1.2rem; margin-top: 0.4rem;
  font-weight: 700; color: var(--ink-soft);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* favourite toggle - the library's ordering control, not decoration */
.star {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; margin-top: 0.05rem;
  background: transparent; border: none; cursor: pointer; padding: 0;
  font-size: 1.4rem; line-height: 1; color: var(--ink-soft);
  border-radius: 8px;
}
.star:hover { background: var(--surface2); }
.star.is-on { color: var(--accent-ink); }
.recipe-row { border-left-color: var(--c-food); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--surface2);
  padding: 0.05rem 0.3rem; border-radius: 4px;
}

@media (min-width: 34rem) {
  .preview-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------- settings sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--bg); width: min(30rem, 100%);
  border-radius: 14px 14px 0 0; padding: 1.1rem 1.1rem 2rem;
  max-height: 88vh; overflow-y: auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet h3 { margin: 1.1rem 0 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.sheet-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  z-index: 60; max-width: 90vw;
}

@media (min-width: 40rem) {
  .sheet { border-radius: 14px; align-self: center; }
  .sheet-backdrop { align-items: center; }
}

/* ---------------------------------------------------------- gate
   Full-screen states in front of the app: welcome, sign in again, and (with
   the household screens) setup. Sized to the design's 390px phone, which
   puts 24px of side margin and the actions at the bottom of the screen. */
body.gated { padding-bottom: 0; }
body.gated > .topbar, body.gated > main { display: none !important; }

.gate { min-height: 100vh; min-height: 100dvh; display: flex; }
.gate-screen {
  flex: 1; display: flex; flex-direction: column; gap: 14px; width: 100%;
  max-width: 480px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 58px) 24px calc(env(safe-area-inset-bottom) + 34px);
}

.welcome-brand { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.welcome-disc { width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--disc-edge); }
.welcome-wordmark {
  margin: 0; font-family: var(--font-brand); font-weight: 600;
  font-size: calc(46px * var(--font-scale)); line-height: 1; letter-spacing: -0.01em;
  color: var(--brand-ink);
}
.welcome-tagline {
  margin: 0; font-size: calc(22px * var(--font-scale)); line-height: 1.35;
  color: var(--ink); text-wrap: balance;
}
.welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.welcome-note { margin: 0; text-align: center; font-size: calc(16px * var(--font-scale)); color: var(--ink-soft); }

.btn-gate {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 16px; border-radius: 8px; border: 0;
  font-family: var(--font-body); font-size: calc(19px * var(--font-scale)); font-weight: 700;
  cursor: pointer;
}
.btn-gate-plain { background: var(--surface); border: 2px solid var(--ink-soft); color: var(--ink-card); }
.btn-gate-primary { background: var(--accent); color: var(--on-accent); }
.btn-gate-link {
  min-height: 48px; background: none; color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 4px;
}

.gate-status { justify-content: space-between; }
.gate-status-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.gate-title {
  margin: 0; font-family: var(--font-brand); font-weight: 600;
  font-size: calc(34px * var(--font-scale)); line-height: 1.1; color: var(--ink);
}
.gate-text { margin: 0; font-size: calc(19px * var(--font-scale)); line-height: 1.45; color: var(--ink); }

/* ---------------------------------------------------------- header (accounts design)
   The disc and wordmark, the household's name under them, and "Settings"
   as a text button - the design's phone header. */
.brand-disc { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--disc-edge); flex: 0 0 auto; }
.brand-row h1 { color: var(--brand-ink); font-size: calc(25px * var(--font-scale)); }
.btn-text {
  background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer;
  font-family: var(--font-body); font-size: calc(17px * var(--font-scale)); font-weight: 700;
  color: var(--accent-ink);
}
body.on-settings .tabs, body.on-settings #open-settings { display: none; }
.offscreen { position: fixed; left: -9999px; opacity: 0; }

/* ---------------------------------------------------------- gate: shared */
.gate-screen-host { flex: 1; display: flex; }
.gate-screen.gate-form { gap: 20px; }
.gate-spacer { flex: 1; min-height: 12px; }
.gate-disc { border-radius: 50%; border: 3px solid var(--disc-edge); }
.gate-disc-88 { width: 88px; height: 88px; }
.gate-message { justify-content: space-between; }
.gate-message-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.gate-message .gate-title { font-size: calc(36px * var(--font-scale)); line-height: 1.12; text-wrap: balance; }
.gate-actions { display: flex; flex-direction: column; gap: 8px; }
.gate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gate-h {
  margin: 0; font-family: var(--font-brand); font-weight: 600;
  font-size: calc(34px * var(--font-scale)); line-height: 1.1; color: var(--ink);
}
.gate-h.is-balanced { font-size: calc(32px * var(--font-scale)); text-wrap: balance; }
.gate-headblock { display: flex; flex-direction: column; gap: 8px; }
.gate-lead, .gate-note { margin: 0; font-size: calc(17px * var(--font-scale)); line-height: 1.4; color: var(--ink-soft); }
.gate-note { font-size: calc(16px * var(--font-scale)); }
.gate-text b { font-weight: 700; }
.btn-gate-danger { background: var(--danger); color: var(--on-danger); }
.btn-gate-danger-link {
  min-height: 44px; background: none; color: var(--danger);
  text-decoration: underline; text-underline-offset: 4px; font-size: calc(17px * var(--font-scale));
}
.btn-gate:disabled { opacity: 0.6; cursor: default; }
.btn-gate-primary { background: var(--accent-fill); color: var(--on-accent-fill); }
.btn-gate-plain.is-card { background: var(--surface); border-color: var(--ink-soft-card); text-decoration: none; }
.btn-gate-back, .btn-gate-inline {
  align-self: flex-start; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-family: var(--font-body); font-size: calc(18px * var(--font-scale)); font-weight: 700;
  color: var(--accent-ink);
}
.btn-gate-inline { text-decoration: underline; text-underline-offset: 4px; }

.gate-field { display: flex; flex-direction: column; gap: 8px; }
.gate-field label { font-size: calc(17px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.gate-field .optional { font-weight: 400; color: var(--ink-soft); }
input.gate-input {
  min-height: 56px; padding: 0 16px; border-radius: 8px;
  background: var(--surface); border: 2px solid var(--ink-soft); color: var(--ink-card);
  font-family: var(--font-body); font-size: calc(19px * var(--font-scale));
}
input.gate-input::placeholder { color: var(--ink-soft-card); }
input.gate-input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Setup's step head: Back, "Step 1 of 4", and four bars. */
.step-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.step-count { font-size: calc(17px * var(--font-scale)); color: var(--ink-soft); }
.num { font-family: var(--font-display); font-weight: 600; }
.step-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.step-track span { height: 6px; border-radius: 3px; background: var(--track); }
.step-track span.is-on { background: var(--accent); }

/* Adults: "Another adult" cards. */
.adult-cards { display: flex; flex-direction: column; gap: 12px; }
.adult-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 10px; background: var(--surface); }
.adult-card-title { margin: 0; font-family: var(--font-brand); font-size: calc(22px * var(--font-scale)); font-weight: 600; color: var(--ink); }
.gate-field.is-card { gap: 6px; }
.gate-field.is-card label { font-size: calc(16px * var(--font-scale)); }
input.gate-input.is-card {
  min-height: 52px; padding: 0 14px; background: var(--surface2); border-color: var(--ink-soft-card);
  font-size: calc(18px * var(--font-scale));
}
.gate-note.is-card { color: var(--ink-soft); }

/* Kids: a dot, a name, "Color". */
.kid-list { display: flex; flex-direction: column; gap: 10px; }
.kid-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 8px 0 16px; border-radius: 8px; background: var(--surface); }
.kid-name { flex: 1; font-size: calc(19px * var(--font-scale)); font-weight: 700; color: var(--ink); }
input.kid-add {
  min-height: 56px; padding: 0 16px; border-radius: 8px; border: 2px dashed var(--ink-soft);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: calc(19px * var(--font-scale));
}
input.kid-add::placeholder { color: var(--ink-soft); }
.btn-row-link {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; background: none; border: 0;
  font-family: var(--font-body); font-size: calc(16px * var(--font-scale)); font-weight: 700;
  color: var(--accent-ink); cursor: pointer;
}
.member-dot { width: 18px; height: 18px; border-radius: 9px; flex: 0 0 auto; }
.member-blue { background: var(--member-blue); }
.member-gold { background: var(--member-gold); }
.member-green { background: var(--member-green); }
.member-sage { background: var(--member-sage); }
.member-teal { background: var(--member-teal); }
.member-plum { background: var(--member-plum); }

/* Code boxes: a TV code (4 + 4) or an emailed code (6). */
.code-boxes { display: flex; align-items: center; gap: 14px; }
.code-group { flex: 1; display: grid; grid-template-columns: repeat(var(--boxes), minmax(0, 1fr)); gap: 5px; }
.code-boxes:not(:has(.code-dash)) .code-group { gap: 8px; }
.code-dash { width: 12px; height: 3px; border-radius: 2px; background: var(--ink-soft); flex: 0 0 auto; }
input.code-box {
  width: 100%; height: 58px; padding: 0; border-radius: 8px; text-align: center;
  background: var(--surface); border: 2px solid var(--ink-soft); color: var(--ink-card);
  font-family: var(--font-display); font-size: calc(28px * var(--font-scale)); font-weight: 600;
  text-transform: uppercase;
}
.code-boxes:not(:has(.code-dash)) input.code-box { height: 60px; font-size: calc(30px * var(--font-scale)); }
input.code-box:focus { outline: none; border: 3px solid var(--accent-ink); }
.code-boxes.is-card input.code-box { height: 52px; font-size: calc(26px * var(--font-scale)); background: var(--surface2); border-color: var(--ink-soft-card); }
.code-boxes.is-card input.code-box:focus { border-color: var(--accent-ink-card); }
.tv-entry { display: flex; flex-direction: column; gap: 20px; }

/* Finish: the two install guides. */
.install-guide { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 10px; background: var(--surface); }
.install-title { margin: 0; font-family: var(--font-brand); font-size: calc(22px * var(--font-scale)); font-weight: 600; color: var(--ink); }
.install-step { display: flex; gap: 12px; font-size: calc(17px * var(--font-scale)); line-height: 1.3; color: var(--ink); }
.install-step .num { width: 16px; flex: 0 0 auto; font-weight: 700; color: var(--accent-ink); }
.gate-finish { gap: 16px; }

/* ---------------------------------------------------------- bottom sheets
   The design's sheet: cream panel from the bottom, a grabber, a serif title,
   then paragraphs, fields and full-width buttons. */
body.sheet-open { overflow: hidden; }
.bsheet-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in oklab, oklch(0.18 0.02 175) 60%, transparent);
}
.bsheet {
  width: min(480px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--surface); color: var(--ink); border-radius: 18px 18px 0 0;
  padding: 12px 24px calc(env(safe-area-inset-bottom) + 34px);
  display: flex; flex-direction: column; gap: 14px;
}
.bsheet-grabber { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--track-card); }
.bsheet-title { margin: 0; font-family: var(--font-brand); font-size: calc(28px * var(--font-scale)); font-weight: 600; line-height: 1.15; text-wrap: balance; color: var(--ink); }
.bsheet-p { margin: 0; font-size: calc(17px * var(--font-scale)); line-height: 1.45; color: var(--ink); }
.bsheet-p.is-soft { color: var(--ink-soft); }
.bsheet-p.is-strong { font-weight: 700; }
.bsheet .btn-gate { min-height: 54px; font-size: calc(18px * var(--font-scale)); }
.bsheet .btn-gate-plain { background: var(--surface); border-color: var(--ink-soft); color: var(--ink); }
.bsheet .btn-gate-link, .bsheet .btn-gate-danger-link { min-height: 44px; color: var(--accent-ink); }
.bsheet .btn-gate-danger-link { color: var(--danger); }
.bsheet-field { display: flex; flex-direction: column; gap: 6px; }
.bsheet-field label, .bsheet-label { font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--ink); }
input.bsheet-input {
  min-height: 52px; padding: 0 14px; border-radius: 8px;
  background: var(--surface2); border: 2px solid var(--ink-soft); color: var(--ink);
  font-family: var(--font-body); font-size: calc(18px * var(--font-scale));
}
input.bsheet-input:focus { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
.bsheet-note { margin: 0; font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); }
.bsheet-list { display: flex; flex-direction: column; gap: 6px; }
.bsheet-list-label { font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.bsheet-list-row { display: flex; gap: 10px; font-size: calc(16px * var(--font-scale)); line-height: 1.35; color: var(--ink); }
.bsheet-dot { width: 8px; height: 8px; border-radius: 4px; margin-top: 8px; flex: 0 0 auto; background: var(--ink-soft); }
.bsheet-dot.is-danger { background: var(--danger); }
.bsheet .form-error { margin: 0; }

.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-row {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 14px; border-radius: 8px;
  background: transparent; border: 2px solid var(--surface2); text-align: left; cursor: pointer;
  font-family: var(--font-body);
}
.radio-row.is-on { background: var(--surface2); border-color: var(--accent-ink); }
.radio-mark {
  width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--ink-soft); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.radio-row.is-on .radio-mark { border-color: var(--accent-ink); }
.radio-mark span { width: 12px; height: 12px; border-radius: 6px; }
.radio-row.is-on .radio-mark span { background: var(--accent-ink); }
.radio-text { display: flex; flex-direction: column; gap: 2px; }
.radio-title { font-size: calc(17px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.radio-sub { font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); }

.progress { height: 10px; border-radius: 5px; background: var(--surface2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 35%; border-radius: 5px; background: var(--accent-fill);
  animation: progress-slide 1.6s ease-in-out infinite; }
@keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .progress span { animation: none; width: 45%; } }

/* Authenticator setup. */
.totp-key { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0 6px 0 14px; border-radius: 8px; background: var(--surface2); }
.totp-secret { font-family: var(--font-display); font-size: calc(19px * var(--font-scale)); font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink); word-break: break-all; }
.totp-qr { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 8px; background: var(--qr-tile-bg); }
.totp-qr-art { width: 92px; height: 92px; flex: 0 0 auto; }
.totp-qr-art .qr { width: 100%; height: 100%; display: block; }
.totp-qr-art .qr path { fill: var(--qr-caption-ink); }
.totp-qr-text { font-size: calc(16px * var(--font-scale)); line-height: 1.35; font-weight: 700; color: var(--qr-caption-ink); }

/* ---------------------------------------------------------- settings page */
.settings-page { display: flex; flex-direction: column; gap: 14px; }
.settings-page > div { display: flex; flex-direction: column; gap: 14px; }
.settings-page > div > div { display: flex; flex-direction: column; gap: 14px; }
.settings-page > div:empty { display: none; }
.set-top { flex-direction: row !important; align-items: center; justify-content: space-between; }
.set-h1 { margin: 0; font-family: var(--font-brand); font-size: calc(34px * var(--font-scale)); font-weight: 600; color: var(--ink); }
.set-h2 {
  margin: 8px 0 0; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-brand); font-size: calc(22px * var(--font-scale)); font-weight: 600; color: var(--ink);
}
.set-hint { font-family: var(--font-body); font-size: calc(15px * var(--font-scale)); font-weight: 400; color: var(--ink-soft); }
.set-card { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 10px; background: var(--surface); color: var(--ink); }
.set-single { min-height: 56px; justify-content: center; font-size: calc(18px * var(--font-scale)); font-weight: 700; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.set-row.is-tall { min-height: 64px; padding: 6px 0; }
.set-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.set-label { font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); }
.set-sublabel { font-size: calc(15px * var(--font-scale)); font-weight: 700; color: var(--ink-soft); padding-top: 10px; }
.set-value { font-size: calc(18px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.set-plain { font-size: calc(18px * var(--font-scale)); color: var(--ink); }
.set-email { font-size: calc(16px * var(--font-scale)); color: var(--ink); }
.set-name {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: calc(18px * var(--font-scale)); font-weight: 700; color: var(--ink);
}
.set-name.is-grow { flex: 1; }
.set-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.set-link {
  display: flex; align-items: center; min-height: 52px; padding: 0; background: none; border: 0;
  font-family: var(--font-body); font-size: calc(16px * var(--font-scale)); font-weight: 700;
  color: var(--accent-ink); text-decoration: none; cursor: pointer;
}
.set-actions .set-link { min-height: 44px; padding: 0 6px; }
.set-link.is-danger { color: var(--danger); }
.set-links { gap: 4px !important; }
.set-links .set-link { min-height: 44px; }
.set-who { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.set-signins { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.set-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.set-chip { padding: 6px 12px; border-radius: 999px; background: var(--surface2); font-size: calc(16px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.set-toggle {
  width: 56px; height: 32px; padding: 3px; border-radius: 16px; border: 2px solid var(--ink-soft);
  background: transparent; display: flex; cursor: pointer; flex: 0 0 auto;
}
.set-toggle span { width: 22px; height: 22px; border-radius: 11px; background: var(--ink-soft); transition: transform 0.15s; }
.set-toggle.is-on { background: var(--accent-fill); border-color: var(--accent-fill); }
.set-toggle.is-on span { background: var(--on-accent-fill); transform: translateX(24px); }
.set-version { font-size: calc(17px * var(--font-scale)); color: var(--ink); }
.set-activity-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; }
.set-activity-what { font-size: calc(17px * var(--font-scale)); font-weight: 700; color: var(--ink); }
.set-activity-when { font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); white-space: nowrap; }

/* Theme controls, as the design draws them on a card. */
.set-theme { gap: 14px; padding: 16px; }
.set-theme-row { display: flex; flex-direction: column; gap: 8px; }
.set-theme-row .set-sublabel { padding-top: 0; }
.set-theme .segmented { gap: 6px; flex-wrap: nowrap; }
.set-theme .seg { flex: 1 1 0; }
.set-theme .seg span {
  min-height: 48px; border-radius: 8px; justify-content: center; font-size: calc(16px * var(--font-scale));
  font-weight: 700; background: var(--surface2); color: var(--ink);
}
.set-theme .seg input:checked + span { background: var(--accent-fill); color: var(--on-accent-fill); }

/* The sample week's banner on the calendar. */
.sample-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 14px; border-radius: 8px; background: var(--surface2); margin-bottom: 14px;
  --ink: var(--ink-card); --accent-ink: var(--accent-ink-card);
}
.sample-banner p { margin: 0; font-size: calc(16px * var(--font-scale)); color: var(--ink); }
.sample-banner button { text-decoration: underline; text-underline-offset: 3px; }
.bsheet-body { display: flex; flex-direction: column; gap: 14px; }
a.btn-gate { text-decoration: none; }
.btn-row-link.is-danger { color: var(--danger); }

/* ==========================================================================
   The app on a computer: 64rem and wider ("Lazy Susan Computer" in the
   design export). Same app, same screens, same controls - only arranged
   for the width. Nothing below 64rem is touched by anything in here.
   ========================================================================== */
@media (max-width: 63.999rem) { .wide-only { display: none !important; } }
@media (min-width: 64rem)     { .narrow-only { display: none !important; } }

@media (min-width: 64rem) {
  body { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start;
         padding-bottom: 0; }
  body > .gate { grid-column: 1 / -1; }

  /* ---------------------------------------------------------- the rail */
  .topbar {
    grid-column: 1; position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 6px; padding: 32px 20px 28px;
    border-bottom: 0; overflow-y: auto;
  }
  .topbar-inner { display: contents; }
  .brand { order: 1; }
  .brand-row { gap: 10px; padding: 0 8px; }
  .brand-disc { width: 40px; height: 40px; }
  .brand-row h1 { font-size: calc(23px * var(--font-scale)); white-space: nowrap; }
  .household { padding: 6px 8px 22px 58px; margin: 0; font-size: calc(16px * var(--font-scale)); }
  .tabs { order: 2; max-width: none; margin: 0; padding: 0; flex-direction: column; gap: 6px; }
  .tab, #open-settings, .rail-link {
    /* On the ground, not a card: the phone's tab chips take card ink, which
       in dark mode would be dark text on the dark rail. */
    --ink: var(--ink-ground); --sel: var(--selected); --on-sel: var(--on-selected);
    flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; padding: 0 14px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left;
    font-family: var(--font-body); font-size: calc(18px * var(--font-scale)); font-weight: 700;
    letter-spacing: 0; cursor: pointer;
  }
  .tab:hover, #open-settings:hover, .rail-link:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
  .tab.is-on, .tab.is-on:hover { background: var(--sel); color: var(--on-sel); }
  #open-settings { order: 3; margin-top: auto; min-height: 46px; }
  .rail-link { order: 4; min-height: 46px; }
  /* The rail stays on the Settings page: it is how you leave it. */
  body.on-settings .tabs { display: flex; }
  body.on-settings #open-settings { display: flex; }
  body.on-settings .tab.is-on { background: transparent; color: var(--ink); }
  #settings-done { display: none; }

  /* ---------------------------------------------------------- two columns
     The form in a fixed column that stays in view, the list in the rest. */
  main { grid-column: 2; max-width: none; margin: 0; padding: 32px 40px 32px 8px; display: block; }
  .screen {
    grid-template-columns: clamp(300px, 27vw, 392px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
    column-gap: 32px; row-gap: 20px; align-items: start;
  }
  .screen > .card { grid-column: 1; }
  .screen > .list-section, .screen > .reading { grid-column: 2; grid-row: 1 / -1; }
  .screen > .sample-banner { grid-column: 2; grid-row: 1; margin: 0 0 -4px; }
  #screen-calendar:has(> .sample-banner:not([hidden])) > .list-section { grid-row: 2 / -1; }
  #screen-calendar > .card, #screen-todos > .card, #screen-shopping > .card {
    grid-row: 1 / -1; position: sticky; top: 32px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }

  .card { padding: 26px 28px; }
  .card h2 { font-family: var(--font-brand); font-size: calc(28px * var(--font-scale));
             font-weight: 600; letter-spacing: 0; margin-bottom: 16px; }
  .field > label, .field .label, .field legend {
    font-size: calc(15px * var(--font-scale)); font-weight: 700; color: var(--ink);
    text-transform: none; letter-spacing: 0;
  }
  .card :is(input[type="text"], input[type="url"], input[type="date"], input[type="time"],
            input[type="number"], input[type="email"], textarea, select) {
    min-height: 46px; background: var(--surface2); border-color: var(--ink-soft);
  }
  .card textarea { min-height: 70px; }
  .card .seg span { min-height: 44px; background: var(--surface2); }
  .card .seg input:checked + span { background: var(--accent-fill); color: var(--on-accent-fill); }
  .card .btn-primary { background: var(--accent-fill); color: var(--on-accent-fill); }
  .card .actions .btn-primary:not(.btn-small) { flex: 1; min-height: 52px; font-size: calc(18px * var(--font-scale)); }
  .card .btn-small { min-height: 44px; padding: 0 20px; font-size: calc(16px * var(--font-scale)); }
  .list-head .btn { min-height: 44px; padding: 0 16px; background: transparent; color: var(--ink-ground);
                    border: 2px solid var(--ink-soft-ground); font-size: calc(16px * var(--font-scale)); }

  /* ---------------------------------------------------------- lists */
  .list-head { align-items: center; min-height: 52px; margin-bottom: 18px; }
  .list-head h2 { font-family: var(--font-brand); font-size: calc(34px * var(--font-scale));
                  font-weight: 600; letter-spacing: 0; }
  .list-section .chip {
    min-height: 44px; padding: 0 16px; border-radius: 999px; background: transparent;
    color: var(--ink-ground); border: 2px solid var(--ink-soft-ground);
    font-size: calc(16px * var(--font-scale)); font-weight: 700;
  }
  .list-section .chip.is-on { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
  .list-section .chip.is-on .swatch { box-shadow: 0 0 0 2px var(--on-selected); }
  .day-group { margin-bottom: 20px; }
  .day-label { margin-bottom: 8px; font-family: var(--font-body); font-size: calc(18px * var(--font-scale));
               font-weight: 700; color: var(--ink); }
  .day-label .num { font-size: calc(28px * var(--font-scale)); font-weight: 600; }
  .item { align-items: center; min-height: 56px; padding: 8px 8px 8px 18px; margin-bottom: 8px;
          border-left: 0; position: relative; gap: 16px; }
  .item::before {
    content: ""; width: 6px; height: 30px; border-radius: 3px; flex: 0 0 auto;
    background: var(--ink-soft);
  }
  .item[data-category="activity"]::before { background: var(--c-act); }
  .item[data-category="food"]::before     { background: var(--c-food); }
  .item[data-category="todo"]::before     { background: var(--c-todo); }
  .item-time { width: 84px; min-width: 84px; padding: 0; font-size: calc(17px * var(--font-scale)); }
  .item-title { font-size: calc(17px * var(--font-scale)); font-weight: 400; }
  .item .tick + .item-body .item-title, .group .item-title { font-weight: 700; }
  .mini { min-height: 44px; padding: 0 12px; font-size: calc(16px * var(--font-scale));
          color: var(--accent-ink); }
  .mini-del { color: var(--danger); }
  .mini:hover { background: var(--surface2); color: var(--accent-ink); }
  .mini-del:hover { color: var(--danger); }

  /* A list column under 36rem (a 1024 screen): the time column narrows, and
     a row's actions drop under its title instead of squeezing it. */
  .list-section { container-type: inline-size; }
  @container (max-width: 36rem) {
    .item { flex-wrap: wrap; row-gap: 0; }
    .item-time { width: 60px; min-width: 60px; }
    .item-body { flex: 1 1 10rem; }
    .item-actions { margin-left: auto; }
    .mini { padding: 0 8px; }
  }

  /* ---------------------------------------------------------- recipes */
  #screen-recipes { grid-template-columns: clamp(300px, 25vw, 360px) minmax(0, 1fr); }
  #screen-recipes > .card { align-self: start; }
  #screen-recipes .row-tight { flex-direction: column; align-items: stretch; }
  #screen-recipes > .card:first-child .row-tight > .btn { min-height: 50px; }
  /* Editing a recipe: the form takes the column, and the recipe view the
     rest - the library comes back when the form closes. */
  #screen-recipes:has(#r-manual:not([hidden])) > .card:first-child { display: none; }
  #screen-recipes:has(#r-reading:not([hidden])) > .list-section { display: none; }

  #recipe-list {
    /* Three cards across at 1440, fewer as the column narrows. */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 16px; align-items: stretch;
  }
  #recipe-list > .empty { grid-column: 2 / -1; }
  #recipe-list > .card {           /* "Save from your browser", the first card */
    margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px;
    background: var(--surface2); border: 3px solid var(--accent-ink-card); border-radius: 10px;
  }
  #recipe-list > .card h2 { font-size: calc(22px * var(--font-scale)); margin: 0; }
  #recipe-list > .card p { margin: 0; font-size: calc(15px * var(--font-scale)); line-height: 1.4; }
  #recipe-list > .card .field-note:last-child { display: none; }    /* "On a phone, ..." */
  #recipe-list > .card a.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
                               background: var(--surface); border: 2px solid var(--ink-soft); cursor: grab; }
  .recipe-row {
    margin: 0; padding: 0; min-height: 0; border-radius: 10px; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "thumb thumb" "body body" "star actions"; gap: 0; align-items: start;
  }
  .recipe-row::before { display: none; }
  .recipe-row .recipe-thumb {
    grid-area: thumb; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0;
  }
  .recipe-row .item-body { grid-area: body; padding: 14px 18px 4px; }
  .recipe-row .item-title { font-family: var(--font-display); font-size: calc(21px * var(--font-scale));
                            font-weight: 600; line-height: 1.15; }
  .recipe-row .star { grid-area: star; align-self: end; margin: 4px 0 8px 8px; }
  .recipe-row .item-actions { grid-area: actions; justify-content: flex-end; align-self: end;
                              padding: 4px 8px 8px 0; gap: 0; }
  .recipe-row .item-actions .mini { min-height: 40px; padding: 0 8px; font-size: calc(15px * var(--font-scale)); }

  .reading { display: flex; flex-direction: column; gap: 20px; }
  .reading-top { display: flex; gap: 28px; align-items: stretch; }
  .reading-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .reading-back {
    align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: calc(17px * var(--font-scale)); font-weight: 700;
    color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
  }
  .reading-title { margin: 0; font-family: var(--font-brand); font-size: calc(46px * var(--font-scale));
                   font-weight: 600; line-height: 1.05; letter-spacing: 0; text-wrap: balance; }
  .reading-source { margin: 0; font-size: calc(18px * var(--font-scale)); color: var(--ink-soft); }
  .reading-facts { margin: 0; display: flex; gap: 24px; font-size: calc(18px * var(--font-scale)); }
  .reading-actions { margin-top: auto; padding-top: 8px; }
  .btn-outline {
    min-height: 46px; padding: 0 18px; background: transparent; color: var(--ink);
    border: 2px solid var(--ink-soft);
  }
  .reading-photo { width: 340px; height: 220px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
                   background: var(--photo); }
  .reading-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .reading-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
  .reading-card {
    --ink: var(--ink-card); --ink-soft: var(--ink-soft-card); --accent-ink: var(--accent-ink-card);
    padding: 22px 24px; border-radius: 10px; background: var(--surface); color: var(--ink);
  }
  .reading-card h3 { margin: 0 0 10px; font-family: var(--font-brand); font-size: calc(22px * var(--font-scale));
                     font-weight: 600; letter-spacing: 0; }
  .reading-ingredients, .reading-steps { margin: 0; padding: 0; list-style: none;
                                          display: flex; flex-direction: column; gap: 10px;
                                          font-size: calc(17px * var(--font-scale)); line-height: 1.35; }
  .reading-steps li { display: flex; gap: 14px; line-height: 1.4; }
  .reading-steps .num { width: 18px; flex: 0 0 auto; font-weight: 700; color: var(--accent-ink); }
  .reading-steps .reading-section { display: block; font-weight: 700; color: var(--ink-soft); padding-top: 4px; }

  /* ---------------------------------------------------------- photos */
  #screen-photos > .card { align-self: start; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 16px; }

  /* ---------------------------------------------------------- settings as a page */
  .settings-page {
    display: grid; grid-template-columns: 220px minmax(0, 760px); column-gap: 32px; row-gap: 14px;
    align-items: start;
  }
  .settings-page > * { grid-column: 2; }
  .set-nav {
    grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 32px;
    display: flex; flex-direction: column; gap: 4px; padding-top: 70px;
  }
  .set-nav button {
    display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink); text-align: left; cursor: pointer;
    font-family: var(--font-body); font-size: calc(17px * var(--font-scale)); font-weight: 700;
  }
  .set-nav button:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
  .set-nav button.is-on { background: var(--sel); color: var(--on-sel); }
  .set-top { min-height: 52px; }
  .set-h2 { font-size: calc(24px * var(--font-scale)); scroll-margin-top: 32px; }
  .settings-page > div { scroll-margin-top: 32px; }
  .set-card { padding: 8px 22px; }

  /* ---------------------------------------------------------- dialogs
     A phone's bottom sheet is a centred dialog here, 480 wide. */
  .sheet-backdrop, .bsheet-backdrop { align-items: center; }
  .sheet-backdrop { background: color-mix(in oklab, oklch(0.18 0.02 175) 60%, transparent); }
  .sheet, .bsheet {
    width: 480px; max-height: 88vh; border-radius: 12px; padding: 28px 32px 30px; align-self: center;
  }
  .sheet { --ink: var(--ink-card); --ink-soft: var(--ink-soft-card); --accent-ink: var(--accent-ink-card);
           background: var(--surface); color: var(--ink); }
  .sheet .sheet-head h2, .bsheet-title { font-family: var(--font-brand); font-size: calc(28px * var(--font-scale));
                                          font-weight: 600; letter-spacing: 0; }
  .sheet .icon-btn { width: 44px; height: 44px; font-size: 28px; background: transparent; }
  .sheet .icon-btn:hover { background: var(--surface2); }
  .sheet .sheet-note { font-size: calc(17px * var(--font-scale)); }
  .sheet :is(input, select, textarea) { background: var(--surface2); }
  .sheet .chip { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface2); }
  .sheet .actions .btn { min-height: 50px; font-size: calc(18px * var(--font-scale)); }
  .bsheet-grabber { display: none; }
}