/*
  Trailhead — the design system for the new clients.
  Day theme = Daybreak (Trail Map), Night theme = Nightfall (Golden Hour).
  Tokens hang off .nett-root[data-theme]; each logbook re-tints the accent and the header
  scenery through .lb-{id}. Design authority: the "Camp Logbook Redesign" canvas.
*/

/* ---------- Tokens: day ---------- */
.nett-root {
  --ground: #F7F5EF;
  --surface: #FFFFFF;
  --surface-alt: #EEF1EA;
  --bar: #FFFFFF;
  --ink: #17262B;
  --ink-2: #3B4A50;
  --muted: #55636A;
  --line: #DCE0D6;
  /* Field outlines: 3:1 against the surface and the ground (--line is for dividers, 1.3:1). */
  --field-line: #858D86;
  --primary: #1E5B4F;
  --on-primary: #FFFFFF;
  --accent: #EE6A3C;
  --on-accent: #17262B;
  --chip: rgba(255, 255, 255, 0.78);
  --focus: #23699F;
  --danger: #B3261E;
  --danger-soft: #FCE4E0;
  --success-soft: #DDEDCF;
  --success-ink: #2F5418;
  --warn-soft: #FCEBC0;
  --warn-ink: #6B4A00;
  --shadow: 0 16px 36px rgba(23, 38, 43, 0.14);
  --scrim: rgba(12, 10, 28, 0.45);
  /* Trip controls: chosen chip, calendar range, toast, meals, a failed sync. */
  --sel: #17262B;
  --on-sel: #FFFFFF;
  --range: #DDEDCF;
  --toast-bg: #17262B;
  --toast-ink: #FFFFFF;
  --toast-link: #F5B935;
  --meal-bg: #F6DCE7;
  --meal-ink: #7A2149;
  --danger-wash: #FDF3F1;
  /* Campground controls: the cover badge (marigold, ink text) and the photo drop zone. */
  --cover: #F5B935;
  --on-cover: #17262B;
  --drop-bg: #E3EEF7;

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-display: 'Big Shoulders Display', 'Bahnschrift Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;

  /* Scenery + logbook accent (home palette by default) */
  --sc-sky: #CFEAF2;
  --sc-r1: #23699F;
  --sc-r2: #1E5B4F;
  --sc-r3: #6E9F45;
  --sc-sun: #F5B935;
  --sc-ink: #17262B;
  --sc-sub: #2E3E44;
  --lb: #1E5B4F;
  --lb-on: #FFFFFF;
  --lb-text: #1E5B4F;

  color-scheme: light;
}

.lb-home     { --lb: #1E5B4F; --lb-on: #FFFFFF; --lb-text: #1E5B4F; --sc-sky: #CFEAF2; --sc-r1: #23699F; --sc-r2: #1E5B4F; --sc-r3: #6E9F45; --sc-sun: #F5B935; }
.lb-camp     { --lb: #1E5B4F; --lb-on: #FFFFFF; --lb-text: #1E5B4F; --sc-sky: #CFEAF2; --sc-r1: #23699F; --sc-r2: #1E5B4F; --sc-r3: #6E9F45; --sc-sun: #F5B935; }
.lb-recipes  { --lb: #C2502A; --lb-on: #FFFFFF; --lb-text: #A8431F; --sc-sky: #FCE3D3; --sc-r1: #B83F72; --sc-r2: #C2502A; --sc-r3: #E0A21E; --sc-sun: #FFF3C4; }
.lb-property { --lb: #23699F; --lb-on: #FFFFFF; --lb-text: #23699F; --sc-sky: #DCE9F5; --sc-r1: #34305C; --sc-r2: #23699F; --sc-r3: #8FC9DC; --sc-sun: #F5B935; }
.lb-games    { --lb: #B83F72; --lb-on: #FFFFFF; --lb-text: #A3355F; --sc-sky: #F6DCE7; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; --sc-sun: #F5B935; }
.lb-todos    { --lb: #F5B935; --lb-on: #17262B; --lb-text: #7A5200; --sc-sky: #FCF1D2; --sc-r1: #6E9F45; --sc-r2: #D99A12; --sc-r3: #1E5B4F; --sc-sun: #EE6A3C; }
.lb-ai       { --lb: #34305C; --lb-on: #FFFFFF; --lb-text: #34305C; --sc-sky: #E4E1F2; --sc-r1: #B83F72; --sc-r2: #34305C; --sc-r3: #8FC9DC; --sc-sun: #F5B935; }

/* ---------- Tokens: night (explicit, and "system" when the OS is dark) ---------- */
.nett-root[data-theme="night"] {
  --ground: #1A1830; --surface: #252240; --surface-alt: #2E2A4D; --bar: #121024;
  --ink: #F1EFE8; --ink-2: #CFCBE8; --muted: #A9A6C8; --line: #3A3660; --field-line: #7A75AA;
  --primary: #F5B935; --on-primary: #1A1830; --chip: rgba(255, 255, 255, 0.1); --focus: #F5B935;
  --danger: #FF8A80; --danger-soft: #4A2330; --success-soft: #1F3D35; --success-ink: #9FE0C4; --warn-soft: #4A3A1A; --warn-ink: #FFD27A;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  --sel: #F1EFE8; --on-sel: #1A1830; --range: #4A3A1A; --toast-bg: #F1EFE8; --toast-ink: #1A1830; --toast-link: #1E5B4F;
  --meal-bg: #3F2347; --meal-ink: #F5B8D0; --danger-wash: #2F2140;
  --on-cover: #1A1830; --drop-bg: #2E2A4D;
  --sc-ink: #F1EFE8; --sc-sub: #CFCBE8;
  color-scheme: dark;
}
.nett-root[data-theme="night"] .lb-home,     .nett-root[data-theme="night"].lb-home     { --lb: #F5B935; --lb-on: #1A1830; --lb-text: #F5B935; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; }
.nett-root[data-theme="night"] .lb-camp,     .nett-root[data-theme="night"].lb-camp     { --lb: #5FB89D; --lb-on: #1A1830; --lb-text: #5FB89D; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #1E5B4F; --sc-r3: #5FB89D; }
.nett-root[data-theme="night"] .lb-recipes,  .nett-root[data-theme="night"].lb-recipes  { --lb: #FF8A5C; --lb-on: #1A1830; --lb-text: #FF8A5C; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #FF8A5C; }
.nett-root[data-theme="night"] .lb-property, .nett-root[data-theme="night"].lb-property { --lb: #7DB8E8; --lb-on: #1A1830; --lb-text: #7DB8E8; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #23699F; --sc-r3: #7DB8E8; }
.nett-root[data-theme="night"] .lb-games,    .nett-root[data-theme="night"].lb-games    { --lb: #F08BB6; --lb-on: #1A1830; --lb-text: #F08BB6; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; }
.nett-root[data-theme="night"] .lb-todos,    .nett-root[data-theme="night"].lb-todos    { --lb: #F5B935; --lb-on: #1A1830; --lb-text: #F5B935; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #6E9F45; --sc-r3: #F5B935; --sc-sun: #EE6A3C; }
.nett-root[data-theme="night"] .lb-ai,       .nett-root[data-theme="night"].lb-ai       { --lb: #B7B0F0; --lb-on: #1A1830; --lb-text: #B7B0F0; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #B7B0F0; }

@media (prefers-color-scheme: dark) {
  .nett-root[data-theme="system"] {
    --ground: #1A1830; --surface: #252240; --surface-alt: #2E2A4D; --bar: #121024;
    --ink: #F1EFE8; --ink-2: #CFCBE8; --muted: #A9A6C8; --line: #3A3660; --field-line: #7A75AA;
    --primary: #F5B935; --on-primary: #1A1830; --chip: rgba(255, 255, 255, 0.1); --focus: #F5B935;
    --danger: #FF8A80; --danger-soft: #4A2330; --success-soft: #1F3D35; --success-ink: #9FE0C4; --warn-soft: #4A3A1A; --warn-ink: #FFD27A;
    --shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    --sel: #F1EFE8; --on-sel: #1A1830; --range: #4A3A1A; --toast-bg: #F1EFE8; --toast-ink: #1A1830; --toast-link: #1E5B4F;
    --meal-bg: #3F2347; --meal-ink: #F5B8D0; --danger-wash: #2F2140;
    --on-cover: #1A1830; --drop-bg: #2E2A4D;
    --sc-ink: #F1EFE8; --sc-sub: #CFCBE8;
    color-scheme: dark;
  }
  .nett-root[data-theme="system"] .lb-home     { --lb: #F5B935; --lb-on: #1A1830; --lb-text: #F5B935; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; }
  .nett-root[data-theme="system"] .lb-camp     { --lb: #5FB89D; --lb-on: #1A1830; --lb-text: #5FB89D; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #1E5B4F; --sc-r3: #5FB89D; }
  .nett-root[data-theme="system"] .lb-recipes  { --lb: #FF8A5C; --lb-on: #1A1830; --lb-text: #FF8A5C; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #FF8A5C; }
  .nett-root[data-theme="system"] .lb-property { --lb: #7DB8E8; --lb-on: #1A1830; --lb-text: #7DB8E8; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #23699F; --sc-r3: #7DB8E8; }
  .nett-root[data-theme="system"] .lb-games    { --lb: #F08BB6; --lb-on: #1A1830; --lb-text: #F08BB6; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; }
  .nett-root[data-theme="system"] .lb-todos    { --lb: #F5B935; --lb-on: #1A1830; --lb-text: #F5B935; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #6E9F45; --sc-r3: #F5B935; --sc-sun: #EE6A3C; }
  .nett-root[data-theme="system"] .lb-ai       { --lb: #B7B0F0; --lb-on: #1A1830; --lb-text: #B7B0F0; --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #B7B0F0; }
  .nett-root[data-theme="system"] .stars { display: block; }
  body:has(.nett-root[data-theme="system"]) { background: #1A1830; }
}

/* ---------- Base ---------- */
html, body { margin: 0; }
body { background: #F7F5EF; }
body:has(.nett-root[data-theme="night"]) { background: #1A1830; }

.nett-root {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Base element rules use :where() so they never outrank component classes. */
:where(.nett-root) *, :where(.nett-root) *::before, :where(.nett-root) *::after { box-sizing: border-box; }
:where(.nett-root) :where(h1, h2, h3) { margin: 0; font-family: var(--font-head); line-height: 1.1; }
:where(.nett-root) p { margin: 0; }
:where(.nett-root) a { color: inherit; }
:where(.nett-root) button { font-family: inherit; }
:where(.nett-root) :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Headings receive focus on navigation (for screen readers); don't draw a ring around them. */
:where(.nett-root) :where(h1, [tabindex="-1"]):focus { outline: none; }
:where(.nett-root) :where(img, svg) { display: block; }

.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;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
}

.kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.section { display: flex; flex-direction: column; gap: 16px; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Buttons & fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font: 700 16px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: default; filter: none; transform: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--accent { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.btn--logbook { background: var(--lb); color: var(--lb-on); font-weight: 800; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--primary); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { min-height: 54px; font-size: 17px; padding: 0 26px; }

.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

.link { color: var(--focus); font-weight: 700; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.link:hover { text-decoration: underline; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 700; font-size: 14px; }
.field__hint { font-size: 13px; color: var(--muted); }
.input {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: 500 16px var(--font-body);
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 52px; }
.input-wrap__btn { position: absolute; right: 3px; top: 3px; border: 0; background: transparent; }

.alert { padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.alert--error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--ink); }
.alert--info { background: var(--surface-alt); color: var(--ink); }
.alert--success { background: var(--success-soft); color: var(--success-ink); }

/* ---------- Scenery header ---------- */
.hero { position: relative; overflow: hidden; background: var(--sc-sky); color: var(--sc-ink); }
.hero__inner {
  /* Bottom room tracks the scenery: the ridges fill the lower 196/260 of it (13.6vw past 1440px). */
  position: relative; max-width: 1200px; margin: 0 auto; padding: 32px 24px max(216px, calc(13.6vw + 20px));
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between;
}
.hero__text { flex: 999 1 560px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hero__title { font-size: clamp(52px, 8vw, 112px); margin: 0; overflow-wrap: anywhere; }
.hero__sub { font-size: 18px; font-weight: 600; color: var(--sc-sub); max-width: 640px; text-wrap: pretty; }

.scenery { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; }
/* The wide scene is drawn 1440×260. Below 1440px it holds 260px and crops the sides; above, it
   grows with the width so the sun and the ridge tops are never sliced off the top edge. */
.scenery--wide { height: auto; aspect-ratio: 1440 / 260; min-height: 260px; }
.scenery--narrow { display: none; height: 140px; }
.scenery .sc-sun { fill: var(--sc-sun); }
.scenery .sc-r1 { fill: var(--sc-r1); }
.scenery .sc-r2 { fill: var(--sc-r2); }
.scenery .sc-r3 { fill: var(--sc-r3); }
.scenery .sc-fade { fill: var(--ground); }
.stars { position: absolute; left: 0; top: 0; width: 100%; height: 220px; display: none; pointer-events: none; }
.stars circle { fill: #F1EFE8; }
.nett-root[data-theme="night"] .stars { display: block; }

.back-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 36px;
  padding: 0 14px 0 10px; border-radius: 999px; background: var(--chip); color: var(--sc-ink);
  font-weight: 700; font-size: 14px; text-decoration: none;
}

.bigcard {
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border-radius: 24px; background: var(--surface); color: var(--ink);
}
.bigcard__n { font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: 0.8; color: var(--lb-text); }
.bigcard__l { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 0.95; text-transform: uppercase; max-width: 130px; }

/* ---------- App shell ---------- */
.shell-top {
  /* Above the phone tab bar (z 20) so the account menu can overlap it. */
  position: sticky; top: 0; z-index: 30; background: var(--bar); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.shell-top__inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 16px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
/* The journal mark (img/nett-mark.svg) carries its own rounded tile and colors. */
.brand__mark { display: block; width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.brand__tag { font-size: 12px; font-weight: 600; color: var(--muted); }

.shell-nav { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.shell-nav::-webkit-scrollbar { display: none; }
.shell-nav a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 10px;
  border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px;
}
.shell-nav a svg { color: var(--lb-text); }
.shell-nav a:hover:not(.active) { background: var(--surface-alt); }
.shell-nav a.active { background: var(--lb); color: var(--lb-on); font-weight: 800; }
.shell-nav a.active svg { color: var(--lb-on); }

.shell-title { display: none; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.shell-title__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.shell-title__name { font-family: var(--font-head); font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-title__sub { font-size: 12px; font-weight: 600; color: var(--muted); }

.shell-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.shell-main { display: block; }

.tile { width: 44px; height: 44px; border-radius: 14px; background: var(--lb); color: var(--lb-on); display: flex; align-items: center; justify-content: center; flex: none; }
.tile--sm { width: 38px; height: 38px; border-radius: 12px; }
.tile--lg { width: 52px; height: 52px; border-radius: 16px; }

.avatar-wrap { position: relative; }
.avatar {
  width: 42px; height: 42px; border-radius: 999px; background: #B83F72; color: #FFFFFF; border: 0;
  font: 800 16px var(--font-body); display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.shell-tabs { display: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0;
  background: none; border: 0; color: var(--muted); font: 600 12px var(--font-body); text-decoration: none; cursor: pointer;
}
.tab__pill { width: 56px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.tab.active { color: var(--ink); font-weight: 800; }
.tab.active .tab__pill { background: var(--surface-alt); }
.tab.active svg { color: var(--lb-text); }

.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  max-width: 1200px; margin: 12px auto 0; padding: 12px 16px; border-radius: 16px;
  background: var(--warn-soft); color: var(--warn-ink); font-weight: 600;
}
.banner-wrap { padding: 0 24px; }

.sync-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 0; cursor: pointer; font: 700 13px var(--font-body); background: var(--surface-alt); color: var(--ink);
}
.sync-pill--offline { background: var(--warn-soft); color: var(--warn-ink); }
.sync-pill--error, .sync-pill--expired { background: var(--danger-soft); color: var(--ink); }
.sync-pill__dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.sync-pill--syncing .sync-pill__dot { animation: pulse 1s ease-in-out infinite; }

/* Menus and sheets */
.scrim { position: fixed; inset: 0; z-index: 40; border: 0; background: transparent; cursor: default; }
.scrim--dim { background: var(--scrim); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 41; width: 280px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__name { font-weight: 800; }
.menu__meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu__label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 0; }
.menu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; border: 0; background: none; color: var(--ink); font: 600 15px var(--font-body); cursor: pointer; text-align: left;
}
.menu__item:hover { background: var(--surface-alt); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 6px 4px 8px; border-radius: 14px; background: var(--surface-alt); }
.segmented button { height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 80dvh; overflow: auto;
  background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
}
.sheet__handle { align-self: center; width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
.sheet__title { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.sheet-item {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--ground); color: var(--ink); text-decoration: none;
}
.sheet-item__text { flex: 1; display: flex; flex-direction: column; }
.sheet-item__name { font-weight: 800; }
.sheet-item__tag { font-size: 13px; color: var(--muted); }

/* ---------- Home ---------- */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.lb-card {
  display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.lb-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lb-card__stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lb-card__n { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 0.9; color: var(--lb-text); }
.lb-card__l { font-size: 13px; font-weight: 600; color: var(--muted); }
.lb-card__name { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.lb-card__tag { font-size: 15px; color: var(--muted); }

.list { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: 4px 20px; }
.list__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.list__row:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list__label { font-weight: 700; }
.list__meta { font-size: 14px; color: var(--muted); }
.list__value { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-transform: uppercase; color: var(--lb-text); white-space: nowrap; }
.dot { width: 12px; height: 12px; border-radius: 999px; background: var(--lb); flex: none; }

.empty { padding: 24px; border-radius: 24px; background: var(--surface-alt); color: var(--ink-2); }
.skeleton {
  border-radius: 24px; background: var(--surface-alt); min-height: 140px;
  animation: pulse 1.4s ease-in-out infinite;
}
.asof { font-size: 13px; color: var(--muted); }

/* ---------- Logbook overview ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.stat { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.stat__n { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--lb-text); }
.stat__l { font-size: 14px; font-weight: 600; color: var(--muted); }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.panel { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: 20px 24px; }
.panel__title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.panel__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.panel__row:last-child { border-bottom: 0; }
.panel__label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.panel__value { color: var(--muted); white-space: nowrap; }
.panel__empty { color: var(--muted); padding: 8px 0; }

/* ---------- Sign-in, register, forgot password ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.auth__hero {
  position: relative; overflow: hidden; background: var(--sc-sky); color: var(--sc-ink);
  padding: calc(36px + env(safe-area-inset-top)) 48px 260px; display: flex; flex-direction: column; gap: 22px;
}
.auth__hero > :not(svg) { position: relative; }
.auth__title { font-size: clamp(48px, 6vw, 92px); }
.auth__lede { font-size: 18px; font-weight: 600; color: var(--sc-sub); max-width: 520px; }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth__form { width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; }
.auth__heading { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 15px; }
.auth__switch { font-size: 15px; color: var(--muted); text-align: center; }

/* ---------- Public home (web, signed out) ---------- */
.landing-head { position: relative; max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.landing-head__actions { display: flex; align-items: center; gap: 8px; }
.landing-hero__inner {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 28px 24px max(240px, calc(13.6vw + 44px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
}
.landing-hero__text { flex: 999 1 560px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.landing-hero__title { font-size: clamp(52px, 6.2vw, 88px); line-height: 0.9; display: flex; flex-direction: column; }
.landing-hero__title span:last-child { color: var(--primary); }
.landing-hero__lede { font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--sc-sub); max-width: 560px; }
.landing-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.chip-label {
  align-self: flex-start; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--chip);
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center;
}
.peek { flex: 1 1 340px; display: flex; flex-direction: column; }
.peek__card { border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.peek__card--a { align-self: flex-end; width: min(300px, 88%); transform: rotate(3deg); }
.peek__card--b { align-self: flex-start; width: min(330px, 92%); margin-top: -10px; transform: rotate(-3deg); flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 20px; }
.peek__card--c { align-self: flex-end; width: min(290px, 86%); margin: -6px 12px 0 0; transform: rotate(2deg); }
.peek__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.peek__title { font-family: var(--font-head); font-size: 20px; font-weight: 800; }

.landing { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; display: flex; flex-direction: column; gap: 96px; }
.landing__intro { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.landing__eyebrow { color: var(--lb-text); }
.landing__title { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
.landing__lede { font-size: 18px; color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 20px; }
.feature { display: flex; gap: 18px; padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.feature__name { font-size: 24px; font-weight: 800; }
.feature__body { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.family-band { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 28px 32px; border-radius: 28px; background: var(--surface-alt); }
.family-band__avatars { display: flex; }
.family-band__avatars span {
  width: 52px; height: 52px; border-radius: 999px; border: 3px solid var(--surface-alt); margin-left: -12px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.family-band__avatars span:first-child { margin-left: 0; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 28px; border: 1px solid var(--line); }
.step__n { font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: 0.8; }
.cta-band {
  position: relative; overflow: hidden; border-radius: 32px; background: #1A1830; color: #F1EFE8;
  padding: 56px 40px 190px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  --sc-r1: #34305C; --sc-r2: #B83F72; --sc-r3: #EE6A3C; --sc-sun: #F5B935;
}
.nett-root[data-theme="night"] .cta-band { background: #252240; }
.cta-band > :not(svg) { position: relative; }
.cta-band__title { font-size: clamp(44px, 6vw, 80px); line-height: 0.9; }
.cta-band__lede { font-size: 18px; color: #CFCBE8; max-width: 560px; }
.cta-band .scenery { height: 200px; }
.cta-band .scenery .sc-fade { display: none; }
.site-footer { max-width: 1200px; margin: 0 auto; padding: 40px 24px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.site-footer nav { display: flex; gap: 20px; font-weight: 600; }
.site-footer a { text-decoration: none; }
.site-footer small { color: var(--muted); font-size: 14px; }

/* ---------- Splash ---------- */
/* <Splash /> and the static copy of it in both hosts' index.html (their boot screen). */
.splash {
  min-height: 100vh; min-height: 100dvh; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ground); color: var(--ink); text-align: center;
}
.splash__mark { display: block; width: 104px; height: 104px; filter: drop-shadow(0 10px 18px rgba(29, 59, 6, 0.22)); }
.splash__name { margin-top: 18px; font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.splash__tag { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.splash__bar { position: relative; overflow: hidden; margin-top: 28px; width: 148px; height: 4px; border-radius: 999px; background: var(--line); }
.splash__bar::before, .splash__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; }
.splash__bar::before { background: var(--primary); }
/* A light sweeping along the fill: still working. */
.splash__bar::after {
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  animation: splash-sweep 1.3s ease-in-out infinite;
}
/* The web boot screen: the fill follows the WebAssembly download (Blazor sets the variable on <html>). */
.splash__bar--download::before, .splash__bar--download::after { width: var(--blazor-load-percentage, 0%); transition: width 0.25s ease-out; }

@keyframes splash-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .nett-root *, .nett-root *::before, .nett-root *::after { animation: none !important; transition: none !important; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 899px) {
  .auth { grid-template-columns: 1fr; }
  .auth__hero { padding: calc(20px + env(safe-area-inset-top)) 24px 240px; gap: 14px; }
  .auth__panel { padding: 8px 18px 40px; align-items: flex-start; }
}

@media (max-width: 719px) {
  .page { padding: 4px 16px 32px; gap: 28px; }
  .auth__hero { padding: calc(20px + env(safe-area-inset-top)) 18px 150px; }
  .auth__title { font-size: 44px; }
  .auth__lede { font-size: 16px; }
  .section__title { font-size: 22px; }
  .hero__inner { padding: 18px 16px 132px; gap: 14px; }
  .hero__title { font-size: 52px; }
  .hero__sub { font-size: 15px; }
  .scenery--wide { display: none; }
  .scenery--narrow { display: block; }
  .bigcard { padding: 10px 14px; border-radius: 999px; gap: 8px; }
  .bigcard__n { font-size: 32px; line-height: 1; }
  .bigcard__l { font-size: 15px; max-width: none; }

  .shell-top__inner { padding: 8px 12px 8px 16px; gap: 10px; }
  .shell-nav, .brand__text { display: none; }
  .brand--home .brand__text { display: flex; }
  .shell-top .brand:not(.brand--home) { display: none; }
  .shell-title { display: flex; }
  .shell-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bar); border-top: 1px solid var(--line); padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
  }
  .shell-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sync-pill__label { display: none; }
  .banner-wrap { padding: 0 12px; }

  .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lb-card { padding: 14px; gap: 10px; border-radius: 20px; }
  .lb-card__tag { display: none; }
  .lb-card__n { font-size: 32px; }
  .lb-card__name { font-size: 16px; }
  .lb-card .tile { width: 40px; height: 40px; border-radius: 13px; }
  .list { padding: 2px 14px; border-radius: 20px; }
  .list__value { font-size: 22px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat__n { font-size: 30px; }
  .panel { padding: 14px 16px; border-radius: 20px; }

  .landing-hero__inner { padding: 12px 18px 150px; gap: 24px; }
  .landing-hero__title { font-size: 50px; }
  .landing-hero__lede { font-size: 16px; }
  .landing-hero__cta .btn { flex: 1 1 auto; }
  .peek { display: none; }
  .landing { padding: 28px 18px 0; gap: 48px; }
  .feature { flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; }
  .family-band { padding: 18px; border-radius: 22px; }
  .step { flex-direction: row; gap: 16px; padding: 16px 18px; }
  .step__n { font-size: 64px; width: 40px; flex: none; }
  .cta-band { padding: 36px 22px 130px; border-radius: 26px; align-items: stretch; text-align: left; }
  .cta-band .scenery { height: 128px; }
}

/* ==========================================================================
   You and Family: your profile, its keys and calendars, the family, and joining one.
   Design authority: the "Profiles — You and Family" canvas, in the home tint. Phones get one
   column. (Kept here, mid-file, so logbooks appending to the end don't collide with it.)
   ========================================================================== */

.nett-root { --paper: #FFFFFF; --on-danger: #FFFFFF; }
.nett-root[data-theme="night"] { --paper: #F1EFE8; --on-danger: #1A1830; }
@media (prefers-color-scheme: dark) {
  .nett-root[data-theme="system"] { --paper: #F1EFE8; --on-danger: #1A1830; }
}

/* ---------- Showing one thing on wide screens and another on phones ---------- */
.you-narrow, .you-narrow-flex { display: none !important; }

/* ---------- A person's face: their photo, in the avatar and the people lists ---------- */
.face--photo { object-fit: cover; background: var(--surface-alt); }
.avatar--face { padding: 0; overflow: hidden; background: var(--surface-alt); }
.avatar__face { width: 100%; height: 100%; font-size: 16px; }
.faces { display: flex; }
.faces .face { width: 34px; height: 34px; border: 2px solid var(--surface); margin-left: -8px; font-size: 13px; }
.faces .face:first-child { margin-left: 0; }

/* ---------- The account menu: your face, Your profile, Family ---------- */
.menu__head--face { display: flex; align-items: center; gap: 12px; }
.menu__face { width: 44px; height: 44px; font-size: 17px; }
.menu__who { flex: 1; min-width: 0; }
.menu__meta--family { color: var(--ink-2); font-weight: 600; }
a.menu__item { text-decoration: none; }

/* ---------- Framed print: a person's photo, or their initial, big ---------- */
.portrait {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 10px 8px; border-radius: 6px; background: var(--paper); box-shadow: 0 10px 24px rgba(23, 38, 43, 0.22);
  transform: rotate(-3deg);
}
.portrait__photo { display: block; width: 140px; height: 140px; border-radius: 2px; object-fit: cover; background: #DCE0D6; }
.portrait__initial {
  display: flex; align-items: center; justify-content: center; background: var(--face, #B83F72); color: var(--face-ink, #FFFFFF);
  font-family: var(--font-display); font-weight: 900; font-size: 88px; line-height: 1;
}
.portrait__caption { max-width: 100%; padding-bottom: 2px; font-family: var(--font-head); font-size: 16px; font-weight: 800; color: #17262B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portrait__change {
  position: absolute; right: -12px; bottom: -12px; width: 46px; height: 46px; border-radius: 999px; border: 3px solid var(--paper);
  background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
}
.portrait--lg .portrait__photo { width: 200px; height: 200px; }
.portrait--lg .portrait__initial { font-size: 128px; }
.portrait--sm .portrait__photo { width: 96px; height: 96px; }
.portrait--sm .portrait__initial { font-size: 60px; }

/* ---------- Roles and status marks ---------- */
.mark { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mark--ok { background: var(--success-soft); color: var(--success-ink); }
.mark--warn { background: var(--warn-soft); color: var(--warn-ink); }
.mark--muted { background: var(--surface-alt); color: var(--muted); }
.mark--admin { background: var(--lb); color: var(--lb-on); }
.mark--member { background: var(--surface-alt); color: var(--ink-2); }
.mark--you { background: transparent; border: 1.5px solid var(--lb); color: var(--lb-text); }
.tile--danger { background: var(--danger-soft); color: var(--danger); }
.btn--danger-fill { background: var(--danger); color: var(--on-danger); font-weight: 800; }

/* ---------- Needs a connection ---------- */
.needs-net { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.needs-net svg { flex: none; }
.needs-net--offline { color: var(--warn-ink); }
.you-offline { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--warn-soft); color: var(--warn-ink); }
.you-offline svg { flex: none; }
.you-offline > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.you-offline strong { font-size: 16px; }
.you-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface-alt); color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.you-note svg { flex: none; margin-top: 2px; }
.you-warn { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; line-height: 1.45; }
.you-warn svg { flex: none; }

/* ---------- Your profile: the header ---------- */
.hero--portrait .hero__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "print text" "print actions";
  align-items: center; column-gap: 44px; row-gap: 14px;
}
.hero--portrait .portrait { grid-area: print; justify-self: start; }
.you-hero__text { grid-area: text; align-self: end; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.you-hero__kicker { color: var(--sc-ink); }
.you-hero__name { font-size: clamp(52px, 7vw, 104px); overflow-wrap: anywhere; }
.you-hero__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 17px; font-weight: 600; color: var(--sc-sub); }
.you-hero__meta > span { overflow-wrap: anywhere; }
.you-hero__sync { align-self: flex-start; }
.you-hero__actions { grid-area: actions; align-self: start; display: flex; flex-wrap: wrap; gap: 10px; }
.you-hero__actions .btn--outline { background: var(--surface); }

/* ---------- Your profile: the page ---------- */
.you-page { padding-top: 28px; }
.you-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.you-main, .you-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.you-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.you-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.you-card__titles { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.you-card__title { font-size: 22px; font-weight: 800; }
.you-card__title--page { font-size: clamp(30px, 6vw, 40px); }
.you-card__sub { font-size: 15px; color: var(--muted); }
.you-card__hint { font-size: 13px; color: var(--muted); }
.you-card__empty { padding: 16px; border-radius: 16px; background: var(--surface-alt); color: var(--ink-2); font-size: 15px; }
.skeleton--short { min-height: 72px; }
.you-rows { display: flex; flex-direction: column; }
.you-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.you-row:last-child { border-bottom: 0; }
.you-row:hover:not([disabled]) .you-row__label { text-decoration: underline; }
.you-row[disabled] { opacity: 0.6; cursor: default; }
.you-row > svg { flex: none; color: var(--muted); }
.you-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.you-row__label { font-weight: 700; }
.you-row__value { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.you-row--danger .you-row__label { color: var(--danger); }
.you-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.you-page--keys { max-width: 760px; gap: 12px; }

/* The family card beside the profile */
.fam-card { gap: 8px; transition: box-shadow 0.12s ease; }
.fam-card:hover { box-shadow: var(--shadow); }
.fam-card__kicker { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.fam-card__name { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 0.9; text-transform: uppercase; overflow-wrap: anywhere; }
.fam-card__people { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* Theme: Day, Night, Device */
.theme-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-alt); }
.theme-choice__option {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: 600 15px var(--font-body); cursor: pointer;
}
.theme-choice__option[aria-checked="true"] { background: var(--surface); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

/* ---------- Edit your profile ---------- */
.you-edit__photo-row { display: flex; align-items: center; gap: 30px; padding: 6px 0 4px 6px; }
.you-edit__photo-actions { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.you-edit__photo { display: flex; flex-direction: column; gap: 12px; }
.you-edit__section { padding-top: 18px; border-top: 1px solid var(--line); }
.you-edit__link { align-self: flex-start; min-height: 44px; }
.you-email { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); }
.you-email > svg { flex: none; }
.you-email__address { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.you-savenote > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.you-savenote svg { flex: none; }

/* ---------- Change password, change email ---------- */
.input-wrap:has(.you-show) .input { padding-right: 72px; }
.you-show { position: absolute; right: 4px; top: 3px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--focus); font: 700 14px var(--font-body); cursor: pointer; }
.pw-rules { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.pw-rule { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pw-rule__dot { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--field-line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.pw-rule--met { font-weight: 600; color: var(--ink-2); }
.pw-rule--met .pw-rule__dot { background: var(--success-ink); border-color: var(--success-ink); color: var(--surface); }
.you-now { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--surface-alt); }
.you-now__label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.you-now__value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.you-now__address { font-weight: 700; overflow-wrap: anywhere; }
.you-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.you-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; }
.you-steps__n { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--lb); color: var(--lb-on); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.you-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; text-align: center; }
.you-sent__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--success-soft); color: var(--success-ink); display: flex; align-items: center; justify-content: center; }
.you-sent__title { font-size: 24px; font-weight: 800; }
.you-sent p { color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- Keys for devices and apps ---------- */
.keys__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.keys__meter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.keys__dots { display: inline-flex; gap: 4px; }
.keys__dot { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--field-line); }
.keys__dot--on { background: var(--lb); border-color: var(--lb); }
.keys__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.key-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.key-row:first-child { border-top: 0; }
.key-row__main { display: flex; align-items: center; gap: 12px; }
.key-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.key-row__name { font-weight: 800; overflow-wrap: anywhere; }
.key-row__meta, .key-row__ends { font-size: 13px; color: var(--muted); }
.key-row__ends--over { color: var(--danger); font-weight: 700; }
.key-row__prefix { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; color: var(--ink-2); }
.key-row__confirm { margin: 0; }
.key-made { display: flex; flex-direction: column; gap: 8px; }
.key-made__label { font-weight: 800; }
.key-made__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.key-made__key {
  flex: 1 1 260px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--field-line); background: var(--surface-alt);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 15px; overflow-wrap: anywhere; user-select: all;
}
.key-made__copy--done { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-ink); }
.key-made__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.key-made__facts dt { color: var(--muted); font-weight: 600; }
.key-made__facts dd { margin: 0; font-weight: 700; }
.chip[role="radio"][aria-checked="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }

/* ---------- Calendars ---------- */
.calconn-list { display: flex; flex-direction: column; gap: 12px; }
.calconn { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--ground); }
.calconn--failed { border: 2px solid var(--danger); background: var(--danger-wash); }
.calconn__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.calconn__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calconn__name { font-weight: 800; overflow-wrap: anywhere; }
.calconn--off .calconn__name { color: var(--muted); }
.calconn__meta { font-size: 13px; color: var(--muted); }
.calconn__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.calconn__switch { width: 60px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.calconn__switch[disabled] { opacity: 0.6; cursor: default; }
.calconn__switch[aria-checked="true"] .switch { background: var(--primary); justify-content: flex-end; }
.calconn__switch[aria-checked="true"] .switch::after { background: var(--on-primary); }
.calconn__error { padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.calconn__subs { display: flex; flex-wrap: wrap; gap: 8px; }
.calconn__sub {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 9px; border-radius: 999px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: 600 14px var(--font-body); cursor: pointer;
}
.calconn__sub[aria-checked="true"] { border-color: var(--sub); font-weight: 700; }
.calconn__check { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--field-line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.calconn__sub[aria-checked="true"] .calconn__check { background: var(--sub); border-color: var(--sub); color: #FFFFFF; }
.calconn__more { padding-top: 2px; }

/* ---------- The family: its people and who's invited ---------- */
.fam-prints { flex: none; display: flex; align-items: flex-start; padding: 8px 12px 0 0; }
.fam-prints .portrait { margin-left: -14px; }
.fam-prints .portrait:first-child { margin-left: 0; }
.fam-prints .portrait:nth-child(1) { transform: rotate(-7deg); margin-top: 26px; }
.fam-prints .portrait:nth-child(2) { transform: rotate(4deg); }
.fam-prints .portrait:nth-child(3) { transform: rotate(-3deg); margin-top: 40px; }
.fam-prints .portrait:nth-child(4) { transform: rotate(6deg); margin-top: 10px; }
.fam-page { padding-top: 28px; }
.fam-section { display: flex; flex-direction: column; gap: 12px; }
.fam-section__head { display: flex; align-items: baseline; gap: 12px; }
.fam-section__head--split { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.fam-section__titles { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-section__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.fam-section__count { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--lb-text); }
.fam-section__sub { font-size: 15px; color: var(--ink-2); }
.fam-people { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.fam-person { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.fam-person--you { padding: 13px; border: 2px solid var(--lb); }
.fam-person .fam-person__face { width: 64px; height: 64px; font-size: 28px; }
.fam-person__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fam-person__name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.fam-person__name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.fam-person__email { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-person__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fam-invites { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.fam-invite { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.fam-invite:first-child { border-top: 0; }
.fam-invite__main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fam-invite__icon { flex: none; width: 48px; height: 48px; border-radius: 999px; border: 2px dashed var(--field-line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.fam-invite__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-invite__email { font-weight: 800; overflow-wrap: anywhere; }
.fam-invite__meta { font-size: 14px; color: var(--muted); }
.fam-invite__actions { flex: none; display: flex; gap: 4px; }
.fam-invite .confirm { margin: 0; }
.fam-copy { gap: 6px; }
.fam-copy--done { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-ink); }
.fam-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fam-facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.fam-facts svg { flex: none; margin-top: 2px; }
.fam-sent { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 4px; text-align: center; }
.fam-sent__icon { width: 96px; height: 96px; border-radius: 32px; background: var(--success-soft); color: var(--success-ink); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg); }
.fam-sent__text { font-size: 16px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.fam-sent__text strong { color: var(--ink); }
.fam-sent__hint { font-size: 14px; color: var(--muted); }
.fam-sent__again { min-height: 44px; }

/* ---------- Phones: one column ---------- */
@media (max-width: 719px) {
  .you-wide, .you-wide-flex, .you-wide-block { display: none !important; }
  .you-narrow { display: inline !important; }
  .you-narrow-flex { display: flex !important; }

  .hero--portrait .hero__inner { grid-template-areas: "print text" "actions actions"; column-gap: 18px; row-gap: 18px; padding-bottom: 132px; }
  .you-hero__kicker { display: none; }
  .portrait--lg .portrait__photo { width: 104px; height: 104px; }
  .portrait--lg .portrait__initial { font-size: 66px; }
  .portrait__caption { font-size: 13px; }
  .portrait__change { width: 40px; height: 40px; right: -10px; bottom: -10px; }
  .you-hero__text { gap: 6px; }
  .you-hero__name { font-size: 44px; }
  .you-hero__meta { flex-direction: column; font-size: 14px; }
  .you-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .you-hero__actions .btn { padding: 0 12px; }

  .you-page { padding-top: 16px; }
  .you-cols { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .you-main, .you-aside { display: contents; }
  .you-theme { order: 1; }
  .calendars { order: 2; }
  .you-signin { order: 3; }
  .you-data { order: 4; }
  .you-signout { order: 5; }
  .you-card { padding: 16px; border-radius: 20px; }
  .you-card__title { font-size: 20px; }

  .you-edit__photo-row { flex-direction: column; gap: 18px; padding: 8px 0 0; }
  .you-edit__photo-actions { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .you-edit__pick { min-height: 76px; flex-direction: column; gap: 6px; padding: 0 6px; border-radius: 18px; border-width: 1.5px; font-size: 14px; }
  .you-edit__remove { border: 1.5px solid var(--danger); }
  .you-edit__email { display: none; }
  .pw-rules { grid-template-columns: 1fr; }
  .calconn__tools { margin-left: 0; width: 100%; }

  .fam-prints { order: -1; padding: 0; }
  .fam-prints .portrait { padding: 5px 5px 4px; margin-left: -6px; }
  .fam-prints .portrait:nth-child(n) { margin-top: 0; }
  .fam-prints .portrait__photo { width: 52px; height: 52px; }
  .fam-prints .portrait__initial { font-size: 32px; }
  .fam-page { padding-top: 16px; gap: 24px; }
  .fam-section__title { font-size: 22px; }
  .fam-person { padding: 12px; border-radius: 20px; }
  .fam-person--you { padding: 11px; }
  .fam-person .fam-person__face { width: 48px; height: 48px; font-size: 20px; }
  .fam-invite { padding: 12px 14px; }
  .fam-invite__actions { width: 100%; }
  .fam-invite__actions .btn { flex: 1; }
}

/* ==========================================================================
   Trip controls: the Camp Logbook's editors and trip screens.
   Design authority: the "Camp Logbook — Trip controls" canvas. Phones edit in a bottom sheet,
   wider screens in a side sheet; every target is at least 44px.
   ========================================================================== */

/* ---------- Fields ---------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.field__opt { font-weight: 500; color: var(--muted); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--danger); }
.input[aria-invalid="true"] { border: 2px solid var(--danger); }
.input--num { font-weight: 600; font-variant-numeric: tabular-nums; }
.textarea { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.45; resize: vertical; }
.affix { position: relative; }
.affix__pre, .affix__post {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none;
  font-size: 15px; font-weight: 700; color: var(--muted);
}
.affix__pre { left: 16px; }
.affix__post { right: 16px; }
.affix--pre .input { padding-left: 34px; }
.affix--post .input { padding-right: 60px; }
.affix--icon .input { padding-left: 46px; }
.affix--icon .affix__pre { left: 14px; color: var(--lb-text); }
.select-wrap { position: relative; }
.select-wrap .input { appearance: none; -webkit-appearance: none; padding-right: 44px; font-weight: 600; }
.select-wrap__chev { position: absolute; right: 14px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; color: var(--muted); }
.input-group { display: flex; gap: 8px; }
.input-group > .input, .input-group > .affix, .input-group > .select-wrap { flex: 1 1 0; min-width: 0; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--quiet { background: transparent; color: var(--ink); }
.btn--danger { background: transparent; color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icon-btn--plain { border: 0; background: transparent; color: var(--ink-2); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--field-line); background: var(--surface); color: var(--ink);
  font: 600 15px var(--font-body); white-space: nowrap; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
.chip--add { border: 2px solid var(--primary); background: transparent; font-weight: 700; padding: 0 16px 0 12px; }
.person-chip { min-height: 48px; padding: 0 14px 0 5px; gap: 8px; border-width: 2px; font-weight: 700; }
.person-chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--primary); font-weight: 700; }
.person-chip--other { border-style: dashed; }
.person-chip__check { color: var(--lb-text); }
.face {
  flex: none; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; background: var(--face, #B83F72); color: var(--face-ink, #FFFFFF);
}
.face--sm { width: 32px; height: 32px; font-size: 13px; }
.face--xs { width: 22px; height: 22px; font-size: 11px; }
.face--other { background: var(--surface-alt); color: var(--ink-2); }

/* ---------- Booked switch ---------- */
.switch-row {
  width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 18px;
  border: 1.5px solid var(--field-line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.switch-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.switch-row__label { font-weight: 700; }
.switch-row__sub { font-size: 13px; color: var(--muted); }
.switch { flex: none; width: 52px; height: 32px; padding: 3px; border-radius: 999px; background: var(--field-line); display: flex; justify-content: flex-start; }
.switch::after { content: ""; width: 26px; height: 26px; border-radius: 999px; background: #FFFFFF; }
.switch-row[aria-checked="true"] .switch { background: var(--primary); justify-content: flex-end; }
.switch-row[aria-checked="true"] .switch::after { background: var(--on-primary); }
.status-chip { flex: none; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; white-space: nowrap; }
.status-chip--booked { background: var(--success-soft); color: var(--success-ink); }
.status-chip--todo { background: var(--warn-soft); color: var(--warn-ink); }

/* ---------- Date range + calendar ---------- */
.daterange {
  display: flex; align-items: stretch; min-height: 64px; border-radius: 16px; border: 1.5px solid var(--field-line);
  background: var(--surface); overflow: hidden;
}
.daterange--open { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.daterange[aria-invalid="true"] { border: 2px solid var(--danger); }
.daterange__part {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 14px;
  border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.daterange__arrow { flex: none; display: flex; align-items: center; color: var(--muted); }
.daterange__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.daterange__value { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daterange__count {
  flex: none; display: flex; align-items: center; padding: 0 16px; background: var(--surface-alt);
  font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: uppercase; color: var(--lb-text); white-space: nowrap;
}
.calendar { border-radius: 20px; border: 1px solid var(--line); background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendar__title { font-size: 19px; font-weight: 800; }
.calendar__dow, .calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar__dow { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.calendar__grid { row-gap: 4px; }
.cal-day { height: 44px; min-width: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 500 15px var(--font-body); cursor: pointer; }
.cal-day:hover { background: var(--surface-alt); }
.cal-day--today { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; }
.cal-day--in, .cal-day--in:hover { background: var(--range); border-radius: 0; }
.cal-day--end, .cal-day--end:hover { background: var(--primary); color: var(--on-primary); font-weight: 800; box-shadow: none; }
.calendar__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.calendar__summary { font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* ---------- Disclosure, stepper ---------- */
.disclosure { border-radius: 18px; border: 1.5px solid var(--field-line); overflow: hidden; background: var(--surface); }
.disclosure__head {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.disclosure__chev { transition: transform 0.15s ease; }
.disclosure__head[aria-expanded="true"] .disclosure__chev { transform: rotate(180deg); }
.disclosure__body { padding: 4px 14px 14px; }
.tile--soft { background: var(--surface-alt); color: var(--lb-text); }
.stepper { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-alt); }
.stepper__btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper__value { min-width: 44px; text-align: center; display: flex; flex-direction: column; line-height: 1; }
.stepper__n { font-family: var(--font-display); font-size: 22px; font-weight: 900; }
.stepper__l { font-size: 11px; font-weight: 700; color: var(--ink-2); }

/* ---------- Sync marks ---------- */
.sync-chip {
  flex: none; height: 26px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; background: var(--surface-alt); color: var(--ink-2); white-space: nowrap;
}
.sync-chip--failed { background: var(--danger-soft); color: var(--ink); font-weight: 800; }
.sync-chip--failed svg { color: var(--danger); }
.is-failed { border: 2px solid var(--danger) !important; }

/* ---------- Editor sheet: bottom sheet on phones, side sheet on wider screens ---------- */
.editor {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 48px - env(safe-area-inset-top));
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0; box-shadow: var(--shadow);
}
.editor__head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.editor__handle { flex-basis: 100%; display: flex; justify-content: center; }
.editor__handle::before { content: ""; width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
.editor__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.editor__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.editor__title { font-size: 24px; font-weight: 800; }
.editor__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
/* The body scrolls; its children keep their height (an overflow-hidden child would otherwise shrink to nothing). */
.editor__body > * { flex-shrink: 0; }
.editor__foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface);
}
.editor__foot .spacer { flex: 1; }
.editor__foot > .confirm { flex: 1 1 100%; padding: 12px 14px; gap: 8px; }
.editor__foot-note { flex: 1 1 220px; font-size: 13px; color: var(--muted); }
.editor__section { display: flex; flex-direction: column; gap: 10px; }
.editor__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor__section-title { font-size: 19px; font-weight: 800; }
@media (min-width: 720px) {
  .editor { top: 0; left: auto; width: min(600px, 100%); max-height: none; border-radius: 28px 0 0 28px; }
  .editor__handle { display: none; }
  .editor__head { padding: 20px 24px 16px; }
  .editor__body { padding: 20px 24px; }
  .editor__foot { padding: 14px 24px; }
}
@media (max-width: 719px) {
  .editor__foot > .btn--primary:last-child { flex: 1 1 auto; min-height: 54px; font-size: 17px; }
}

/* ---------- Rows inside editors ---------- */
.edit-list { display: flex; flex-direction: column; gap: 8px; }
.edit-row {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.edit-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.edit-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-row__time { font-size: 14px; font-weight: 700; color: var(--muted); }
.edit-row__text { font-size: 15px; overflow-wrap: anywhere; }
.edit-row__kicker { flex: none; width: 92px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.type-chip { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-2); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; }
.ingredient { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); }
.ingredient__fields { display: grid; grid-template-columns: minmax(0, 1fr) 72px 120px 44px; gap: 6px; align-items: center; }
.ingredient__fields .input { height: 46px; padding: 0 12px; border-radius: 12px; font-size: 15px; }
.ingredient__flags { display: flex; gap: 6px; }
.ingredient__flags .chip { flex: 1 1 0; min-height: 44px; font-size: 13px; padding: 0 10px; }
.campground-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.campground-option {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border: 2px solid transparent; border-radius: 14px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.campground-option[aria-selected="true"] { background: var(--surface-alt); border-color: var(--primary); }
.campground-option__name { flex: 1; min-width: 0; font-weight: 700; }
.photo-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-strip img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: var(--surface-alt); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom));
  width: max-content; max-width: min(560px, calc(100% - 24px)); min-height: 52px; padding: 6px 8px 6px 18px; border-radius: 999px;
  background: var(--toast-bg); color: var(--toast-ink); display: flex; align-items: center; gap: 12px; font-weight: 600; box-shadow: var(--shadow);
}
.toast__action { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--toast-link); font: 800 15px var(--font-body); cursor: pointer; }
@media (min-width: 720px) { .toast { bottom: 24px; } }

/* ---------- Camp Logbook: trips list ---------- */
.trip-list { display: flex; flex-direction: column; gap: 10px; }
.trip-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.trip-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.trip-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trip-row__name { font-family: var(--font-head); font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.trip-row__meta { font-size: 14px; color: var(--muted); }
.trip-row__when { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--lb-text); white-space: nowrap; }

/* ---------- Trip page ---------- */
.trip-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.trip-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.trip-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.trip-block { display: flex; flex-direction: column; gap: 10px; }
.trip-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-block__title { font-size: 22px; font-weight: 800; }
.day-card {
  width: 100%; display: flex; gap: 18px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.day-card--today { border: 2px solid var(--primary); }
.day-tile {
  flex: none; width: 72px; height: 84px; border-radius: 18px; background: var(--surface-alt); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display);
}
.day-tile__dow { font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.day-tile__n { font-size: 44px; font-weight: 900; line-height: 0.9; }
.day-tile--today { background: #F5B935; color: #17262B; }
.day-tile--today .day-tile__dow { color: #17262B; }
.day-tile--sm { width: 52px; height: 60px; border-radius: 15px; }
.day-tile--sm .day-tile__dow { font-size: 13px; }
.day-tile--sm .day-tile__n { font-size: 30px; }
.day-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.day-card__body > .sync-chip { align-self: flex-start; }
.day-card__title { font-size: 22px; font-weight: 800; }
.day-card__title--empty { color: var(--muted); font-weight: 700; font-size: 18px; }
.log-lines { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 12px; font-size: 16px; line-height: 1.45; align-items: start; }
.log-lines__time { color: var(--muted); font-weight: 600; }
/* Inline flow: the entry's type leads the line and long text wraps under it, not onto a line of its own. */
.log-lines__text { min-width: 0; overflow-wrap: anywhere; }
.log-lines__text .type-chip { margin-right: 8px; }
.log-lines__text .sync-chip { margin-left: 8px; vertical-align: middle; }
/* Who wrote an entry: their face and name, like a signature at the end of the line. */
.log-author { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.log-lines__text .log-author { margin-left: 10px; }
.log-author--long { font-size: 14px; font-weight: 600; white-space: normal; }
.log-author--long strong { color: var(--ink); font-weight: 800; }
.meal-chip { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--meal-bg); color: var(--meal-ink); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; }
.res-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.res-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.res-row__name { font-weight: 700; overflow-wrap: anywhere; }
.res-row__meta { font-size: 14px; color: var(--muted); }
.traveler-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.traveler { min-height: 40px; padding: 0 14px 0 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.traveler--other { border-style: dashed; border-color: var(--field-line); }
.issue { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; border: 2px solid var(--danger); background: var(--danger-wash); color: var(--ink); }
.issue__title { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.issue__title svg { color: var(--danger); flex: none; }
.issue__message { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; overflow-wrap: anywhere; }
.trip-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.trip-fact { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; }
.trip-fact__n { font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1.05; }
.trip-fact__l { font-size: 13px; font-weight: 600; color: var(--muted); }
.cost-card { margin: 0; padding: 4px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.cost-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; }
.cost-line + .cost-line { border-top: 1px solid var(--line); }
.cost-line dt { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cost-line dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-line__note { font-size: 13px; font-weight: 600; color: var(--muted); }
.cost-line.cost-line--total { border-top: 2px solid var(--ink-2); padding: 12px 0; }
.cost-line--total dt { font-weight: 800; }
.cost-line--total dd { font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }

@media (max-width: 719px) {
  .day-card { padding: 14px; gap: 12px; border-radius: 22px; }
  .day-tile { width: 52px; height: 60px; border-radius: 15px; }
  .day-tile__dow { font-size: 13px; }
  .day-tile__n { font-size: 30px; }
  .day-card__title { font-size: 19px; }
  .log-lines { grid-template-columns: 64px minmax(0, 1fr); font-size: 14px; gap: 6px 8px; }
  .trip-row__name { font-size: 17px; }
  .trip-row__when { font-size: 18px; }
  .ingredient__fields { grid-template-columns: minmax(0, 1fr) 60px 100px 44px; }
}

/* ==========================================================================
   Campground controls: the Camp Logbook's campgrounds, sites, amenities and scorecards.
   Design authority: the "Camp Logbook — Campground controls" canvas.
   ========================================================================== */

/* ---------- Sections, finder ---------- */
.sections { display: flex; flex-wrap: wrap; gap: 8px; }
.section-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.section-link[aria-current="page"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.finder__search { flex: 1 1 280px; }
.finder__search .input { height: 48px; }
.finder__sort { display: flex; align-items: center; gap: 8px; }
.finder__sort .input { height: 44px; width: auto; padding-left: 12px; }
.only-narrow { display: none; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* ---------- Campground cards ---------- */
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.camp-card {
  display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  color: var(--ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.camp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.camp-card--pending { border: 2px dashed var(--field-line); }
.camp-card__photo { position: relative; display: block; height: 140px; background: var(--surface-alt); }
.camp-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-card__nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.camp-card__nophoto svg, .site-card__nophoto svg { color: var(--lb-text); }
.camp-card__badge { position: absolute; left: 10px; top: 10px; }
.camp-card__badge .sync-chip { height: 28px; background: var(--surface); }
.camp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.camp-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.camp-card__name { font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.camp-card__score { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--lb-text); }
.camp-card__score--none { color: var(--muted); font-size: 20px; }
.camp-card__meta { font-size: 14px; color: var(--ink-2); }
.camp-card__trip { font-size: 13px; font-weight: 700; color: var(--muted); }
.pine-mark path { fill: none; stroke: var(--field-line); }
.pine-mark--on path { stroke: var(--lb-text); }
.pine-mark--on path:first-child { fill: var(--lb-text); }

/* ---------- Campground page ---------- */
.hero--print { overflow: visible; }
.hero--print .hero__inner { padding-bottom: 0; }
.hero--print .hero__text { padding-bottom: max(200px, calc(13.6vw + 4px)); }
.print {
  position: relative; z-index: 2; flex: 0 0 420px; margin: 20px 0 -90px; padding: 10px 10px 12px; border-radius: 26px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); transform: rotate(2deg); display: flex; flex-direction: column; gap: 10px;
}
.print__photo { position: relative; display: block; height: 280px; border-radius: 18px; overflow: hidden; background: var(--surface-alt); }
.print__photo img { width: 100%; height: 100%; object-fit: cover; }
.print__none { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 700; }
.print__none svg { color: var(--lb-text); }
.print__caption { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 14px; font-weight: 700; }
.print__count { font-weight: 800; color: var(--lb-text); }
.print--narrow { display: none; }
.hero--print ~ .page { padding-top: 40px; }
.camp-actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 700px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.fact {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font: inherit; text-align: left; min-width: 0;
}
button.fact { cursor: pointer; }
button.fact:hover { box-shadow: var(--shadow); }
.fact__l { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fact__n { font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 1; overflow-wrap: anywhere; }
.fact__n--score { color: var(--lb-text); }
.fact__n--none { color: var(--muted); }
.fact__sub { font-size: 13px; color: var(--ink-2); }
.camp-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.camp-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.camp-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.site-card {
  display: flex; flex-direction: column; padding: 0; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.site-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.site-card--pending { border: 2px dashed var(--field-line); }
.site-card__photo { position: relative; display: block; width: 100%; height: 130px; background: var(--surface-alt); }
.site-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.site-card__nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.site-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px 16px; }
.site-card__n { font-family: var(--font-display); font-size: 48px; font-weight: 900; line-height: 0.85; overflow-wrap: anywhere; }
.site-card__meta { font-size: 14px; color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.tag--pending { border: 2px dashed var(--field-line); }
.note-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.note-card__title { font-size: 20px; font-weight: 800; }
.note-card p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Amenity chips, pines, scorecard rows ---------- */
.pick-chip { padding: 0 18px 0 14px; }
.pick-chip[aria-pressed="true"] { background: var(--success-soft); border: 2px solid var(--lb); color: var(--ink); font-weight: 800; }
.pick-chip.pick-chip--pending { border-style: dashed; }
.pick-chip svg { color: var(--lb-text); }
.chip[role="radio"][aria-checked="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
.pines { flex: none; display: flex; }
.pine { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pine path { fill: none; stroke: var(--field-line); }
.pine--on path { stroke: var(--primary); }
.pine--on path:first-child { fill: var(--primary); }
.pine:hover:not(.pine--on) path { stroke: var(--ink-2); }
.score-rows { border-radius: 22px; border: 1px solid var(--line); padding: 4px 16px; }
.score-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.score-row:last-child { border-bottom: 0; }
.score-row__top { display: flex; align-items: center; gap: 8px; }
.score-row__name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.score-row__value { flex: none; width: 70px; text-align: right; }
.score-row__n { font-family: var(--font-display); font-size: 24px; font-weight: 900; }
.score-row__none { font-size: 14px; font-weight: 700; color: var(--muted); }
.score-row__add-note { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -8px; font-size: 14px; }
.saved-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--success-ink); }
.score-total { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.score-total__l { font-size: 13px; font-weight: 700; color: var(--muted); }
.score-total__n { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 1; color: var(--lb-text); }
.sheet-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--success-ink); }
.delete-blocked { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Trip reservation picker: quick-add ---------- */
.campground-option__meta { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.campground-option--add { min-height: 48px; margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; font-weight: 700; }
.campground-list--form { max-height: none; overflow: visible; }
.quick-add { display: flex; flex-direction: column; gap: 12px; padding: 8px 10px 10px; }
.quick-add p { font-size: 15px; line-height: 1.4; }
.chip--pending { border-style: dashed; }

/* ---------- Site sheet ---------- */
.site-tile {
  flex: none; min-width: 52px; max-width: 120px; height: 52px; padding: 0 10px; border-radius: 16px; background: var(--lb); color: var(--lb-on);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1;
  overflow: hidden; white-space: nowrap;
}
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: var(--surface-alt); align-self: flex-start; }
.tab-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px var(--font-body); cursor: pointer; }
.tab-btn[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }
.cell-chip { gap: 6px; padding: 0 12px; }
.cell-bars { flex: none; }
.stepper--field { align-self: flex-start; }
.stepper__input {
  width: 52px; height: 44px; border: 0; background: transparent; color: var(--ink); text-align: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 900;
}
.stepper__input:focus { outline: 2px solid var(--focus); border-radius: 10px; }
.stepper__btn[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 719px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .finder { padding: 0; border: 0; background: transparent; }
  .finder .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .finder .chips::-webkit-scrollbar { display: none; }
  .camp-grid { grid-template-columns: 1fr; gap: 10px; }
  .camp-card { flex-direction: row; align-items: stretch; border-radius: 20px; }
  .camp-card__photo { flex: none; width: 96px; height: auto; min-height: 96px; }
  .camp-card__nophoto { font-size: 0; }
  .camp-card__badge { display: none; }
  .camp-card__body { flex: 1; min-width: 0; padding: 10px 12px; gap: 2px; }
  .camp-card__name { font-size: 17px; }
  .camp-card__score { font-size: 20px; }
  .camp-card__score--none { font-size: 15px; }

  .hero--print .hero__text { padding-bottom: 150px; }
  .hero--print .print--wide { display: none; }
  .print--narrow { display: flex; width: calc(100% - 44px); margin: -96px 22px 0; padding: 8px 8px 10px; border-radius: 22px; transform: rotate(-1.5deg); gap: 8px; }
  .print--narrow .print__photo { height: 180px; border-radius: 16px; }
  .hero--print ~ .page { padding-top: 18px; }
  .camp-actions .btn { flex: 0 0 auto; padding: 0 16px; min-height: 46px; font-size: 15px; }
  .camp-actions .btn--primary { flex: 1 1 auto; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fact { padding: 9px 11px; border-radius: 16px; }
  .fact__l { font-size: 11px; letter-spacing: 0.05em; }
  .fact__n { font-size: 22px; line-height: 1.05; }
  .fact__sub { display: none; }
  .fact { order: 3; }
  .fact:nth-child(-n + 2) { order: 1; }
  .fact--score { order: 2; }
  .site-grid { display: flex; overflow-x: auto; gap: 10px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .site-grid::-webkit-scrollbar { display: none; }
  .site-card { flex: none; width: 168px; border-radius: 20px; }
  .site-card__photo { height: 96px; }
  .site-card__body { padding: 8px 12px 12px; gap: 2px; }
  .site-card__n { font-size: 36px; line-height: 0.9; }
  .site-card__meta { font-size: 13px; }
  .pine { width: 52px; height: 52px; }
  .score-row__top { flex-wrap: wrap; }
  .score-row__name { flex-basis: calc(100% - 80px); }
  .score-row .pines { order: 3; }
}

/* ---------- The family's lists: amenities and scorecard items ---------- */
.nett-root { --on-danger: #FFFFFF; }
.nett-root[data-theme="night"] { --on-danger: #1A1830; }
@media (prefers-color-scheme: dark) { .nett-root[data-theme="system"] { --on-danger: #1A1830; } }
.btn--danger-fill { background: var(--danger); color: var(--on-danger); }
.icon-btn--danger { color: var(--danger); }

.pill-switch {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 12px; border: 0; border-radius: 999px;
  background: var(--surface-alt); color: var(--ink); font: 700 14px var(--font-body); white-space: nowrap; cursor: pointer;
}
.pill-switch__track { flex: none; width: 40px; height: 24px; padding: 3px; border-radius: 999px; background: var(--field-line); display: flex; justify-content: flex-start; }
.pill-switch__track::after { content: ""; width: 18px; height: 18px; border-radius: 999px; background: #FFFFFF; }
.pill-switch[aria-checked="true"] .pill-switch__track { background: var(--primary); justify-content: flex-end; }
.pill-switch[aria-checked="true"] .pill-switch__track::after { background: var(--on-primary); }
.pill-switch[disabled] { opacity: 0.6; cursor: default; }

.catalog { max-width: 860px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.catalog__add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 16px 18px; background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.catalog__new { flex: 1 1 240px; min-width: 0; }
.catalog__new .input { height: 48px; padding: 0 14px; }
.catalog__shows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; }
.catalog__shows-l { font-size: 14px; font-weight: 700; }
.catalog__add .pill-switch { min-height: 48px; padding: 0 10px 0 14px; border: 1.5px solid var(--field-line); background: var(--surface); }
.catalog__add-btn { min-height: 48px; }
.catalog__add-error { flex-basis: 100%; }
.catalog__failure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 18px 0; }
.catalog__status { padding: 10px 18px 0; min-height: 0; }
.catalog__status:empty { padding: 0; }
.catalog__empty { margin: 0; padding: 18px; color: var(--ink-2); line-height: 1.45; }
.catalog__skeleton { margin: 18px; height: 180px; }
.catalog__rows { list-style: none; margin: 0; padding: 4px 18px 8px; }
.catalog__note { max-width: 860px; margin-top: -18px; }
.catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.catalog-row:last-child { border-bottom: 0; }
.catalog-row--failed { margin: 4px -10px; padding: 10px; border: 2px solid var(--danger); border-radius: 16px; }
.catalog-row__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.catalog-row__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.catalog-row__usage { font-size: 13px; color: var(--muted); }
.catalog-row__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.catalog-row__open {
  display: none; width: 100%; min-height: 60px; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}

.catalog-sheet__delete { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.catalog-sheet__delete .btn { margin-left: -10px; padding-left: 10px; }
.catalog-sheet__delete .field__hint { color: var(--ink-2); }
.switch-list { display: flex; flex-direction: column; gap: 8px; }

/* From the amenity and scorecard sheets to the lists behind them */
.catalog-link { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; font-size: 15px; }
.catalog-link--below { margin-left: -6px; align-self: flex-start; }
.catalog-more {
  display: none; min-height: 56px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 16px;
  background: var(--surface-alt); color: var(--ink); text-decoration: none;
}
.catalog-more__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.catalog-more__title { font-size: 15px; font-weight: 700; }
.catalog-more__sub { font-size: 13px; color: var(--muted); }

/* A question that needs an answer before anything else: delete everywhere */
.dialog {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.dialog__head { display: flex; align-items: center; gap: 12px; }
.dialog__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center; }
.dialog__title { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.dialog__body { font-size: 15px; line-height: 1.5; }
.dialog__uses { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; padding: 10px 14px; border-radius: 16px; background: var(--surface-alt); }
.dialog__group { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dialog__list { list-style: none; margin: 0; padding: 0; }
.dialog__list a { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }

@media (max-width: 719px) {
  .sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .sections::-webkit-scrollbar { display: none; }
  .section-link { flex: none; }
  .catalog { border-radius: 20px; }
  .catalog__add { padding: 14px; }
  .catalog__shows { flex-basis: 100%; }
  .catalog__shows-l { flex-basis: 100%; }
  .catalog__add-btn { flex: 1 1 auto; }
  .catalog__rows { padding: 2px 14px; }
  .catalog__failure { margin: 12px 14px 0; }
  .catalog__status { padding: 10px 14px 0; }
  .catalog__note { margin-top: -14px; }
  .catalog-row { padding: 0; }
  .catalog-row > .catalog-row__text, .catalog-row__controls { display: none; }
  .catalog-row__open { display: flex; }
  .catalog-row--failed { padding: 0 10px; }
  .catalog-link { display: none; }
  .catalog-more { display: flex; }
  .dialog { padding: 20px; border-radius: 24px; }
  .dialog__actions .btn { flex: 1 1 auto; }
}

/* ---------- Campground and site photos ---------- */
button.print { border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
button.print:hover { box-shadow: 0 22px 44px rgba(23, 38, 43, 0.24); }
.sheet-status__hint { color: var(--ink-2); font-weight: 600; }
.photos { display: flex; flex-direction: column; gap: 14px; }
.photos__alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.photos__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.photos__count { font-size: 15px; font-weight: 700; }
.photos__count-sub { font-weight: 600; color: var(--muted); }
/* The file input sits inside its label, out of sight; the label shows its focus. */
.photos__add { position: relative; cursor: pointer; }
.photos__add:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.photos__add-row { display: none; }
.photos__offline { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--warn-soft); color: var(--ink); font-size: 14px; line-height: 1.4; }
.photos__offline svg { flex: none; color: var(--warn-ink); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-alt); }
.photo-tile__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.photo-tile__open img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile__none { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--muted); }
.photo-tile--failed .photo-tile__open img { opacity: 0.55; }
.photo-tile--failed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--danger); pointer-events: none; }
.cover-badge {
  position: absolute; left: 8px; top: 8px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--cover); color: var(--on-cover);
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none;
}
.cover-badge--lg { left: 10px; top: 10px; height: 28px; padding: 0 10px; font-size: 12px; }
.cover-badge svg path, .cover-note svg path { fill: currentColor; }
.photo-tile__progress {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; padding: 6px 9px; border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 800; pointer-events: none;
}
.photo-tile__bar { position: relative; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.photo-tile__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit; background: var(--primary); animation: photo-upload 1.2s ease-in-out infinite; }
@keyframes photo-upload { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .photo-tile__bar::after { animation: none; left: 0; width: 100%; opacity: 0.5; } }
.photo-tile__waiting {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 26px; padding: 0 8px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink);
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; pointer-events: none;
}
.photo-tile__retry {
  position: absolute; left: 8px; right: 8px; bottom: 8px; min-height: 44px; border: 0; border-radius: 12px; background: var(--sel); color: var(--on-sel);
  display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 13px var(--font-body); cursor: pointer;
}
.photo-drop {
  position: relative; aspect-ratio: 1; border-radius: 16px; border: 2px dashed var(--focus); background: var(--drop-bg); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; cursor: pointer;
}
.photo-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-drop__title { font-size: 13px; font-weight: 800; }
.photo-drop__sub { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.photo-view { display: flex; flex-direction: column; gap: 14px; }
.photo-view__back { align-self: flex-start; gap: 4px; padding: 0 14px 0 8px; background: var(--surface-alt); color: var(--ink); }
.photo-view__frame { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--surface-alt); }
.photo-view__frame img { width: 100%; height: 100%; object-fit: contain; }
.photo-view__none { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 700; }
.photo-view__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.photo-view__nav--prev { left: 10px; }
.photo-view__nav--next { right: 10px; }
.photo-view__meta { font-size: 13px; font-weight: 600; color: var(--muted); }
.photo-view__notes { min-height: 72px; }
.photo-view__delete { align-self: flex-start; padding: 0 12px 0 8px; }
.photo-view > .sync-chip { align-self: flex-start; }
.cover-note { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 16px; background: var(--surface-alt); font-size: 15px; font-weight: 700; }
.cover-note svg { color: var(--cover); }
.photo-row {
  display: none; width: 100%; min-height: 60px; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: 16px;
  background: var(--surface-alt); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.photo-row__icon { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--surface); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.photo-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.photo-row__title { font-size: 15px; font-weight: 700; }
.photo-row__sub { font-size: 13px; color: var(--muted); }

@media (max-width: 719px) {
  .tab-btn--wide { display: none; }
  .photo-row { display: flex; }
  .photos__add--wide { display: none; }
  .photos__add-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
  .photos__add-row .btn { min-height: 54px; }
  .photo-drop { display: none; }
  .photo-grid { gap: 8px; }
  .photo-tile { border-radius: 14px; }
  .cover-badge { left: 6px; top: 6px; height: 24px; padding: 0 8px; }
  .photo-view__frame { border-radius: 18px; }
  /* The idle hint gives way to a full-width Done; a real status line still shows. */
  .sheet-status:has(> .sheet-status__hint) { flex: 0 0 0; min-width: 0; }
  .sheet-status__hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ---------- Trip and log-entry photos ---------- */
/* A photo can hold more than one role (an entry's main photo and the trip's cover): badges stack. */
.photo-tile__badges { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.photo-tile__badges .cover-badge { position: static; }
.photo-tile__badges--lg { left: 10px; top: 10px; }
.photo-view__display { align-self: flex-start; min-height: 48px; padding: 0 10px 0 14px; font-size: 15px; }
/* The countdown sits under the trip's name when the cover print takes the header's right side. */
.bigcard--inline { align-self: flex-start; padding: 10px 16px; border-radius: 999px; gap: 10px; }
.bigcard--inline .bigcard__n { font-size: 44px; line-height: 1; }
.bigcard--inline .bigcard__l { font-size: 18px; max-width: none; }
/* A day card opens the day from anywhere (its button stretches over it); a log entry's photo is its own button above that. */
.day-card { position: relative; cursor: default; }
.day-card__open { display: block; align-self: stretch; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.day-card__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.day-card__open:focus-visible { outline: none; }
.day-card:has(.day-card__open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.log-thumb {
  position: relative; z-index: 1; float: right; width: 56px; height: 56px; margin: 0 0 6px 12px; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--surface-alt); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.log-thumb img { width: 100%; height: 100%; object-fit: cover; }
.log-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.log-thumb--failed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--danger); }
.log-thumb__more {
  position: absolute; right: 4px; bottom: 4px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.log-thumb__waiting {
  position: absolute; left: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink);
  display: flex; align-items: center; justify-content: center;
}
.photo-strip { align-items: center; }
.photo-strip__tile, .photo-strip__add {
  position: relative; flex: none; width: 72px; height: 72px; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.photo-strip__tile { border: 0; background: var(--surface-alt); color: var(--muted); }
.photo-strip__tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip__tile--failed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--danger); }
.photo-strip__waiting {
  position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 999px; background: var(--surface); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.photo-strip__add { flex-direction: column; gap: 2px; border: 2px dashed var(--field-line); background: transparent; color: var(--ink-2); font: 700 12px var(--font-body); }
.photo-strip__tile:focus-visible, .photo-strip__add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-strip__hint { flex: 1 1 160px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.edit-row__thumb { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--surface-alt); }
.edit-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.trip-row__photo { flex: none; width: 60px; height: 60px; border-radius: 15px; overflow: hidden; background: var(--surface-alt); }
.trip-row__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 719px) {
  .log-thumb { width: 48px; height: 48px; margin-left: 8px; border-radius: 12px; }
  .bigcard--inline { padding: 8px 14px; gap: 8px; }
  .bigcard--inline .bigcard__n { font-size: 32px; }
  .bigcard--inline .bigcard__l { font-size: 15px; }
  .trip-row__photo { width: 52px; height: 56px; }
}

/* ==========================================================================
   Recipe Logbook: recipes, ingredients, cook mode and the meal plan.
   Design authority: the "Recipe Logbook — Recipes" canvas. --lb-soft (the canvas's one new
   token) marks a chosen pick-chip and the current cook step.
   ========================================================================== */
.lb-recipes { --lb-soft: #FCE3D3; }
.nett-root[data-theme="night"] .lb-recipes, .nett-root[data-theme="night"].lb-recipes { --lb-soft: #43283A; }
@media (prefers-color-scheme: dark) { .nett-root[data-theme="system"] .lb-recipes { --lb-soft: #43283A; } }

/* ---------- Cooking now ---------- */
.cooking-now {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-radius: 22px; background: var(--lb); color: var(--lb-on);
}
.cooking-now__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cooking-now__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cooking-now__name { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.cooking-now__back {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--lb-on); color: var(--lb);
  display: inline-flex; align-items: center; font-weight: 800; font-size: 15px; text-decoration: none;
}

/* ---------- Finding a recipe ---------- */
.recipe-finder__group { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.recipe-finder__label { font-size: 14px; font-weight: 700; margin-right: 2px; }
.recipe-finder__group .chips { min-width: 0; }
.recipe-count { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: -20px; }
.recipe-none {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; border-radius: 24px;
  border: 2px dashed var(--field-line); text-align: center; color: var(--ink-2);
}
.recipe-none__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.recipe-card {
  display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  color: var(--ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.recipe-card--pending { border: 2px dashed var(--field-line); }
.recipe-card__photo { position: relative; display: block; height: 150px; background: var(--surface-alt); flex: none; }
.recipe-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.recipe-card__nophoto svg { color: var(--lb-text); }
.recipe-card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; min-width: 0; }
.recipe-card__name { font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.recipe-card__desc { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.recipe-card__meta { font-size: 13px; color: var(--ink-2); }
.recipe-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.recipe-card__facts { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.recipe-card__methods { font-weight: 600; color: var(--muted); }
.recipe-card__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.recipe-card__per { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--lb-text); }
.recipe-card__per-l { font-size: 12px; font-weight: 700; color: var(--muted); }
.meal-tag { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--meal-bg); color: var(--meal-ink); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; }
.tag-mini { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-2); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; }

/* ---------- Editors ---------- */
.recipe-serves { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.lb-recipes .pick-chip[aria-pressed="true"] { background: var(--lb-soft); border: 2px solid var(--lb); color: var(--ink); }
.lb-recipes .pick-chip:not([aria-pressed="true"]) svg { color: var(--muted); }
.recipe-blocked { padding: 14px 16px; border-radius: 18px; background: var(--danger-soft); font-size: 14px; line-height: 1.45; }
.segmented--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-radius: 999px; }
.segmented--two button { height: 44px; border-radius: 999px; font-size: 15px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px; margin: -4px; }
.pick-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 16px;
  border: 1.5px solid var(--field-line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.pick-row[aria-checked="true"] { background: var(--lb-soft); border: 2px solid var(--lb); }
.pick-row__dot { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--field-line); display: flex; align-items: center; justify-content: center; }
.pick-row[aria-checked="true"] .pick-row__dot { border-color: var(--lb); }
.pick-row[aria-checked="true"] .pick-row__dot::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--lb); }
.pick-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-row__name { font-weight: 700; overflow-wrap: anywhere; }
.pick-row__sub { font-size: 13px; color: var(--muted); }
.pick-row__price { flex: none; font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--lb-text); }
.pick-row--add { border-style: dashed; border-color: var(--primary); font-weight: 700; gap: 8px; }
.pick-list__empty { padding: 4px 6px; }
.recipe-quick-add { border-radius: 18px; background: var(--surface-alt); padding: 14px; }
.amount-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.amount-row__input { width: 110px; height: 56px; font-family: var(--font-display); font-size: 28px; font-weight: 900; text-align: center; }
.chip--frac { min-width: 44px; padding: 0 10px; font-size: 18px; }
.linked-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--lb-soft); font-size: 14px; line-height: 1.4; }
.linked-note svg { flex: none; color: var(--lb-text); }
.cost-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface-alt); font-size: 15px; font-weight: 700; }
.cost-strip__n { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--lb-text); }
.unit-picker { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.unit-picker__group { display: flex; flex-direction: column; gap: 6px; }
.unit-picker__kind { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.unit-picker .chip { min-width: 52px; }
.step-badge { flex: none; min-width: 44px; font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 0.85; color: var(--lb-text); text-align: center; }
.time-row { display: flex; align-items: center; gap: 10px; }
.time-row__n { width: 96px; height: 56px; font-family: var(--font-display); font-size: 32px; font-weight: 900; text-align: center; }
.time-row__unit { flex: 1; }
.total-strip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--lb-soft); }
.total-strip svg { flex: none; color: var(--lb-text); }
.total-strip__l { flex: 1; font-size: 14px; font-weight: 600; }
.total-strip__n { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--lb-text); white-space: nowrap; }
.chips--fill > .chip { flex: 1 1 0; }
.cook-serves { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- The recipe page ---------- */
.recipe-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.method-chip { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--chip); color: var(--sc-ink); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; }
.recipe-lede { font-size: 16px; line-height: 1.45; color: var(--ink-2); margin-bottom: -12px; }
.recipe-actions__cook { font-weight: 800; }
.only-narrow-flex { display: none; }
.recipe-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.recipe-cols > .recipe-lines { flex: 1 1 400px; }
.recipe-cols > .recipe-steps { flex: 999 1 520px; }
.recipe-cols--low > .recipe-notes { flex: 1 1 340px; }
.recipe-cols--low > .recipe-card-block { flex: 999 1 520px; }
.recipe-block__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recipe-block__title { font-size: 26px; font-weight: 800; }
.recipe-block__title--sm { font-size: 22px; }
.recipe-lines { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.recipe-lines__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.recipe-lines__empty { padding: 4px 0; }
.scaled-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px 0 14px; border-radius: 14px; background: var(--lb-soft); font-size: 14px; font-weight: 700; }
.line-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.line-row { display: grid; grid-template-columns: 56px 40px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; min-height: 58px; padding: 4px 0; border-top: 1px solid var(--line); }
.line-row--pending { border-top-style: dashed; }
.line-row.is-failed { border-radius: 14px; padding: 4px 6px; }
.line-row__qty { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-align: right; line-height: 1; }
.line-row__unit { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.line-row__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.line-row__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.line-row__name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.line-row__linked { display: inline-flex; color: var(--lb-text); }
.line-row__note { font-size: 13px; color: var(--muted); }
.line-row__cost { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.recipe-lines__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 2px solid var(--ink); }
.recipe-lines__total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.recipe-lines__total-l { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.recipe-lines__per { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--lb-text); }
.recipe-steps { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 16px 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.step-card--pending { border: 2px dashed var(--field-line); }
.step-card__n { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 0.85; color: var(--lb-text); }
.step-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-card__title { font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.step-card__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.step-card__move { display: flex; flex-direction: column; gap: 4px; }
.step-card__move .icon-btn[disabled] { opacity: 0.4; cursor: default; }
.time-chip { height: 28px; padding: 0 10px; border-radius: 999px; background: var(--surface-alt); font-size: 13px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.recipe-card-block { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.made-list { list-style: none; margin: 0; padding: 0; }
.made-row { display: flex; align-items: center; gap: 8px; min-height: 56px; border-top: 1px solid var(--line); }
.made-row.is-failed { border-radius: 14px; padding: 0 6px; }
.made-row__open { flex: 1; min-width: 0; min-height: 56px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.made-row__date { font-family: var(--font-display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.made-row__main { min-width: 0; display: flex; flex-direction: column; }
.made-row__for { font-size: 15px; font-weight: 700; }
.made-row__note { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.made-row__confirm { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 0; font-size: 14px; }
.status-chip--cooking { background: var(--lb); color: var(--lb-on); }
.status-chip--done { background: var(--surface-alt); color: var(--ink-2); }

@media (max-width: 719px) {
  .recipe-finder .recipe-finder__group { flex-wrap: nowrap; }
  .recipe-finder__label { display: none; }
  .recipe-finder .finder__sort { flex: 1 1 100%; order: 2; }
  .recipe-finder .finder__sort .input { flex: 1; width: 100%; }
  .recipe-count { margin-bottom: -16px; }
  .recipe-grid { grid-template-columns: 1fr; gap: 8px; }
  .recipe-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; }
  .recipe-card__photo { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
  .recipe-card__nophoto span { display: none; }
  .recipe-card__body { padding: 0; gap: 2px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .recipe-card__name { flex: 1 1 100%; font-size: 16px; }
  .recipe-card__desc { display: none; }
  .recipe-card__meta { flex: 1 1 100%; }
  .recipe-card__tags { flex: 1 1 auto; }
  .recipe-card__foot { margin: 0; padding: 0; border: 0; flex: none; position: absolute; }
  .recipe-card { position: relative; }
  .recipe-card__body { padding-right: 64px; }
  .recipe-card__foot { right: 12px; top: 50%; transform: translateY(-50%); }
  .recipe-card__facts { display: none; }
  .recipe-card__per { font-size: 22px; }
  .cooking-now { border-radius: 20px; padding: 10px 10px 10px 14px; gap: 10px; }
  .cooking-now__name { font-size: 15px; }
  .cooking-now__back { padding: 0 14px; font-size: 14px; }

  .recipe-actions .recipe-actions__cook { flex: 1 1 100%; min-height: 54px; }
  .recipe-actions .btn:not(.recipe-actions__cook) { flex: 1 1 0; }
  .recipe-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recipe-facts .fact { order: 0; }
  .only-narrow-flex { display: flex; }
  .recipe-lines { padding: 14px; border-radius: 20px; }
  .line-row { grid-template-columns: 44px 34px minmax(0, 1fr) 44px; gap: 6px; }
  .line-row__qty { font-size: 22px; }
  .recipe-block__title { font-size: 22px; }
  .step-card { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 20px; }
  .step-card__n { font-size: 36px; }
  .step-card__title { font-size: 16px; }
  .step-card__text { font-size: 15px; }
  .made-row__open { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; }
  .made-row__date { font-size: 20px; }
  .recipe-serves { grid-template-columns: 1fr; }
}

/* ---------- Cook mode ---------- */
.cook-bar { position: sticky; top: calc(63px + env(safe-area-inset-top)); z-index: 10; background: var(--bar); border-bottom: 1px solid var(--line); }
.cook-bar__inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 14px; }
.cook-bar__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.cook-bar__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.cook-bar__title { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.cook-bar__sub { font-size: 14px; color: var(--ink-2); }
.cook-bar__awake { flex: none; }
.cook-progress { height: 6px; background: var(--surface-alt); }
.cook-progress__bar { display: block; height: 100%; background: var(--lb); transition: width 0.2s ease; }
.cook-tabs { margin: 10px 16px; align-self: stretch; }
.cook-tabs .tab-btn { flex: 1 1 0; }
.cook__page { padding-top: 20px; }
.cook__done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cook__done svg { flex: none; }
.cook-cols { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.cook-ings, .cook-steps { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cook-ings { padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.check-list { display: flex; flex-direction: column; }
.check-row {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: 28px 48px 36px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0;
  border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.check-row__box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--field-line); display: flex; align-items: center; justify-content: center; }
.check-row[aria-checked="true"] .check-row__box { background: var(--lb); border-color: var(--lb); color: var(--lb-on); }
.check-row__qty { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-align: right; }
.check-row__unit { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.check-row__main { min-width: 0; display: flex; flex-direction: column; }
.check-row__name { font-weight: 700; overflow-wrap: anywhere; }
.check-row__note { font-size: 13px; color: var(--muted); }
.check-row[aria-checked="true"] .check-row__name, .check-row[aria-checked="true"] .check-row__qty { color: var(--muted); text-decoration: line-through; }
.cook-step { width: 100%; border-radius: 20px; font: inherit; color: var(--ink); text-align: left; }
.cook-step--done {
  min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); background: var(--surface-alt); cursor: pointer;
}
.cook-step__tick { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--lb); color: var(--lb-on); display: flex; align-items: center; justify-content: center; }
.cook-step__line { flex: 1; min-width: 0; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.cook-step__done { font-size: 13px; font-weight: 800; color: var(--muted); }
.cook-step--now { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 2px solid var(--lb); background: var(--lb-soft); }
.cook-step__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cook-step__n { flex: none; font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 0.8; color: var(--lb-text); }
.cook-step__n--sm { font-size: 34px; min-width: 30px; text-align: center; }
.cook-step__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.cook-step__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.cook-step__title { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.cook-step__text { font-size: 19px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.cook-step--now .btn { align-self: flex-start; }
.cook-step--next { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.cook-step--next .cook-step__title { font-size: 16px; }
.cook-step__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cook-step__text--clip { font-size: 14px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cook-step__time { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cook-notes { margin-top: 8px; }
.cook-foot { display: none; }

@media (max-width: 719px) {
  .cook-bar { top: calc(57px + env(safe-area-inset-top)); }
  .cook-bar__inner { padding: 8px 12px; gap: 10px; }
  .cook-bar__title { font-size: 19px; }
  .cook-bar__kicker { font-size: 11px; }
  .cook-cols { display: block; }
  .cook-ings, .cook-steps { display: none; }
  .cook-ings.is-shown, .cook-steps.is-shown { display: flex; }
  .cook-ings { padding: 0; border: 0; background: transparent; }
  .cook-step--now { padding: 16px; }
  .cook-step__n { font-size: 52px; }
  .cook-step__text { font-size: 18px; }
  .cook__page { padding-bottom: 150px; }
  .cook-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: fixed; left: 0; right: 0; z-index: 15;
    bottom: calc(84px + env(safe-area-inset-bottom)); padding: 10px 16px 8px; background: var(--bar); border-top: 1px solid var(--line);
  }
  .cook-foot .link { align-self: center; min-height: 40px; }
}

/* ---------- Ingredients (the pantry) and their price ledger ---------- */
.pantry__back { display: none; }
.pantry__finder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pantry__search { flex: 1 1 280px; max-width: 420px; }
.pantry__cats { flex: 1 1 360px; }
.pantry__add { flex: none; }
.pantry__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.pantry__list { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pantry__aside { flex: 1 1 380px; min-width: 0; position: sticky; top: 84px; }
.pantry-group { display: flex; flex-direction: column; gap: 6px; }
.pantry-group__title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.pantry-group__rows { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.pantry-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; gap: 12px; align-items: center; min-height: 60px; padding: 6px 16px;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.pantry-row:first-child { border-top: 0; }
.pantry-row[aria-current="true"] { background: var(--lb-soft); box-shadow: inset 4px 0 0 var(--lb); }
.pantry-row__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pantry-row__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.pantry-row__note { font-size: 13px; color: var(--muted); }
.pantry-row__date { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pantry-row__price { text-align: right; font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--lb-text); white-space: nowrap; }
.ingredient-panel { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.ingredient-panel > .sync-chip { align-self: flex-start; }
.ingredient-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ingredient-panel__titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ingredient-panel__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.ingredient-panel__name { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.ingredient-panel__note { font-size: 14px; color: var(--muted); }
.ingredient-panel__price { display: flex; align-items: baseline; gap: 8px; }
.ingredient-panel__n { font-family: var(--font-display); font-size: 56px; font-weight: 900; line-height: 0.9; color: var(--lb-text); }
.ingredient-panel__per { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.ingredient-panel__one { padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); font-size: 14px; color: var(--ink-2); }
.price-trend { display: block; width: 100%; height: 90px; overflow: visible; }
.price-trend__base { stroke: var(--line); stroke-width: 1.5; fill: none; }
.price-trend__line { stroke: var(--lb-text); stroke-width: 3; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.price-trend__dot { fill: var(--lb-text); }
.price-trend__now { fill: var(--surface); stroke: var(--lb-text); stroke-width: 3; }
.price-trend__months { display: flex; justify-content: space-between; margin-top: -8px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ledger { display: flex; flex-direction: column; }
.ledger__title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.ledger__row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; border-top: 1px solid var(--line); }
.ledger__row--pending { border-top-style: dashed; }
.ledger__date { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.ledger__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ledger__paid { font-size: 14px; font-weight: 700; }
.ledger__note { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ledger__unit { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--lb-text); }
.used-in { display: flex; flex-direction: column; gap: 4px; }
.used-in__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--surface-alt); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.used-in__amount { color: var(--ink-2); white-space: nowrap; }
.purchase-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchase-row .input { height: 60px; font-family: var(--font-display); font-size: 30px; font-weight: 900; }
.works-out { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: var(--lb-soft); }
.works-out__kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-text); }
.works-out__line { display: flex; align-items: baseline; gap: 8px; }
.works-out__n { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 0.9; color: var(--lb-text); }
.works-out__per { font-size: 17px; font-weight: 700; color: var(--ink-2); }
.works-out__compare { font-size: 14px; font-weight: 700; color: var(--ink-2); }

@media (max-width: 719px) {
  .pantry--picked .pantry__hero, .pantry--picked .pantry__nav, .pantry--picked .pantry__finder, .pantry--picked .pantry__list { display: none; }
  .pantry--picked .pantry__back { display: inline-flex; margin-top: 12px; background: var(--surface-alt); color: var(--ink); }
  .pantry:not(.pantry--picked) .pantry__aside { display: none; }
  .pantry__aside { position: static; flex-basis: 100%; }
  .pantry__search { max-width: none; flex-basis: 100%; }
  .pantry__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .pantry__add { flex: 1 1 100%; }
  .pantry-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pantry-row__date { display: none; }
  .pantry-row__price { font-size: 20px; }
  .ingredient-panel { padding: 16px; border-radius: 20px; }
  .ingredient-panel__n { font-size: 48px; }
}

/* ---------- The meal plan week and its shopping list ---------- */
.hero__btn-on-sky { background: var(--chip); color: var(--sc-ink); }
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.week-nav__title { font-family: var(--font-display); font-size: 30px; font-weight: 900; text-transform: uppercase; line-height: 1; }
.week-nav__range { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.week-nav .spacer { flex: 1; }
.plan__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.week { flex: 999 1 560px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.week-day {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line);
}
.week-day--today { border: 2px solid var(--primary); }
.week-day--focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb) 30%, transparent); }
.week-day__head { flex: none; display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.week-day__today { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-text); }
.week-day__event { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--surface-alt); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.plan-meal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 56px; padding: 6px 14px; border-radius: 16px;
  border: 0; background: var(--meal-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; max-width: 100%;
}
.plan-meal--pending { outline: 2px dashed var(--field-line); outline-offset: -2px; }
.plan-meal__type { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meal-ink); }
.plan-meal__name { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.plan-meal__meta { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.week-day__add {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px dashed var(--field-line);
  background: transparent; color: var(--ink-2); font: 700 14px var(--font-body); cursor: pointer;
}
.plan__shop { flex: 1 1 340px; min-width: 0; position: sticky; top: 84px; }
.shop { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.shop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shop__count { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.shop__progress { border-radius: 999px; overflow: hidden; }
.shop__group { display: flex; flex-direction: column; }
.shop__type { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.shop__row { grid-template-columns: 28px minmax(0, 1fr); }
.shop__row--pending { border-top-style: dashed; }
.shop__row[disabled] { cursor: progress; }
.week-glance { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.week-glance__day {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.week-glance__day--today { border: 2px solid var(--primary); }
.week-glance__dow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.week-glance__n { font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 0.9; }
.week-glance__meals { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.week-glance__meal { overflow-wrap: anywhere; font-weight: 700; }
.week-glance__type { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meal-ink); }
.week-glance__none { color: var(--muted); }

@media (max-width: 899px) {
  .week-glance { grid-template-columns: 1fr; gap: 6px; }
  .week-glance__day { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; }
  .week-glance__n { font-size: 24px; width: 32px; }
  .week-glance__dow { width: 44px; }
  .week-glance__meals { flex: 1; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
}
@media (max-width: 719px) {
  .plan__hero .hero__inner { padding-bottom: 120px; }
  .plan:not(.plan--shopping) .plan__shop { display: none; }
  .plan--shopping .week { display: none; }
  .plan__shop { position: static; flex-basis: 100%; }
  .shop { padding: 14px; border-radius: 20px; }
  .week-nav__title { font-size: 24px; }
  .week-day { padding: 10px; border-radius: 20px; }
  .plan-meal { flex: 1 1 100%; }
  .week-day__add { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Property Logbook: the garage, upkeep, properties and floor plans.
   Design authority: the "Property Logbook" canvas. Harbor blue by day, sky blue by night.
   ========================================================================== */

/* ---------- Tint: the soft wash behind chosen rows and group chips ---------- */
.lb-property { --lb-soft: #DCE9F5; }
.nett-root[data-theme="night"] .lb-property, .nett-root[data-theme="night"].lb-property { --lb-soft: #24365A; }
@media (prefers-color-scheme: dark) { .nett-root[data-theme="system"] .lb-property { --lb-soft: #24365A; } }

/* ---------- View only, empty ---------- */
.view-only { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--surface-alt); color: var(--ink); font-size: 14px; line-height: 1.45; }
.view-only svg { flex: none; color: var(--ink-2); }
.empty-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; border-radius: 22px; border: 2px dashed var(--field-line);
  text-align: center;
}
.empty-card__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.empty-card__text { font-size: 15px; color: var(--ink-2); max-width: 340px; }

/* ---------- Overview ---------- */
.pl-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.pl-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pl-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stats--2 .stat { padding: 14px 18px; }
.stats--2 .stat__n { font-size: 40px; }
.done-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.done-row__check { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--success-soft); color: var(--success-ink); display: flex; align-items: center; justify-content: center; }
.done-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.done-row__type { font-weight: 700; overflow-wrap: anywhere; }
.done-row__meta { font-size: 13px; color: var(--muted); }
.done-row__cost { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Coming up: the date tile, the due chip ---------- */
.due-list { display: flex; flex-direction: column; gap: 10px; }
.due-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.due-row--over { border: 2px solid var(--danger); }
.due-tile {
  flex: none; width: 64px; height: 72px; border-radius: 16px; background: var(--surface-alt); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display);
}
.due-tile--over { background: var(--danger-soft); }
.due-tile--soon { background: var(--cover); color: var(--on-cover); }
.due-tile__top { font-size: 15px; font-weight: 800; text-transform: uppercase; }
.due-tile__n { font-size: 34px; font-weight: 900; line-height: 0.9; }
.due-tile__n--k { font-size: 26px; }
.due-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.due-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.due-row__type { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.due-row__meta { font-size: 14px; color: var(--ink-2); }
.due-row__meta strong { color: var(--ink); }
.due-row__log { flex: none; }
.due-chip {
  flex: none; height: 26px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 800; white-space: nowrap; background: var(--surface-alt); color: var(--ink-2);
}
.due-chip--over { background: var(--danger-soft); color: var(--ink); }
.due-chip--soon { background: var(--warn-soft); color: var(--warn-ink); }

/* ---------- Garage cards (rows on phones) ---------- */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.asset-card {
  display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  color: var(--ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.asset-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.asset-card--pending { border: 2px dashed var(--field-line); }
.asset-card--over { border: 2px solid var(--danger); }
.asset-card--sold { background: var(--surface-alt); }
.asset-card--sold .asset-card__photo img { opacity: 0.6; }
.asset-card__photo { position: relative; display: block; height: 140px; background: var(--surface-alt); flex: none; }
.asset-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.asset-card__nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.asset-card__nophoto svg { color: var(--lb-text); }
.asset-card__body {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; padding: 12px 16px 16px;
  grid-template-areas: "name kind" "ymm ymm" "sync sync" "rule rule" "due n";
}
.asset-card__name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.asset-card__kind { grid-area: kind; align-self: baseline; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.asset-card__ymm { grid-area: ymm; font-size: 14px; color: var(--ink-2); }
.asset-card__sync { grid-area: sync; }
.asset-card__rule { grid-area: rule; height: 1px; margin-top: 2px; background: var(--line); }
.asset-card__due { grid-area: due; align-self: center; min-width: 0; }
.asset-card__due .due-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.asset-card__n { grid-area: n; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.asset-card__num { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--lb-text); white-space: nowrap; }
.asset-card--sold .asset-card__num { color: var(--ink-2); }
.asset-card__nl { font-size: 11px; font-weight: 700; color: var(--muted); }
.sold-stamp {
  flex: none; height: 20px; padding: 0 6px; border-radius: 6px; border: 2px solid var(--ink-2); color: var(--ink-2);
  font-family: var(--font-body); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center;
}
.sold-stamp--lg { height: 30px; padding: 0 10px; font-size: 13px; border-color: var(--sc-ink); color: var(--sc-ink); }
.chip__count { font-weight: 700; opacity: 0.8; }
.finder-count { margin-top: -22px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- A vehicle's page ---------- */
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--chip);
  color: var(--sc-ink); font-size: 14px; font-weight: 700;
}
.hero-chip--person { padding-left: 6px; }
.trip-block__aside { font-size: 14px; font-weight: 700; color: var(--muted); }
.log-table { display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); padding: 0 16px; }
.log-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 84px; gap: 14px; align-items: center; min-height: 62px; padding: 8px 0;
  border: 0; border-top: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; background: transparent; width: 100%;
}
.log-row:first-child { border-top: 0; }
.log-row.is-failed { margin: 4px -8px; padding: 8px; border-radius: 14px; width: auto; }
.log-row__date { display: flex; flex-direction: column; line-height: 1; }
.log-row__day { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; }
.log-row__year { font-size: 12px; font-weight: 700; color: var(--muted); }
.log-row__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.log-row__type { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.log-row__who { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.log-row__reading { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.log-row__cost { text-align: right; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-list { margin: 0; display: flex; flex-direction: column; }
.detail-list__row { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.4fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.detail-list__row:first-child { border-top: 0; }
.detail-list__row dt { font-weight: 700; color: var(--ink-2); }
.detail-list__row dd { margin: 0; overflow-wrap: anywhere; }
.note-card .link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- The vehicle and trailer editor ---------- */
.form-group-title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-text); }
.form-row--3 { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.form-row--4 { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.kind-pick { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
.kind-pick .tab-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; }
.tab-btn[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }
.person-chip[role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); border-color: var(--primary); font-weight: 700; }
.asset-editor__later { display: none; }
.lb-property .hero__text > .sync-chip { align-self: flex-start; }
/* Between phone and wide desktop the print would wrap under the title and cover the first row: keep it beside the title. */
@media (min-width: 720px) {
  .lb-property .hero--print .hero__inner { flex-wrap: nowrap; }
  .lb-property .hero--print .print--wide { flex: 0 1 420px; min-width: 280px; }
}

@media (max-width: 719px) {
  .due-row { padding: 10px 12px 10px 10px; gap: 12px; border-radius: 20px; flex-wrap: wrap; }
  .due-tile { width: 52px; height: 58px; border-radius: 15px; }
  .due-tile__top { font-size: 13px; }
  .due-tile__n { font-size: 28px; }
  .due-tile__n--k { font-size: 20px; }
  .due-row__type { font-size: 16px; }
  .due-row__meta { font-size: 13px; }
  .due-row__log { flex: 1 1 100%; }

  .asset-grid { grid-template-columns: 1fr; gap: 8px; }
  .asset-card:not(.asset-card--tile) { flex-direction: row; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; }
  .asset-card:not(.asset-card--tile) .asset-card__photo { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
  .asset-card:not(.asset-card--tile) .asset-card__nophoto-l { display: none; }
  .asset-card:not(.asset-card--tile) .asset-card__body {
    padding: 0; row-gap: 3px; grid-template-areas: "name n" "ymm n" "due n" "sync n";
  }
  .asset-card:not(.asset-card--tile) .asset-card__name { font-family: var(--font-body); font-size: 16px; }
  .asset-card:not(.asset-card--tile) .asset-card__kind, .asset-card:not(.asset-card--tile) .asset-card__rule { display: none; }
  .asset-card:not(.asset-card--tile) .asset-card__ymm { font-size: 13px; }
  .asset-card:not(.asset-card--tile) .asset-card__due { justify-self: start; }
  .asset-card:not(.asset-card--tile) .asset-card__due .due-chip { height: 24px; padding: 0 8px; }
  .asset-card:not(.asset-card--tile) .asset-card__n { align-self: center; }
  .asset-grid--strip { display: flex; overflow-x: auto; gap: 10px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .asset-grid--strip::-webkit-scrollbar { display: none; }
  .asset-card--tile { flex: none; width: 200px; border-radius: 20px; }
  .asset-card--tile .asset-card__photo { height: 96px; }
  .asset-card--tile .asset-card__body { padding: 8px 12px 12px; row-gap: 4px; }
  .asset-card--tile .asset-card__name { font-size: 16px; }
  .asset-card--tile .asset-card__ymm { font-size: 12px; }
  .asset-card--tile .asset-card__kind, .asset-card--tile .asset-card__n { display: none; }
  .asset-card--tile .asset-card__body { grid-template-areas: "name name" "ymm ymm" "sync sync" "rule rule" "due due"; }

  .stats--2 .stat__n { font-size: 30px; }
  .finder-count { margin-top: -18px; }
  .hero-chip { height: 30px; padding: 0 10px; font-size: 13px; }
  .log-table { padding: 0 12px; }
  .log-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .log-row__reading { display: none; }
  .log-row__day { font-size: 18px; }

  .asset-editor--new .asset-editor__more { display: none; }
  .asset-editor--new .asset-editor__later { display: block; }
}

/* ---------- Upkeep: logging a service, the family-wide log, kinds of upkeep ---------- */
.btn--chip { background: var(--chip); color: var(--sc-ink); }
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__label-row .link { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
.chips--sm .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }
.chip--suggest { border-style: dashed; font-weight: 700; }
.quick-kind { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--ground); }
.service-from { display: flex; align-items: flex-start; gap: 10px; }
.service-from svg { flex: none; margin-top: 2px; color: var(--lb-text); }
.editor__section:focus { outline: none; }
.due-line { display: flex; align-items: center; gap: 8px; }
.due-line > .due-row { flex: 1; min-width: 0; }
.due-line__more { flex: none; }
.due-group { display: flex; flex-direction: column; gap: 10px; }
.due-group__title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.due-group__title--over { color: var(--danger); }
.upkeep-filter { margin-top: -4px; }
.log-row--open { cursor: pointer; border-radius: 0; }
.log-row--open:hover { background: var(--surface-alt); }
.log-month { display: flex; flex-direction: column; gap: 8px; }
.log-month__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.log-month__title { font-size: 19px; font-weight: 800; }
.log-month__total { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.spent-total { font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1; color: var(--lb-text); }
.spent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.spent-row__name { font-weight: 700; overflow-wrap: anywhere; }
.spent-row__n { font-size: 13px; color: var(--muted); }
.spent-row__cost { font-weight: 800; font-variant-numeric: tabular-nums; }
.kind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.kind-row__name { font-weight: 700; overflow-wrap: anywhere; }
.kind-row__tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.kind-builtin { margin-left: 8px; vertical-align: middle; }
.catalog-row__open[disabled] { cursor: default; }
/* A blocked Delete shares the footer row with Cancel and Save; why it is blocked wraps under it. */
.lb-property .delete-blocked { flex: 1 1 200px; min-width: 0; align-items: flex-start; }

@media (max-width: 719px) {
  .due-line { align-items: flex-start; }
  .due-line__more { margin-top: 10px; }
  .log-month__title { font-size: 17px; }
}

/* ---------- Properties: cards (the Dash board's Properties) ---------- */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.prop-card {
  display: flex; min-height: 170px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; color: var(--ink); text-decoration: none;
}
.prop-card:hover { border-color: var(--field-line); }
.prop-card__photo { flex: none; width: 180px; background: var(--surface-alt); }
.prop-card__photo img, .prop-card__photo svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.prop-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.prop-card__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-head); font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.prop-card__address { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.prop-card__spacer { flex: 1; }
.prop-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.prop-card__fact { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.prop-card__n { font-family: var(--font-display); font-size: 24px; font-weight: 900; }
.prop-card__n--tint { color: var(--lb-text); }
.prop-card__l { font-size: 12px; font-weight: 700; color: var(--muted); }
.prop-card--sold { opacity: 0.85; }
@media (max-width: 519px) {
  .prop-card { flex-direction: column; }
  .prop-card__photo { width: 100%; height: 132px; }
}

/* ---------- One property: the header's address ---------- */
.hero__link { color: var(--sc-sub); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; width: fit-content; }
.hero__link:hover { color: var(--ink); }

/* ---------- The inventory: two panes on wide screens, one column on phones ---------- */
.inventory { display: flex; flex-direction: column; gap: 12px; }
.inventory__title { margin: 0; font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.inv-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.inv-nav { flex: 1 1 320px; max-width: 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.inv-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  .inv-nav { padding: 12px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
}
@media (max-width: 899px) {
  .inv-nav { flex-basis: 100%; max-width: none; }
  .inv-outline { display: none; }
}
.inv-results { display: flex; flex-direction: column; gap: 2px; }
.inv-results__count { padding: 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.inv-hit {
  min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.inv-hit:hover { background: var(--surface-alt); }
.inv-hit__name { font-size: 15px; font-weight: 700; }
.inv-hit__path { font-size: 12px; color: var(--muted); }
@media (max-width: 899px) {
  .inv-results { padding: 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
}

/* ---------- The outline ---------- */
.outline { display: flex; flex-direction: column; gap: 2px; }
.outline__root {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); font: 800 15px var(--font-body); text-align: left; cursor: pointer;
}
.outline__root svg { color: var(--lb-text); }
.outline__row { display: flex; align-items: center; gap: 2px; min-height: 44px; padding-left: var(--outline-indent, 0); border-radius: 12px; }
.outline__row--on, .outline__root.outline__row--on { background: var(--lb-soft); }
.outline__toggle {
  flex: none; width: 36px; height: 44px; border: 0; background: transparent; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px;
}
.outline__toggle[aria-hidden="true"] { cursor: default; }
.outline__pick {
  flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 2px; border: 0; background: transparent;
  color: var(--ink); text-align: left; font: 600 15px var(--font-body); cursor: pointer;
}
.outline__pick--top { font-weight: 700; }
.outline__row--on .outline__pick { font-weight: 800; }
.outline__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline__count { font-size: 12px; font-weight: 800; color: var(--muted); }

/* ---------- One item: crumbs, head, attributes, what's inside ---------- */
.item-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crumb {
  height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-alt); color: var(--ink);
  font: 700 14px var(--font-body); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb[aria-current="page"] { background: var(--sel); color: var(--on-sel); font-weight: 800; }
.crumb__sep { display: flex; color: var(--muted); }
.item-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.item-head__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-head__name { margin: 0; font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.item-head__name:focus { outline: none; }
/* Focused when another item opens: clear of the sticky app bar, with the crumbs above it in view. */
.item-head__name { scroll-margin-top: 140px; }
.fact__n--text { font-family: var(--font-body); font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.item-head__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; }
.item-head__actions { flex: none; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item-head__delete { color: var(--danger); }
.lb-property .item-panel .type-chip, .lb-property .item-tile .type-chip { height: 28px; padding: 0 11px; background: var(--lb-soft); color: var(--lb-text); font-size: 13px; }
.lb-property .item-tile .type-chip { height: 24px; padding: 0 9px; font-size: 12px; }
.attr-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.attr { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--ground); border: 1px solid var(--line); min-width: 0; }
.attr__name { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.attr__value { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.attr__value--num { font-family: var(--font-display); font-size: 30px; font-weight: 900; }
.attr__unit { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ink-2); margin-left: 4px; }
.inside { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.inside__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.inside__title { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.inside__pills .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }
.item-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.item-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-width: 0;
}
.item-tile:hover { border-color: var(--field-line); }
.item-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.item-tile__name { font-weight: 800; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.item-tile__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.item-tile__meta span { display: inline-flex; align-items: center; gap: 5px; }
.item-panel .issue.confirm { margin: 0; }
@media (max-width: 719px) {
  .item-panel { padding: 16px; }
  /* The Item phone board: one list, the name on the left and the value on the right. */
  .attr-list { display: flex; flex-direction: column; gap: 0; padding: 2px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
  .attr { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .attr:last-child { border-bottom: 0; }
  .attr__name { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .attr__value { text-align: right; font-size: 15px; }
  .item-head__name { font-size: 26px; }
  .item-head__actions { flex-basis: 100%; }
  .attr__value--num { font-size: 26px; }
}

/* ---------- The item editor ---------- */
.place-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); }
.place-row > svg { flex: none; color: var(--lb-text); }
.place-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.place-row__label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.place-row__path { font-weight: 700; overflow-wrap: anywhere; }
.place-row .link { flex: none; min-height: 44px; }
.attr-grid__head, .attr-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 112px minmax(0, 1fr) 64px 44px; gap: 6px; align-items: center; }
.attr-grid__head { padding: 0 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.attr-row .input { height: 46px; padding: 0 12px; border-radius: 12px; font-size: 15px; min-width: 0; }
.attr-row .input:disabled { background: var(--surface-alt); }
.attr-row__error { grid-column: 1 / -1; }
.attr-row--bad .attr-row__name, .attr-row--bad .attr-row__value { border-color: var(--danger); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; height: 46px; border-radius: 12px; background: var(--surface-alt); }
.seg__btn { border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.seg__btn[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.suggest { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--lb-soft); }
.suggest__label { font-size: 13px; font-weight: 700; }
.chip__hint { font-size: 12px; font-weight: 700; color: var(--muted); }
.item-editor__delete { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 719px) {
  .attr-grid__head { display: none; }
  .attr-row { grid-template-columns: minmax(0, 1fr) 112px 44px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); }
  .attr-row__name { grid-column: 1 / 2; }
  .attr-row__kind { grid-column: 2 / 3; }
  .attr-row__remove { grid-column: 3 / 4; grid-row: 1; }
  .attr-row__value { grid-column: 1 / 3; }
  .attr-row__unit { grid-column: 3 / 4; }
}

/* ---------- Where an item goes (the Move board) ---------- */
.place-picker { display: flex; flex-direction: column; gap: 10px; }
.place-list { display: flex; flex-direction: column; gap: 4px; max-height: min(52vh, 460px); overflow: auto; padding: 2px; }
.place {
  min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px calc(12px + var(--place-indent, 0px));
  border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.place:hover { background: var(--surface-alt); }
.place[aria-checked="true"] { background: var(--lb-soft); border-color: var(--lb-text); }
.place--off { color: var(--muted); cursor: default; }
.place--off:hover { background: transparent; }
.place__dot { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--field-line); }
.place[aria-checked="true"] .place__dot { border-color: var(--lb-text); background: radial-gradient(var(--lb-text) 45%, transparent 50%); }
.place--off .place__dot { border-color: var(--line); }
.place__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.place__name { font-weight: 700; overflow-wrap: anywhere; }
.place__sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.move-summary { flex: 1 1 100%; }
.place-picker--fill .place-list { max-height: calc(100dvh - 300px); min-height: 220px; }

/* ---------- Groups: the add form has no switches ---------- */
.note-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Floor plans: the viewer (the Floor boards) ---------- */
.plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-toolbar__property { min-width: 220px; }
.plan-toolbar__property .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan-toolbar__counts { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.plan-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.plan-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.plan-drawing { position: relative; width: 100%; }
.plan-drawing > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan-room { fill: var(--surface-alt); cursor: pointer; }
.plan-room--on { fill: var(--lb-soft); stroke: var(--lb); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.plan-wall-cover { fill: var(--field-line); fill-opacity: 0.45; }
.plan-wall { fill: var(--ink); }
.plan-shape-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.plan-shape-fill { stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.plan-shape-line, .plan-shape-dashed { fill: none; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.plan-shape-dashed { stroke-dasharray: 6 4; }
.plan-window.plan-shape-fill { fill: var(--lb-soft); stroke: var(--lb-text); }
.plan-window.plan-shape-line, .plan-window.plan-shape-dashed { stroke: var(--lb-text); }
.plan-door.plan-shape-fill { fill: var(--surface); stroke: var(--ink-2); }
.plan-door.plan-shape-line, .plan-door.plan-shape-dashed { stroke: var(--ink-2); }
.plan-fixture.plan-shape-fill { fill: var(--surface-alt); stroke: var(--ink-2); }
.plan-fixture.plan-shape-line, .plan-fixture.plan-shape-dashed { stroke: var(--ink-2); }
.plan-chip {
  position: absolute; transform: translate(-50%, -50%); min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 700 13px var(--font-body); display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); cursor: pointer;
}
.plan-chip svg { color: var(--lb-text); }
.plan-chip--on { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
.plan-chip--on svg { color: inherit; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.plan-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend__swatch { display: inline-block; width: 22px; }
.plan-legend__swatch--wall { height: 4px; background: var(--ink); }
.plan-legend__swatch--window { height: 0; border-top: 3px double var(--lb-text); }
.plan-room-chips .chip svg { color: var(--lb-text); }
.plan-room-chips .chip[aria-pressed="true"] svg { color: inherit; }

/* The room beside the plan */
.plan-room-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.plan-room-card > .kicker { color: var(--lb-text); margin-bottom: -10px; }
.plan-room-card__name { margin: 0; font-family: var(--font-head); font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.plan-room-card__sub { margin-top: -10px; font-size: 14px; color: var(--ink-2); }
.plan-link { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px; border-radius: 16px; background: var(--lb-soft); color: var(--ink); text-decoration: none; }
.plan-link > svg:first-child { flex: none; color: var(--lb-text); }
.plan-link > svg:last-child { flex: none; color: var(--ink-2); }
.plan-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.plan-link__title { font-weight: 800; overflow-wrap: anywhere; }
.plan-link__sub { font-size: 13px; color: var(--ink-2); }
.plan-unlinked { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 2px dashed var(--field-line); font-size: 14px; line-height: 1.4; }
.plan-things { display: flex; flex-direction: column; }
.plan-things > .kicker { padding-bottom: 4px; color: var(--muted); }
.plan-thing { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); }
.plan-thing__icon { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-alt); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.plan-thing__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.plan-thing__name { font-weight: 700; overflow-wrap: anywhere; }
.plan-thing__sub { font-size: 12px; color: var(--muted); }
.plan-thing__link { color: var(--lb-text); }

/* Offline: floor plans need a connection (field kit 11) */
.offline-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--warn-soft); color: var(--warn-ink); }
.offline-note > svg { flex: none; }
.offline-note__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.offline-note__text strong { font-size: 15px; }
.offline-note__actions { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.offline-note__text .link { color: inherit; text-decoration: underline; }

/* A new floor from another plan: the preview */
.outline-preview { display: block; width: 100%; height: 260px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; }
.outline-preview__old { fill: var(--muted); fill-opacity: 0.3; }
.outline-preview__new { fill: var(--lb); fill-opacity: 0.6; stroke: var(--lb); stroke-width: 1px; vector-effect: non-scaling-stroke; }

@media (max-width: 719px) {
  .plan-main { padding: 10px; }
  .plan-drawing .plan-chip { display: none; }
  .plan-toolbar__property { flex-basis: 100%; }
  .plan-room-card { padding: 16px; }
}

/* ==========================================================================
   Floor plan editor (Property Logbook): the drawing surface at
   /logbook/property/floor-plans/{id}/edit. Ported from Nett.Client's
   floor-plans.css onto Trailhead's tokens, so it follows Day and Night. A
   work surface rather than a board: it takes the page's width, and the
   canvas takes what's left of the screen's height.
   ========================================================================== */

/* ---------- Page frame: compact header, then the editor ---------- */
.lb-property .page.fp-page { max-width: none; gap: 14px; padding-bottom: 24px; }
.fp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 16px; }
/* The back link is drawn for the scenery header; on the plain ground it needs an edge. */
.fp-head .back-link { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.fp-head__titles { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-head__title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fp-head__sub { font-size: 14px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.fp-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.fp-unsaved { background: var(--warn-soft); color: var(--warn-ink); }
.fp-skeleton { min-height: 60vh; }
.fp-narrow-note { display: none; }
.fp-save-error { display: flex; flex-wrap: wrap; gap: 4px 8px; }

.fp-editor { display: flex; flex-direction: column; gap: 10px; }
.fp-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }

/* ---------- Toolbar ---------- */
.fp-bar { padding: 6px; }
.fp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fp-toolbar .fp-tool { border-color: transparent; background: transparent; color: var(--ink); }
.fp-toolbar .fp-tool:hover:not(:disabled) { background: var(--surface-alt); }
.fp-toolbar .fp-tool:disabled { opacity: 0.4; cursor: default; }
/* Some layers are hidden: the view settings button says so in the accent. */
.fp-toolbar .fp-tool--note { color: var(--lb-text); }
.fp-toolbar .fp-tool[aria-pressed="true"],
.fp-toolbar .fp-tool[aria-expanded="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
.fp-toolbar__sep { flex: none; width: 1px; height: 26px; margin: 0 4px; background: var(--line); }
.fp-zoom { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* View settings: the layer switches that drop out of the toolbar. A wrapping
   row of groups so a narrow window stacks them instead of clipping. */
.fp-view-settings {
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; row-gap: 12px;
  margin-top: 6px; padding: 12px 8px 6px; border-top: 1px solid var(--line);
}
.fp-view-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 170px; }
.fp-view-group__title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fp-layer { display: inline-flex; }
.fp-layer--child { margin-left: 22px; }
.fp-view-actions { justify-content: flex-end; min-width: 0; margin-left: auto; align-self: flex-end; }

/* ---------- Workspace: add panel, canvas, selected item ---------- */
.fp-workspace {
  display: flex; gap: 10px; min-height: 0;
  height: max(480px, calc(100vh - 290px));
  height: clamp(480px, calc(100dvh - 290px), 1400px);
}
.fp-add-panel,
.fp-side-panel {
  flex: none; width: clamp(250px, 22vw, 320px); min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 16px;
}
.fp-add-panel > *, .fp-side-panel > * { flex-shrink: 0; }
.fp-add-panel--collapsed { width: 62px; padding: 8px; overflow: hidden; align-items: center; }
.fp-add-panel__head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.fp-add-panel__head .fp-panel__title { flex: 1; min-width: 0; }
.fp-add-panel--collapsed .fp-add-panel__head { justify-content: center; }

.fp-panel__title { margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.fp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fp-panel__group { display: flex; flex-direction: column; gap: 2px; }
.fp-panel__lead { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.fp-panel__text { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.fp-rule { width: 100%; height: 0; margin: 2px 0; border: 0; border-top: 1px solid var(--line); }

/* Fields in the panels: the Trailhead fields, a size down to fit the column. */
.fp-panel .field { gap: 4px; }
.fp-panel .field__label { font-size: 13px; }
.fp-panel .input { height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px; }
.fp-panel .affix--post .input { padding-right: 50px; }
.fp-panel .affix__post { right: 12px; font-size: 13px; }
.fp-panel .select-wrap .input { padding-right: 38px; }
.fp-panel .select-wrap__chev { right: 10px; }
.fp-panel .form-group-title { margin-top: 4px; }

/* ---------- The add panel's groups and catalog ---------- */
.fp-groups { display: flex; flex-direction: column; }
.fp-group { border-top: 1px solid var(--line); }
.fp-group:last-child { border-bottom: 1px solid var(--line); }
.fp-group__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px;
  font-weight: 700; cursor: pointer; list-style: none;
}
.fp-group__head::-webkit-details-marker { display: none; }
.fp-group__head::marker { content: ""; }
.fp-group__chev { display: flex; color: var(--muted); transition: transform 0.15s ease; }
.fp-group[open] > .fp-group__head .fp-group__chev { transform: rotate(180deg); }
.fp-group__body { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 14px; }
.fp-add-action { width: 100%; justify-content: flex-start; }
.fp-add-action[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
.fp-catalog-group { margin: 6px 0 0; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fp-catalog-item {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.fp-catalog-item:hover { border-color: var(--lb-text); background: var(--surface-alt); }
.fp-catalog-item[aria-pressed="true"] { border-color: var(--lb-text); background: var(--lb-soft); }
.fp-catalog-item__name { font-size: 15px; font-weight: 700; }
.fp-catalog-item__meta { font-size: 12px; line-height: 1.35; color: var(--muted); }

/* The linked inventory item's details under a selected opening or item */
.fp-linked-item {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--ground); font-size: 14px;
}
.fp-linked-item__name { font-weight: 800; overflow-wrap: anywhere; }
.fp-linked-item__sub { font-size: 13px; color: var(--muted); }
.fp-linked-item__desc { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.fp-linked-item__attr { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.fp-linked-item__attr > :last-child { text-align: right; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- The canvas ---------- */
.fp-canvas-wrapper { flex: 1; min-width: 0; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.fp-canvas {
  width: 100%; height: 100%; display: block; font-family: var(--font-body);
  touch-action: none; user-select: none; -webkit-user-select: none;
}

/* Cursors */
.fp-cursor-crosshair { cursor: crosshair; }
.fp-cursor-pointer { cursor: pointer; }
.fp-cursor-grab { cursor: grab; }
.fp-cursor-grabbing { cursor: grabbing; }
.fp-cursor-move { cursor: move; }

/* Grid */
.fp-grid-line { stroke: var(--line); opacity: 0.8; }
.fp-grid-axis { stroke: var(--field-line); opacity: 0.7; }

/* Walls: the wall itself is drawn dark inside a lighter band of its covers */
.fp-wall { fill: var(--ink); stroke: none; opacity: 0.85; }
.fp-wall-cover { fill: var(--muted); fill-opacity: 0.35; stroke: none; }
.fp-wall-selected { stroke: var(--lb-text); fill-opacity: 0.5; }
.fp-preview { fill: var(--lb); fill-opacity: 0.15; stroke: var(--lb-text); opacity: 0.8; }
.fp-side-marker { fill: var(--lb-text); font-weight: 800; }
.fp-preview-text { fill: var(--lb-text); font-weight: 700; }
.fp-dim-text { fill: var(--muted); }

/* Corners and snapping */
.fp-endpoint { fill: var(--surface); stroke: var(--muted); }
.fp-chain-start { fill: var(--lb-text); stroke: var(--surface); }
.fp-snap-indicator { fill: none; stroke: var(--success-ink); }

/* End handles of the selected wall, and the selected item's turn and resize handles */
.fp-handle { fill: var(--surface); stroke: var(--lb-text); }
.fp-handle-hover { fill: var(--lb-text); }

/* Rooms */
.fp-room { fill: var(--lb); fill-opacity: 0.08; stroke: none; }
.fp-room-selected { fill-opacity: 0.2; }
.fp-room-label { fill: var(--ink); font-weight: 700; }
.fp-room-sublabel { fill: var(--muted); }

/* ---------- Wall openings ---------- */

/* Door leaves, window sashes, a bay's body */
.fp-opening-panel { fill: var(--surface); stroke: var(--ink); fill-opacity: 0.9; }

/* Jambs, frames, swing arcs */
.fp-opening-line { fill: none; stroke: var(--ink); opacity: 0.75; }

/* Concealed leaves and door tracks */
.fp-opening-guide { fill: none; stroke: var(--muted); opacity: 0.7; }

.fp-opening-selected { stroke: var(--lb-text); opacity: 1; }
.fp-opening-panel.fp-opening-selected { fill: var(--lb); fill-opacity: 0.25; }

/* The opening being dropped, before it is placed */
.fp-opening-ghost { stroke: var(--lb-text); opacity: 0.7; }
.fp-opening-panel.fp-opening-ghost { fill: var(--lb); fill-opacity: 0.15; }

/* The run of dimensions beside a placed or dropping opening */
.fp-opening-dim-line { stroke: var(--lb-text); opacity: 0.6; }
.fp-opening-dim-text { fill: var(--lb-text); font-weight: 700; }

/* ---------- Utility items and appliances ---------- */

/* The unit's own outline. The fill is a tint of the ink rather than the
   surface, so an item reads against the canvas in either theme instead of
   disappearing into it. */
.fp-fixture-body { fill: var(--ink); fill-opacity: 0.14; stroke: var(--ink); stroke-opacity: 0.9; stroke-linejoin: round; }

/* Filled details inside it: a basin, a plenum, a handle */
.fp-fixture-panel { fill: var(--ink); fill-opacity: 0.34; stroke: var(--ink); stroke-opacity: 0.8; stroke-linejoin: round; }

/* Doors, shelves, burners, dials. The explicit fill:none matters: an SVG
   polyline with no fill declared is filled black. */
.fp-fixture-line { fill: none; stroke: var(--ink); stroke-opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }

/* Hatching, louvres, and anything hanging overhead */
.fp-fixture-guide { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-linecap: round; }

/* The footprint outline drawn around a selected or dropping item */
.fp-fixture-outline { fill: none; stroke: var(--lb-text); }
.fp-fixture-selected { stroke: var(--lb-text); opacity: 1; }
.fp-fixture-body.fp-fixture-selected { fill: var(--lb); fill-opacity: 0.22; }
.fp-fixture-panel.fp-fixture-selected { fill: var(--lb); fill-opacity: 0.4; }

/* The item being dropped, before it is placed */
.fp-fixture-ghost { stroke: var(--lb-text); opacity: 0.7; }
.fp-fixture-body.fp-fixture-ghost { fill: var(--lb); fill-opacity: 0.15; }

/* Nowhere for it to go without overlapping a wall */
.fp-fixture-blocked { stroke: var(--danger); opacity: 0.8; }
.fp-fixture-body.fp-fixture-blocked,
.fp-fixture-panel.fp-fixture-blocked { fill: var(--danger); fill-opacity: 0.18; }

.fp-fixture-label { fill: var(--ink); font-weight: 700; }
.fp-fixture-sublabel { fill: var(--muted); }

/* ---------- Narrow screens: a note, then everything in one column ---------- */
@media (max-width: 899px) {
  .fp-narrow-note { display: block; }
  .fp-workspace { flex-direction: column; height: auto; }
  .fp-canvas-wrapper {
    flex: none;
    height: calc(100vh - 180px);
    height: clamp(360px, calc(100dvh - 180px), 720px);
  }
  .fp-add-panel,
  .fp-side-panel { width: 100%; overflow-y: visible; }
  .fp-add-panel--collapsed { width: 100%; align-items: stretch; }
  .fp-add-panel--collapsed .fp-add-panel__head { justify-content: flex-start; }
}

@media (max-width: 719px) {
  .fp-head { padding-top: 8px; }
  .fp-head__title { font-size: 24px; }
}

/* ---------- Photos and papers: PDFs in a photo album (vehicles, properties, items) ---------- */
.papers { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.papers__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.papers__title { margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.papers__add { position: relative; cursor: pointer; }
.papers__add:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.paper-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.paper { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--ground); border: 1px solid var(--line); }
.paper--failed { border-color: var(--danger); }
.paper__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.paper__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-alt); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.paper__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.paper__title { font-weight: 800; overflow-wrap: anywhere; }
.paper__meta { font-size: 13px; color: var(--muted); }
.paper__open { flex: none; gap: 6px; }
.paper__more { flex: none; }
.paper__edit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.paper__edit .field { align-self: stretch; }
.paper__issue { margin: 0; }

/* An item's photos and papers, under what's inside it */
.files { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.files__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.files__title { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.files__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.file-thumb {
  width: 72px; height: 72px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-alt); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-thumb--more { font: 800 16px var(--font-body); color: var(--ink); }
.file-chip {
  min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px;
  background: var(--lb-soft); color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.file-chip svg { flex: none; color: var(--lb-text); }
.file-chip--waiting { background: var(--surface-alt); color: var(--ink-2); }

/* ==========================================================================
   Game Logbook: game nights, scored round by round.
   Design authority: the "Game Logbook" canvas. Berry by day, rose by night. A player's color is
   their seat in the scoring order: berry, ochre, blue, green, violet, then clay.
   ========================================================================== */

/* ---------- Tokens: the soft tint, the seats, the logbook's links ---------- */
.lb-games {
  --lb-soft: #F6DCE7; --game-link: #A3355F;
  --seat-1: #B83F72; --seat-2: #9D6A0E; --seat-3: #1D6FB8; --seat-4: #2F7D3B; --seat-5: #6A5FC1; --seat-6: #B9492A; --seat-ink: #FFFFFF;
}
.nett-root[data-theme="night"] .lb-games, .nett-root[data-theme="night"].lb-games {
  --lb-soft: #3F2347; --game-link: #F5B935;
  --seat-1: #DF5F9A; --seat-2: #C08516; --seat-3: #4A93DC; --seat-4: #3FA463; --seat-5: #9283EC; --seat-6: #E26B3E; --seat-ink: #1A1830;
}
@media (prefers-color-scheme: dark) {
  .nett-root[data-theme="system"] .lb-games {
    --lb-soft: #3F2347; --game-link: #F5B935;
    --seat-1: #DF5F9A; --seat-2: #C08516; --seat-3: #4A93DC; --seat-4: #3FA463; --seat-5: #9283EC; --seat-6: #E26B3E; --seat-ink: #1A1830;
  }
}
.seat-1 { --seat: var(--seat-1); }
.seat-2 { --seat: var(--seat-2); }
.seat-3 { --seat: var(--seat-3); }
.seat-4 { --seat: var(--seat-4); }
.seat-5 { --seat: var(--seat-5); }
.seat-6 { --seat: var(--seat-6); }
.lb-games .link { color: var(--game-link); }

/* The logbook's own parts set their display, so the phone-only and wide-only marks outrank them here. */
@media (min-width: 720px) { .lb-games .only-narrow { display: none; } }
@media (max-width: 719px) { .lb-games .only-wide { display: none; } }

/* ---------- Seats: a player's face in their seat color (kit 01) ---------- */
.seat-face {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--seat, var(--lb)); color: var(--seat-ink);
  font: 800 17px/1 var(--font-body); display: inline-flex; align-items: center; justify-content: center;
}
.seat-face img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.seat-face--photo { outline: 3px solid var(--seat); outline-offset: 2px; }
.seat-face--guest { outline: 2px dashed var(--seat); outline-offset: 2px; }
.seat-face--xs { width: 28px; height: 28px; font-size: 12px; }
.seat-face--sm { width: 32px; height: 32px; font-size: 13px; }
.seat-face--lg { width: 48px; height: 48px; font-size: 20px; }
.seat-face--xl { width: 56px; height: 56px; font-size: 22px; }
.seat-face--xs.seat-face--photo, .seat-face--sm.seat-face--photo { outline-width: 2px; }
.seat-face--off { background: var(--surface-alt); color: var(--ink-2); outline-color: var(--field-line); }
.seat-face--empty { background: var(--surface-alt); color: var(--lb-text); }

/* The winner of a finished game, everyone who shares a tie, with a crown pinned on. */
.winners { position: relative; flex: none; display: flex; padding-left: 8px; }
.winners__face {
  position: relative; overflow: hidden; width: 36px; height: 36px; margin-left: -8px; border-radius: 999px; border: 2px solid var(--surface);
  background: var(--lb); color: var(--lb-on); font: 800 14px/1 var(--font-body); display: flex; align-items: center; justify-content: center;
}
.winners__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.winners__crown {
  position: absolute; top: -9px; right: -8px; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--surface);
  background: var(--cover); color: var(--on-cover); display: flex; align-items: center; justify-content: center;
}

/* ---------- Marks a game wears (kit 02) ---------- */
.next-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--lb-soft); color: var(--lb-text); font-size: 13px; font-weight: 800; white-space: nowrap;
}
.win-chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--surface-alt); color: var(--ink-2); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.btn--off { opacity: 0.55; pointer-events: none; }
.editor__sub { font-size: 14px; font-weight: 600; color: var(--muted); }

/* ---------- The logbook's headers: its sections on the scenery; phones have no header there ---------- */
.sections--hero { gap: 8px; }
.sections--hero .section-link { min-height: 40px; padding: 0 16px; border: 0; background: var(--chip); color: var(--sc-ink); font-size: 14px; font-weight: 700; }
.sections--hero .section-link[aria-current="page"] { background: var(--sel); color: var(--on-sel); font-weight: 800; }
.game-sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.game-sections::-webkit-scrollbar { display: none; }
.game-sections .section-link { flex: none; padding: 0 16px; font-size: 14px; }
.game-hero--list .hero__inner { padding-top: 24px; }
.game-hero--list .hero__title { margin-top: 4px; }
/* The band's ridges start ~30px down from its top: the text may sit over that sky. */
.game-hero--short .hero__inner { padding: 22px 24px max(120px, calc(10.4vw - 30px)); gap: 20px; align-items: flex-end; }
.scenery--wide.scenery--band { min-height: 150px; aspect-ratio: 1440 / 150; }
.game-hero--short .hero__title { font-size: clamp(52px, 6.6vw, 96px); }
.game-hero--short .hero__sub { font-size: 17px; }
.game-hero__new { flex: none; }
.game-home__actions { align-items: center; }
.game-home__actions .btn { padding: 0 20px; }
.game-home__actions .btn--chip { padding: 0 16px; font-size: 15px; }
.game-home__again-label { padding: 0 4px 0 10px; font-size: 14px; font-weight: 700; color: var(--sc-sub); }

/* ---------- Home: going now, played lately, bragging rights ---------- */
.game-home { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.game-home__main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.game-home__aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.game-home .section { gap: 14px; }
.going-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.going-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 2px solid var(--lb); }
.going-card--pending { border: 2px dashed var(--field-line); }
.going-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.going-card__titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.going-card__name { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.going-card__name:hover { text-decoration: underline; }
.going-card__meta { font-size: 14px; color: var(--ink-2); }
.standings { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-radius: 16px; background: var(--ground); overflow: hidden; }
.standings__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; }
.standings__row + .standings__row { border-top: 1px solid var(--line); }
.standings__row--lead { background: var(--lb-soft); }
.standings__rank { flex: none; width: 18px; text-align: center; font-family: var(--font-display); font-size: 19px; font-weight: 900; color: var(--ink-2); }
.standings__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standings__note { flex: none; font-size: 12px; font-weight: 800; color: var(--lb-text); }
.standings__total { flex: none; min-width: 40px; text-align: right; font-family: var(--font-display); font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.standings__row--lead .standings__name { font-weight: 800; }
.standings__row--lead .standings__rank, .standings__row--lead .standings__total { color: var(--lb-text); }
.going-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.going-card__started { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.going-card__actions { display: flex; gap: 8px; }
.going-card__actions .btn { padding: 0 16px; }
.going-card__add { gap: 6px; }
.going-card__leader { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.going-card__leader-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.going-card__leader-line { font-size: 15px; font-weight: 800; }
.going-card__leader-meta { font-size: 13px; color: var(--muted); }
.going-card__leader-total { flex: none; font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 1; color: var(--lb-text); }
.face-stack { flex: none; display: flex; padding-left: 6px; }
.face-stack .seat-face { margin-left: -6px; border: 2px solid var(--surface); outline: 0; }

/* Bragging rights: wins this year, counted on the server */
.brag { padding: 18px 20px 10px; }
.brag__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.brag__head .panel__title { margin: 0; }
.brag__head .link { font-size: 14px; }
.brag__aside { font-size: 13px; font-weight: 700; color: var(--muted); }
.brag__game { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.brag__game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.brag__game-name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.brag__game-played { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.brag .panel__empty { padding: 4px 0 14px; }
.brag__all { width: 100%; min-height: 48px; margin: 4px 0 8px; gap: 6px; background: var(--surface-alt); font-size: 15px; font-weight: 800; }
.game-home .stats--2 .stat__n { font-size: 38px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 14px; }
.bar-row__name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row__name--top, .bar-row--top .bar-row__name { font-weight: 800; }
.bar-row__name svg { flex: none; color: var(--lb-text); }
.bar-row__bar { height: 10px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.bar-row__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--field-line); }
.bar-row__bar > .bar-row__fill--top, .bar-row--top .bar-row__bar > span { background: var(--lb); }
.bar-row__n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Game rows (kit 07): a list's games, going or finished ---------- */
.game-list { display: flex; flex-direction: column; gap: 8px; }
.game-row {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(220px, 300px) 24px; gap: 16px; align-items: center;
  padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.game-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.game-row--going { border: 2px solid var(--lb); }
.game-row--pending { border: 2px dashed var(--field-line); }
.game-row__tile {
  width: 60px; height: 62px; border-radius: 15px; background: var(--surface-alt); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display);
}
.game-row--going .game-row__tile { background: var(--lb); color: var(--lb-on); }
.game-row__mon { font-size: 13px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.game-row__day { font-size: 30px; font-weight: 900; line-height: 0.9; }
.game-row__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.game-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-row__name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.game-row__meta { font-size: 14px; color: var(--ink-2); }
.game-row__side { min-width: 0; display: flex; align-items: center; gap: 12px; }
.game-row__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.game-row__who-name { font-size: 15px; font-weight: 800; }
.game-row__who-score { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--lb-text); }
.game-row__chev { display: flex; color: var(--muted); }
.game-row .next-chip { height: 32px; padding: 0 12px; font-size: 14px; }
.game-row .sync-chip { height: 24px; }
.game-row--pending .sync-chip:not(.sync-chip--failed) { background: transparent; border: 1.5px dashed var(--field-line); }

/* ---------- Every game: the finder, the months, older games ---------- */
.lb-games .games-page { gap: 18px; }
.lb-games .game-finder { padding: 0; border: 0; background: transparent; }
.game-finder .chip { gap: 6px; }
.game-finder__search { flex: 1 1 280px; max-width: 420px; margin-left: auto; }
.lb-games .game-finder__search .affix__pre { color: var(--muted); }
.lb-games .finder-count { margin-top: -8px; font-size: 14px; }
.game-group { display: flex; flex-direction: column; gap: 8px; }
.game-group__title { margin: 6px 0 2px; font-size: 22px; font-weight: 800; }
.game-more { align-self: center; }
.game-fab { display: none; }

/* ---------- Records ---------- */
.year-pick { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
.year-pick__btn {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-ink);
  font: 700 15px var(--font-body); white-space: nowrap; cursor: pointer;
}
.year-pick__btn[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); font-weight: 800; }
.lb-games .records-page { gap: 28px; }
.rec-section { gap: 12px; }
.rec-section__aside { font-size: 14px; font-weight: 700; color: var(--muted); }
.rec-people { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.rec-person {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank face name crown" "wins wins wins wins" "played played played played";
  align-items: center; gap: 10px; padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
}
.rec-person--top { background: var(--lb-soft); border: 2px solid var(--lb); }
.rec-person__rank { grid-area: rank; font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--ink-2); }
.rec-person__face {
  grid-area: face; width: 40px; height: 40px; border-radius: 999px; background: var(--surface-alt); color: var(--ink);
  font: 800 16px/1 var(--font-body); display: flex; align-items: center; justify-content: center;
}
.rec-person__face--guest { outline: 2px dashed var(--field-line); outline-offset: 2px; }
.rec-person--top .rec-person__face { background: var(--lb); color: var(--lb-on); }
.rec-person__text { grid-area: name; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rec-person__name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.rec-person__crown { grid-area: crown; color: var(--lb-text); }
.rec-person__wins { grid-area: wins; display: flex; align-items: baseline; gap: 8px; }
.rec-person__n { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 0.9; }
.rec-person__l { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rec-person--top .rec-person__rank, .rec-person--top .rec-person__n { color: var(--lb-text); }
.rec-person__played { grid-area: played; font-size: 13px; color: var(--muted); }
.rec-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.rec-game { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.rec-game__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rec-game__name { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.rec-game__meta { font-size: 13px; font-weight: 700; color: var(--muted); text-align: right; }
.rec-game__rows { display: flex; flex-direction: column; gap: 8px; }
.rec-game .bar-row { grid-template-columns: 104px minmax(0, 1fr) 30px; }
.rec-game .bar-row__bar { height: 12px; }
.rec-game__best { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rec-game__best svg { flex: none; }
.rec-game__best strong { color: var(--ink); }
.records__lede { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.records__note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.records__note svg { flex: none; }

@media (max-width: 719px) {
  .lb-games .game-hero--list { display: none; }
  .lb-games .game-hero--list ~ .page { padding-top: 12px; padding-bottom: 88px; gap: 14px; }
  .lb-games .games-page { gap: 12px; }

  .going-grid { grid-template-columns: 1fr; gap: 10px; }
  .going-card { padding: 14px; gap: 10px; border-radius: 22px; }
  .going-card__top { align-items: center; }
  .going-card__name { font-size: 21px; }
  .next-chip { height: 26px; padding: 0 9px; font-size: 12px; }
  .going-card__foot { flex-wrap: nowrap; justify-content: flex-start; }
  .going-card__actions { flex: 1; }
  .going-card__add { flex: 1; min-height: 48px; }

  .brag { padding: 14px 16px 6px; border-radius: 22px; }
  .brag__head { padding-bottom: 6px; }
  .brag__head .panel__title { font-size: 20px; }
  .brag__game { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 0; }
  .brag__game-head { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
  .brag__game-name { font-size: 15px; }
  .brag__game-played { font-size: 12px; }
  .brag__game-top { flex: none; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
  .brag__game-top svg { color: var(--lb-text); }

  .game-row { display: flex; gap: 12px; padding: 10px 14px 10px 10px; }
  .game-row__tile { flex: none; width: 52px; height: 58px; border-radius: 14px; }
  .game-row__mon { font-size: 12px; }
  .game-row__day { font-size: 26px; }
  .game-row__main { flex: 1; gap: 2px; }
  .game-row__name { font-size: 16px; }
  .game-row__line { font-size: 13px; color: var(--ink-2); }
  .game-row__sub { font-size: 12px; font-weight: 700; color: var(--muted); }
  .game-row__sync { align-self: flex-start; }
  .game-row__side { flex: none; }
  .winners__face { width: 34px; height: 34px; }

  .game-finder { flex-direction: column; align-items: stretch; gap: 12px; }
  .game-finder__search { order: -1; flex: none; max-width: none; margin: 0; }
  .game-finder__search .input { height: 50px; }
  .game-finder .chip { padding: 0 14px; font-size: 14px; }
  .lb-games .finder-count { margin-top: 0; font-size: 13px; }
  .game-group__title { margin: 4px 0 0; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .game-fab {
    position: fixed; z-index: 15; right: 18px; bottom: calc(85px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 20px;
    background: var(--accent); color: var(--on-accent); font: 800 16px var(--font-body); cursor: pointer; box-shadow: 0 8px 20px rgba(238, 106, 60, 0.35);
  }
  .game-fab--wide { width: auto; padding: 0 20px 0 16px; }

  .year-pick--page { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface-alt); }
  .year-pick--page .year-pick__btn { padding: 0 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
  .year-pick--page .year-pick__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }
  .rec-section { gap: 8px; }
  .rec-section .section__title { font-size: 20px; }
  .rec-people { display: flex; flex-direction: column; gap: 6px; }
  .rec-person { grid-template-columns: 20px 36px minmax(0, 1fr) auto; grid-template-areas: "rank face name wins"; gap: 10px; min-height: 56px; padding: 6px 14px 6px 10px; border-radius: 18px; }
  .rec-person__rank { font-size: 20px; text-align: center; }
  .rec-person__face { width: 36px; height: 36px; font-size: 15px; }
  .rec-person__name { font-size: 15px; }
  .rec-person__played { font-size: 12px; font-weight: 600; }
  .rec-person__n { font-size: 32px; line-height: 1; }
  .rec-games { grid-template-columns: 1fr; gap: 8px; }
  .rec-game { padding: 14px 16px; gap: 8px; border-radius: 20px; }
  .rec-game__name { font-family: var(--font-body); font-size: 17px; }
  .rec-game__meta { font-size: 12px; }
  .rec-game .bar-row { grid-template-columns: 92px minmax(0, 1fr) 24px; gap: 8px; }
  .rec-game .bar-row__bar { height: 10px; }
  .rec-game__rows .bar-row:nth-child(n + 4) { display: none; }
  .rec-game__best { padding-top: 0; border-top: 0; font-size: 13px; }
  .rec-game__best svg { display: none; }
  .records__note { align-items: flex-start; font-size: 12px; line-height: 1.45; }
}

/* ---------- A game: its header (going now, then finished with the winner's print) ---------- */
/* The menu under "More" hangs below the header, so the header doesn't clip; the scenery is full width anyway. */
.game-hero { overflow: visible; }
.game-hero .hero__inner { padding: 18px 24px max(120px, calc(10.4vw - 30px)); gap: 18px 24px; align-items: flex-end; }
.game-hero .hero__text { gap: 10px; }
.game-hero .hero__title { margin-top: 2px; font-size: clamp(52px, 6.6vw, 96px); }
.game-hero .back-link { height: 40px; padding: 0 14px 0 8px; }
.game-hero .hero-chips { padding-top: 4px; }
.game-hero .hero-chip { padding: 0 12px; }
.hero-chip--done { background: var(--success-soft); color: var(--success-ink); }
.game-hero__actions { position: relative; flex: none; display: flex; align-items: center; gap: 8px; }
.game-hero .btn--lg { min-height: 52px; }
.game-hero .btn--accent.btn--lg { padding: 0 22px; font-size: 17px; }
.game-hero .btn--chip.btn--lg { padding: 0 18px; font-size: 16px; font-weight: 700; }
.game-hero--done .hero__inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 24px 190px; }
/* A column here, so the text's 560px basis (a width in the row) would become its height. */
.game-hero--done .hero__text { flex: none; gap: 18px; }
.game-hero__win { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.game-hero__win-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.game-hero__kicker { font-size: 15px; color: var(--sc-sub); }
.game-hero .game-hero__winner { margin: 0; font-size: clamp(56px, 8.4vw, 120px); line-height: 0.82; }
.game-hero .game-hero__icon-btn { width: 52px; padding: 0; }

/* The winner's print (kit 10): a white-framed print, tilted, the crown pinned to its corner. */
.win-print {
  position: relative; flex: none; align-self: center; display: flex; flex-direction: column; padding: 10px 10px 36px; border-radius: 6px;
  background: #FFFFFF; box-shadow: 0 10px 24px rgba(23, 38, 43, 0.22); transform: rotate(-3deg);
}
.win-print__photo { display: flex; width: 170px; height: 148px; overflow: hidden; background: #F6DCE7; }
.win-print__person { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; background: var(--seat); }
.win-print__person + .win-print__person { border-left: 3px solid #FFFFFF; }
.win-print__person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win-print__initial { font-family: var(--font-display); font-size: 80px; font-weight: 900; line-height: 1; color: var(--seat-ink); }
.win-print__caption {
  position: absolute; left: 0; right: 0; bottom: 9px; padding: 0 10px; text-align: center; font: 700 14px var(--font-body); color: #17262B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-print__crown {
  position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border-radius: 999px; background: var(--cover); color: var(--on-cover);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(23, 38, 43, 0.25);
}
.win-print--hero { margin: 14px 0 0 18px; padding: 12px 12px 42px; box-shadow: 0 14px 30px rgba(23, 38, 43, 0.28); }
.win-print--hero .win-print__photo { width: 220px; height: 190px; }
.win-print--hero .win-print__caption { bottom: 11px; font-size: 15px; }
.win-print--hero .win-print__crown { top: -18px; right: -18px; width: 52px; height: 52px; }
.win-print--hero .win-print__initial { font-size: 104px; }

/* ---------- A game: the panels ---------- */
.lb-games .game-page { gap: 24px; }
.game-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.game-cols__main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* Finished: the final standings beside the race, the locked rounds the whole width under them. */
.game-cols--done .game-cols__main { display: contents; }
.game-cols--done .game-cols__main > .game-panel { flex: 1 1 100%; }
.game-cols--done .game-cols__main > .race-panel { flex: 999 1 600px; }
.game-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.game-panel--board { flex: 1 1 360px; }
.game-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.game-panel__title { font-size: 24px; font-weight: 800; }
.game-panel__aside { font-size: 13px; font-weight: 700; color: var(--muted); }
.game-panel__note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-alt); font-size: 14px; color: var(--ink-2); }
.game-panel__note svg { flex: none; }
.game-panel__note--plain { display: block; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lock-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface-alt); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.end-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--lb-soft); color: var(--ink); }
.end-banner > svg { flex: none; color: var(--lb-text); }
.end-banner__text { flex: 1 1 220px; font-size: 14px; line-height: 1.45; }
.end-banner__actions { display: flex; gap: 6px; }

/* The scoreboard (kit 03): best first by the game's rule; the leader tinted, with a crown */
.board { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.board-row { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 60px; padding: 8px 16px 8px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.board-row--lead { background: var(--lb-soft); border: 2px solid var(--lb); }
.board-row--none { background: var(--surface-alt); }
.board-row__top { display: flex; align-items: center; gap: 12px; }
.board-row__rank { flex: none; width: 28px; text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--ink-2); }
.board-row .seat-face { width: 42px; height: 42px; }
.board-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.board-row__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 17px; font-weight: 800; }
.board-row__name > span { min-width: 0; overflow-wrap: anywhere; }
.board-row__crown { flex: none; color: var(--lb-text); }
.board-row__note { font-size: 13px; font-weight: 700; color: var(--muted); }
.board-row__total { flex: none; font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.board-row--lead .board-row__rank, .board-row--lead .board-row__note, .board-row--lead .board-row__total { color: var(--lb-text); }
.board-row--none .board-row__total { color: var(--muted); }
.board-row__to-end { display: flex; align-items: center; gap: 10px; padding-left: 40px; }
.board-row__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.board-row__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--seat); }
.board-row__left { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.game-facts { margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-fact { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--ground); }
.game-fact__l { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.game-fact__n { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.game-fact__sub { margin: 0; font-size: 13px; color: var(--ink-2); }

/* ---------- The rounds (kit 04): a row a round, a column a player, totals at the foot ---------- */
.rounds-wrap { min-width: 0; }
.rounds { border-radius: 18px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rounds__row { display: grid; grid-template-columns: 76px repeat(var(--cols), minmax(0, 1fr)); }
.rounds__row + .rounds__row { border-top: 1px solid var(--line); }
.rounds__row--head { background: var(--surface-alt); border-radius: 17px 17px 0 0; }
.rounds__row + .rounds__row--foot { border-top: 2px solid var(--ink); }
.rounds__row--foot { background: var(--ground); border-radius: 0 0 17px 17px; }
.rounds__corner { display: flex; align-items: flex-end; padding: 10px 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rounds__player { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; }
.rounds__player .seat-face { width: 34px; height: 34px; font-size: 14px; }
.rounds__player-name { max-width: 100%; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rounds__n { display: flex; align-items: center; padding: 0 14px; font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--ink-2); }
.rounds__n--total { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rounds__cell { position: relative; min-width: 0; padding: 4px; }
.rounds__score {
  width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: 900 24px/1 var(--font-display); cursor: pointer;
}
button.rounds__score:hover { background: var(--surface-alt); }
.rounds__score--won, button.rounds__score--won:hover { background: var(--lb-soft); color: var(--lb-text); }
.rounds__score--none { color: var(--muted); }
.rounds__score--pending { border: 1.5px dashed var(--field-line); }
.rounds__score--failed { border: 2px solid var(--danger); }
.rounds__score--open { box-shadow: 0 0 0 3px var(--focus); }
.rounds__total { display: flex; align-items: center; justify-content: center; gap: 5px; height: 56px; font-family: var(--font-display); font-size: 30px; font-weight: 900; }
.rounds__total--lead { color: var(--lb-text); }
/* A finished game's rounds are locked: plain numbers on striped rows */
.rounds--locked .rounds__player { flex-direction: row; justify-content: center; gap: 8px; padding: 10px 4px; }
.rounds--locked .rounds__player .seat-face { width: 30px; height: 30px; font-size: 13px; }
.rounds--locked .rounds__row:nth-child(2n + 3) { background: var(--ground); }
.rounds--locked .rounds__row.rounds__row--foot { background: var(--surface-alt); }
.rounds--locked .rounds__n { min-height: 40px; font-size: 22px; }
.rounds--locked .rounds__n--total { font-size: 12px; }
.rounds--locked .rounds__cell { display: flex; align-items: center; justify-content: center; }
.rounds--locked .rounds__score { width: auto; min-width: 44px; height: 32px; padding: 0 6px; border-radius: 9px; font-size: 22px; cursor: default; }
.rounds--locked .rounds__total { height: 48px; font-size: 28px; }
.add-round {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 16px; border: 2px dashed var(--field-line);
  color: var(--ink); font-size: 16px; font-weight: 800; text-decoration: none;
}
.add-round:hover { border-color: var(--lb); background: var(--lb-soft); }

/* Fixing a score on a wide screen (Matt's 6th answer): a typed field beside the cell */
.fix-pop {
  position: absolute; z-index: 20; top: 54px; left: 50%; transform: translateX(-50%); width: 280px; padding: 14px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.rounds__cell:nth-child(2) .fix-pop { left: 0; transform: none; }
.rounds__cell:last-child .fix-pop { left: auto; right: 0; transform: none; }
.fix-pop__who { display: flex; align-items: center; gap: 10px; }
.fix-pop__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fix-pop__name { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.fix-pop__meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.fix-pop__close { width: 40px; height: 40px; background: var(--surface-alt); color: var(--ink); }
.fix-pop .field__label { font-size: 13px; }
.fix-pop__input { height: 56px; border: 2px solid var(--focus); text-align: right; font: 900 34px var(--font-display); }
.fix-pop .field__hint, .fix-pop .field__error { font-size: 12px; }
.fix-pop .btn-row .btn { min-height: 44px; font-size: 14px; }

/* Fixing a score on a phone: the number pad in a bottom sheet */
.fix-sheet { gap: 10px; max-height: calc(100dvh - 48px); padding: 10px 16px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25); }
.fix-sheet .sheet__handle { width: 44px; background: var(--field-line); }
.fix-sheet__who { display: flex; align-items: center; gap: 12px; }
.fix-sheet .seat-face { width: 44px; height: 44px; font-size: 18px; }
.fix-sheet__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.fix-sheet__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.fix-sheet__meta { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fix-sheet .field__hint { font-size: 13px; }
.fix-sheet__delete { align-self: center; min-height: 44px; padding: 0 14px; font-size: 15px; }

/* "More for this game": edit it, add a player, delete it */
.more-menu { position: relative; flex: none; display: inline-flex; }
.more-menu__btn {
  width: 52px; height: 52px; border: 0; border-radius: 999px; background: var(--chip); color: var(--sc-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.more-menu__list { top: calc(100% + 8px); width: 220px; padding: 6px; border-radius: 18px; display: flex; flex-direction: column; }
.more-menu--up .more-menu__list { top: auto; bottom: calc(100% + 8px); }
.more-menu__list .menu__item { min-height: 46px; font-weight: 700; }
.more-menu__danger { color: var(--danger); }
.game-bar { display: none; }

/* ---------- The race (kit 06, Matt's 7th answer): running totals in seat colors ---------- */
.race-panel { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
.race-panel > .game-panel__head { flex: 0 0 auto; }
.race-panel .race { display: contents; }
.race-panel > .game-panel__note { flex: 1 1 100%; }
.race__legend { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.race__key { display: inline-flex; align-items: center; gap: 6px; }
.race__swatch { width: 18px; height: 3px; border-radius: 2px; background: var(--seat); }
.race__plot { position: relative; flex: 1 1 100%; min-width: 0; }
.race__svg { width: 100%; height: auto; overflow: visible; }
.race__grid { stroke: var(--line); stroke-width: 1; }
.race__axis { fill: var(--muted); font: 600 12px var(--font-body); }
.race__axis--title { font-size: 11px; font-weight: 700; }
.race__hover { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.race__line { fill: none; stroke: var(--seat); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.race__line--lead { stroke-width: 3.5; }
.race__end, .race__dot { fill: var(--seat); stroke: var(--surface); stroke-width: 2; }
.race__label { fill: var(--ink); font: 800 13px var(--font-body); }
.race__label-total { fill: var(--ink-2); font-weight: 700; }
.race__hit { fill: transparent; }
.race__tip {
  position: absolute; top: 4px; min-width: 170px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); pointer-events: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px;
}
.race__tip-title { font-weight: 800; }
.race__tip-row { display: flex; align-items: center; gap: 8px; }
.race__tip-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--seat); }
.race__tip-name { flex: 1; color: var(--ink-2); }
.race__tip-n { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 719px) {
  /* Going now: the name and its marks on the plain ground, no scenery (the phone boards have none) */
  .game-hero:not(.game-hero--done) { background: transparent; }
  .game-hero:not(.game-hero--done) .scenery, .game-hero:not(.game-hero--done) .stars { display: none; }
  .game-hero:not(.game-hero--done) .hero__inner { padding: 14px 16px 0; gap: 10px; }
  .game-hero:not(.game-hero--done) .back-link { background: var(--surface-alt); color: var(--ink); }
  .game-hero:not(.game-hero--done) .hero-chip { height: 30px; padding: 0 10px; gap: 5px; background: var(--surface-alt); color: var(--ink-2); font-size: 13px; }
  .game-hero .hero__title { font-size: 44px; }
  /* Finished: the print on the sky, centered */
  .game-hero--done .scenery { display: none; }
  .game-hero--done .hero__inner { padding: 16px 16px 22px; gap: 14px; }
  .game-hero--done .hero__text { gap: 14px; }
  .game-hero--done .hero-chip:not(.hero-chip--done) { display: none; }
  .game-hero__win { flex-direction: column; gap: 14px; text-align: center; }
  .game-hero__win-text { flex: none; align-self: stretch; align-items: center; gap: 8px; }
  .game-hero__kicker { display: none; }
  .game-hero .game-hero__winner { margin-top: 6px; font-size: 46px; line-height: 0.9; }
  .game-hero--done .hero__sub { font-size: 15px; }
  .game-hero--done .hero__actions { align-self: stretch; flex-wrap: nowrap; }
  .game-hero--done .hero__actions .btn { min-height: 52px; padding: 0 16px; border-radius: 18px; font-size: 15px; }
  .game-hero--done .hero__actions .btn--accent { flex: 1; font-size: 16px; }
  .game-hero .game-hero__icon-btn { flex: none; width: 52px; padding: 0; }
  .win-print--hero { margin: 0; padding: 9px 9px 32px; box-shadow: 0 12px 26px rgba(23, 38, 43, 0.28); }
  .win-print--hero .win-print__photo { width: 210px; height: 150px; }
  .win-print--hero .win-print__caption { bottom: 8px; font-size: 13px; }
  .win-print--hero .win-print__crown { top: -15px; right: -15px; width: 44px; height: 44px; }
  .win-print--hero .win-print__initial { font-size: 84px; }

  .lb-games .game-page { gap: 16px; padding-top: 14px; padding-bottom: 96px; }
  .game-cols { gap: 16px; }
  .game-panel { gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .game-panel__title { font-size: 20px; }
  .game-panel__aside { font-size: 12px; }
  .lock-chip { min-height: 0; padding: 0; gap: 5px; background: none; font-size: 12px; color: var(--muted); }
  .board { gap: 6px; }
  .board-row { gap: 6px; min-height: 58px; padding: 6px 14px 6px 8px; }
  .board-row__top { gap: 10px; }
  .board-row__rank { width: 24px; font-size: 24px; }
  .board-row .seat-face { width: 38px; height: 38px; font-size: 16px; }
  .board-row__name { gap: 5px; font-size: 16px; }
  .board-row__crown { width: 16px; height: 16px; }
  .board-row__note { font-size: 12px; }
  .board-row__total { font-size: 34px; }
  .board-row__to-end { padding-left: 34px; }
  .game-fact { padding: 10px 12px; }
  .game-fact__n { font-size: 24px; }

  /* Many players scroll sideways rather than squeezing every column */
  .rounds-wrap { overflow-x: auto; border-radius: 18px; }
  .rounds { min-width: calc(44px + var(--cols) * 48px); overflow: hidden; background: var(--surface); }
  .rounds__row { grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); }
  .rounds__row--head, .rounds__row--foot { border-radius: 0; }
  .rounds__corner { align-items: center; justify-content: center; padding: 0; font-size: 11px; letter-spacing: 0.04em; }
  .rounds__player { gap: 3px; padding: 8px 2px 6px; }
  .rounds__player .seat-face { width: 28px; height: 28px; font-size: 12px; }
  .rounds__player-name { font-size: 12px; }
  .rounds__n { justify-content: center; padding: 0; font-size: 20px; }
  .rounds__n--total { font-size: 11px; }
  .rounds__cell { padding: 3px; }
  .rounds__score { height: 40px; border-radius: 10px; font-size: 22px; }
  .rounds__total { height: 48px; font-size: 26px; }
  .rounds--locked .rounds__player { flex-direction: column; gap: 3px; padding: 8px 2px 6px; }
  .rounds--locked .rounds__player .seat-face { width: 26px; height: 26px; font-size: 11px; }
  .rounds--locked .rounds__n { min-height: 0; font-size: 18px; }
  .rounds--locked .rounds__cell { padding: 2px 3px; }
  .rounds--locked .rounds__score { width: 100%; height: 34px; font-size: 20px; }
  .rounds--locked .rounds__total { height: 46px; font-size: 24px; }
  .fix-pop { display: none; }

  /* Finish and the next round, always in reach above the tabs */
  .game-bar {
    position: fixed; z-index: 18; left: 0; right: 0; bottom: calc(67px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bar); border-top: 1px solid var(--line);
  }
  .game-bar .btn { min-height: 56px; border-radius: 18px; }
  .game-bar__finish { flex: none; gap: 6px; padding: 0 18px; font-size: 15px; }
  .game-bar__add { flex: 1; padding: 0 12px; font-size: 17px; }
  .game-bar .more-menu__btn { width: 56px; height: 56px; border-radius: 18px; background: var(--surface-alt); color: var(--ink); }
  .game-bar ~ .toast { bottom: calc(156px + env(safe-area-inset-bottom)); }
}

/* ---------- The number pad (kit 05): the display, twelve keys, Subtract and Add ---------- */
.pad-display {
  flex: none; display: flex; align-items: center; justify-content: flex-end; height: 84px; padding: 0 20px; overflow: hidden; border-radius: 18px;
  background: var(--ground); border: 2px solid var(--focus); color: var(--ink); font: 900 68px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
/* The score already there (going back to a player, or fixing one): typing replaces it */
.pad-display--old { color: var(--muted); }
.pad-keys { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad-key {
  height: 62px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 16px; border: 1px solid var(--line);
  background: var(--ground); color: var(--ink); font: 900 32px/1 var(--font-display); cursor: pointer; touch-action: manipulation;
}
.pad-key:hover { background: var(--surface-alt); }
.pad-key:active { transform: translateY(1px); }
.pad-key--word { font: 800 17px var(--font-body); }
.pad-ops { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pad-op {
  height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 18px;
  font: 800 16px var(--font-body); cursor: pointer; touch-action: manipulation;
}
.pad-op--minus { border: 2px solid var(--ink); background: var(--surface); color: var(--ink); }
.pad-op--plus { border: 0; background: var(--accent); color: var(--on-accent); }
.pad-op[disabled] { opacity: 0.6; cursor: default; }
.fix-sheet .pad-display { height: 72px; padding: 0 18px; font-size: 58px; }
.fix-sheet .pad-key { height: 54px; }
.fix-sheet .pad-op { height: 60px; }
.kbd {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--field-line); border-bottom-width: 2px;
  background: var(--surface); color: var(--ink); font: 700 11px var(--font-body); display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Score a round: the rounds beside the docked pad; phones give the pad the screen ---------- */
.back-link--plain { height: 40px; padding: 0 14px 0 8px; background: var(--surface-alt); color: var(--ink); }
.lb-games .pad-page__blocked { gap: 16px; padding-top: 20px; }
.pad-layout { max-width: 1360px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pad-board { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pad-board__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pad-board__title { margin: 0; font-size: 72px; line-height: 0.9; overflow-wrap: anywhere; }
.pad-board__sub { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.pad-board__note { font-size: 14px; line-height: 1.45; color: var(--muted); }
.rounds--pad { overflow: hidden; border-radius: 20px; background: var(--surface); }
.rounds--pad .rounds__row { grid-template-columns: 84px repeat(var(--cols), minmax(0, 1fr)); }
.rounds--pad .rounds__row--head, .rounds--pad .rounds__row--foot { border-radius: 0; }
.rounds--pad .rounds__row--folded { grid-template-columns: 84px minmax(0, 1fr); }
.rounds__n--folded { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--muted); }
.rounds__folded { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); }
.rounds--pad .rounds__cell { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 4px; }
.rounds--pad .rounds__score { width: auto; min-width: 56px; height: 40px; padding: 0 8px; border-radius: 10px; cursor: default; }
.rounds__row--live { background: var(--lb-soft); }
.rounds__row--live .rounds__n { color: var(--lb-text); }
.rounds--pad .rounds__row--live .rounds__cell { min-height: 58px; }
.live-cell {
  min-width: 64px; height: 44px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
  border: 1.5px solid transparent; color: var(--muted); font: 900 26px/1 var(--font-display);
}
.live-cell--done { background: var(--surface); border: 1.5px dashed var(--field-line); color: var(--ink); }
.live-cell--here { background: var(--surface); border: 2px solid var(--focus); color: var(--ink); box-shadow: 0 0 0 3px var(--lb-soft); }
.rounds__total--pad { flex-direction: column; gap: 2px; height: 64px; line-height: 1; }
.rounds__was { font-family: var(--font-body); font-size: 12px; font-weight: 800; color: var(--muted); }

.pad {
  flex: 0 1 440px; min-width: 340px; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pad:focus { outline: none; }
.pad__head { display: flex; align-items: center; gap: 10px; }
.pad__leave { order: 2; border: 0; background: var(--surface-alt); color: var(--ink); }
.pad__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.pad__title { font-family: var(--font-head); font-size: 26px; font-weight: 800; }
.pad__progress { font-size: 13px; font-weight: 700; color: var(--muted); }
.pad__strip { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.pad__seat {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 0; border-radius: 16px;
  background: transparent; color: var(--ink); font-family: var(--font-body); cursor: pointer; opacity: 0.55;
}
.pad__seat--here { background: var(--lb-soft); opacity: 1; }
.pad__seat--done { opacity: 1; }
.pad__seat--done:hover { background: var(--surface-alt); }
.pad__seat[disabled] { cursor: default; }
/* The boards name the seats without faces; the color shows on the player being scored. */
.pad__seat-face { display: none; }
.pad__seat-name { max-width: 100%; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad__seat-value { min-height: 18px; font-family: var(--font-display); font-size: 18px; font-weight: 900; line-height: 1; color: var(--ink-2); }
.pad__who { display: flex; align-items: center; gap: 12px; }
.pad__who .seat-face--guest { outline-offset: 3px; }
.pad__who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pad__who-name { font-family: var(--font-head); font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.pad__who-preview { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pad__mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.pad__back { gap: 4px; padding: 0 10px; font-size: 14px; }
.pad__back[disabled] { opacity: 0.4; }
.pad__mid .btn--outline { gap: 6px; font-size: 14px; }
.pad__keys-hint { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); }
.pad__keys-hint .kbd + .kbd, .pad__keys-hint .kbd:not(:first-child) { margin-left: 4px; }

@media (max-width: 719px) {
  .pad-layout { display: block; padding: 0; }
  .pad {
    position: fixed; inset: 0; z-index: 45; min-width: 0; overflow-y: auto; overscroll-behavior: contain; gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none;
  }
  .pad__leave { order: 0; }
  .pad__title { font-size: 22px; }
  .pad__progress { font-size: 12px; }
  .pad__seat { gap: 3px; padding: 6px 2px; }
  .pad__seat-name { font-size: 12px; }
  .pad__seat-value { min-height: 17px; font-size: 17px; }
  .pad__who .seat-face { width: 48px; height: 48px; font-size: 20px; }
  .pad__who-name { font-size: 24px; }
  .pad__who-preview { font-size: 13px; }
  .pad-display { height: 76px; padding: 0 18px; font-size: 62px; }
  .pad__back { padding: 0 8px; }
  .pad-key { height: 58px; }
  .pad-op { height: 64px; }
}

/* ---------- Starting or changing a game (the Editor boards, kit 08 and 09) ---------- */
.lb-games .editor__head .icon-btn { border: 0; background: var(--surface-alt); color: var(--ink); }
.lb-games .editor__head > .tile--lg { width: 48px; height: 48px; border-radius: 16px; }
.game-editor { gap: 22px; }
.game-editor .field__label, .game-editor__h { font-size: 15px; font-weight: 800; }
.game-editor__name { height: 52px; font-size: 18px; font-weight: 600; }
.game-editor__lede { margin-top: -6px; font-size: 14px; }
.game-editor__sub-label { padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.known { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.known__label { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.known-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 14px var(--font-body); white-space: nowrap; cursor: pointer;
}
.known-chip[aria-pressed="true"] { border: 2px solid var(--lb); background: var(--lb-soft); }
.known-chip__hint { font-weight: 600; color: var(--muted); }
.win-seg { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-alt); }
.win-seg__btn {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: 600 15px var(--font-body); cursor: pointer;
}
.win-seg__btn[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }
.player-chips { gap: 8px; }
.player-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px 0 6px; border-radius: 999px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: 600 15px var(--font-body); white-space: nowrap; cursor: pointer;
}
.player-chip--guest { border-style: dashed; }
.player-chip[aria-pressed="true"] { border: 2px solid var(--lb); background: var(--lb-soft); font-weight: 800; }
.player-chip[disabled] { cursor: not-allowed; }
.player-chip .seat-face { width: 34px; height: 34px; font-size: 14px; }
.player-chip > svg { color: var(--lb-text); }
.game-editor__guest .input { height: 48px; font-size: 15px; font-weight: 500; }
.game-editor__guest .btn { flex: none; min-height: 48px; gap: 6px; font-size: 14px; }
.seat-order { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.seat-order__row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 2px 4px 2px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.seat-order__row--new { border: 2px solid var(--lb); background: var(--lb-soft); }
.seat-order__grip { flex: none; display: flex; color: var(--muted); }
.seat-order__n { flex: none; width: 18px; font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--ink-2); }
.seat-order .seat-face { width: 34px; height: 34px; font-size: 14px; }
.seat-order__text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.2; }
.seat-order__name { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.seat-order__sub { font-size: 12px; font-weight: 700; color: var(--muted); }
.seat-order__row--new .seat-order__sub { color: var(--lb-text); }
.seat-order .icon-btn { border-radius: 12px; color: var(--ink); }
.seat-order .icon-btn[disabled] { opacity: 0.35; cursor: default; }
.seat-order .seat-order__remove { color: var(--danger); }
.join-choice { display: flex; flex-direction: column; gap: 8px; }
.join-option {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.join-option[aria-checked="true"] { border: 2px solid var(--lb); background: var(--lb-soft); }
.join-option__dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; border: 2px solid var(--field-line); display: flex; align-items: center; justify-content: center; }
.join-option__dot::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: transparent; }
.join-option[aria-checked="true"] .join-option__dot { border-color: var(--lb); }
.join-option[aria-checked="true"] .join-option__dot::after { background: var(--lb); }
.join-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.join-option__label { font-size: 16px; font-weight: 800; }
.join-option__hint { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.join-option__n { flex: none; font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1; color: var(--muted); }
.join-option[aria-checked="true"] .join-option__n { color: var(--lb-text); }
.end-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1.5px dashed var(--field-line); }
.end-box__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.end-box__hint { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.end-box__input { flex: none; width: 120px; height: 50px; font: 900 24px var(--font-display); }
.game-editor__save { padding: 0 24px; font-weight: 800; }

/* ---------- Finishing a game ---------- */
.finish__lede { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.finish__standings { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.finish__standings .standings__row { min-height: 50px; }
.finish__standings .standings__rank { width: 20px; font-size: 20px; }
.finish__standings .standings__name { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.finish__standings .standings__name svg { flex: none; color: var(--lb-text); }
.finish__standings .standings__total { font-size: 26px; }
.finish__when { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--ground); }
.finish__when-row { display: flex; align-items: center; gap: 10px; }
.finish__when-row > svg { flex: none; color: var(--ink-2); }
.finish__when-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.finish__when-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.finish__when-v { font-size: 16px; font-weight: 800; }
.finish__lock { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.finish__lock svg { flex: none; margin-top: 1px; }
.finish__done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0 4px; text-align: center; }
.finish__done-title { font-size: 56px; line-height: 0.85; }
.finish__done-sub { font-size: 15px; color: var(--ink-2); }

@media (max-width: 719px) {
  .lb-games .editor__head > .tile--lg { display: none; }
  .game-editor { gap: 18px; }
  .known { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .known::-webkit-scrollbar { display: none; }
  .known-chip { min-height: 44px; }
  .win-seg { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win-seg__btn { gap: 6px; padding: 0 8px; }
  .player-chip { gap: 7px; min-height: 44px; padding: 0 12px 0 5px; font-size: 14px; }
  .player-chip .seat-face { width: 32px; height: 32px; font-size: 13px; }
  .game-editor__guest .btn { width: 48px; padding: 0; }
  .seat-order__row { gap: 6px; min-height: 52px; padding: 2px 2px 2px 10px; }
  .seat-order__n { width: 16px; font-size: 19px; }
  .seat-order .seat-face { width: 32px; height: 32px; font-size: 13px; }
  .seat-order__sub { display: none; }
  .seat-order__row--new .seat-order__sub { display: block; }
  .end-box { padding: 12px 14px; }
  .end-box__hint { font-size: 13px; }
  .end-box__input { width: 96px; height: 48px; font-size: 22px; }
  .lb-games .editor__foot .game-editor__save, .lb-games .editor__foot .finish__go { flex: 1 1 100%; min-height: 56px; border-radius: 18px; font-size: 17px; }
  .finish__keep { align-self: center; margin: 0 auto; }
  .finish__done-title { font-size: 48px; }
}

/* ==========================================================================
   To-dos: the list, the week board, Done and categories.
   Design authority: the "To-dos Logbook" canvas. Marigold by day and by night; --lb-soft is the
   wash behind a chosen chip, the repeat sentence and a drop target.
   ========================================================================== */
.lb-todos { --lb-soft: #FCF1D2; }
.nett-root[data-theme="night"] .lb-todos, .nett-root[data-theme="night"].lb-todos { --lb-soft: #3E3520; }
@media (prefers-color-scheme: dark) { .nett-root[data-theme="system"] .lb-todos { --lb-soft: #3E3520; } }

/* ---------- Category colors: the stored day color, its lighter partner at night ---------- */
.cat-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--cat-day, var(--muted)); }
.cat-dot--none { background: transparent; border: 1.5px dashed var(--field-line); }
.nett-root[data-theme="night"] :is(.cat-dot, .td-cat-row__dot, .td-swatch__dot) { background: var(--cat-night, var(--cat-day)); }
.nett-root[data-theme="night"] .cat-dot--none { background: transparent; }
.nett-root[data-theme="night"] .td-swatch__dot { color: #1A1830; }
@media (prefers-color-scheme: dark) {
  .nett-root[data-theme="system"] :is(.cat-dot, .td-cat-row__dot, .td-swatch__dot) { background: var(--cat-night, var(--cat-day)); }
  .nett-root[data-theme="system"] .cat-dot--none { background: transparent; }
  .nett-root[data-theme="system"] .td-swatch__dot { color: #1A1830; }
}

/* ---------- Wide and phone wording ---------- */
.td-narrow { display: none; }

/* ---------- Header and sections ---------- */
.td-hero .td-sections { margin-bottom: 4px; }
.td-hero .section-link { background: var(--chip); border-color: transparent; color: var(--sc-ink); font-weight: 700; }
.td-hero .section-link[aria-current="page"] { background: var(--sel); color: var(--on-sel); font-weight: 800; }
.td-btn-chip { background: var(--chip); color: var(--sc-ink); }
.td-phone-head { display: none; }
.td-body { gap: 18px; }
.td-toast__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Layout: the list and its side column ---------- */
.td-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.td-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.td-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.td-someday--narrow { display: none; }

/* ---------- Quick add (desktop) ---------- */
.td-quick {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 18px;
  border: 1.5px solid var(--field-line); background: var(--surface);
}
.td-quick:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.td-quick__plus { flex: none; display: flex; color: var(--muted); }
.td-quick__input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font: 600 16px var(--font-body); outline: none; }
.td-quick__input::placeholder { color: var(--muted); }
.td-quick__day {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px;
  background: var(--lb); color: var(--lb-on); font: 800 14px var(--font-body);
}
.td-quick__day select { appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.td-quick__day select:focus { outline: none; }
.td-quick__day:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.td-quick__day option { color: #17262B; background: #FFFFFF; }
.td-quick__add { min-height: 44px; padding: 0 18px; }

/* ---------- Week strip (phone) ---------- */
.td-strip { display: none; }

/* ---------- Filters ---------- */
.td-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.td-who { flex: 999 1 420px; }
.td-who__person { padding-left: 5px; gap: 8px; }
.td-cat-filter { flex: 1 1 200px; }
.td-cat-filter .input { height: 44px; }

/* ---------- Day groups and cards ---------- */
.td-group { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 84px; }
.td-group__head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.td-group__title { flex: 1; margin: 0; font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.td-group__n { margin-left: 6px; color: var(--muted); }
.td-group--over .td-group__title { color: var(--danger); }
.td-group--today .td-group__title { color: var(--lb-text); }
.td-group__add { color: var(--ink); }
.td-card { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 0 6px 0 0; }
.td-group--over .td-card { border: 2px solid var(--danger); }
.td-group--today .td-card { border: 2px solid var(--lb); }
.td-empty-day { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px 0 16px; border-radius: 16px; border: 1.5px dashed var(--line); }
.td-empty-day__label { flex: 1; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.td-empty-day__note { text-transform: none; letter-spacing: 0; font-weight: 600; }
.td-note { font-size: 13px; color: var(--muted); }
.td-note--line { padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }

/* ---------- A to-do row ---------- */
.td-row { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 6px 0; }
.td-swipe + .td-swipe { border-top: 1px solid var(--line); }
.td-row--failed { box-shadow: inset 4px 0 0 var(--danger); }
.td-row__grip { flex: none; width: 20px; display: flex; justify-content: center; color: var(--field-line); }
.td-row[draggable="true"] .td-row__grip { cursor: grab; }
.td-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-left: 4px; }
.td-row__title {
  align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 700 16px/1.3 var(--font-body); text-align: left; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.td-row__title:hover { text-decoration-color: currentColor; }
.td-row--done .td-row__title { color: var(--muted); text-decoration: line-through; text-decoration-color: currentColor; }
.td-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.td-row__meta .sync-chip { height: 22px; }
.td-meta { display: inline-flex; align-items: center; gap: 6px; }
.td-due { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-2); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; }
.td-due--over { background: var(--danger-soft); color: var(--ink); }
.td-skip {
  flex: none; min-height: 44px; padding: 0 14px; margin-right: 8px; border-radius: 999px; border: 1.5px solid var(--field-line);
  background: transparent; color: var(--ink); font: 700 14px var(--font-body); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.td-faces { flex: none; display: flex; padding-left: 6px; }
.td-faces .face { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.td-anyone {
  flex: none; height: 28px; padding: 0 10px; border-radius: 999px; border: 1.5px dashed var(--field-line);
  color: var(--ink-2); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.td-row__more { color: var(--ink-2); }
.td-row--compact .td-row { min-height: 56px; }
.td-row--compact .td-row__title { font-size: 15px; }
.td-row--compact .td-check { margin-left: -8px; }

/* ---------- The check: a 26px box in a 44px target, marigold when done ---------- */
.td-check { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.td-check__box {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--field-line); background: transparent;
  color: var(--lb-on); display: flex; align-items: center; justify-content: center;
}
.td-check:hover .td-check__box { border-color: var(--lb-text); background: var(--lb-soft); }
.td-check:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.td-check[aria-checked="true"] .td-check__box { background: var(--lb); border-color: var(--lb); }

/* ---------- Side column panels ---------- */
.td-panel { display: flex; flex-direction: column; padding: 16px 12px 8px 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.td-panel__head { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; color: var(--lb-text); }
.td-panel__title { flex: 1; margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.td-panel__title .td-group__n { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.td-panel .td-note:not(.td-note--line) { padding-bottom: 6px; }
.td-panel .td-swipe { border-top: 1px solid var(--line); }
.td-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; color: var(--lb-text); text-decoration: none; }
.td-link:hover { text-decoration: underline; }
.td-done-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.td-done-line__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-done-line__title { font-weight: 700; overflow-wrap: anywhere; }
.td-done-line__meta { font-size: 13px; color: var(--muted); }
.td-done-week { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.td-done-week strong { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1; color: var(--lb-text); }

/* ---------- Add button (phone) ---------- */
.td-fab { display: none; }

/* ---------- The to-do sheet ---------- */
.td-form { gap: 22px; }
.td-chip__sub { font-weight: 600; opacity: 0.75; }
.td-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: -6px; }
.td-cat-chip { padding: 0 14px 0 12px; }
.td-cat-chip .cat-dot { width: 12px; height: 12px; }
.td-cat-chip.chip[role="radio"][aria-checked="true"] { background: var(--lb-soft); border: 2px solid var(--lb); color: var(--ink); }
.lb-todos .person-chip[aria-pressed="true"] { border-color: var(--lb); }
.td-repeats__toggle { display: none; }
.td-repeats__body { display: flex; flex-direction: column; gap: 10px; }
.td-every { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.td-every__l { font-size: 15px; font-weight: 700; }
.td-every__n { min-width: 40px; text-align: center; font-family: var(--font-display); font-size: 24px; font-weight: 900; }
.td-sentence { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--lb-soft); font-size: 14px; line-height: 1.4; }
.td-sentence > svg { flex: none; margin-top: 1px; color: var(--lb-text); }
.td-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-alt); }
.td-segment__opt {
  min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
  font: 600 15px var(--font-body); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.td-segment__opt[aria-checked="true"] { background: var(--surface); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.td-segment__opt[disabled] { cursor: not-allowed; }
.td-segment__opt[disabled]:not([aria-checked="true"]) { opacity: 0.55; }
.td-vis-note { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Categories ---------- */
.td-cats { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.td-cats__list { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-cats__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.td-cats__title { flex: 1; margin: 0; font-size: 26px; font-weight: 800; }
.td-cat-rows { margin: 0; padding: 4px 8px 4px 16px; list-style: none; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.td-cat-row { display: flex; align-items: center; gap: 14px; min-height: 68px; }
.td-cat-row + .td-cat-row { border-top: 1px solid var(--line); }
.td-cat-row--failed { box-shadow: inset 4px 0 0 var(--danger); }
.td-cat-row__dot { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--cat-day); }
.td-cat-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.td-cat-row__name { font-size: 17px; font-weight: 800; }
.td-cat-row__meta { font-size: 13px; color: var(--muted); }
.td-cat-row__edit { border-width: 1.5px; border-color: var(--field-line); }
.td-cat-row__edit[aria-pressed="true"] { border: 2px solid var(--lb); background: var(--lb-soft); }
.td-cats__panel { flex: 1 1 380px; min-width: 0; }
.td-cat-panel { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 24px; background: var(--surface); border: 2px solid var(--lb); }
.td-cat-panel__head { display: flex; flex-direction: column; gap: 2px; }
.td-kicker { font-size: 12px; color: var(--lb-text); }
.td-cat-panel__title { margin: 0; font-size: 24px; font-weight: 800; }
.td-cat-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-cat-panel__actions .spacer { flex: 1; }
.td-cat-panel__actions > .confirm { flex: 1 1 100%; }
.td-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.td-swatch { height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.td-swatch[aria-checked="true"] { border: 2px solid var(--ink); }
.td-swatch__dot { width: 30px; height: 30px; border-radius: 999px; background: var(--cat-day); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.td-reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.td-reads__day, .td-reads__night { height: 52px; padding: 0 10px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; overflow: hidden; white-space: nowrap; }
.td-reads__day { background: #FFFFFF; border: 1px solid #DCE0D6; color: #17262B; }
.td-reads__night { background: #252240; border: 1px solid #3A3660; color: #F1EFE8; }
.td-reads__dot { flex: none; width: 12px; height: 12px; border-radius: 999px; }
.td-sheet-narrow { display: contents; }

@media (min-width: 900px) {
  .td-sheet-narrow { display: none; }
}

@media (max-width: 899px) {
  .td-aside { display: none; }
  .td-someday--narrow { display: flex; }
  .td-cats__panel { display: none; }
}

@media (max-width: 719px) {
  .td-wide { display: none; }
  .td-narrow { display: inline; }
  .td-hero { display: none; }
  .td-phone-head { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
  .td-phone-head__line { font-size: 14px; font-weight: 700; color: var(--muted); }
  .td-sections, .td-who, .td-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .td-sections::-webkit-scrollbar, .td-who::-webkit-scrollbar, .td-chips::-webkit-scrollbar { display: none; }
  .td-sections__wide { display: none; }
  .td-body { gap: 14px; }
  .td-quick, .td-cat-filter { display: none; }

  .td-strip { display: flex; gap: 5px; }
  .td-strip__day {
    position: relative; flex: 1 1 0; min-width: 0; height: 66px; border-radius: 14px; background: var(--surface-alt); color: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none;
  }
  .td-strip__day--today { background: var(--lb); color: var(--lb-on); }
  .td-strip__day--someday { flex: 1.35 1 0; background: transparent; border: 1.5px dashed var(--field-line); }
  .td-strip__dow { font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .td-strip__n { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1; }
  .td-strip__count { font-size: 11px; font-weight: 800; opacity: 0.85; }
  .td-strip__over { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--ground); }

  .td-group { gap: 6px; }
  .td-card { padding: 0 12px 0 2px; }
  .td-row { min-height: 60px; padding: 5px 0; }
  .td-row__grip, .td-row__more { display: none; }
  .td-row__meta { font-size: 12px; gap: 2px 10px; }
  .td-skip { padding: 0 10px; margin-right: 0; font-size: 13px; }
  .td-faces .face { width: 28px; height: 28px; font-size: 12px; }
  .td-empty-day { min-height: 44px; padding: 0 2px 0 14px; border-radius: 14px; }
  .td-empty-day__label { font-size: 12px; }

  .td-fab {
    position: fixed; z-index: 25; right: 18px; bottom: calc(102px + env(safe-area-inset-bottom)); width: 60px; height: 60px;
    border-radius: 20px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(238, 106, 60, 0.35);
  }

  .td-repeats__toggle {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 16px; border: 1.5px solid var(--field-line);
    background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  }
  .td-repeats__toggle > svg:first-child { color: var(--lb-text); }
  .td-repeats__toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  .td-repeats__text { flex: 1; display: flex; flex-direction: column; }
  .td-repeats__label { font-weight: 700; }
  .td-repeats__sum { font-size: 13px; color: var(--muted); }
  .td-repeats__body { display: none; }
  .td-repeats__body--open { display: flex; }
  .td-repeats__title { display: none; }

  .td-cats__title { font-size: 22px; }
}

/* ---------- To-dos: moving (drag targets, the "…" menu, swipe, the Move sheet, the repeat question) ---------- */
.td-lifted { opacity: 0.45; }
.td-group--drop .td-card, .td-group--drop .td-empty-day { border: 2px dashed var(--lb-text); background: var(--lb-soft); }
.td-panel--drop { border: 2px dashed var(--lb-text); background: var(--lb-soft); }
.td-swipe { position: relative; }
.td-swipe .td-row { position: relative; background: var(--surface); touch-action: pan-y; }
.td-swipe__under {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px; font-weight: 800;
}
.td-swipe__under--done { justify-content: flex-start; background: var(--lb); color: var(--lb-on); }
.td-swipe__under--move { justify-content: flex-end; background: var(--sel); color: var(--on-sel); }
.td-row__more-wrap { position: relative; flex: none; }
.td-menu {
  position: absolute; z-index: 31; right: 0; top: calc(100% + 4px); min-width: 220px; padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.td-menu__item {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
  font: 600 15px var(--font-body); display: flex; align-items: center; gap: 10px; text-align: left; white-space: nowrap;
}
.td-menu__item:hover, .td-menu__item:focus-visible { background: var(--surface-alt); }
.td-menu-scrim { position: fixed; inset: 0; z-index: 30; border: 0; background: transparent; cursor: default; }

.td-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.td-day {
  height: 72px; padding: 0; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface-alt); color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-body);
}
.td-day[aria-checked="true"] { border: 2px solid var(--lb); background: var(--lb-soft); color: var(--lb-text); }
.td-day--now { border: 1.5px dashed var(--field-line); background: transparent; opacity: 0.5; cursor: default; }
.td-day__dow { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.td-day__n { font-family: var(--font-display); font-size: 26px; font-weight: 900; line-height: 0.95; }
.td-day__note { font-size: 11px; font-weight: 700; opacity: 0.8; min-height: 14px; }
.td-days__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.td-day-alt {
  height: 52px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font: 700 15px var(--font-body); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.td-day-alt[aria-checked="true"] { border: 2px solid var(--lb); background: var(--lb-soft); }
.td-day-alt[disabled] { border-style: dashed; border-color: var(--field-line); background: transparent; opacity: 0.5; cursor: default; }

.td-choice { display: flex; flex-direction: column; gap: 8px; }
.td-choice__opt {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 18px; border: 1.5px solid var(--field-line);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.td-choice__opt[aria-checked="true"] { border: 2px solid var(--lb); background: var(--lb-soft); }
.td-choice__dot { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--field-line); display: flex; align-items: center; justify-content: center; }
.td-choice__opt[aria-checked="true"] .td-choice__dot { border-color: var(--lb-text); }
.td-choice__opt[aria-checked="true"] .td-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--lb-text); }
.td-choice__text { display: flex; flex-direction: column; }
.td-choice__label { font-weight: 800; }
.td-choice__sub { font-size: 13px; color: var(--muted); }

.td-dialog {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 24px; border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
}
.td-dialog__head { display: flex; flex-direction: column; gap: 4px; }
.td-dialog__title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; }
.td-dialog__title:focus { outline: none; }
.td-dialog__sub { font-size: 15px; color: var(--ink-2); }
.td-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- To-dos: the week board (desktop) ---------- */
.td-week-hero { align-items: flex-end; }
.td-week-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--chip); }
.td-week-nav .icon-btn { color: var(--sc-ink); }
.td-week-nav__now { height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--sel); color: var(--on-sel); font: 800 15px var(--font-body); cursor: pointer; }
.td-week-nav__now:not([aria-current]) { background: transparent; color: var(--sc-ink); }
.td-week-page { max-width: 1400px; }
.td-week { display: flex; flex-direction: column; gap: 20px; }
.td-week-narrow { display: none; }
.td-week-over { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 22px; border: 2px solid var(--danger); background: var(--danger-wash); }
.td-week-over__title { margin: 0 8px 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); }
.td-week-chip { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 12px 0 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: grab; }
.td-week-chip__text { display: flex; flex-direction: column; }
.td-week-chip .td-week-card__title { padding-top: 0; }
.td-week-chip__due { font-size: 12px; font-weight: 700; color: var(--danger); }
.td-week-over__hint { flex: 1 1 200px; font-size: 13px; color: var(--ink-2); }
.td-skip--sm { min-height: 40px; margin: 0 0 0 6px; padding: 0 12px; font-size: 13px; }
.td-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.td-col { min-width: 0; min-height: 520px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 22px; border: 1px solid var(--line); }
.td-col--today { background: var(--surface); border: 2px solid var(--lb); }
.td-col--drop { background: var(--lb-soft); border: 2px solid var(--lb); }
.td-col > .spacer { flex: 1; }
.td-col__head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; }
.td-col__tile {
  flex: none; width: 46px; height: 52px; border-radius: 14px; background: var(--surface-alt); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display);
}
.td-col--today .td-col__tile { background: var(--lb); color: var(--lb-on); }
.td-col__dow { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.td-col__n { font-size: 26px; font-weight: 900; line-height: 0.9; }
.td-col__name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.td-col__day { font-weight: 800; font-size: 15px; }
.td-col__count { font-size: 12px; font-weight: 700; color: var(--muted); }
.td-week-card { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px 2px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: grab; }
.td-week-card--failed { border: 2px solid var(--danger); }
.td-week-card__top { display: flex; align-items: flex-start; gap: 2px; }
.td-week-card__title {
  flex: 1; min-width: 0; padding: 11px 0 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 700 14px/1.3 var(--font-body); text-align: left; overflow-wrap: anywhere;
}
.td-week-card--done .td-week-card__title { color: var(--muted); text-decoration: line-through; }
.td-week-card__meta { display: flex; align-items: center; gap: 8px; padding-left: 12px; min-height: 22px; }
.td-week-card__meta .spacer { flex: 1; }
.td-week-card__meta .sync-chip { height: 22px; padding: 0 7px; }
.td-week-card__icon { flex: none; display: flex; color: var(--muted); }
.td-check--sm { width: 40px; }
.td-check--sm .td-check__box { width: 22px; height: 22px; border-radius: 7px; }
.td-faces--xs .face { margin-left: -5px; }
.td-col__drop {
  height: 92px; padding: 0 10px; border-radius: 16px; border: 2px dashed var(--lb-text); background: var(--lb-soft); color: var(--lb-text);
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 800;
}
.td-col__add {
  height: 44px; border-radius: 14px; border: 1.5px dashed var(--field-line); background: transparent; color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px var(--font-body);
}
.td-tray { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.td-tray--drop { background: var(--lb-soft); border: 2px dashed var(--lb-text); }
.td-tray__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--lb-text); }
.td-tray__head .td-panel__title { flex: none; }
.td-tray__head .td-note { flex: 1 1 280px; font-size: 14px; }
.td-tray__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-tray-chip { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 8px; border-radius: 16px; background: var(--surface-alt); color: var(--ink); cursor: grab; }
.td-tray-chip__grip { display: flex; color: var(--muted); }
.td-tray-chip__title { padding: 0 8px 0 0; height: 100%; border: 0; background: none; color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; }

@media (max-width: 1099px) {
  .td-week__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-col { min-height: 280px; }
}

@media (max-width: 899px) {
  .td-week { display: none; }
  .td-week-narrow { display: block; }
  .td-week-nav { display: none; }
}

@media (max-width: 719px) {
  .td-days { gap: 6px; }
  .td-day { height: 68px; }
}

/* ---------- To-dos: Done ---------- */
.td-done-count { display: none; }
.td-done-who { flex: none; }
.td-done-day { display: flex; flex-direction: column; padding: 14px 16px 4px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.td-done-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.td-done-day__title { margin: 0; font-size: 20px; font-weight: 800; }
.td-done-day__count { font-size: 14px; font-weight: 700; color: var(--muted); }
.td-done-day__rows { display: flex; flex-direction: column; }
.td-done-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 66px; border-top: 1px solid var(--line); }
.td-done-row--undone { opacity: 0.6; }
.td-done-row--undone .td-done-row__title { text-decoration: line-through; }
.td-done-row__face { position: relative; width: 36px; height: 36px; display: flex; }
.td-done-row__badge {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 999px; background: var(--lb); color: var(--lb-on);
  box-shadow: 0 0 0 2px var(--surface); display: flex; align-items: center; justify-content: center;
}
.td-done-row__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.td-done-row__title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.td-done-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.td-done-row__undo { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--lb-text); font: 700 15px var(--font-body); cursor: pointer; }
.td-done-row__undo:hover { background: var(--lb-soft); }
.td-done-row__back { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--lb-soft); color: var(--lb-text); font-size: 13px; font-weight: 800; display: flex; align-items: center; white-space: nowrap; }
.td-done-more { align-self: center; }
.td-done-end { text-align: center; }
.td-done-cats { padding: 18px 20px 8px; }
.td-done-cat { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.td-done-cat .cat-dot { width: 12px; height: 12px; }
.td-done-cat__name { flex: 1; font-weight: 700; }
.td-done-cat__n { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 719px) {
  .td-wide-flex { display: none; }
  .td-done-count {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  }
  .td-done-count__n { flex: none; display: flex; flex-direction: column; line-height: 1; }
  .td-done-count__big { font-family: var(--font-display); font-weight: 900; font-size: 52px; color: var(--lb-text); }
  .td-done-count__l { font-size: 12px; font-weight: 700; color: var(--muted); }
  .td-done-count__text { flex: 1; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
  .td-done-who { display: none; }
  .td-done-day { padding: 0; border: 0; background: transparent; gap: 6px; }
  .td-done-day__head { padding: 0; }
  .td-done-day__title { font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
  .td-done-day__count { font-size: 13px; font-weight: 800; }
  .td-done-day__rows { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 0 4px 0 12px; }
  .td-done-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; min-height: 62px; }
  .td-done-row:first-child { border-top: 0; }
  .td-done-row__face .face { width: 32px; height: 32px; font-size: 13px; }
  .td-done-row__badge { width: 16px; height: 16px; }
  .td-done-row__title { font-size: 15px; }
  .td-done-row__meta { font-size: 12px; gap: 2px 10px; }
}

/* ---------- To-dos on the home page: the up-next to-do checks off from home ---------- */
.list__row--check { gap: 8px; padding: 6px 0; }
.list__row--check .td-check { margin-left: -10px; }
.list__link { color: var(--ink); text-decoration: none; }
.list__link:hover .list__label { text-decoration: underline; }

/* ==========================================================================
   System Admin: Overview, Families, People, Activity and System.
   Design authority: the "System Admin" canvas. Indigo by day, lavender by night: the slot the
   AI Tools logbook had. Admin isn't a logbook, so its tint and pieces live here.
   ========================================================================== */

/* ---------- Tint ---------- */
.lb-admin {
  --lb: #34305C; --lb-on: #FFFFFF; --lb-text: #4A4199; --lb-soft: #E4E1F2;
  --sc-sky: #E4E1F2; --sc-r1: #8FC9DC; --sc-r2: #5A5490; --sc-r3: #34305C; --sc-sun: #F5B935;
  --adm-link: #4A4199; --adm-bar: #C9C5E4; --adm-off: #3B4A50; --adm-on-off: #FFFFFF; --adm-off-row: #F3F2EE;
  --adm-code: #17262B; --adm-code-ink: #E8ECE4;
}
.nett-root[data-theme="night"] .lb-admin, .nett-root[data-theme="night"].lb-admin {
  --lb: #B7B0F0; --lb-on: #1A1830; --lb-text: #B7B0F0; --lb-soft: #3A3566;
  --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #4A4480; --sc-r3: #B7B0F0;
  --adm-link: #F5B935; --adm-bar: #4F4A80; --adm-off: #CFCBE8; --adm-on-off: #1A1830; --adm-off-row: #211E38;
  --adm-code: #121024; --adm-code-ink: #E4E1F2;
}
@media (prefers-color-scheme: dark) {
  .nett-root[data-theme="system"] .lb-admin {
    --lb: #B7B0F0; --lb-on: #1A1830; --lb-text: #B7B0F0; --lb-soft: #3A3566;
    --sc-sky: #1A1830; --sc-r1: #34305C; --sc-r2: #4A4480; --sc-r3: #B7B0F0;
    --adm-link: #F5B935; --adm-bar: #4F4A80; --adm-off: #CFCBE8; --adm-on-off: #1A1830; --adm-off-row: #211E38;
    --adm-code: #121024; --adm-code-ink: #E4E1F2;
  }
}

/* ---------- Where Admin lives: past a rule in the top bar, last row of More ---------- */
.shell-nav__rule { flex: none; align-self: center; width: 1px; height: 24px; margin: 0 6px; background: var(--line); }
.sheet__label { padding: 8px 4px 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Frame: header with section pills, page ---------- */
.adm-wait { min-height: 60vh; }
.adm-hero { position: relative; overflow: hidden; background: var(--sc-sky); color: var(--sc-ink); }
.adm-ridge { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }
.adm-ridge__r1 { fill: var(--sc-r1); }
.adm-ridge__r2 { fill: var(--sc-r2); }
.adm-ridge__fade { fill: var(--ground); }
.adm-hero__inner {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 24px 24px 120px;
  display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-end; justify-content: space-between;
}
.adm-hero__inner--wide { max-width: 1280px; }
.adm-hero--full .adm-hero__inner { align-items: flex-start; padding: 24px 24px max(216px, calc(13.6vw + 20px)); }
.adm-hero__text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.adm-hero__title { margin: 4px 0 0; font-size: clamp(52px, 6vw, 80px); line-height: 0.85; overflow-wrap: anywhere; }
.adm-hero__title--big { font-size: clamp(52px, 8vw, 112px); }
.adm-hero__sub { font-size: 17px; font-weight: 600; color: var(--sc-sub); max-width: 760px; text-wrap: pretty; }
.adm-hero--full .adm-hero__sub { font-size: 18px; }
.adm-hero__aside { flex: none; display: flex; gap: 8px; }
.adm-bigcard { text-decoration: none; }
.adm-sections { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-section {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--chip);
  color: var(--sc-ink); font-size: 14px; font-weight: 700; text-decoration: none;
}
.adm-section[aria-current="page"] { background: var(--sel); color: var(--on-sel); font-weight: 800; }
.adm-page { max-width: 1200px; margin: 0 auto; padding: 0 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.adm-page--wide { max-width: 1280px; }
.adm-phone-only { display: none !important; }

/* ---------- Columns, blocks, cards ---------- */
.adm-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.adm-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.adm-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.adm-block { display: flex; flex-direction: column; gap: 12px; }
.adm-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.adm-h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.adm-h2__n { font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: 0.8; color: var(--lb-text); }
.adm-hint { font-size: 14px; color: var(--muted); }
.adm-link { color: var(--adm-link); font-weight: 700; text-decoration: none; }
.adm-link:hover { text-decoration: underline; }
.adm-link--sm { font-size: 14px; }
.adm-quiet { margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--surface-alt); color: var(--ink-2); font-size: 15px; }
.adm-quiet--card { padding: 12px 0; background: transparent; }
.adm-footnote { font-size: 13px; color: var(--muted); }
.adm-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.adm-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: 18px 20px 12px; display: flex; flex-direction: column; }
.adm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.adm-card__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.adm-card__title--sm { font-size: 20px; }
.adm-card__text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.adm-card__text--muted { color: var(--muted); }
.adm-card--danger { background: var(--danger-wash); padding-bottom: 18px; }
.adm-btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); font-weight: 800; }
.adm-card--danger .adm-btn-danger { align-self: flex-start; background: transparent; }

/* ---------- Tiles ---------- */
.adm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-tile {
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; min-width: 0;
}
a.adm-tile:hover { box-shadow: var(--shadow); }
.adm-tile__n { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--lb-text); }
.adm-tile__l { font-size: 15px; font-weight: 800; }
.adm-tile__sub { font-size: 13px; color: var(--muted); }
.adm-tile__sub--warn { color: var(--warn-ink); font-weight: 700; }

/* ---------- Tones: icon tiles by what they mean ---------- */
.adm-tone--warn { background: var(--warn-soft); color: var(--warn-ink); }
.adm-tone--error { background: var(--danger-soft); color: var(--danger); }
.adm-tone--quiet { background: var(--surface-alt); color: var(--ink-2); }
.adm-tone--admin { background: var(--lb-soft); color: var(--lb-text); }

/* ---------- Needs a look ---------- */
.adm-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 14px; }
.adm-need {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 16px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.adm-need:hover { box-shadow: var(--shadow); }
.adm-need--urgent { border: 2px solid var(--warn-ink); }
.adm-need__icon { flex: none; width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.adm-need__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-need__title { font-weight: 800; font-size: 18px; line-height: 1.25; }
.adm-need__sub { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.adm-need__go { display: flex; align-items: center; gap: 4px; padding-top: 4px; font-size: 14px; font-weight: 800; color: var(--adm-link); }
.adm-need__chev { flex: none; align-self: center; color: var(--muted); }

/* ---------- Sign-ins chart ---------- */
.adm-chart { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.adm-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.adm-chart__title { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.adm-chart__note { font-size: 14px; font-weight: 700; color: var(--muted); }
.adm-chart__plot { position: relative; height: 180px; display: flex; align-items: flex-end; gap: 6px; padding-left: 34px; border-bottom: 1px solid var(--line); }
.adm-chart__grid { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; }
.adm-chart__grid span { width: 26px; text-align: right; }
.adm-chart__grid::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.adm-chart__grid--top { top: 0; transform: translateY(-50%); }
.adm-chart__grid--mid { top: 50%; transform: translateY(-50%); }
.adm-bar {
  position: relative; flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 5px 5px 1px 1px;
  background: var(--adm-bar); cursor: pointer;
}
.adm-bar--today, .adm-bar[aria-pressed="true"] { background: var(--lb); }
.adm-bar[aria-pressed="true"] { outline: 2px solid var(--lb); outline-offset: 2px; }
.adm-chart__axis { display: flex; justify-content: space-between; padding-left: 34px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------- Activity rows (Overview, a family) ---------- */
.adm-feed { display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.adm-feed__row {
  display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) 190px; gap: 14px; align-items: center; min-height: 64px;
  padding: 8px 20px 8px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.adm-feed__row:first-child { border-top: 0; }
.adm-feed__row:hover { background: var(--surface-alt); }
.adm-feed__when { display: flex; flex-direction: column; line-height: 1.1; }
.adm-feed__time { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.adm-feed__day { font-size: 12px; font-weight: 700; color: var(--muted); }
.adm-feed__what { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-feed__label { font-weight: 800; font-size: 15px; }
.adm-feed__msg { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-feed__who { min-width: 0; text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.adm-feed__name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-feed__where { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* How serious: light to dark, so the four don't rely on hue */
.adm-sev { flex: none; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.adm-sev--info { background: var(--surface-alt); color: var(--ink-2); }
.adm-sev--warn { background: var(--warn-soft); color: var(--warn-ink); }
.adm-sev--error { background: var(--danger-soft); color: var(--danger); }
.adm-sev--critical { background: var(--danger); color: var(--on-danger); }

/* ---------- Small rows in cards: newest families, health ---------- */
.adm-mini-row { display: flex; align-items: center; gap: 12px; min-height: 60px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.adm-card__head + .adm-mini-row { border-top: 0; }
.adm-mini-row__tile { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--lb-soft); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.adm-mini-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.adm-mini-row__name { font-weight: 800; font-size: 15px; }
.adm-mini-row__meta { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-mini-row__when { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.adm-health { display: flex; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--line); }
.adm-card__head + .adm-health { border-top: 0; }
.adm-health__dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--success-ink); }
.adm-health__dot--warn { background: var(--warn-ink); }
.adm-health__dot--bad { background: var(--danger); }
.adm-health__name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
.adm-health__state { font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: right; }

/* ---------- Marks: only the exceptions wear one ---------- */
.adm-mark {
  flex: none; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; border: 0; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; box-sizing: border-box;
}
.adm-mark--lg { height: 30px; padding: 0 11px 0 9px; gap: 6px; font-size: 13px; }
.adm-mark--admin { background: var(--lb); color: var(--lb-on); }
.adm-mark--locked { background: var(--warn-soft); color: var(--warn-ink); }
.adm-mark--unconfirmed { background: transparent; color: var(--ink-2); border: 2px dashed var(--field-line); }
.adm-mark--off { background: var(--adm-off); color: var(--adm-on-off); }
.adm-mark--yours { background: var(--lb-soft); color: var(--lb-text); }

/* ---------- Faces ---------- */
.adm-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--lb); color: var(--lb-on);
  font: 800 18px var(--font-body); display: flex; align-items: center; justify-content: center; object-fit: cover;
}
.adm-avatar--sm { width: 40px; height: 40px; font-size: 16px; }
.adm-avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.adm-avatar--never { background: var(--surface-alt); color: var(--muted); outline: 2px dashed var(--field-line); outline-offset: 2px; }
.adm-avatar--off { background: var(--adm-off); color: var(--adm-on-off); }

/* ---------- Logbook dots: a family's five logbooks ---------- */
.adm-dots { display: inline-flex; gap: 5px; }
.adm-dot {
  flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--lb); color: var(--lb-on);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.adm-dot--off { background: transparent; color: var(--field-line); border: 1.5px dashed var(--field-line); }

/* ---------- Toolbar: search, filter pills, sort ---------- */
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.adm-search { flex: 1 1 320px; max-width: 420px; }
.adm-search .input { height: 52px; border-radius: 999px; border-width: 2px; font-weight: 600; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-filter {
  height: 44px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 14px var(--font-body); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
}
.adm-filter[aria-checked="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
.adm-filter__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-2);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.adm-filter[aria-checked="true"] .adm-filter__count { background: var(--on-sel); color: var(--sel); }
.adm-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.adm-sort .input { height: 44px; width: auto; padding-left: 12px; border-radius: 12px; border-width: 2px; font-weight: 700; font-size: 14px; }

/* ---------- The families table ---------- */
.adm-table { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.adm-fam { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px 170px 100px 24px; gap: 16px; align-items: center; }
.adm-table__head {
  padding: 12px 20px; background: var(--surface-alt); font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.adm-table__row { min-height: 76px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.adm-table__row:hover { background: var(--surface-alt); }
.adm-table__row--off { background: var(--adm-off-row); }
.adm-fam__name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.adm-fam__tile { flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--lb-soft); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.adm-fam__tile--off { background: var(--surface-alt); color: var(--muted); }
.adm-fam__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-fam__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-fam__label { font-weight: 800; font-size: 17px; }
.adm-fam__since { font-size: 13px; color: var(--muted); }
.adm-fam__people { display: flex; flex-direction: column; line-height: 1.25; }
.adm-fam__count { font-weight: 800; font-size: 15px; }
.adm-fam__note { font-size: 12px; font-weight: 700; color: var(--muted); }
.adm-fam__note--warn { color: var(--warn-ink); }
.adm-fam__last { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.adm-fam__stored { text-align: right; font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--lb-text); white-space: nowrap; }
.adm-fam__chev { color: var(--muted); }
.adm-table__right { text-align: right; }
.adm-table__empty { padding: 40px 20px; border-top: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.adm-table__empty-title { font-weight: 800; font-size: 17px; color: var(--ink); }

/* ---------- A family ---------- */
.adm-off-note { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--adm-off); color: var(--adm-on-off); font-weight: 600; }
.adm-off-note svg { flex: none; }
.adm-list { display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.adm-person-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 130px 120px 22px; gap: 14px; align-items: center; min-height: 76px;
  padding: 10px 20px 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.adm-person-row:first-child { border-top: 0; }
.adm-person-row:hover { background: var(--surface-alt); }
.adm-person-row__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-person-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-person-row__name { font-weight: 800; font-size: 16px; }
.adm-person-row__meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-person-row__stat { display: flex; flex-direction: column; line-height: 1.25; }
.adm-person-row__stat--count { text-align: right; }
.adm-person-row__strong { font-weight: 800; font-size: 14px; }
.adm-person-row__n { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--lb-text); }
.adm-person-row__small { font-size: 12px; color: var(--muted); }
.adm-person-row__chev { color: var(--muted); }

/* Logbook switches: one per logbook, in its own tint */
.adm-switches { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; margin-top: 4px; }
.adm-switch-row {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 14px 6px 8px; border: 0;
  border-top: 1px solid var(--line); background: var(--ground); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.adm-switch-row:first-child { border-top: 0; }
.adm-switch-row[disabled] { cursor: progress; }
.adm-switch-row__tile { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--lb); color: var(--lb-on); display: flex; align-items: center; justify-content: center; }
.adm-switch-row__tile--off { background: var(--surface-alt); color: var(--muted); }
.adm-switch-row__name { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; }
.adm-switch {
  flex: none; width: 52px; height: 32px; padding: 3px; border-radius: 999px; background: var(--surface-alt);
  border: 2px solid var(--field-line); display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box;
}
.adm-switch::after { content: ""; width: 22px; height: 22px; border-radius: 999px; background: var(--field-line); }
[aria-checked="true"] > .adm-switch { background: var(--lb); border-color: var(--lb); justify-content: flex-end; }
[aria-checked="true"] > .adm-switch::after { background: var(--lb-on); }
.adm-switches__note { display: flex; align-items: center; gap: 6px; padding: 10px 0 6px; font-size: 13px; font-weight: 700; color: var(--success-ink); }
.adm-switches__note--failed { color: var(--danger); }

/* Details */
.adm-fact { display: flex; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--line); }
.adm-card__title + .adm-fact { border-top: 0; }
.adm-fact__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; padding: 6px 0; }
.adm-fact__l { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.adm-fact__v { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-copy { border: 0; background: var(--surface-alt); }

/* ---------- Online-only states ---------- */
.adm-state {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 560px; padding: 18px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
}
.adm-state--failed { background: var(--danger-wash); }
.adm-state--loading { max-width: none; gap: 14px; }
.adm-state__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--surface-alt); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.adm-state__title { font-weight: 800; font-size: 16px; }
.adm-state__text { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.adm-skel { display: flex; align-items: center; gap: 10px; width: 100%; }
.adm-skel__dot { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-alt); animation: pulse 1.4s ease-in-out infinite; }
.adm-skel__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.adm-skel__lines span { height: 12px; border-radius: 999px; background: var(--surface-alt); animation: pulse 1.4s ease-in-out infinite; }
.adm-skel__lines span + span { height: 10px; }

/* ---------- Confirming a big change ---------- */
.adm-confirm { gap: 14px; }
.adm-confirm__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center; }
.adm-confirm__icon--admin { background: var(--lb-soft); color: var(--lb-text); }
.adm-confirm__title { font-size: 26px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.adm-confirm__body { color: var(--ink-2); }
.adm-confirm .input { height: 52px; border-width: 2px; font-weight: 600; }
.adm-confirm .btn[disabled] { background: var(--surface-alt); color: var(--muted); border-color: transparent; opacity: 1; }

/* ---------- Narrow and phone ---------- */
@media (max-width: 1099px) {
  .adm-fam { grid-template-columns: minmax(0, 1fr) 130px 170px 100px 24px; }
  .adm-fam > .adm-fam__last, .adm-table__head > :nth-child(4) { display: none; }
}

@media (max-width: 719px) {
  .adm-phone-only { display: block !important; }
  .adm-wide-only { display: none !important; }

  .adm-hero, .adm-hero--full { background: transparent; color: var(--ink); }
  .adm-hero .adm-ridge, .adm-hero .scenery, .adm-hero .stars, .adm-hero .bigcard { display: none; }
  .adm-hero__inner, .adm-hero--full .adm-hero__inner { padding: 12px 16px 4px; gap: 10px; }
  .adm-hero__title, .adm-hero__sub { display: none; }
  .adm-hero--keep .adm-hero__title { display: block; font-size: 40px; margin: 2px 0 0; }
  .adm-hero--keep .adm-hero__sub { display: block; font-size: 14px; color: var(--ink-2); }
  .adm-hero--keep .back-link { background: var(--surface-alt); color: var(--ink); }
  .adm-sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 2px 0; }
  .adm-sections::-webkit-scrollbar { display: none; }
  .adm-section { flex: none; height: 44px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
  .adm-section[aria-current="page"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); font-weight: 800; }
  .adm-page { padding: 8px 16px 32px; gap: 14px; }

  .adm-cols, .adm-main { gap: 16px; }
  .adm-h2 { font-size: 22px; }
  .adm-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-tile { padding: 12px 14px; border-radius: 18px; }
  .adm-tile__n { font-size: 34px; }
  .adm-tile__l { font-size: 14px; }
  .adm-tile__sub { font-size: 12px; }

  .adm-needs { gap: 10px; }
  .adm-need { align-items: center; gap: 12px; padding: 12px; border-radius: 20px; }
  .adm-need__icon { width: 42px; height: 42px; border-radius: 14px; }
  .adm-need__title { font-size: 15px; }
  .adm-need__sub { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .adm-need__go { display: none; }

  .adm-chart { padding: 14px 16px 12px; border-radius: 20px; gap: 10px; }
  .adm-chart__title { font-size: 18px; }
  .adm-chart__note { font-size: 13px; }
  .adm-chart__plot { height: 80px; gap: 3px; padding-left: 0; }
  .adm-chart__grid { display: none; }
  .adm-bar { border-radius: 3px 3px 1px 1px; }
  .adm-chart__axis { padding-left: 0; }
  .adm-chart__axis span:not(:first-child):not(:last-child) { display: none; }

  .adm-feed { border-radius: 20px; }
  .adm-feed__row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 60px; padding: 8px 12px; }
  .adm-feed__row .adm-sev { order: 1; width: 34px; height: 34px; }
  .adm-feed__what { order: 2; }
  .adm-feed__when { order: 3; text-align: right; }
  .adm-feed__day { display: none; }
  .adm-feed__time { font-size: 18px; }
  .adm-feed__who { display: none; }

  .adm-toolbar { gap: 10px; }
  .adm-search { flex-basis: 100%; max-width: none; }
  .adm-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .adm-filters::-webkit-scrollbar { display: none; }
  .adm-filter { flex: none; }
  .adm-sort { margin-left: 0; }

  .adm-table { display: flex; flex-direction: column; gap: 10px; border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .adm-table__head { display: none; }
  .adm-fam.adm-table__row {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  }
  .adm-fam.adm-table__row--off { background: var(--adm-off-row); }
  .adm-fam__name { gap: 12px; }
  .adm-fam__tile { width: 42px; height: 42px; border-radius: 14px; }
  .adm-fam__text { flex: 1; }
  .adm-fam__label { font-size: 16px; }
  .adm-fam__people { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-left: 54px; }
  .adm-fam__people .adm-fam__count { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .adm-fam__books { padding-left: 54px; }
  .adm-fam > .adm-fam__last, .adm-fam__chev { display: none; }
  .adm-fam__stored { font-size: 18px; }
  .adm-table__empty { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }

  .adm-list { border-radius: 20px; }
  .adm-person-row { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; min-height: 68px; padding: 8px 12px; }
  .adm-person-row__name { font-size: 15px; }
  .adm-card { padding: 14px 16px 10px; border-radius: 20px; }
  .adm-card--danger { padding-bottom: 16px; }
  .adm-off-note { font-size: 14px; }
  .adm-confirm__title { font-size: 22px; }
}

/* ---------- People and Activity: the list, with the opened one beside it ---------- */
.adm-two { display: grid; grid-template-columns: minmax(0, 1fr) min(480px, max(300px, 40%)); gap: 24px; align-items: start; }
.adm-two:not(:has(> .adm-two__panel)) { grid-template-columns: minmax(0, 1fr); }
.adm-two__list { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.adm-two__panel {
  min-width: 0; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
/* A confirm dialog opened in the panel has to sit over the top bar too. */
.adm-two__panel:has(.dialog) { z-index: 45; }
.adm-sheet-scrim, .adm-sheet-grip, .adm-sheet-done, .adm-more-btn, .adm-codes-link, .adm-codes__back, .adm-health-card__meta, .adm-feed__by { display: none; }
.adm-search--wide { flex: none; max-width: 520px; }
.adm-list > .adm-table__empty:first-child { border-top: 0; }
.adm-list__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line);
  background: var(--surface-alt); font-size: 13px; font-weight: 700; color: var(--muted);
}
.adm-list__foot--bare { padding: 0; border: 0; background: transparent; }
.adm-table__empty--card { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }

/* A person in the list: the whole row opens them */
.adm-person-pick {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 130px; gap: 14px; align-items: center; min-height: 70px;
  padding: 8px 18px 8px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.adm-person-pick:first-child { border-top: 0; }
.adm-person-pick:hover { background: var(--surface-alt); }
.adm-person-pick[aria-pressed="true"] { background: var(--lb-soft); box-shadow: inset 4px 0 0 var(--lb); }
.adm-person-pick__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-person-pick__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-person-pick__name { font-weight: 800; font-size: 16px; }
.adm-person-pick__meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-person-pick__last { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }

/* ---------- One person ---------- */
.adm-person { display: flex; flex-direction: column; gap: 18px; }
.adm-person__head { display: flex; align-items: center; gap: 14px; }
.adm-person__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-person__name { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.adm-person__email { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.adm-person__family { font-size: 14px; }
.adm-person__marks { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-person__note { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); color: var(--ink); font-size: 14px; line-height: 1.45; }
.adm-person__note--warn { background: var(--warn-soft); }
.adm-person__note--off { background: var(--danger-wash); }
.adm-person__part { display: flex; flex-direction: column; gap: 8px; }
.adm-person__facts { gap: 0; }
.adm-person__facts > .adm-person__h { margin-bottom: 4px; }
.adm-person__part--admin { gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-person__h { margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.adm-person__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-person__cant { font-size: 13px; color: var(--muted); }
.adm-quiet-btn { background: var(--surface-alt); color: var(--ink); font-size: 14px; }

/* Help with the account: outlined, an icon each */
.adm-help {
  min-height: 54px; padding: 6px 14px 6px 10px; border-radius: 16px; border: 2px solid var(--primary); background: var(--surface); color: var(--ink);
  font: 700 15px var(--font-body); display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
}
.adm-help[disabled] { opacity: 0.6; cursor: progress; }
.adm-help__icon { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--lb-soft); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.adm-help__text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.adm-help__sub { font-size: 12px; font-weight: 600; color: var(--muted); }
.adm-said { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-ink); font-size: 14px; font-weight: 600; }
.adm-said svg { flex: none; }
.adm-said--failed { background: var(--danger-soft); color: var(--ink); }
.adm-said__text { flex: 1; min-width: 0; }
.adm-said__ok { flex: none; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--toast-link); font: 800 13px var(--font-body); cursor: pointer; }
.adm-said--failed .adm-said__ok { color: var(--ink); }

/* Facts, devices, keys */
.adm-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; box-sizing: border-box; }
.adm-person__h + .adm-kv { border-top: 0; }
.adm-kv > :first-child { flex: none; color: var(--ink-2); }
.adm-kv > :last-child { min-width: 0; font-weight: 800; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-kv > .adm-kv__wrap { white-space: normal; overflow-wrap: anywhere; }
.adm-kv--sm { min-height: 0; padding: 7px 0; font-size: 13px; }
.adm-device { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 8px; border-radius: 16px; background: var(--ground); }
.adm-device__icon { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-alt); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.adm-device__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.adm-device__name { font-weight: 800; font-size: 14px; }
.adm-device__meta { font-size: 12px; color: var(--muted); }
.adm-device__act { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--danger); font: 800 13px var(--font-body); cursor: pointer; }
.adm-device__act:hover { background: var(--danger-soft); }
.adm-device__act[disabled] { opacity: 0.6; cursor: progress; }

/* The system-admin switch */
.adm-admin-switch { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.adm-admin-switch[disabled] { cursor: default; }
.adm-admin-switch[disabled] .adm-switch { opacity: 0.5; }
.adm-admin-switch__text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.adm-admin-switch__label { font-weight: 800; font-size: 15px; }
.adm-admin-switch__note { font-size: 13px; color: var(--muted); }

/* ---------- Activity ---------- */
.adm-toolbar--activity { gap: 10px; }
.adm-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-alt); }
.adm-seg button {
  height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 14px var(--font-body); cursor: pointer; white-space: nowrap;
}
.adm-seg button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); font-weight: 800; }
.adm-activity-more { display: contents; }
.adm-activity-find { flex: 1 1 280px; min-width: 0; display: flex; gap: 8px; }
.adm-search--activity { flex: 1 1 auto; max-width: none; }
.adm-search--activity .input { height: 48px; font-size: 15px; }
.adm-select .input { height: 48px; width: auto; padding-left: 12px; border-radius: 14px; border-width: 2px; font-weight: 700; font-size: 14px; }
.adm-dates { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.adm-dates .input { height: 48px; width: auto; border-radius: 14px; border-width: 2px; font-weight: 700; font-size: 14px; }
.adm-only-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-only-chip {
  height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: 999px; background: var(--lb-soft); color: var(--lb-text);
  font: 800 13px var(--font-body); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.adm-day { display: flex; flex-direction: column; gap: 8px; }
.adm-day__title { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-head); font-size: 20px; font-weight: 800; }
.adm-day__date { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--muted); }
.adm-day .adm-feed { border-radius: 22px; }
.adm-feed__row--pick {
  width: 100%; grid-template-columns: 76px 38px minmax(0, 1fr) 160px; gap: 12px; min-height: 62px; padding: 8px 16px 8px 14px;
  border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.adm-feed__row--pick:first-child { border-top: 0; }
.adm-feed__row--pick .adm-feed__time { font-size: 19px; }
.adm-feed__row--pick[aria-pressed="true"] { background: var(--lb-soft); box-shadow: inset 4px 0 0 var(--lb); }

/* One entry */
.adm-entry { display: flex; flex-direction: column; gap: 14px; }
.adm-entry__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-sev-chip { height: 30px; padding: 0 11px 0 9px; border-radius: 999px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.adm-entry__raw { font-size: 13px; color: var(--muted); }
.adm-entry__title { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.15; }
.adm-entry__msg { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.adm-entry__facts { display: flex; flex-direction: column; }
.adm-entry__source { font-weight: 600; font-size: 13px; }
.adm-entry__details { display: flex; flex-direction: column; gap: 6px; }
.adm-entry__details-head { display: flex; align-items: center; justify-content: space-between; }
.adm-copy-btn {
  height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-alt); color: var(--ink);
  font: 700 13px var(--font-body); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.adm-code {
  margin: 0; padding: 14px; border-radius: 14px; background: var(--adm-code); color: var(--adm-code-ink);
  font: 500 12.5px/1.55 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}
.adm-entry__only { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- System ---------- */
.adm-sys { display: flex; flex-direction: column; gap: 32px; }
.adm-link--btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--adm-link); cursor: pointer; }
.adm-link--btn[disabled] { color: var(--muted); cursor: default; }
.adm-health-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.adm-health-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; }
.adm-health-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.adm-health-card__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--lb-soft); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.adm-health-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.adm-health-card__name { font-weight: 800; font-size: 17px; }
.adm-health-card__state { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--success-ink); }
.adm-health-card__state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.adm-health-card__state--warn { color: var(--warn-ink); }
.adm-health-card__state--bad { color: var(--danger); }
.adm-health-card__act { align-self: flex-start; margin-top: 10px; }
.adm-cols--system { gap: 28px; }
.adm-job { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.adm-job__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-job__icon { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--lb-soft); color: var(--lb-text); display: flex; align-items: center; justify-content: center; }
.adm-job__text { flex: 1; min-width: 200px; display: flex; flex-direction: column; line-height: 1.3; }
.adm-job__name { font-weight: 800; font-size: 18px; }
.adm-job__desc { font-size: 14px; color: var(--ink-2); }
.adm-job .adm-select .input { height: 44px; border-radius: 12px; }
.adm-progress { height: 14px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.adm-progress span { display: block; height: 100%; border-radius: 999px; background: var(--lb); transition: width 0.3s ease; }
.adm-job__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.adm-job__nums > span { display: flex; flex-direction: column; line-height: 1.1; }
.adm-job__n { font-family: var(--font-display); font-size: 30px; font-weight: 900; }
.adm-job__n--tint { color: var(--lb-text); }
.adm-job__l { font-size: 13px; font-weight: 700; color: var(--muted); }
.adm-job__note { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.adm-job__note--done { color: var(--success-ink); }
.adm-codes { padding-top: 12px; }
.adm-block__head--wrap { flex-wrap: wrap; align-items: center; }
.adm-hint--text { margin: -4px 0 0; color: var(--ink-2); }
.adm-code-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px 56px; gap: 14px; align-items: center; min-height: 68px;
  padding: 8px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.adm-code-row:first-child { border-top: 0; }
.adm-code-row:hover { background: var(--surface-alt); }
.adm-code-row[disabled] { cursor: progress; }
.adm-code-row .adm-switch { justify-self: end; }
.adm-code-row__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-code-row__code { font-weight: 800; font-size: 16px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.adm-code-row__code--off { color: var(--muted); }
.adm-code-row__note { font-size: 13px; color: var(--muted); }
.adm-code-row__stat { display: flex; flex-direction: column; line-height: 1.2; }
.adm-code-row__v { font-weight: 800; font-size: 14px; }
.adm-code-row__v--warn { color: var(--warn-ink); }
.adm-code-row__l { font-size: 12px; color: var(--muted); }
.adm-store { gap: 14px; padding: 18px 20px; }
.adm-store__total { display: flex; align-items: baseline; gap: 10px; }
.adm-store__n { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 0.9; color: var(--lb-text); }
.adm-store__l { font-weight: 800; font-size: 16px; }
.adm-store__row { display: flex; flex-direction: column; gap: 5px; color: var(--ink); text-decoration: none; }
.adm-store__line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.adm-store__name { font-weight: 800; }
.adm-store__size { font-weight: 700; color: var(--ink-2); }
.adm-store__bar { height: 10px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.adm-store__fill { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--adm-bar); }
.adm-store__fill--top { background: var(--lb); }

@media (max-width: 1099px) {
  .adm-person-pick { grid-template-columns: 44px minmax(0, 1fr); }
  .adm-person-pick__last { display: none; }
  .adm-feed__row--pick { grid-template-columns: 64px 38px minmax(0, 1fr); }
  .adm-feed__row--pick .adm-feed__who { display: none; }
}

@media (max-width: 719px) {
  /* People: the person takes the screen, with the way back on top. */
  .adm-two { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .adm-two:not(.adm-two--picked) > .adm-two__panel { display: none; }
  .adm-two--picked:not(.adm-two--sheet) > .adm-two__list { display: none; }
  .lb-admin:has(.adm-two--picked:not(.adm-two--sheet)) .adm-hero { display: none; }
  .adm-two__panel { position: static; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 14px; }
  .adm-two__panel > .back-link.adm-phone-only { display: inline-flex !important; background: var(--surface-alt); color: var(--ink); }
  /* Wide screens open the first row by themselves; on a phone nothing is open until it's tapped. */
  .adm-two:not(.adm-two--picked) [aria-pressed="true"] { background: transparent; box-shadow: none; }
  .adm-person-pick { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; min-height: 68px; padding: 8px 12px; }
  .adm-person-pick__name { font-size: 15px; }
  .adm-list__foot { padding: 10px 14px; flex-wrap: wrap; }
  .adm-person { gap: 16px; }
  .adm-person__head .adm-avatar--lg { width: 60px; height: 60px; font-size: 24px; }
  .adm-person__name { font-size: 24px; }
  .adm-person__email, .adm-person__family { font-size: 15px; }
  .adm-help { min-height: 56px; }
  .adm-person__facts { padding: 4px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
  .adm-person__facts > .adm-person__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adm-person__facts > .adm-kv { min-height: 0; padding: 11px 0; }
  .adm-device { min-height: 54px; background: var(--surface); border: 1px solid var(--line); }
  .adm-person__actions { flex-direction: column; }
  .adm-person__actions > .btn { width: 100%; min-height: 48px; }
  .adm-said {
    position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom));
    padding: 10px 10px 10px 16px; border-radius: 16px; box-shadow: var(--shadow);
  }

  /* Activity: search and a filter button first, the severity pills under them; an entry opens in a sheet. */
  .adm-toolbar--activity { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .adm-activity-find { order: -1; flex: none; }
  .adm-more-btn {
    position: relative; flex: none; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--field-line);
    background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .adm-more-btn[aria-expanded="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
  .adm-more-btn__n {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; box-sizing: border-box;
    background: var(--lb); color: var(--lb-on); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  }
  .adm-activity-more { display: none; }
  .adm-activity-more--open { display: flex; flex-wrap: wrap; gap: 8px; }
  .adm-activity-more .adm-select { flex: 1 1 150px; }
  .adm-activity-more .adm-select .input { width: 100%; }
  .adm-dates { flex: 1 1 100%; }
  .adm-dates .input { flex: 1; min-width: 0; }
  .adm-seg { gap: 8px; padding: 0 16px 0 0; margin-right: -16px; border-radius: 0; background: transparent; overflow-x: auto; scrollbar-width: none; }
  .adm-seg::-webkit-scrollbar { display: none; }
  .adm-seg button { flex: none; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); }
  .adm-seg button[aria-checked="true"] { background: var(--sel); border-color: var(--sel); color: var(--on-sel); box-shadow: none; }
  .adm-day { gap: 6px; }
  .adm-day__title { font-size: 18px; }
  .adm-day__date { display: none; }
  .adm-day .adm-feed { border-radius: 20px; }
  .adm-feed__row--pick { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 62px; padding: 8px 12px; }
  .adm-feed__row--pick .adm-feed__time { font-size: 17px; }
  .adm-feed__by { display: inline; }
  .adm-sheet-scrim { display: block; }
  .adm-two--sheet > .adm-two__panel {
    position: fixed; z-index: 41; top: auto; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 48px - env(safe-area-inset-top)); overflow-y: auto;
    gap: 12px; padding: 10px 18px calc(28px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: var(--shadow);
  }
  .adm-sheet-grip { display: block; flex: none; align-self: center; width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
  .adm-sheet-done { display: inline-flex; flex: none; width: 100%; background: var(--sel); color: var(--on-sel); font-weight: 800; }
  .adm-entry { gap: 12px; }
  .adm-entry__title { font-size: 24px; }
  .adm-entry__msg { font-size: 15px; }
  .adm-code { padding: 12px; font-size: 12px; max-height: 200px; }

  /* System: health as one list, the job and storage as cards, the codes behind a row of their own. */
  .adm-sys { display: flex; flex-direction: column; gap: 14px; }
  .adm-sys--codes .adm-sys__more { display: none; }
  .adm-sys:not(.adm-sys--codes) .adm-codes { display: none; }
  .adm-codes { padding-top: 0; }
  .adm-codes__back { display: inline-flex; background: var(--surface-alt); color: var(--ink); }
  .adm-codes-link {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 10px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  }
  .adm-health-cards { display: flex; flex-direction: column; gap: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
  .adm-health-card { min-height: 64px; justify-content: center; padding: 8px 14px 8px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .adm-health-card:first-child { border-top: 0; }
  .adm-health-card__head { padding: 0; }
  .adm-health-card__icon { width: 40px; height: 40px; border-radius: 13px; }
  .adm-health-card__titles { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "meta state"; column-gap: 10px; align-items: center; line-height: 1.25; }
  .adm-health-card__name { grid-area: name; font-size: 15px; }
  .adm-health-card__meta { grid-area: meta; display: block; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adm-health-card__state { grid-area: state; justify-self: end; }
  .adm-health-card .adm-kv, .adm-health-card__act { display: none; }
  .adm-cols--system { gap: 14px; }
  .adm-job { padding: 14px 16px; border-radius: 20px; gap: 12px; }
  .adm-job__icon { width: 40px; height: 40px; border-radius: 13px; }
  .adm-job__text { min-width: 0; }
  .adm-job__name { font-size: 16px; }
  .adm-job__desc, .adm-job__nums { display: none; }
  .adm-job .adm-select { flex: 1 1 100%; }
  .adm-job .adm-select .input { width: 100%; }
  .adm-job__head > .btn { flex: 1 1 100%; min-height: 48px; }
  .adm-progress { height: 12px; }
  .adm-code-row { grid-template-columns: minmax(0, 1fr) auto 56px; gap: 12px; padding: 8px 14px; }
  .adm-store { padding: 14px 16px; gap: 10px; }
  .adm-store__n { font-size: 40px; }
  .adm-store__bar { height: 8px; }
}

/* ==========================================================================
   Camp Logbook: the slideshow and the photo frame.
   Design authority: the "Camp Logbook — Slideshow" canvas. The setup page, the settings sheet and
   the frame page wear the theme; the player is always dark, a frame around the photo. Its sizes
   follow the screen's short side, so a phone, a tablet on the wall and a TV all read the same.
   ========================================================================== */

/* ---------- Setup: the preview and Start, how it plays, the photo frame ---------- */
.ss-setup {
  display: grid; grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr); grid-template-areas: "preview how" "frame how";
  /* The tall card spans a flexible row, so the preview row stays the preview's height. */
  grid-template-rows: auto 1fr; gap: 24px; align-items: start;
}
.ss-setup__preview { grid-area: preview; }
.ss-setup__how { grid-area: how; }
.ss-setup__frame { grid-area: frame; }
.ss-card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.ss-card__title { font-size: 22px; font-weight: 800; }
.ss-card__foot { font-size: 13px; color: var(--muted); }
.ss-setup__preview { padding: 16px; }
.ss-preview { --ss-pad: 14px; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: #0B0C10; color: #FFFFFF; }
.ss-preview__img { width: 100%; height: 100%; object-fit: cover; }
.ss-preview__wait { position: absolute; inset: 0; background: #1B1D26; animation: pulse 1.4s ease-in-out infinite; }
.ss-preview__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.ss-preview__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 0 4px; }
.ss-preview__text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-preview__title { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.ss-preview__line { font-size: 15px; color: var(--muted); }
.ss-preview__keys { padding: 0 4px 4px; font-size: 13px; color: var(--muted); }
.ss-preview .ss-cap { max-width: 80%; gap: 4px; padding: 8px 11px; border-radius: 11px; }
.ss-preview .ss-cap__trip { font-size: 20px; }
.ss-preview .ss-cap__camp { font-size: 12px; gap: 5px; }
.ss-preview .ss-cap__date { font-size: 11px; }

/* How it plays: groups split by a rule; the sheet's compact version has fewer words. */
.ss-choices { display: flex; flex-direction: column; gap: 22px; }
.ss-choices--compact { gap: 18px; }
.ss-group { display: flex; flex-direction: column; gap: 10px; }
.ss-group__label { font-size: 17px; font-weight: 800; }
.ss-choices--compact .ss-group__label, .ss-sheet .ss-group__label { font-size: 16px; }
.ss-hint { font-size: 14px; color: var(--ink-2); }
.ss-choices--compact .ss-hint, .ss-sheet .ss-hint { font-size: 13px; color: var(--muted); }
.ss-rule { flex: none; height: 1px; background: var(--line); }
.ss-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-alt); }
.ss-seg button {
  min-width: 0; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 15px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ss-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-weight: 800; }

.ss-trips { display: flex; flex-direction: column; gap: 8px; }
.ss-trip {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ss-trip[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 0.5px var(--primary); }
.ss-trip__tile {
  flex: none; width: 48px; height: 52px; border-radius: 14px; background: var(--surface-alt); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-display);
}
.ss-trip[aria-checked="true"] .ss-trip__tile { background: var(--lb); color: var(--lb-on); }
.ss-trip__mon { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.ss-trip__day { font-size: 26px; font-weight: 900; }
.ss-trip__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ss-trip__name { font-weight: 800; overflow-wrap: anywhere; }
.ss-trip__meta { font-size: 13px; color: var(--muted); }
.ss-trip__count { flex: none; font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.ss-trip__check {
  flex: none; width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--field-line); color: var(--on-sel);
  display: flex; align-items: center; justify-content: center;
}
.ss-trip[aria-checked="true"] .ss-trip__check { border: 0; background: var(--sel); }

.ss-switch { min-height: 60px; gap: 12px; padding: 8px 14px 8px 10px; }
.ss-switch__tile { width: 38px; height: 38px; border-radius: 12px; }
.ss-choices--compact .ss-switch { min-height: 52px; padding: 6px 12px 6px 8px; border-radius: 16px; }
.ss-choices--compact .ss-switch__tile { width: 34px; height: 34px; border-radius: 11px; }

.ss-corner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 4px; }
.ss-corner-row__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ss-corner-row__label { font-weight: 700; }
.ss-corner-row__hint { font-size: 13px; color: var(--muted); }
.ss-corners {
  flex: none; width: 196px; height: 124px; padding: 8px; border-radius: 16px; border: 2px solid var(--field-line); background: var(--surface-alt);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.ss-corner {
  width: 76px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px dashed var(--field-line); background: var(--surface);
  display: flex; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer;
}
.ss-corner--tl { justify-self: start; align-self: start; align-items: flex-start; }
.ss-corner--tr { justify-self: end; align-self: start; align-items: flex-end; }
.ss-corner--bl { justify-self: start; align-self: end; align-items: flex-start; }
.ss-corner--br { justify-self: end; align-self: end; align-items: flex-end; }
.ss-corner__line { width: 36px; height: 5px; border-radius: 3px; background: var(--field-line); }
.ss-corner__line--short { width: 24px; height: 4px; opacity: 0.7; }
.ss-corner[aria-checked="true"] { border: 2px solid var(--sel); background: var(--sel); }
.ss-corner[aria-checked="true"] .ss-corner__line { background: var(--on-sel); }
.ss-corner[disabled] { opacity: 0.45; cursor: default; }
.ss-choices--compact .ss-corners { width: 176px; height: 116px; padding: 7px; gap: 7px; }
.ss-choices--compact .ss-corner { width: 68px; padding: 0 9px; }

/* The photo frame card: name the device and make its key, or the key it has. */
.ss-frame__head { display: flex; gap: 14px; align-items: flex-start; }
.ss-frame__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-frame__lede { font-size: 15px; color: var(--ink-2); }
.ss-frame__make { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ss-frame__name { flex: 1 1 260px; min-width: 0; }
.ss-frame__make .btn { min-height: 50px; padding: 0 20px 0 16px; }
.ss-frame__error { flex-basis: 100%; }
.ss-frame__note { font-size: 13px; color: var(--muted); }
.ss-device { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px; border-radius: 18px; background: var(--surface-alt); }
.ss-device__tile { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--lb-text); }
.ss-device__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ss-device__name { font-weight: 800; overflow-wrap: anywhere; }
.ss-device__meta { font-size: 13px; color: var(--muted); }
.ss-device .btn--outline { background: var(--surface); }

/* Phones keep Start in a bar above the tabs. Its ground runs on under the tab bar, so it meets the
   bar whatever the tab bar's height. */
.ss-startbar { display: none; }

/* The trip page's way in, over the scenery. */
.hero__actions .hero__alt { background: var(--surface); }

/* Sign-in's way to a frame. */
.auth__frame {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.auth__frame:hover { background: var(--surface-alt); }
.auth__frame-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.auth__frame-name { font-weight: 800; }
.auth__frame-sub { font-size: 13px; color: var(--muted); }

/* ---------- The player ---------- */
.ss {
  --ss-pad: clamp(16px, 3.1vmin, 28px);
  --ss-bar-pad: clamp(14px, 2.2vmin, 20px);
  --ss-btn: clamp(44px, 5.4vmin, 48px);
  /* clip, not hidden: the blurred fill runs past the edges, and a box that can scroll gets scrolled by focus. */
  position: fixed; inset: 0; z-index: 60; overflow: hidden; overflow: clip; background: #0B0C10; color: #FFFFFF;
  font-family: var(--font-body); line-height: 1.4; -webkit-user-select: none; user-select: none;
}
.ss:not(.ss--controls) { cursor: none; }
.ss-stage { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; }
.ss-slide { position: absolute; inset: 0; overflow: hidden; overflow: clip; opacity: 0; transition: opacity 1.2s ease; }
.ss-slide--in { opacity: 1; }
/* The photo whole, on a blurred copy of itself that fills the rest of the screen. */
.ss-slide__fill { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(36px) brightness(0.55) saturate(1.1); }
.ss-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ss-preload { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ss-scrim { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.ss-scrim--top { top: 0; height: clamp(120px, 17vmin, 150px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)); }
.ss-scrim--bottom { bottom: 0; height: clamp(180px, 26vmin, 230px); background: linear-gradient(0deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0)); }

/* The words in their corner. */
.ss-cap {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 0.7vmin, 7px);
  max-width: min(80%, 480px); padding: clamp(10px, 1.6vmin, 15px) clamp(12px, 2vmin, 18px); border-radius: clamp(12px, 2vmin, 18px);
  background: rgba(10, 12, 22, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; pointer-events: none;
}
.ss-cap--tl, .ss-cap--tr { top: calc(var(--ss-pad) + env(safe-area-inset-top)); }
.ss-cap--bl, .ss-cap--br { bottom: calc(var(--ss-pad) + env(safe-area-inset-bottom)); }
.ss-cap--tl, .ss-cap--bl { left: calc(var(--ss-pad) + env(safe-area-inset-left)); }
.ss-cap--tr, .ss-cap--br { right: calc(var(--ss-pad) + env(safe-area-inset-right)); align-items: flex-end; text-align: right; }
.ss-cap__trip { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(20px, 4vmin, 44px); line-height: 0.92; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ss-cap__camp { display: flex; align-items: center; gap: 6px; font-size: clamp(13px, 1.9vmin, 20px); font-weight: 700; line-height: 1.25; }
.ss-cap__camp svg { flex: none; width: 1em; height: 1em; color: #F5B935; }
.ss-cap__date { font-size: clamp(12px, 1.67vmin, 18px); font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, 0.88); }
/* With the controls up, words at the top move under the bar. */
.ss--controls .ss-cap--player.ss-cap--tl, .ss--controls .ss-cap--player.ss-cap--tr {
  top: calc(var(--ss-bar-pad) * 2 + var(--ss-btn) + 6px + env(safe-area-inset-top));
}

.ss-paused {
  position: absolute; z-index: 2; top: calc(var(--ss-pad) + env(safe-area-inset-top)); height: clamp(30px, 4vmin, 36px); padding: 0 14px;
  border-radius: 999px; background: rgba(10, 12, 22, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; pointer-events: none;
}
.ss-paused--right { right: calc(var(--ss-pad) + env(safe-area-inset-right)); }
.ss-paused--left { left: calc(var(--ss-pad) + env(safe-area-inset-left)); }

/* The whole photo is the button that shows and hides the controls. */
.ss-tap { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: inherit; touch-action: none; }
.ss-tap:focus-visible { outline: 3px solid #F5B935; outline-offset: -6px; }

.ss-bar {
  position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px;
  padding: calc(var(--ss-bar-pad) + env(safe-area-inset-top)) calc(var(--ss-bar-pad) + env(safe-area-inset-right)) var(--ss-bar-pad) calc(var(--ss-bar-pad) + env(safe-area-inset-left));
}
.ss-glass {
  flex: none; width: var(--ss-btn); height: var(--ss-btn); padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16); color: #FFFFFF; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 clamp(14px, 1.8vmin, 16px) var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ss-glass--pill { width: auto; padding: 0 18px 0 14px; }
.ss-glass:hover { background: rgba(255, 255, 255, 0.24); }
.ss-glass[disabled] { opacity: 0.6; cursor: default; }
.ss-bar__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.ss-bar__title { max-width: 100%; font-family: var(--font-head); font-size: clamp(16px, 2.2vmin, 20px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bar__sub { max-width: 100%; font-size: clamp(13px, 1.6vmin, 14px); font-weight: 600; color: rgba(255, 255, 255, 0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Back, pause and forward, centred low; taps around them still reach the photo. */
.ss-transport {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(clamp(20px, 2.9vmin, 26px) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.ss-transport__buttons { display: flex; align-items: center; gap: clamp(18px, 2.4vmin, 22px); pointer-events: auto; }
.ss-nav, .ss-play { padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ss-nav {
  width: clamp(48px, 6.7vmin, 60px); height: clamp(48px, 6.7vmin, 60px); border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16); color: #FFFFFF; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ss-nav svg { width: clamp(24px, 3.1vmin, 28px); height: clamp(24px, 3.1vmin, 28px); }
.ss-nav[disabled] { opacity: 0.45; cursor: default; }
.ss-play { width: clamp(64px, 8.9vmin, 80px); height: clamp(64px, 8.9vmin, 80px); border: 0; background: #EE6A3C; color: #17262B; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.ss-play svg { width: clamp(28px, 3.8vmin, 34px); height: clamp(28px, 3.8vmin, 34px); }
.ss-glass:focus-visible, .ss-nav:focus-visible, .ss-play:focus-visible { outline: 3px solid #F5B935; outline-offset: 2px; }
.ss-status { font-size: clamp(13px, 1.6vmin, 14px); font-weight: 700; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.ss-keyhint { display: none; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .ss-keyhint { display: block; }
}
.ss-progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.22); pointer-events: none; }
.ss-progress__fill { display: block; height: 100%; background: #F5B935; }
.ss-progress__fill--running { transition: width 1s linear; }

/* Loading, nothing to play, no server. */
.ss-message {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px; border-radius: 24px; text-align: center;
  background: rgba(10, 12, 22, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ss-message__icon { width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); color: #F5B935; display: flex; align-items: center; justify-content: center; }
.ss-message__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.ss-message__text { font-size: 15px; color: rgba(255, 255, 255, 0.85); text-wrap: pretty; }
.ss-message .btn--primary { background: #F5B935; color: #17262B; }
.ss-message__spin { width: 36px; height: 36px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #F5B935; animation: ss-spin 0.9s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }

.ss-toast {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(clamp(150px, 21vmin, 190px) + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - 24px); min-height: 48px; padding: 6px 8px 6px 18px; border-radius: 999px;
  background: #F1EFE8; color: #17262B; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); display: flex; align-items: center; gap: 12px; font-weight: 600;
}
.ss-toast__action { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #1E5B4F; font: 800 15px var(--font-body); cursor: pointer; }
.ss-toast__action[disabled] { opacity: 0.6; }

/* ---------- Settings over the player: an inset side sheet on wide screens, a bottom sheet on phones ---------- */
.ss-sheet { line-height: 1.5; -webkit-user-select: text; user-select: text; cursor: auto; }
.scrim--dim:has(+ .ss-sheet) { background: rgba(8, 8, 16, 0.3); cursor: auto; }
.ss-sheet__paused {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-alt); color: var(--ink-2); font-size: 13px; font-weight: 700;
}
.ss-sheet__saved { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--success-ink); }
.ss-sheet__lede { font-size: 15px; color: var(--ink-2); }
.ss-sheet .ss-device { flex-wrap: nowrap; }
.ss-forget-btn { align-self: flex-start; border: 2px solid var(--danger); background: transparent; color: var(--danger); }
.ss-forget { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--danger-soft); border: 1px solid var(--danger); color: var(--ink); }
.ss-forget__go { background: var(--danger); color: var(--on-danger); }
.ss-saved-note { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ss-saved-note svg { flex: none; }
.ss-frame-facts { padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); }
@media (min-width: 720px) {
  .editor.ss-sheet { top: 16px; right: 16px; bottom: 16px; width: min(448px, calc(100% - 32px)); border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
  .ss-sheet .editor__head { padding: 16px 16px 14px 22px; }
  .ss-sheet .editor__body { padding: 18px 22px 22px; }
  .ss-sheet .editor__foot { padding: 14px 16px 14px 22px; }
}

/* ---------- The photo frame page: a key for a device with nobody signed in ---------- */
.frame-page {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding-bottom: max(220px, calc(13.6vw + 20px)); background: var(--sc-sky); color: var(--ink);
}
.frame-page > :not(svg) { position: relative; }
.frame-page__head {
  width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 28px 18px; color: var(--sc-ink);
}
.frame-page__head .brand { color: var(--sc-ink); }
.frame-page__chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--chip);
  color: var(--sc-ink); font-size: 15px; font-weight: 700; text-decoration: none;
}
.frame-page__main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 12px 20px 0; }
.frame-card { width: min(540px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 30px 32px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.frame-card__intro { display: flex; flex-direction: column; gap: 8px; }
.frame-card__title { font-size: 32px; font-weight: 800; }
.frame-card__lede { color: var(--ink-2); }
.frame-card__form { display: flex; flex-direction: column; gap: 18px; }
.frame-card__key { height: 54px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.frame-card__alert { display: flex; align-items: flex-start; gap: 10px; }
.frame-card__alert svg { flex: none; margin-top: 2px; }
.alert--error.frame-card__alert svg { color: var(--danger); }
.frame-card__signin { font-size: 14px; color: var(--ink-2); }

/* ---------- Phones ---------- */
@media (max-width: 719px) {
  .ss-setup { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "how" "frame"; grid-template-rows: none; gap: 18px; }
  .ss-page { padding-bottom: 104px; }
  .ss-card { padding: 18px 16px; gap: 14px; border-radius: 22px; }
  .ss-card__title { font-size: 20px; }
  .ss-setup__preview { padding: 0; border: 0; background: transparent; }
  .ss-preview { border-radius: 18px; }
  .ss-preview__foot, .ss-preview__keys { display: none; }
  .ss-preview .ss-cap__trip { font-size: 16px; }
  .ss-group__label { font-size: 16px; }
  .ss-choices { gap: 18px; }
  .ss-seg button { font-size: 14px; gap: 6px; }
  .ss-trip { gap: 10px; padding: 7px 10px 7px 7px; border-radius: 16px; font-size: 15px; }
  .ss-trip__tile { width: 44px; height: 48px; border-radius: 13px; }
  .ss-trip__mon { font-size: 12px; }
  .ss-trip__day { font-size: 24px; }
  .ss-trip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-trip__check { width: 24px; height: 24px; }
  .ss-switch { min-height: 56px; padding: 6px 12px 6px 8px; border-radius: 16px; }
  .ss-switch__tile { width: 36px; height: 36px; border-radius: 11px; }
  .ss-switch .switch-row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-corner-row { flex-wrap: nowrap; }
  .ss-corners { width: 176px; height: 116px; padding: 7px; gap: 7px; }
  .ss-corner { width: 68px; padding: 0 9px; }
  .ss-frame__head { gap: 12px; }
  .ss-frame__head .tile { width: 40px; height: 40px; border-radius: 13px; }
  .ss-frame__lede { font-size: 14px; }
  .ss-startbar {
    display: flex; position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; align-items: center; gap: 12px;
    padding: 13px 12px calc(97px + env(safe-area-inset-bottom)) 16px; background: var(--bar); border-top: 1px solid var(--line);
  }
  .ss-startbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .ss-startbar__title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-startbar__line { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-startbar .btn { min-height: 50px; padding: 0 20px 0 16px; }

  .ss-glass--hide { width: var(--ss-btn); padding: 0; }
  .ss-glass--hide .ss-glass__label { display: none; }
  .ss-bar { gap: 8px; }
  .ss-glass--pill { padding: 0 14px 0 10px; }
  /* Words at the bottom of a narrow screen move above back, pause and forward while those show. */
  .ss--controls .ss-cap--player.ss-cap--bl, .ss--controls .ss-cap--player.ss-cap--br {
    bottom: calc(clamp(20px, 2.9vmin, 26px) + clamp(64px, 8.9vmin, 80px) + 46px + env(safe-area-inset-bottom));
  }
  .ss-toast { bottom: calc(clamp(150px, 21vmin, 190px) + 60px + env(safe-area-inset-bottom)); }
  /* The sheet stops short of the top, so the player's bar still shows above it. */
  .editor.ss-sheet { max-height: calc(100dvh - 92px - env(safe-area-inset-top)); }

  .frame-page { padding-bottom: 150px; }
  .frame-page__head { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .frame-page__main { padding: 4px 14px 0; }
  .frame-card { padding: 22px 18px; gap: 16px; border-radius: 24px; }
  .frame-card__title { font-size: 26px; }
}