/* ---------- palettes: Classic (base), Pastel, Jester. Chosen per device in Settings. ---------- */
  :root {
    --ground: #E6E9ED; --lane: #F2F4F6;
    --lane-1: var(--lane); --lane-2: var(--lane); --lane-3: var(--lane); --lane-4: var(--lane); --lane-5: var(--lane);
    --card: #FFFFFF; --card-ink: #17202A; --card-muted: #5A6776; --field: #F2F4F6;
    --ink: #17202A; --muted: #5A6776; --line: #D2D8DF;
    --accent: #3346C8; --accent-ink: #FFFFFF; --accent-soft: #E2E6FA;
    --hi: #CF3434; --med: #C98F00; --lo: #2E8B55; --danger-soft: #FBE6E6;
    --shadow: 0 1px 2px rgba(23,32,42,.08), 0 3px 8px rgba(23,32,42,.06);
    --lift: 0 10px 28px rgba(23,32,42,.22);
    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --radius: 12px;
    --header-bg: transparent; --header-ink: var(--ink); --header-muted: var(--muted);
    --lane-ink: var(--ink); --lane-muted: var(--muted);
    --chip-on: var(--accent); --chip-on-ink: var(--accent-ink);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ground: #11151A; --lane: #191F26; --card: #222932; --card-ink: #E5EAF0; --card-muted: #98A4B2; --field: #191F26;
      --ink: #E5EAF0; --muted: #98A4B2; --line: #2E3743;
      --accent: #8E9CFF; --accent-ink: #0D1230; --accent-soft: #262D55;
      --hi: #F07272; --med: #EDBE4C; --lo: #5CC98A; --danger-soft: #3A2226;
      --shadow: 0 1px 2px rgba(0,0,0,.35); --lift: 0 12px 30px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ground: #11151A; --lane: #191F26; --card: #222932; --card-ink: #E5EAF0; --card-muted: #98A4B2; --field: #191F26;
    --ink: #E5EAF0; --muted: #98A4B2; --line: #2E3743;
    --accent: #8E9CFF; --accent-ink: #0D1230; --accent-soft: #262D55;
    --hi: #F07272; --med: #EDBE4C; --lo: #5CC98A; --danger-soft: #3A2226;
    --shadow: 0 1px 2px rgba(0,0,0,.35); --lift: 0 12px 30px rgba(0,0,0,.55);
  }

  /* Pastel: lilac ground, each lane its own sherbet tint, cream cards */
  :root[data-palette="pastel"] {
    color-scheme: light;
    --ground: #F4ECFA; --lane: #EFE4FA;
    --lane-1: #DDF2E8; --lane-2: #FFE4D8; --lane-3: #EBDFFB; --lane-4: #FFF0C8; --lane-5: #DCEAFB;
    --card: #FFFBF6; --card-ink: #3A3150; --card-muted: #7B7090; --field: #F6EFFB;
    --ink: #3A3150; --muted: #7B7090; --line: #E2D5EE;
    --accent: #9A6BD8; --accent-ink: #FFFFFF; --accent-soft: #EEE3FD;
    --hi: #DE5F7A; --med: #E29A33; --lo: #46A87B; --danger-soft: #FDE3EA;
    --shadow: 0 1px 2px rgba(90,60,130,.08), 0 3px 10px rgba(90,60,130,.08);
    --lift: 0 12px 30px rgba(90,60,130,.22);
    --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
    --radius: 18px;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-palette="pastel"]:not([data-theme="light"]) {
      color-scheme: dark;
      --ground: #211C2A; --lane: #2A2336;
      --lane-1: #1F2D29; --lane-2: #33262A; --lane-3: #2C2440; --lane-4: #312C1F; --lane-5: #1F2A38;
      --card: #342C42; --card-ink: #F1EAF8; --card-muted: #B8ACCA; --field: #2A2336;
      --ink: #F1EAF8; --muted: #B8ACCA; --line: #43395A;
      --accent: #C8A8F6; --accent-ink: #251A36; --accent-soft: #43365E;
      --hi: #F28AA0; --med: #F0BE6A; --lo: #74CFA3; --danger-soft: #45263A;
      --shadow: 0 1px 2px rgba(0,0,0,.35); --lift: 0 12px 30px rgba(0,0,0,.55);
    }
  }
  :root[data-palette="pastel"][data-theme="dark"] {
    color-scheme: dark;
    --ground: #211C2A; --lane: #2A2336;
    --lane-1: #1F2D29; --lane-2: #33262A; --lane-3: #2C2440; --lane-4: #312C1F; --lane-5: #1F2A38;
    --card: #342C42; --card-ink: #F1EAF8; --card-muted: #B8ACCA; --field: #2A2336;
    --ink: #F1EAF8; --muted: #B8ACCA; --line: #43395A;
    --accent: #C8A8F6; --accent-ink: #251A36; --accent-soft: #43365E;
    --hi: #F28AA0; --med: #F0BE6A; --lo: #74CFA3; --danger-soft: #45263A;
    --shadow: 0 1px 2px rgba(0,0,0,.35); --lift: 0 12px 30px rgba(0,0,0,.55);
  }

  /* Linen: warm off-white ground, near-neutral tiles, deep sage buttons, Classic's heading face and corners. Made from the colours in colors.js (deriveTokens); has its own dark version. */
  :root[data-palette="linen"] {
    --ground: #F4EFE6;
    --lane: #E5E4DB;
    --lane-1: #ECE6DA;
    --lane-2: #EFE9DE;
    --lane-3: #E9E3D7;
    --lane-4: #DCDCCF;
    --lane-5: #DBDACE;
    --card: #FBF9F5;
    --card-ink: #1C1A26;
    --card-muted: #5F5C63;
    --field: #F0EFE8;
    --ink: #1C1A26;
    --muted: #646166;
    --line: #D1CDC7;
    --accent: #3E6B57;
    --accent-ink: #FFFFFF;
    --accent-soft: #D7DACF;
    --hi: #CF3434;
    --med: #C98F00;
    --lo: #2E8B55;
    --on-hi: #FFFFFF;
    --on-med: #0E0A14;
    --on-lo: #0E0A14;
    --hi-text: #BC3031;
    --med-text: #845E09;
    --lo-text: #297349;
    --danger-soft: #F5DDDA;
    --lane-ink: #1C1A26;
    --lane-muted: #605E63;
    --header-bg: transparent;
    --header-ink: #1C1A26;
    --header-muted: #646166;
    --chip-on: #3E6B57;
    --chip-on-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(20,16,30,.08), 0 3px 10px rgba(20,16,30,.08);
    --lift: 0 12px 30px rgba(20,16,30,.22);
    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --radius: 12px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-palette="linen"]:not([data-theme="light"]) {
      --ground: #1D1B17;
      --lane: #252721;
      --lane-1: #2A2823;
      --lane-2: #2D2A25;
      --lane-3: #27251F;
      --lane-4: #363831;
      --lane-5: #343730;
      --card: #2D2B27;
      --card-ink: #EEEDF4;
      --card-muted: #AEACAE;
      --field: #292924;
      --ink: #EEEDF4;
      --muted: #9F9DA0;
      --line: #3E3D3A;
      --accent: #8FC1A9;
      --accent-ink: #0E0A14;
      --accent-soft: #38433A;
      --hi: #F07272;
      --med: #EDBE4C;
      --lo: #5CC98A;
      --on-hi: #0E0A14;
      --on-med: #0E0A14;
      --on-lo: #0E0A14;
      --hi-text: #F07272;
      --med-text: #EDBE4C;
      --lo-text: #5CC98A;
      --danger-soft: #483532;
      --lane-ink: #EEEDF4;
      --lane-muted: #A2A2A4;
      --header-bg: transparent;
      --header-ink: #EEEDF4;
      --header-muted: #9F9DA0;
      --chip-on: #8FC1A9;
      --chip-on-ink: #0E0A14;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
      --lift: 0 12px 30px rgba(0,0,0,.55);
      --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
      --radius: 12px;
      color-scheme: dark;
    }
  }
  :root[data-palette="linen"][data-theme="dark"] {
    --ground: #1D1B17;
    --lane: #252721;
    --lane-1: #2A2823;
    --lane-2: #2D2A25;
    --lane-3: #27251F;
    --lane-4: #363831;
    --lane-5: #343730;
    --card: #2D2B27;
    --card-ink: #EEEDF4;
    --card-muted: #AEACAE;
    --field: #292924;
    --ink: #EEEDF4;
    --muted: #9F9DA0;
    --line: #3E3D3A;
    --accent: #8FC1A9;
    --accent-ink: #0E0A14;
    --accent-soft: #38433A;
    --hi: #F07272;
    --med: #EDBE4C;
    --lo: #5CC98A;
    --on-hi: #0E0A14;
    --on-med: #0E0A14;
    --on-lo: #0E0A14;
    --hi-text: #F07272;
    --med-text: #EDBE4C;
    --lo-text: #5CC98A;
    --danger-soft: #483532;
    --lane-ink: #EEEDF4;
    --lane-muted: #A2A2A4;
    --header-bg: transparent;
    --header-ink: #EEEDF4;
    --header-muted: #9F9DA0;
    --chip-on: #8FC1A9;
    --chip-on-ink: #0E0A14;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --lift: 0 12px 30px rgba(0,0,0,.55);
    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --radius: 12px;
    color-scheme: dark;
  }

  /* Jester: black jester-hood header, deep purple ground, pink / lavender / soft-gray lanes and cards */
  :root[data-palette="jester"], :root[data-palette="jester"][data-theme] {
    color-scheme: light;
    --ground: #4B3A6B; --lane: #E6DFF0;
    --lane-1: #F5CFE2; --lane-2: #D6C8EE; --lane-3: #E6E3EA; --lane-4: #F0C1D8; --lane-5: #CBBAE8;
    --card: #F1EEF4; --card-ink: #2A2230; --card-muted: #6D5A80; --field: #E7E2EE;
    --ink: #F4ECFA; --muted: #CDBDE3; --line: #6B5790;
    --lane-ink: #2A2230; --lane-muted: #6D5A80;
    --accent: #2A2230; --accent-ink: #FF9CC9; --accent-soft: #F9CFE4;
    --chip-on: #FF9CC9; --chip-on-ink: #2A2230;
    --hi: #E0457B; --med: #C9830A; --lo: #3F9C70; --danger-soft: #FFE0EC;
    --header-bg: #2A2230; --header-ink: #FFFFFF; --header-muted: #E3D3F3;
    --shadow: 0 1px 2px rgba(20,12,30,.25), 0 3px 10px rgba(20,12,30,.22);
    --lift: 0 14px 34px rgba(20,12,30,.45);
    --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
    --radius: 18px;
  }

  /* Jester Night: the same jester-hood purple and pink, turned down for the evening. Dusky plum surfaces, soft lavender text, an orchid accent instead of neon pink. */
  :root[data-palette="jester-night"], :root[data-palette="jester-night"][data-theme] {
    color-scheme: dark;
    --ground: #17121F; --lane: #211A2C;
    --lane-1: #2E2036; --lane-2: #251F38; --lane-3: #2A2233; --lane-4: #33212E; --lane-5: #21243A;
    --card: #2D2439; --card-ink: #E6DCEE; --card-muted: #AB9CBC; --field: #231C2E;
    --ink: #E6DCEE; --muted: #AB9CBC; --line: #3E3350;
    --lane-ink: #E6DCEE; --lane-muted: #AB9CBC;
    --accent: #C983AE; --accent-ink: #1B1223; --accent-soft: #43304F;
    --chip-on: #B96F9C; --chip-on-ink: #170F1E;
    --hi: #D9738F; --med: #D3A55B; --lo: #6DB894; --danger-soft: #3E2231;
    --on-hi: #14101C; --on-med: #14101C; --on-lo: #14101C;
    --hi-text: #E88AA3; --med-text: #DDB367; --lo-text: #78C79F;
    --header-bg: #0F0B14; --header-ink: #EDE3F5; --header-muted: #A897BA;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --lift: 0 12px 30px rgba(0,0,0,.6);
    --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
    --radius: 18px;
  }

  /* Teal Pop: bright teal, charcoal header, soft grays, a magenta lane */
  :root[data-palette="teal-pop"], :root[data-palette="teal-pop"][data-theme] {
    color-scheme: light;
    --ground: #DCE4E7; --lane: #E4E9EC;
    --lane-1: #C9EEEA; --lane-2: #E4E9EC; --lane-3: #B6E4DF; --lane-4: #F3C5DB; --lane-5: #D2DDE3;
    --card: #F6F8F9; --card-ink: #22292C; --card-muted: #5E6B70; --field: #EAF0F2;
    --ink: #22292C; --muted: #5E6B70; --line: #C0CDD2;
    --accent: #13978E; --accent-ink: #FFFFFF; --accent-soft: #F9DBE8;
    --chip-on: #39C5BB; --chip-on-ink: #10201F;
    --hi: #D8315B; --med: #C98A12; --lo: #2E9E6F; --danger-soft: #FBE1E9;
    --header-bg: #2F3437; --header-ink: #EAFBF9; --header-muted: #9ED8D2;
    --shadow: 0 1px 2px rgba(34,41,44,.08), 0 3px 10px rgba(34,41,44,.08);
    --lift: 0 12px 30px rgba(34,41,44,.25);
    --display: "M PLUS Rounded 1c", "Fredoka", "Segoe UI", system-ui, sans-serif;
    --radius: 16px;
  }
  :root[data-palette="jester"] .board, :root[data-palette="teal-pop"] .board { padding-top: 14px; }

  *, *::before, *::after { box-sizing: border-box; }
  /* The page is exactly as tall as what is visible (dvh follows a phone's collapsing address bar), and never scrolls itself: only the views inside it do. */
  html { height: 100vh; height: 100dvh; overscroll-behavior: none; }
  /* Text size (a per-device setting): everything is in rem, so changing the root size scales the whole page. */
  html[data-text="small"] { font-size: 90%; }
  html[data-text="large"] { font-size: 115%; }
  html[data-text="xl"] { font-size: 130%; }
  body { height: 100%; overscroll-behavior: none; }
  body { background: var(--ground); color: var(--ink); font: 0.9375rem/1.4 var(--body); display: flex; flex-direction: column; overflow: hidden; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .top, .filters { background: var(--header-bg); }
  .top { padding: 14px 16px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .brand { color: var(--header-ink); font: 700 1.4rem/1 var(--display); letter-spacing: -0.01em; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
  .brand svg { width: 32px; height: 24px; flex: none; }
  /* Where you are, in plain words, next to the app name. */
  .page-name { flex: 1 1 0; color: var(--header-muted); font: 600 0.98rem/1.2 var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 12px; margin-left: -4px; border-left: 1px solid color-mix(in srgb, var(--header-muted) 45%, transparent); }
  .page-name:empty { display: none; }
  .boards { display: flex; gap: 4px; flex-wrap: wrap; background: var(--lane); border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); padding: 3px; }
  .boards button { border: 0; background: none; padding: 6px 12px; border-radius: calc(var(--radius) - 5px); font-weight: 700; color: var(--lane-muted); }
  .boards button[aria-pressed="true"] { background: var(--card); color: var(--card-ink); box-shadow: var(--shadow); }
  .top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .status { font: 500 0.72rem var(--body); font-variant-numeric: tabular-nums; color: var(--header-muted); letter-spacing: 0.02em; min-width: 0; }
  .status[data-kind="warn"] { color: var(--med); }
  .status[data-kind="error"] { color: var(--hi); }
  .icon-btn { border: 1px solid var(--line); background: var(--card); color: var(--card-ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; }

  .filters { padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 11px; font-size: 0.85rem; font-weight: 700; color: var(--card-muted); display: inline-flex; align-items: center; gap: 6px; }
  .chip[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
  .search { flex: 1 1 160px; max-width: 260px; border: 1px solid var(--line); background: var(--card); color: var(--card-ink); border-radius: 999px; padding: 5px 12px; font-size: 0.9rem; }
  .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

  .banner { margin: 0 16px 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--card-ink); font-size: 0.88rem; }

  .board { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 16px 16px; scroll-padding-inline: 16px; align-items: flex-start; }
  .lane { flex: 0 0 300px; max-height: 100%; display: flex; flex-direction: column; background: var(--lane); border: 1px solid var(--line); border-radius: var(--radius); color: var(--lane-ink); }
  .lane .count, .lane .lane-menu-btn, .lane .add-card, .lane .empty-hint { color: var(--lane-muted); }
  .lane-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px 14px; }
  .lane-name { font: 700 1.02rem/1.2 var(--display); margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .done-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--lo); color: #fff; border-radius: 999px; padding: 1px 7px; }
  .done-filter { padding: 0 10px 6px 14px; gap: 4px; flex-wrap: nowrap; }
  .done-filter button { padding: 3px 10px; font-size: 0.78rem; }
  .lane .earlier .link-btn { color: var(--lane-ink); padding: 8px 6px; margin: -8px -6px; }
  @media (pointer: coarse) { .lane .earlier .link-btn { padding: 12px 8px; margin: -12px -8px; } }
  .p-spot .count, .g-item .count, .r-card .count { color: var(--card-muted); }
  .lane-name-input { font: 700 1rem/1.2 var(--display); flex: 1; min-width: 0; border: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; background: var(--card); color: var(--card-ink); }
  .count { font: 500 0.75rem var(--body); font-variant-numeric: tabular-nums; color: var(--muted); font-variant-numeric: tabular-nums; }
  .lane-menu-btn { border: 0; background: none; color: var(--muted); font-weight: 700; padding: 2px 6px; border-radius: 6px; letter-spacing: 1px; }
  .lane-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px 14px; }
  .lane-menu button { border: 1px solid var(--line); background: var(--card); color: var(--card-ink); border-radius: 999px; padding: 3px 9px; font-size: 0.8rem; }
  .lane-menu button:disabled { opacity: 0.45; }
  .lane-menu .danger { color: var(--hi); }
  .list { flex: 1; min-height: 12px; overflow-y: auto; padding: 2px 8px 4px; display: flex; flex-direction: column; gap: 8px; }
  .add-card { margin: 4px 8px 10px; border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 8px; color: var(--muted); font-weight: 700; }
  .add-card:hover { background: var(--card); color: var(--card-ink); }
  .quick-add { margin: 4px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
  .quick-add textarea { resize: none; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; background: var(--card); color: var(--card-ink); min-height: 56px; }
  .quick-add div { display: flex; gap: 6px; }
  .add-lane { flex: 0 0 220px; border: 2px dashed var(--line); background: none; border-radius: var(--radius); padding: 14px; color: var(--muted); font-weight: 700; text-align: left; }

  .card { position: relative; background: var(--card); color: var(--card-ink); border-radius: calc(var(--radius) - 4px); box-shadow: var(--shadow); padding: 9px 11px 9px 15px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border: 0; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--prio, transparent); }
  .card[data-prio="high"] { --prio: var(--hi); }
  .card[data-prio="med"] { --prio: var(--med); }
  .card[data-prio="low"] { --prio: var(--lo); }
  .card-title { font-weight: 700; overflow-wrap: anywhere; }
  .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--card-muted); }
  .tag { background: var(--accent-soft); color: var(--card-ink); border-radius: 999px; padding: 1px 7px; font-weight: 700; font-size: 0.72rem; }
  .daily-pill { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 7px; font-weight: 700; font-size: 0.72rem; }
  .due { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
  .due[data-state="overdue"] { color: var(--hi); font-weight: 700; }
  .due[data-state="soon"] { color: var(--med); font-weight: 700; }
  .avatar { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 0.7rem/22px var(--body); text-align: center; flex: none; }
  .avatar ~ .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--card); }
  .avatar.both { width: auto; padding: 0 7px; border-radius: 11px; background: var(--card-muted); }
  .progress { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
  /* Fair Play: who added this — a quieter, smaller cousin of the regular avatar, never the owner's. */
  .added-by { display: inline-flex; align-items: center; gap: 2px; opacity: 0.75; font-size: 0.72rem; }
  .added-by .avatar { width: 15px; height: 15px; font: 700 0.58rem/15px var(--body); margin-left: 0; }
  .progress[data-done="true"] { color: var(--lo); }
  .card.placeholder { opacity: 0.35; box-shadow: none; outline: 2px dashed var(--accent); outline-offset: -2px; }
  .ghost { position: fixed; z-index: 50; pointer-events: none; box-shadow: var(--lift); transform: rotate(2deg); margin: 0; }
  .readonly .card { cursor: pointer; }
  .empty-hint { color: var(--muted); font-size: 0.85rem; padding: 6px 4px; }

  dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--card); color: var(--card-ink); box-shadow: var(--lift); }
  dialog::backdrop { background: rgba(10,8,16,.5); }
  dialog[open] { animation: dlg-in .16s ease-out; }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .dlg { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; }
  .dlg h2 { margin: 0; font: 700 1.2rem var(--display); }
  /* A small, deliberately out-of-the-way way to back out from the top, so a long form (repeating
     tasks especially) doesn't force a scroll to the bottom just to Cancel. Stays put while the form
     scrolls underneath it; isolated in its own corner, away from anything else tappable. */
  .dlg-x { position: sticky; top: -18px; align-self: flex-end; margin: -8px -8px -26px 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--card-muted); font-size: 1.2rem; line-height: 28px; text-align: center; cursor: pointer; z-index: 2; flex: none; }
  .dlg-x:hover, .dlg-x:focus-visible { background: var(--field); color: var(--card-ink); }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field > label, .field > span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--card-muted); }
  .field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="date"], .field input[type="time"], .field textarea, .field select { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--field); color: var(--card-ink); width: 100%; }
  .field textarea { min-height: 80px; resize: vertical; }
  .title-input { font: 700 1.1rem var(--display) !important; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .row3 { grid-template-columns: 1fr 1fr 1fr; }
  .seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg button { border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 999px; padding: 5px 11px; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; }
  .seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .days button { min-width: 40px; justify-content: center; }
  .checklist { display: flex; flex-direction: column; gap: 4px; }
  .check-row { display: flex; align-items: center; gap: 8px; }
  .check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
  .check-row input[type="text"] { flex: 1; border: 1px solid transparent; background: none; color: var(--card-ink); border-radius: 6px; padding: 4px 6px; }
  .check-row input[type="text"]:focus { border-color: var(--line); background: var(--field); }
  .check-row .x { border: 0; background: none; color: var(--card-muted); font-size: 1rem; padding: 2px 6px; }
  .check-add { display: flex; gap: 6px; }
  .check-add input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--field); color: var(--card-ink); }
  .dlg-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
  .spacer { flex: 1; }
  .btn { border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 999px; padding: 7px 15px; font-weight: 700; }
  .idn-close, #idn-dlg .btn.primary { min-height: 44px; padding-left: 20px; padding-right: 20px; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn.danger { color: var(--hi); }
  .btn.danger-solid { background: var(--hi); border-color: var(--hi); color: #fff; }
  .confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--danger-soft); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; }
  .note { background: var(--accent-soft); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font-size: 0.85rem; margin: 0; }
  .people-row { display: flex; gap: 8px; align-items: center; }
  .people-row input[type="text"] { flex: 1; }
  .people-row input[type="color"] { width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 2px; }
  .board-row { display: flex; gap: 8px; align-items: center; }
  .board-row input { flex: 1; }
  .hint { font-size: 0.8rem; color: var(--card-muted); margin: 0; }
  .palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .palette { border: 2px solid var(--line); border-radius: 12px; padding: 8px; background: var(--field); color: var(--card-ink); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-weight: 700; font-size: 0.85rem; }
  .palette[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .swatches { display: flex; gap: 3px; }
  .swatches i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.15); }
  .daily-list { display: flex; flex-direction: column; gap: 8px; }
  .daily-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
  .daily-row .grow { flex: 1; min-width: 0; }
  .daily-row strong { display: block; overflow-wrap: anywhere; }
  .daily-row small { color: var(--card-muted); }

  [hidden] { display: none !important; }
  .boards .sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 3px; }

  /* Groceries + Calendar share the "view" frame: a scrolling page under the header */
  .view { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 28px; }
  .view-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
  .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .section-title { font: 700 1.05rem var(--display); margin: 4px 0 -4px; display: flex; gap: 8px; align-items: baseline; }
  .group-label { font: 700 0.72rem var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 2px; }
  .group-label:first-child { margin-top: 0; }
  .mini { border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 700; }
  .est { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.72rem; }

  .g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
  .g-item { background: var(--card); color: var(--card-ink); border-radius: calc(var(--radius) - 4px); box-shadow: var(--shadow); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  .g-main { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; color: inherit; }
  .g-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .g-name { font-weight: 700; overflow-wrap: anywhere; }
  .g-qty { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--card-muted); white-space: nowrap; }
  .g-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .exp { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--accent-soft); color: var(--card-ink); }
  .exp[data-state="expired"], .exp[data-state="today"] { background: var(--hi); color: #fff; }
  .tag-allergen { background: var(--danger-soft); color: var(--hi); font-weight: 700; }

  .product-results { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; overflow: hidden; }
  .product-result { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); background: var(--card); color: var(--card-ink); }
  .product-result:first-child { border-top: 0; }
  .product-result:hover, .product-result:focus-visible { background: var(--field); }
  .product-thumb { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; background: var(--field); border: 1px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .product-txt { flex: 1; min-width: 0; }
  .product-txt b { display: block; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-txt span { display: block; font-size: 0.72rem; color: var(--card-muted); }
  .upc { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--card-muted); opacity: 0.75; }
  .product-nut { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.7rem; color: var(--card-muted); white-space: nowrap; flex: none; }
  .linked-product { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--field); }
  .linked-thumb { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; background: var(--card); border: 1px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; }
  .linked-txt { flex: 1; min-width: 0; }
  .linked-txt > b { display: block; }
  .linked-brand { display: block; font-size: 0.78rem; color: var(--card-muted); margin-bottom: 4px; }
  .linkactions { display: flex; gap: 12px; margin-top: 6px; }
  .exp[data-state="soon"] { background: var(--med); color: #fff; }
  .g-summary { display: flex; flex-wrap: wrap; gap: 8px; }
  .restock-all { display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--card-ink); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
  .restock-all small { display: block; color: var(--card-muted); }
  .g-quick { display: flex; gap: 8px; }
  .g-quick input { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--card-ink); border-radius: 999px; padding: 7px 14px; }
  .empty-view { background: var(--card); color: var(--card-muted); border-radius: var(--radius); padding: 22px; text-align: center; }
  .toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--card-ink); color: var(--card); border-radius: 999px; padding: 8px 10px 8px 16px; display: flex; gap: 10px; align-items: center; box-shadow: var(--lift); z-index: 60; font-size: 0.9rem; }
  .toast button { border: 0; background: var(--accent-soft); color: var(--card-ink); border-radius: 999px; padding: 4px 12px; font-weight: 700; }

  [data-kind="task"] { --k: var(--accent); }
  [data-kind="daily"] { --k: var(--lo); }
  [data-kind="grocery"] { --k: var(--med); }
  [data-kind="overdue"] { --k: var(--hi); }
  [data-kind="birthday"] { --k: #E0609E; }
  [data-kind="charge"] { --k: #3F86D6; }
  [data-kind="media"] { --k: #0E9FB4; }
  [data-kind="event"] { --k: #7B3FE4; }
  [data-kind="warranty"] { --k: #A8761A; }
  .ev-when { font-weight: 700; font-size: 0.9rem; }
  .g-price { font-family: var(--body); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 700; color: var(--card-ink); }
  .g-total { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; background: var(--card); color: var(--card-ink); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
  .g-total strong { font: 700 1.25rem var(--display); }
  .g-total small { color: var(--card-muted); }
  .filter-select { border: 1px solid var(--line); background: var(--card); color: var(--card-ink); border-radius: 999px; padding: 5px 10px; font-size: 0.85rem; font-weight: 700; }
  .custom-plus { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; }
  .custom-plus input { width: 4.2em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; background: var(--field); color: var(--card-ink); }
  .custom-plus select { border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px; background: var(--field); color: var(--card-ink); }
  .p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
  .p-spot { background: var(--card); color: var(--card-ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .p-spot-head { display: flex; align-items: baseline; gap: 8px; }
  .p-spot-name { font: 700 1.05rem var(--display); border: 0; background: none; color: inherit; padding: 0; text-align: left; flex: 1; }
  .p-items { display: flex; flex-direction: column; gap: 4px; }
  .p-item, .p-result { border: 0; background: var(--field); color: var(--card-ink); border-radius: 8px; padding: 6px 10px; text-align: left; display: flex; flex-direction: column; }
  .p-item small, .p-result small { color: var(--card-muted); }
  .p-results { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
  .p-result { background: var(--card); box-shadow: var(--shadow); padding: 10px 14px; gap: 2px; }
  .p-result strong { font-size: 1.05rem; }
  .p-quick { display: flex; gap: 6px; }
  .p-quick input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: var(--field); color: var(--card-ink); }
  .p-search { max-width: 420px; flex: 1 1 240px; font-size: 1rem; padding: 8px 14px; }
  .r-card { background: var(--card); color: var(--card-ink); border: 0; border-radius: calc(var(--radius) - 4px); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
  .r-card[data-off] { opacity: 0.6; }
  .r-card[data-today] { outline: 3px solid #E0609E; outline-offset: -3px; }
  .r-amt { font-family: var(--body); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
  .r-total { font-size: 0.95rem; }
  .r-total strong { font: 700 1.3rem var(--display); }
  .r-total small { color: var(--muted); }
  .light { background: var(--card); color: var(--card-ink); border-radius: calc(var(--radius) - 4px); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .light-head { display: flex; align-items: center; gap: 10px; }
  .light-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .light-head small { color: var(--card-muted); }
  .light-bulb { width: 26px; height: 26px; border-radius: 50%; background: var(--field); border: 2px solid var(--line); flex: none; }
  .light[data-on] .light-bulb { background: #FFE9A8; border-color: #F2C94C; box-shadow: 0 0 12px rgba(242,201,76,.7); }
  .switch { width: 46px; height: 26px; border-radius: 999px; border: 0; background: var(--line); padding: 3px; flex: none; }
  .switch span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
  .switch[aria-checked="true"] { background: var(--accent); }
  .switch[aria-checked="true"] span { transform: translateX(20px); }
  .switch:disabled, .swatch:disabled, .light input:disabled { opacity: .4; }
  .light-row { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; color: var(--card-muted); }
  .light-row input { flex: 1; accent-color: var(--accent); }
  .swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); padding: 0; }
  .connect-form { display: flex; flex-direction: column; gap: 8px; }
  .connect-form ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  @media (prefers-reduced-motion: reduce) { .switch span { transition: none; } }
  .ef-heading { margin: 6px 0 -6px; font: 700 1rem var(--display); }
  .left-off { font-size: 0.85rem; font-weight: 700; background: var(--accent-soft); color: var(--card-ink); border-radius: 8px; padding: 4px 8px; align-self: flex-start; }
  .stars { color: #D99A00; letter-spacing: 1px; }
  .g-main > .exp { align-self: flex-start; }
  .cal-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .cal-filters-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
  .kind-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); display: block; }
  .chip.kind-chip[aria-pressed="true"] { background: var(--card); color: var(--card-ink); border-color: var(--k); }
  .chip.kind-chip[aria-pressed="false"] { opacity: 0.55; text-decoration: line-through; }
  .day-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; text-align: left; border-left: 4px solid var(--k); }
  .day-row .grow { flex: 1; min-width: 0; }
  .day-row strong { display: block; overflow-wrap: anywhere; font-weight: 700; }
  .day-row small { color: var(--card-muted); }
  .day-row[data-done] strong { text-decoration: line-through; opacity: 0.6; }
  .totals { font-size: 0.85rem; color: var(--card-muted); margin: 0; }
  .person-block { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
  .check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--card-ink); white-space: nowrap; }
  .check input { width: 18px; height: 18px; accent-color: var(--accent); }
  .people-row input[type="email"] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--field); color: var(--card-ink); }
  .quick-dates { display: flex; flex-wrap: wrap; gap: 6px; }

  @media (max-width: 900px) {
  }
  @media (max-width: 640px) {
  }
  @media (max-width: 640px) {
    .board { scroll-snap-type: x mandatory; gap: 10px; }
    .lane { flex-basis: min(86vw, 340px); scroll-snap-align: start; }
    .top { padding-top: 10px; }
    .top-right { margin-left: 0; width: 100%; }
    .top-right .status { flex: 1; }
    dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92vh; }
    dialog[open] { animation: sheet-up .24s cubic-bezier(.2, .9, .3, 1); }
    .row, .row3 { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .ghost { transform: none; } }

  .who-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
  .who-btn { font-size: 1.05rem; padding: 12px 18px; display: inline-flex; gap: 8px; align-items: center; }
  .today-head { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-end; }
  .today-hello { margin: 0; font: 700 1.5rem var(--display); }
  .today-head .hint { margin: 2px 0 0; }
  /* helper text that sits on the page background (not inside a white card) */
  .view-inner > .totals, .view-inner > .hint, .view-inner .today-head .hint, .view-inner > div > .hint, .shop > .hint { color: var(--muted); }
  .t-list { display: flex; flex-direction: column; gap: 6px; }
  .t-row { display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--card-ink); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); border-left: 5px solid var(--k, var(--line)); }
  .t-row .avatar { margin-left: 0; }
  .t-main { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; }
  .t-main { min-height: 34px; display: flex; flex-direction: column; justify-content: center; }
  @media (pointer: coarse) { .t-main { min-height: 44px; } }
  .t-main strong { display: block; overflow-wrap: anywhere; }
  .t-main small { display: block; color: var(--card-muted); }
  .t-row[data-done] .t-main strong { color: var(--card-muted); }
  .t-when { font: 700 0.78rem var(--body); font-variant-numeric: tabular-nums; color: var(--card-muted); min-width: 52px; }
  .t-acts { display: flex; gap: 6px; flex-wrap: wrap; }
  .t-check { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--card-muted); background: var(--field); color: transparent; font-weight: 800; display: grid; place-items: center; }
  .t-check[aria-pressed="true"] { background: var(--lo); border-color: var(--lo); color: var(--on-lo, #14101C); }
  .stat-table { border-collapse: collapse; width: 100%; background: var(--card); color: var(--card-ink); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
  .stat-table th, .stat-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
  .stat-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--card-muted); }
  .stat-table .dot { display: inline-block; margin-right: 6px; }
  .shop-list { display: flex; flex-direction: column; gap: 8px; }
  .shop-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; text-align: left; border: 0; background: var(--card); color: var(--card-ink); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font: inherit; font-size: 1.1rem; }
  .shop-box { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--card-muted); color: transparent; display: grid; place-items: center; font-weight: 800; background: var(--field); }
  .shop-row[aria-pressed="true"] .shop-box { background: var(--lo); border-color: var(--lo); color: var(--on-lo, #14101C); }
  .shop-row[aria-pressed="true"] .shop-name { text-decoration: line-through; color: var(--card-muted); }
  .shop-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
  .shop-name small { display: block; font-weight: 400; color: var(--card-muted); font-size: 0.8rem; }
  .shop-qty { font: 0.8rem var(--body); font-variant-numeric: tabular-nums; color: var(--card-muted); white-space: nowrap; }
  .shop-progress { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; } .shop-progress i { display: block; height: 100%; background: var(--lo); }
  .shop-bar { position: sticky; bottom: 0; padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg, transparent) 70%, transparent); }
  .shop-done { width: 100%; min-height: 52px; font-size: 1.05rem; }
  .put-row input[type="number"], .put-row input[type="date"] { border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font: inherit; width: 100%; }
  .put-row { background: var(--card); color: var(--card-ink); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .add-btn { font-weight: 800; }
  .trash-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
  .trash-row { display: flex; align-items: center; gap: 10px; background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; }
  .trash-row .grow { flex: 1; min-width: 0; } .trash-row strong { display: block; overflow-wrap: anywhere; } .trash-row small { color: var(--card-muted); }
  .key-box { font: 0.85rem var(--mono); background: var(--field); border-radius: 10px; padding: 10px; overflow-wrap: anywhere; user-select: all; }
  .steps { margin: 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
  .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
  .light-details { font-size: .85rem; color: var(--card-muted); margin: 6px 0; } .light-details p { margin: 4px 0; }
  /* ================= contrast-tuned colours (WCAG AA; checked with axe on every palette) ================= */
  :root { --on-hi: #FFFFFF; --on-med: #14101C; --on-lo: #14101C; --hi: #CF3434; --hi-text: #cb3030; --med-text: #8e6500; --lo: #309159; --lo-text: #287a4a; --card-muted: #596675; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-hi: #14101C; --on-med: #14101C; --on-lo: #14101C; --hi-text: #F07272; --med-text: #EDBE4C; --lo-text: #5CC98A; } }
  :root[data-theme="dark"] { --on-hi: #14101C; --on-med: #14101C; --on-lo: #14101C; --hi-text: #F07272; --med-text: #EDBE4C; --lo-text: #5CC98A; }
  :root[data-palette="pastel"] { --muted: #675e79; --card-muted: #6a607c; --hi-text: #c92a4c; --on-hi: #14101C; --med-text: #956015; --on-med: #14101C; --lo-text: #327757; --on-lo: #14101C; --accent: #8c57d3; }
  @media (prefers-color-scheme: dark) { :root[data-palette="pastel"]:not([data-theme="light"]) { --on-hi: #14101C; --on-med: #14101C; --on-lo: #14101C; --hi-text: #F28AA0; --med-text: #F0BE6A; --lo-text: #74CFA3; } }
  :root[data-palette="pastel"][data-theme="dark"] { --on-hi: #14101C; --on-med: #14101C; --on-lo: #14101C; --hi-text: #F28AA0; --med-text: #F0BE6A; --lo-text: #74CFA3; }
  :root[data-palette="jester"], :root[data-palette="jester"][data-theme] { --card-muted: #68567a; --lane-muted: #564765; --hi-text: #bc1f56; --on-hi: #14101C; --med-text: #875807; --on-med: #14101C; --lo-text: #2d6f4f; --on-lo: #14101C; }
  :root[data-palette="teal-pop"], :root[data-palette="teal-pop"][data-theme] { --muted: #4e585d; --card-muted: #586469; --hi: #d72d58; --hi-text: #c9264f; --on-hi: #FFFFFF; --med-text: #8c600d; --on-med: #14101C; --lo-text: #237653; --on-lo: #14101C; --accent: #108079; }

  .exp[data-state="expired"], .exp[data-state="today"] { background: var(--hi); color: var(--on-hi); }
  .exp[data-state="soon"] { background: var(--med); color: var(--on-med); }
  .done-badge { background: var(--lo); color: var(--on-lo); }
  .btn.danger-solid { background: var(--hi); border-color: var(--hi); color: var(--on-hi); }
  .avatar.both { background: var(--card-ink); color: var(--card); }
  .due[data-state="overdue"], .status[data-kind="error"], .btn.danger, .lane-menu .danger { color: var(--hi-text); }
  .due[data-state="soon"], .status[data-kind="warn"] { color: var(--med-text); }
  .progress[data-done="true"] { color: var(--lo-text); }
  .stars { color: var(--med-text); }
  :root[data-palette="jester"] .status[data-kind="warn"], :root[data-palette="jester-night"] .status[data-kind="warn"], :root[data-palette="teal-pop"] .status[data-kind="warn"] { color: #F5C46B; }
  :root[data-palette="jester"] .status[data-kind="error"], :root[data-palette="jester-night"] .status[data-kind="error"], :root[data-palette="teal-pop"] .status[data-kind="error"] { color: #FF9DB1; }
  /* dimmed things are dimmed with colour, not opacity, so they stay readable */
  .cal-pill[data-done], .day-row[data-done] strong { opacity: 1; color: var(--card-muted); }
  .r-card[data-off] { opacity: 1; background: var(--field); }
  .r-card[data-off] .g-name { color: var(--card-muted); }
  .chip.kind-chip[aria-pressed="false"] { opacity: 1; background: var(--field); color: var(--card-muted); text-decoration: line-through; }

  /* ================= navigation: a sidebar on computers, a bottom bar and page chips on phones ================= */
  /* Hidden labels are positioned inside their own scrolling page, so they can never stretch the whole document. */
  .view, .board { position: relative; }
  .visually-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; }
  .skip:focus { top: 8px; }
  [role="main"]:focus, .board:focus, .view:focus { outline: none; }
  .shell { flex: 1; min-height: 0; display: flex; }
  .col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .side { display: none; width: 212px; flex: none; background: var(--lane); color: var(--lane-ink); border-right: 1px solid var(--line); padding: 14px 10px; flex-direction: column; gap: 2px; overflow-y: auto; }
  .side-brand { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: var(--header-bg); color: var(--header-ink); font: 700 1.25rem/1 var(--display); }
  .side-brand svg { width: 28px; height: 22px; flex: none; }
  .side .add-btn { margin: 0 4px 6px; }
  .side-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 10px 4px; font: 700 0.74rem var(--body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--lane-muted); }
  .side-title svg, .tab svg { width: 18px; height: 18px; flex: none; }
  .side-item { border: 0; background: none; text-align: left; padding: 6px 10px 6px 34px; border-radius: 10px; font-weight: 700; color: var(--lane-ink); font-size: 0.92rem; width: 100%; }
  .side-item:hover { background: rgba(127, 127, 127, 0.14); }
  .side-item[aria-current="page"] { background: var(--card); color: var(--card-ink); box-shadow: var(--shadow); }
  .side-gap { margin-top: 10px; }
  .side-solo { display: flex; align-items: center; gap: 8px; padding-left: 10px; margin-top: 8px; }
  .side-solo svg { width: 18px; height: 18px; flex: none; }
  .side-foot { margin-top: auto; padding-left: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 10px; }
  .bottombar { display: none; flex: none; grid-template-columns: 1fr 1fr 64px 1fr 1fr; align-items: end; padding: 6px 6px 8px; background: var(--card); color: var(--card-ink); border-top: 1px solid var(--line); }
  .tab { border: 0; background: none; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: 0.72rem; font-weight: 700; color: var(--card-muted); border-radius: 10px; min-height: 44px; }
  .tab svg { width: 24px; height: 24px; }
  .bottombar[data-n="3"] .tab:last-child { grid-column: span 2; }
  .tab[aria-current="page"] { color: var(--card-ink); }
  .tab[aria-current="page"] svg { background: var(--accent-soft); border-radius: 12px; padding: 2px 8px; width: 44px; box-sizing: border-box; }
  .fab { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font: 600 1.8rem/1 var(--display); box-shadow: var(--shadow); margin: -22px auto 0; display: grid; place-items: center; padding: 0; }
  @media (min-width: 640px) {
    .side { display: flex; }
    .top .brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .page-name { color: var(--header-ink); font-size: 1.2rem; padding-left: 0; margin-left: 0; border-left: 0; }
    .boards { display: none; }
    .top { padding-top: 12px; }
  }
  @media (max-width: 639px) {
    /* Pinned to the bottom of the screen, so it stays put however the page or the browser's own bars move. */
    .bottombar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    .shell { padding-bottom: calc(var(--barh, 72px) - env(safe-area-inset-bottom, 0px)); }
    .toast { bottom: calc(var(--barh, 0px) + 12px); }
  }

  /* ================= Home overview, and the Colors & connections page ================= */
  .ov-wrap { container-type: inline-size; }
  .ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: start; min-width: 0; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--lane-ink); background: var(--lane-1); }
  .ov.wide { grid-column: auto; }
  .ov[data-tile="week"], .ov[data-tile="start"] { grid-column: 1 / -1; }
  .ov.slim .gs-list { margin: 0; }
  .gs-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .ov.t2 { background: var(--lane-2); } .ov.t3 { background: var(--lane-3); } .ov.t4 { background: var(--lane-4); } .ov.t5 { background: var(--lane-5); }
  .ov h3 { margin: 0; font: 700 0.72rem var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lane-muted); }
  .ov .big { font: 700 2.1rem/1 var(--display); }
  .ov p { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
  .ov .muted { color: var(--lane-muted); }
  .ov-link { border: 0; background: none; padding: 4px 0; min-height: 28px; display: inline-flex; align-items: center; font: inherit; font-weight: 700; font-size: 0.86rem; color: var(--lane-ink); text-decoration: underline; width: fit-content; text-align: left; cursor: pointer; }
  .ov-line { display: block; width: 100%; border: 0; background: none; padding: 3px 0; text-align: left; color: var(--lane-ink); font: inherit; font-size: 0.9rem; cursor: pointer; overflow-wrap: anywhere; }
  .ov-line b { display: inline-block; min-width: 3.2rem; }
  .ov-ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) 0 var(--pct, 0%), var(--line) 0); flex: none; }
  .ov-ring i { width: 34px; height: 34px; border-radius: 50%; background: var(--lane-5); color: var(--lane-ink); display: grid; place-items: center; font: 700 0.8rem var(--display); font-style: normal; }
  .ov-dev { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; border-top: 1px solid var(--line); padding-top: 6px; }
  .ov-dev:first-of-type { border-top: 0; padding-top: 0; }
  .ov-dev small { display: block; color: var(--lane-muted); }
  @container (max-width: 520px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (pointer: coarse) { .ov-line, .ov-link { min-height: 44px; align-items: center; } .ov-line { display: flex; gap: 4px; flex-wrap: wrap; } }
  .pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
  .pal { color: var(--card-ink); border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px; display: grid; gap: 6px; text-align: left; font-weight: 700; font-size: 0.88rem; }
  .pal[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .sw { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
  .sw i { flex: 1; height: 24px; }
  .pal.mine .sw { border-style: dashed; justify-content: center; align-items: center; height: 26px; color: var(--card-muted); font: 600 1.1rem var(--display); }
  .editor { color: var(--card-ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
  .editor h3 { font: 700 1.05rem var(--display); margin: 0; }
  .cpick { display: flex; flex-direction: column; gap: 6px; }
  .cp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px 4px 12px; background: var(--field); color: var(--card-ink); }
  .cp .cp-l { flex: 1 1 9rem; min-width: 0; font-weight: 700; font-size: 0.92rem; }
  .cp .hex { font: 500 0.8rem var(--mono); color: var(--card-muted); }
  .cp input[type="color"] { width: 48px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
  .seeds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .seeds .lbl { font-weight: 700; font-size: 0.84rem; color: var(--card-muted); margin-right: 2px; }
  .readable { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; color: var(--card-ink); background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; }
  .readable small { color: var(--card-muted); } .readable ul { margin: 0; padding-left: 18px; }
  .conn { display: flex; flex-direction: column; gap: 8px; background: var(--card); color: var(--card-ink); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; }
  .conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .conn-head strong { flex: 1 1 8rem; min-width: 0; }
  .conn small, .conn .hint { color: var(--card-muted); }
  .wxform { display: flex; gap: 8px; }
  .wxform input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 16px; }
  .picks { display: flex; flex-direction: column; gap: 6px; }
  .pick { text-align: left; border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 12px; padding: 8px 12px; display: grid; font: inherit; cursor: pointer; }
  .pick small { color: var(--card-muted); }
  @media (pointer: coarse) { .pick, .cp { min-height: 44px; } }

  /* ================= Rooms ================= */
  .room-tag { background: none; border: 1px solid var(--line); color: var(--card-muted); }
  button.room-link { cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700; }
  .rm-panel { display: flex; flex-direction: column; gap: 8px; background: var(--card); color: var(--card-ink); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; }
  .view-inner .rm-panel .hint, .view-inner .editor .hint, .view-inner .conn .hint { color: var(--card-muted); }
  .light-row select { background: var(--field); color: var(--card-ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font: inherit; max-width: 65%; }
  @media (pointer: coarse) { .light-row select { min-height: 44px; } }
  .rm-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
  .rm-row input[type="text"] { flex: 1 1 10rem; min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 16px; }
  .ov-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
  .ov-dot[data-prio="high"] { background: var(--hi); } .ov-dot[data-prio="med"] { background: var(--med); } .ov-dot[data-prio="low"] { background: var(--lo); }
  .ov-empty { grid-column: 1 / -1; }
  .ov-hint { font-weight: 700; }
  /* ================= Meals, Upkeep, warranties ================= */
  .meal-row, .recipe-row, .up-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: var(--card); color: var(--card-ink); border-radius: 14px; box-shadow: var(--shadow); padding: 6px 12px; min-height: 56px; }
  .meal-row[data-today] { outline: 2px solid var(--accent); }
  .meal-day { width: 3.8rem; flex: none; font-size: 0.85rem; color: var(--card-muted); } .meal-day b { display: block; color: var(--card-ink); font-size: 0.95rem; }
  .meal-main { flex: 1 1 10rem; min-width: 0; background: none; border: 0; text-align: left; font: inherit; font-weight: 700; color: var(--card-ink); padding: 8px 0; cursor: pointer; overflow-wrap: anywhere; }
  .meal-main.open { color: var(--card-muted); font-weight: 400; }
  .meal-main small { display: block; font-weight: 400; color: var(--card-muted); }
  .meal-list, .recipe-list, .up-list { display: flex; flex-direction: column; gap: 8px; }
  .sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--accent-soft); color: var(--card-ink); border-radius: 14px; padding: 10px 14px; }
  .sug span { flex: 1 1 14rem; }
  .recipe-row .grow, .up-row .grow { flex: 1 1 12rem; min-width: 0; } .recipe-row small, .up-row small { display: block; color: var(--card-muted); }
  .up-row .exp { flex: none; }
  .meal-tag { background: var(--accent-soft); color: var(--card-ink); }
  .p-item-wrap { display: flex; align-items: center; gap: 6px; } .p-item-wrap .p-item { flex: 1; min-width: 0; } .p-item .exp { display: block; width: fit-content; margin-top: 2px; }
  .p-warn { display: flex; flex-direction: column; gap: 6px; }
  a.mini { text-decoration: none; display: inline-flex; align-items: center; color: var(--card-ink); }
  @media (pointer: coarse) { .meal-main, .p-item, .p-spot-name, a.mini, button.room-link { min-height: 44px; } a.mini, button.room-link { padding-inline: 12px; } .meal-main { display: flex; flex-direction: column; justify-content: center; } }
  .view-inner .sug, .view-inner .sug span { color: var(--card-ink); }
  /* ================= Notes and the pinboard ================= */
  .note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .note-card { display: flex; flex-direction: column; gap: 6px; border-radius: 6px 6px 14px 14px; padding: 10px 12px 10px; color: var(--lane-ink); background: var(--lane-1); box-shadow: var(--shadow); border-top: 8px solid var(--line); min-width: 0; }
  .note-card.t2 { background: var(--lane-2); } .note-card.t3 { background: var(--lane-3); } .note-card.t4 { background: var(--lane-4); } .note-card.t5 { background: var(--lane-5); }
  .note-main { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 4px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; flex: 1; }
  .note-main strong { overflow-wrap: anywhere; } .note-body { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; }
  .note-main small { color: var(--lane-muted); }
  .note-card .mini { align-self: flex-start; color: var(--card-ink); }
  .note-card[data-pinned] { border-top-color: var(--accent); }
  @media (pointer: coarse) { .note-main { min-height: 44px; } .search { min-height: 44px; } }
  /* ================= Thermostat, music and the calendar feed ================= */
  .nest-step { display: inline-flex; align-items: center; gap: 8px; }
  .nest-step button, .mus-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--card-ink); font: 700 1.1rem var(--display); display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
  .nest-step button:disabled, .mus-ctl button:disabled { opacity: 0.4; cursor: default; }
  .nest-step .t { min-width: 3ch; text-align: center; font: 700 1.2rem var(--display); }
  .mus-ctl { display: inline-flex; gap: 6px; flex: none; }
  .mus-ctl svg { width: 18px; height: 18px; }
  .ov-dev b, .ov-dev small { overflow-wrap: anywhere; }
  .dev-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); color: var(--card-ink); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; }
  .dev-card h3 { margin: 0; font: 700 1rem var(--display); } .dev-card small, .dev-card .hint { color: var(--card-muted); }
  .dev-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
  .dev-card input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
  .dev-card select { border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 6px 10px; font: inherit; }
  .dev-note { color: var(--card-muted); font-size: 0.86rem; }
  .cal-url { display: flex; gap: 8px; flex-wrap: wrap; }
  .cal-url input { flex: 1 1 14rem; min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font: 0.8rem var(--mono); }
  .cal-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  @media (pointer: coarse) { .nest-step button, .mus-ctl button { width: 44px; height: 44px; } .cal-url input { min-height: 44px; } }
  /* ================= Ribbon, cog, upkeep chip, grouped settings, notepad ================= */
  .icon-btn.cog-btn, .icon-btn.ribbon-btn { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; position: relative; }
  .ribbon-btn svg { transition: transform .2s ease; }
  .ribbon-btn[aria-expanded="false"] svg { transform: rotate(180deg); }
  .ribbon-btn[data-active]::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); }
  .filters { max-height: 220px; transition: max-height .25s ease, opacity .2s ease, padding .25s ease; }
  body[data-ribbon="min"] .filters { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; visibility: hidden; transition: max-height .25s ease, opacity .2s ease, padding .25s ease, visibility 0s .25s; }
  .filters .repeats-btn { margin-left: auto; }
  .boards .is-upkeep, .side-item.is-upkeep { display: inline-flex; align-items: center; gap: 6px; }
  .boards .is-upkeep svg, .side-item.is-upkeep svg { width: 16px; height: 16px; flex: none; }
  .boards .is-upkeep { margin-left: 6px; }
  .side-item.is-upkeep { display: flex; }
  .sgroup { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--card-ink); }
  .sgroup > summary { list-style: none; cursor: pointer; padding: 8px 12px; min-height: 44px; font: 700 0.95rem var(--display); display: flex; align-items: center; gap: 8px; }
  .sgroup > summary::-webkit-details-marker { display: none; }
  .sgroup > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .sgroup[open] > summary::after { transform: rotate(-135deg); }
  .sg-body { display: flex; flex-direction: column; gap: 14px; padding: 2px 12px 14px; }
  .who-label { flex: none; min-width: 3.2rem; font-weight: 700; }
  .sg-body .check { white-space: normal; }
  @media (max-width: 640px) { .sg-body .people-row { flex-wrap: wrap; } .sg-body .people-row input[type="email"] { order: 3; flex: 1 1 100%; } .sg-body .people-row .who-label { flex: 1; } }
  .hs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .hs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--line); }
  .hs-move { display: inline-flex; gap: 4px; }
  .hs-move .mini { min-width: 36px; }
  .hs-note { display: block; font-weight: 400; font-size: 0.78rem; color: var(--card-muted); }
  .hs-row .check { white-space: normal; align-items: flex-start; }
  .hs-row .check input { margin-top: 2px; }
  .field > label.check { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--card-ink); }
  .today-head .home-edit { border: 0; background: none; color: var(--muted); width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; }
  .today-head .home-edit:hover { background: var(--card); color: var(--card-ink); }
  @media (pointer: coarse) { .today-head .home-edit { width: 44px; height: 44px; } }
  /* Pinboard: a notepad. Ruled lines, a margin, a spiral along the top. */
  .ov.pin { background: none; border: 0; box-shadow: none; padding: 0; gap: 4px; }
  .ov.pin .ov-link { color: var(--ink); }
  .pad { position: relative; background-color: var(--card); color: var(--card-ink); border-radius: 12px; box-shadow: var(--shadow), 0 10px 18px -12px rgba(0,0,0,.4); --ln: 32px; padding: 10px 14px 8px 46px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ln) - 1px), var(--line) calc(var(--ln) - 1px), var(--line) var(--ln)); background-position: 0 10px; background-repeat: repeat-y; }
  .pad::before { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: var(--hi); opacity: .45; }
  .pad-lines { list-style: none; margin: 0; padding: 0; min-height: calc(var(--ln) * 2); }
  .pad-lines li { display: block; }
  .pin-note { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--ln); line-height: var(--ln); border: 0; background: none; text-align: left; color: inherit; font: inherit; padding: 0; cursor: pointer; }
  .pin-note b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pin-note::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lane-1); border: 1px solid var(--line); }
  .pin-note.t2::before { background: var(--lane-2); } .pin-note.t3::before { background: var(--lane-3); } .pin-note.t4::before { background: var(--lane-4); } .pin-note.t5::before { background: var(--lane-5); }
  .pin-note:hover b { text-decoration: underline; }
  .pin-add { display: flex; align-items: center; gap: 6px; margin: 0; height: var(--ln); }
  .pin-add .pencil { flex: none; display: inline-grid; place-items: center; color: var(--card-muted); }
  .pin-add input { flex: 1; min-width: 0; border: 0; background: none; color: var(--card-ink); font: inherit; font-size: 16px; line-height: var(--ln); height: var(--ln); padding: 0; outline-offset: -2px; }
  .pin-add input::placeholder { color: var(--card-muted); opacity: 1; font-style: italic; }
  .pin-add .pin-go { flex: none; width: calc(var(--ln) - 4px); height: calc(var(--ln) - 4px); border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; display: inline-grid; place-items: center; }
  @media (pointer: coarse) { .pad { --ln: 44px; } }
  /* ================= Ticking things off ================= */
  .t-check { position: relative; transition: transform .14s ease, background-color .2s ease, border-color .2s ease; }
  .t-check:active { transform: scale(.86); }
  .t-check svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .t-check[aria-pressed="true"] svg { stroke-dashoffset: 0; }
  .t-list { display: flex; flex-direction: column; gap: 8px; }
  .t-main .tt { text-decoration: line-through 2px transparent; }
  .t-row[data-done] .t-main .tt { text-decoration-color: currentColor; }
  .t-row[data-just] { animation: t-glow .9s ease-out; }
  .t-row[data-just] .t-check { animation: t-pop .5s cubic-bezier(.2, 1.7, .4, 1); }
  .t-row[data-just] .t-check svg { animation: t-draw .32s .1s ease-out backwards; }
  .t-row[data-just] .t-check::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--lo); animation: t-ring .6s ease-out forwards; pointer-events: none; }
  .t-row[data-just] .t-main .tt { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 58% / 0 2px no-repeat; animation: t-strike .4s .12s ease-out forwards; }
  @keyframes t-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes t-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes t-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
  @keyframes t-strike { to { background-size: 100% 2px; } }
  @keyframes t-glow { 0% { box-shadow: var(--shadow), 0 0 0 0 color-mix(in srgb, var(--lo) 55%, transparent); } 100% { box-shadow: var(--shadow), 0 0 0 14px transparent; } }
  .totals { position: relative; }
  .sparks { position: absolute; left: 6px; top: 50%; width: 0; height: 0; pointer-events: none; }
  .sparks i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--lane-1); animation: t-spark .9s ease-out forwards; }
  .sparks i:nth-child(3n) { background: var(--lane-3); } .sparks i:nth-child(3n+1) { background: var(--accent); } .sparks i:nth-child(4n+2) { background: var(--lo); }
  .sparks i:nth-child(1) { --x: -30px; --y: -34px; } .sparks i:nth-child(2) { --x: 0px; --y: -44px; } .sparks i:nth-child(3) { --x: 34px; --y: -30px; } .sparks i:nth-child(4) { --x: 52px; --y: -4px; }
  .sparks i:nth-child(5) { --x: 36px; --y: 26px; } .sparks i:nth-child(6) { --x: 4px; --y: 38px; } .sparks i:nth-child(7) { --x: -32px; --y: 28px; } .sparks i:nth-child(8) { --x: -48px; --y: -2px; }
  .sparks i:nth-child(9) { --x: 16px; --y: -22px; } .sparks i:nth-child(10) { --x: -16px; --y: 18px; }
  @keyframes t-spark { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
  /* Every button gives a little when pressed */
  .btn, .chip, .mini, .seg button, .icon-btn, .boards button, .side-item, .tab, .add-card { transition: transform .12s ease, background-color .15s ease; }
  .btn:active, .chip:active, .mini:active, .seg button:active, .icon-btn:active, .boards button:active, .add-card:active { transform: scale(.95); }
  .fab { transition: transform .14s ease; } .fab:active { transform: scale(.9); }
  @media (prefers-reduced-motion: reduce) {
    .t-row[data-just], .t-row[data-just] .t-check, .t-row[data-just] .t-check svg, .t-row[data-just] .t-check::after, .sparks i { animation: none; }
    .t-row[data-just] .t-main .tt { animation: none; text-decoration: line-through; background: none; }
    .sparks { display: none; }
    .btn:active, .chip:active, .mini:active, .seg button:active, .icon-btn:active, .boards button:active, .add-card:active, .fab:active, .t-check:active { transform: none; }
  }
  /* ================= Calendar: room to read ================= */
  .cal-filt { display: inline-flex; align-items: center; gap: 6px; }
  #rooms-body > .section-title { margin: 14px 0 -4px; }
  .cal-filt .badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-width: 20px; padding: 0 6px; font-size: 0.75rem; line-height: 20px; text-align: center; }
  .cal-filt .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .cal-filt[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-2px); }
  #cal-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .26s ease, visibility 0s .26s; }
  #cal-panel[data-open="true"] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .26s ease, visibility 0s 0s; }
  .cal-panel-in { overflow: hidden; min-height: 0; }
  .cal-panel { background: var(--card); color: var(--card-ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
  @media (pointer: coarse) { .cal-filt, .cal-head .btn { min-height: 44px; } }
  /* ================= Little motions ================= */
  @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .view-enter { animation: view-in .2s ease-out; }
  @keyframes card-drop { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 60% { opacity: 1; transform: translateY(2px) scale(1.01); } 100% { transform: none; } }
  .card-in { animation: card-drop .38s cubic-bezier(.2, .9, .3, 1); }
  @keyframes note-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes dot-bounce { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
  .pin-note.note-in b { animation: note-write .5s steps(18, end); }
  .pin-note.note-in::before { animation: dot-bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes roll-in { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
  .roll { animation: roll-in .38s cubic-bezier(.2, .9, .3, 1.2); }
  @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .bump { display: inline-block; animation: bump .35s ease-out; }
  @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
  .big.pulse { display: inline-block; animation: pulse 1.6s ease-in-out 3; }
  /* the switch knob has a little spring */
  .switch span { transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); }
  /* Used up leaves; Restock hops toward the shopping list */
  .t-row { transition: opacity .25s ease, transform .28s ease, max-height .28s ease; }
  .t-row.t-out { opacity: 0; transform: scale(.94); }
  .t-row.t-hop { opacity: 0; transform: translate(14px, 26px) scale(.92); }
  /* a check that blooms */
  .bloom { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lo); color: var(--on-lo, #14101C); vertical-align: middle; margin-right: 8px; }
  .bloom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  @keyframes bloom-grow { 0% { transform: scale(0); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
  @keyframes bloom-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .bloom-in { animation: bloom-grow .55s cubic-bezier(.2, 1.5, .4, 1); }
  .bloom-in svg { animation: bloom-draw .35s .2s ease-out backwards; }
  .empty-view.clean { display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; }
  .shop-progress i { transition: width .4s ease; }
  /* saved */
  @keyframes saved-pop { 0% { transform: scale(0); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
  .status[data-saved]::before { content: "✓"; display: inline-block; margin-right: 4px; font-weight: 800; animation: saved-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
  /* loading shapes instead of the word "Loading" */
  @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .skel { display: inline-block; border-radius: 8px; vertical-align: middle; background-color: color-mix(in srgb, currentColor 12%, transparent); background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, currentColor 16%, transparent) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
  /* weather picture */
  .ov { position: relative; }
  .tile-opt { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--lane-muted); display: inline-grid; place-items: center; padding: 0; }
  .tile-opt:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  @media (pointer: coarse) { .tile-opt { width: 44px; height: 44px; top: 2px; right: 2px; } }
  .wx-cond { display: flex; align-items: center; gap: 8px; margin: 0; }
  .wx-ico { flex: none; }
  @keyframes wx-spin { to { transform: rotate(360deg); } }
  @keyframes wx-drift { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
  @keyframes wx-fall { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
  @keyframes wx-flash { 0%, 80%, 100% { opacity: 1; } 88% { opacity: .2; } }
  .wx-ico .wx-rays, .wx-ico.sun circle { transform-origin: 16px 16px; }
  .wx-ico.sun .wx-rays { animation: wx-spin 24s linear infinite; }
  .wx-ico.part .wx-cloud, .wx-ico.cloud .wx-cloud, .wx-ico.fog .wx-cloud { animation: wx-drift 6s ease-in-out infinite; }
  .wx-ico .wx-drop, .wx-ico .wx-flake { animation: wx-fall 1.2s linear infinite; }
  .wx-ico .d2 { animation-delay: .4s; } .wx-ico .d3 { animation-delay: .8s; }
  .wx-ico .wx-bolt { fill: currentColor; animation: wx-flash 3s infinite; }
  /* every motion off when the phone asks for less of it */
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
  /* ================= Calendar: a month, like the calendar apps you know ================= */
  #calendar .view-inner { max-width: none; height: 100%; gap: 10px; }
  .cal-head { display: flex; align-items: center; gap: 8px; flex: none; }
  .cal-title { font: 700 1.55rem var(--display); letter-spacing: -0.01em; margin: 0 8px 0 4px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cal-head .btn { flex: none; }
  .cal-filt .fi { display: none; }
  .cal-arrow { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .cal-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .cal-body { position: relative; flex: 1; min-height: calc(var(--weeks, 6) * 76px + 30px); display: flex; flex-direction: column; gap: 10px; }
  .cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--weeks, 6), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .cal-dow { background: var(--card); color: var(--card-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 9px 0 7px; }
  .cal-day { background: var(--card); color: var(--card-ink); border: 0; border-radius: 0; padding: 6px 6px 4px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
  .cal-day:hover { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
  .cal-day[data-out] { background: var(--field); }
  .cal-day[data-out] .cal-num { color: var(--card-muted); }
  .cal-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
  .cal-num { align-self: flex-start; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 600 0.92rem var(--display); }
  .cal-day[data-today] .cal-num { background: var(--accent); color: var(--accent-ink); }
  .cal-evs { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
  .cal-pill { display: block; font-size: 0.76rem; line-height: 1.32; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--card-ink); background: color-mix(in srgb, var(--k, var(--accent)) 20%, var(--card)); border-left: 3px solid var(--k, var(--accent)); }
  .cal-pill[data-done] { text-decoration: line-through; color: var(--card-muted); background: var(--field); }
  .cal-more { font-size: 0.72rem; color: var(--card-muted); padding-left: 4px; }
  .cal-dots { display: none; justify-content: center; gap: 3px; margin-top: auto; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); display: block; }
  /* The day you tap opens beside the month (over it, so the grid never shrinks). */
  .day-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 92%); z-index: 3; background: var(--card); color: var(--card-ink); border-radius: var(--radius); box-shadow: var(--lift); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; transform: translateX(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform .26s ease, opacity .2s ease, visibility 0s .26s; }
  .day-panel[data-open="true"] { transform: none; opacity: 1; visibility: visible; transition: transform .26s ease, opacity .2s ease, visibility 0s 0s; }
  .dp-head { display: flex; align-items: center; gap: 8px; }
  .dp-head h3 { margin: 0; flex: 1; font: 700 1.1rem var(--display); }
  .cal-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--field); color: var(--card-ink); font-size: 1.2rem; line-height: 1; display: inline-grid; place-items: center; padding: 0; }
  .dp-empty { margin: 0; color: var(--card-muted); }
  @media (pointer: coarse) { .cal-x { width: 44px; height: 44px; } .cal-arrow { width: 44px; height: 44px; } .cal-filt, .cal-head .btn { min-height: 44px; } }
  /* Phones: the month is a compact strip of numbers and dots, with that day's things underneath. */
  @media (max-width: 700px) {
    #calendar { padding-left: 12px; padding-right: 12px; }
    .cal-title { font-size: 1.2rem; margin: 0 2px; flex: 1; }
    .cal-filt .lbl { display: none; } .cal-filt .fi { display: block; } .cal-filt { padding: 0 12px; }
    .cal-head { gap: 6px; }
    .cal-head > .spacer { display: none; }
    /* Week: the date label gets a row of its own and the rest wraps under it, so nothing scrolls sideways or is cut off. */
    #week .cal-head { flex-wrap: wrap; }
    #week .cal-title { flex: 1 0 100%; white-space: normal; margin: 0; padding: 0 2px; }
    #week .cal-head .seg { flex: 1 0 100%; flex-wrap: wrap; }
    .cal-body { min-height: 0; }
    .cal-grid { flex: none; grid-template-rows: auto repeat(var(--weeks, 6), 46px); }
    .cal-day { align-items: center; padding: 3px 2px; gap: 2px; }
    .cal-num { align-self: center; width: 26px; height: 26px; font-size: 0.85rem; }
    .cal-evs, .cal-more { display: none; }
    .cal-dots { display: flex; margin-top: 0; }
    .cal-dow { padding: 6px 0 5px; }
    .day-panel { position: static; flex: 1; min-height: 0; width: auto; transform: none; opacity: 1; visibility: visible; box-shadow: var(--shadow); transition: none; }
    .cal-x { display: none; }
  }
  /* ================= Settings: one page ================= */
  .settings-inner { max-width: 760px; }
  .settings-inner > .search { max-width: none; width: 100%; flex: none; }
  #settings-form { display: flex; flex-direction: column; gap: 10px; }
  .s-foot { position: sticky; bottom: -28px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 2px 34px; margin: 4px 0 -28px; background: var(--ground); border-top: 1px solid var(--line); }
  .s-dirty { color: var(--muted); font-size: 0.85rem; }
  .settings-inner .conn { box-shadow: none; border: 1px solid var(--line); }
  /* ================= Page picker (phones) ================= */
  button.page-name { background: none; border-top: 0; border-right: 0; border-bottom: 0; padding: 4px 0 4px 12px; cursor: default; text-align: left; display: inline-flex; align-items: center; gap: 4px; }
  button.page-name:disabled { color: var(--header-ink); }
  .page-name .pn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .page-name .pn-chev { flex: none; opacity: .8; }
  @media (min-width: 640px) { button.page-name { padding-left: 0; } .page-name .pn-chev { display: none; } }
  @media (max-width: 640px) { button.page-name { cursor: pointer; min-height: 40px; padding-right: 8px; } button.page-name:active { transform: scale(.97); } }
  #picker-dlg { margin: auto 0 0; width: 100%; max-width: none; max-height: 86dvh; border-radius: 22px 22px 0 0; }
  #picker-dlg[open] { animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .pk { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
  .pk-head { display: flex; align-items: center; gap: 8px; }
  .pk-head h2 { margin: 0; flex: 1; font: 700 1.2rem var(--display); }
  .pk-sec { padding-top: 4px; }
  .pk-sec h3 { margin: 0 0 6px; font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--card-muted); }
  .pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pk-item { min-height: 48px; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--field); color: var(--card-ink); border-radius: 14px; padding: 8px 14px; font-weight: 700; overflow-wrap: anywhere; }
  .pk-item svg { width: 16px; height: 16px; flex: none; }
  .pk-item[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); }
  .pk-item:active { transform: scale(.97); }
  /* ================= Smart capture and reminders ================= */
  .q-preview { margin: -4px 0 0; min-height: 1.3em; color: var(--card-muted); font-size: 0.86rem; font-weight: 600; }
  .remind-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--card-muted); }
  /* ================= Week ahead, getting started, checklists ================= */
  .wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
  .wk-card { background: var(--card); color: var(--card-ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
  .wk-card[data-today] { outline: 2px solid var(--accent); outline-offset: -2px; }
  .wk-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 1rem var(--display); }
  .wk-num { font-size: 1.25rem; }
  .wk-meal { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--field); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font-weight: 700; min-height: 40px; }
  .wk-meal svg { flex: none; color: var(--card-muted); }
  .wk-meal span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .wk-meal.open { background: none; border: 1px dashed var(--line); color: var(--card-muted); font-weight: 600; }
  .wk-card .day-row { background: var(--field); }
  .wk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .wk-day { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: color-mix(in srgb, var(--lane-ink) 6%, transparent); color: var(--lane-ink); border-radius: 12px; padding: 6px 2px; min-width: 0; min-height: 88px; cursor: pointer; }
  .wk-day[data-today] { background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
  .wk-day b { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lane-muted); }
  .wk-n { font: 700 1.05rem var(--display); }
  .wk-dots { display: flex; gap: 3px; min-height: 8px; }
  .wk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--k); display: block; }
  .wk-day .fork { color: var(--lane-muted); }
  .wk-day small { display: none; font-size: 0.68rem; line-height: 1.15; color: var(--lane-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .wk-nomeal { height: 14px; }
  @container (min-width: 520px) { .wk-day small { display: block; } }
  .gs-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .gs-step { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; border: 0; background: none; color: var(--lane-ink); text-align: left; padding: 4px 2px; font: inherit; font-weight: 600; border-radius: 8px; }
  .gs-step:hover { background: color-mix(in srgb, var(--lane-ink) 7%, transparent); }
  .gs-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--lane-muted); display: inline-grid; place-items: center; }
  .gs-list [data-done] .gs-tick { background: var(--lo); border-color: var(--lo); color: var(--on-lo, #14101C); }
  .gs-list [data-done] .gs-t { text-decoration: line-through; color: var(--lane-muted); }
  .pk-check { align-items: flex-start; padding: 4px 0; }
  .pk-check input { margin-top: 3px; }
  #packs-dlg .dlg { max-height: calc(100dvh - 60px); overflow-y: auto; }
  @media (max-width: 640px) { .wk-grid { grid-template-columns: 1fr; } }
  /* ================= phones: a slimmer header, one scrolling row for sections and filters ================= */
  @media (max-width: 640px) {
    .top { padding: 8px 12px 4px; gap: 6px 8px; }
    .status[data-saved] { font-size: 0; } .status[data-saved]::before { font-size: 0.95rem; margin: 0; } /* on a phone the save shows as just a check, so the page name keeps its room */
    .brand { font-size: 1.15rem; }
    .brand svg { width: 26px; height: 20px; }
    .top-right { order: 2; margin-left: auto; width: auto; gap: 6px; }
    .top-right .status { flex: none; }
    .status:not([data-kind="warn"]):not([data-kind="error"]):not([data-busy="1"]):not([data-saved]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .filters::-webkit-scrollbar { display: none; }
    .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
    .filters > * { flex: none; }
    .filters .repeats-btn { order: -1; margin-left: 0; }
    .search { min-width: 160px; }
    .icon-btn { padding: 6px 10px; }
  }
  /* bigger targets for fingers */
  @media (pointer: coarse) {
    .chip, .seg button, .pk-item { min-height: 44px; }
    .side-item { min-height: 44px; }
    .btn, .icon-btn { min-height: 44px; }
    .mini, .lane-menu button, .add-card { min-height: 44px; }
    .mini, .seg button { min-width: 44px; }
    .lane-menu-btn, .check-row .x { min-width: 44px; min-height: 44px; }
    .swatch { width: 36px; height: 36px; }
    /* Dialogs: one-line fields, the corner close button and colour dots are real finger-sized targets (44 px). */
    .dlg .field input[type="text"], .dlg .field input[type="url"], .dlg .field input[type="date"], .dlg .field input[type="time"], .dlg .field input[type="number"], .dlg .field input[type="email"], .dlg .field select { min-height: 44px; }
    .dlg .dlg-x { width: 44px; height: 44px; line-height: 42px; margin: -14px -14px -34px 0; }
    .dlg .swatch { width: 44px; height: 44px; }
    .dlg label.check { min-height: 44px; }
    .dlg .pet-sw { width: 44px; height: 44px; }
    .filter-select { min-height: 40px; }
    .p-spot-name { min-height: 44px; padding: 6px 0; }
    .light input[type="range"] { height: 32px; }
    .switch { width: 54px; height: 32px; }
    .switch span { width: 26px; height: 26px; }
    .switch[aria-checked="true"] span { transform: translateX(22px); }
  }
  /* Windows High Contrast: selected states can't rely on background colour alone */
  @media (forced-colors: active) {
    .chip[aria-pressed="true"], .seg button[aria-pressed="true"], .boards button[aria-current="page"], .side-item[aria-current="page"], .tab[aria-current="page"], .palette[aria-pressed="true"], .cal-day[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
    .switch[aria-checked="true"] { forced-color-adjust: none; background: Highlight; }
    .switch span { forced-color-adjust: none; background: ButtonText; }
    .card, .g-item, .r-card, .lane { border: 1px solid CanvasText; }
  }

  /* ---------- Member sign-in: PIN, passkeys, the little ? tips ---------- */
  .qb { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--card-muted); font: 700 0.75rem var(--body); display: inline-grid; place-items: center; padding: 0; cursor: pointer; flex: none; }
  .qb[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .qb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  @media (pointer: coarse) { .qb { width: 28px; height: 28px; } }
  .tip { margin: 0; background: var(--accent-soft); color: var(--card-ink); border-radius: 10px; padding: 9px 11px; font-size: 0.86rem; }
  .tip[hidden] { display: none; }
  .idn-h { display: flex; align-items: center; gap: 10px; }
  .idn-h h2 { margin: 0; }
  .idn-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--card-muted); }
  .idn-seg { display: flex; flex-direction: column; gap: 8px; }
  .idn-seg button { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--card-ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; cursor: pointer; }
  .idn-seg button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
  .idn-err { margin: 0; background: var(--danger-soft); color: var(--card-ink); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; }
  .idn-wide { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; padding-block: 13px; }
  .idn-or { display: flex; align-items: center; gap: 10px; color: var(--card-muted); font-size: 0.8rem; }
  .idn-or::before, .idn-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .idn-center { display: flex; justify-content: center; text-align: center; }
  .idn-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .idn-row:first-child { border-top: 0; }
  .idn-grow { flex: 1; min-width: 0; }
  .idn-t { font-weight: 700; }
  .idn-s { font-size: 0.8rem; color: var(--card-muted); }
  .idn-key { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
  .idn-pill { font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; border-radius: 99px; padding: 2px 9px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
  .idn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 380px) { .idn-pair { grid-template-columns: 1fr; } }
  .mini-btn { padding: 6px 12px; font-size: 0.85rem; }
  .off-credit { margin: 14px 0 0; font-size: 0.78rem; }
  .linkcredit { display: block; font-size: 0.72rem; color: var(--card-muted); margin-top: 2px; }
  .linkcredit a, .off-credit a { color: inherit; }
  #fb-text { width: 100%; resize: vertical; }

/* Import dialog (bring your things over) */
.imp { max-width: 34rem; }
.imp-src { display: grid; gap: 8px; margin: 12px 0; }
.imp-src-btn { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.imp-src-btn span { color: var(--muted); font-size: 0.9em; }
.imp-src-btn:hover, .imp-src-btn:focus-visible { border-color: var(--accent); }
.imp-guide { margin: 10px 0; }
.imp-guide summary { cursor: pointer; font-weight: 600; }
.imp-block { margin: 10px 0; }
.imp-list { margin: 4px 0 0; padding-left: 1.2em; }
.imp-list li { margin: 2px 0; overflow-wrap: anywhere; }

  /* ---- Pets (N17) ---- */
  .pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
  .pet-sitter { gap: 12px; }
  .pet-sitter > p, .pet-sitter > .ss-box { grid-column: 1 / -1; }
  .pet-sitter > .ss-box { max-width: 640px; }
  .pet-card { background: var(--card); color: var(--card-ink); border: 1px solid var(--line); border-top: 4px solid var(--pet, var(--accent)); border-radius: var(--radius); padding: 10px 12px 12px; display: grid; gap: 8px; min-width: 0; }
  .pet-head, .pet-head-static { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; text-align: left; padding: 2px 0; min-width: 0; }
  .pet-head { cursor: pointer; width: 100%; }
  .pet-ph { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.2rem; }
  .pet-name { display: grid; font-weight: 700; font-size: 1.05rem; min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .pet-name small { font-weight: 400; color: var(--card-muted); font-size: 0.82rem; }
  .pet-edit { color: var(--accent); font-size: 0.85rem; font-weight: 700; }
  .pet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
  .pet-row[data-done="1"] { background: var(--accent-soft); }
  .pet-lbl { display: grid; min-width: 0; flex: 1 1 140px; }
  .pet-lbl small { color: var(--card-muted); font-size: 0.8rem; }
  .pet-text { white-space: pre-wrap; font: inherit; margin: 0; overflow-wrap: anywhere; }
  .pet-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .pet-colors { display: flex; gap: 8px; flex-wrap: wrap; }
  .pet-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
  .pet-sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card); }
  .pet-due[data-state="overdue"] { border-color: var(--hi); background: var(--danger-soft); }
  .pet-due[data-state="soon"] { border-color: var(--med); }
  .pet-none { margin: 0; }
  .pet-date-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; align-items: end; padding: 8px 0; border-top: 1px solid var(--line); }
  .pet-tile-due[data-state="overdue"] b { color: var(--hi); }
  .ss-box { display: grid; gap: 10px; }
  .ss-make { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; }
  .ss-new { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
  .ss-new input { width: 100%; }
  .ss-sub { margin: 4px 0 0; }
  .ss-sum { cursor: pointer; margin: 0; min-height: 44px; display: flex; align-items: center; }
  #ss-det[open] > .ss-sum { margin-bottom: 8px; }
  .ss-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ss-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
  .ss-link[data-ended="1"] { opacity: 0.7; }
  /* ---- Outside calendars (N2) ---- */
  .cal-pill[data-ext] { border-left: 3px solid var(--ext); }
  .day-row[data-ext] { border-left: 4px solid var(--ext); cursor: default; }
  .ov-line[data-ext] { border-left: 3px solid var(--ext); padding-left: 6px; cursor: default; }
  .xcal-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
  .xcal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .xcal-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .xcal-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; align-items: end; margin-top: 6px; }

  /* Print sheets (N3): #print-root is built by src/app/26-print-sheets.js. It is invisible on screen; when printing it is the only thing shown. */
  #print-root { display: none; }
  @media print {
    html, body { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; color: #000 !important; }
    body > *:not(#print-root) { display: none !important; }
    #print-root { display: block; font: 12pt/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #000; }
    .ps h1 { font-size: 22pt; margin: 0 0 10pt; }
    .ps h1 span { font-size: 13pt; font-weight: 400; margin-left: 6pt; }
    .ps h2 { font-size: 13pt; margin: 0 0 4pt; }
    .ps h2 span { font-weight: 400; }
    .ps ul { list-style: none; margin: 0; padding: 0; }
    .ps li { display: flex; align-items: flex-start; gap: 6pt; padding: 3pt 0; break-inside: avoid; }
    .ps small { display: block; font-size: 9.5pt; color: #333; }
    .ps-box { flex: none; width: 11pt; height: 11pt; border: 1.5pt solid #000; border-radius: 2pt; margin-top: 2pt; display: inline-block; }
    .ps-foot { margin: 14pt 0 0; font-size: 8.5pt; color: #555; }
    .ps-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; }
    .ps-day { border: 1pt solid #000; border-radius: 4pt; padding: 6pt 8pt; min-height: 5.5cm; break-inside: avoid; }
    .ps-dinner { margin: 0 0 4pt; }
    .ps-none { margin: 0; color: #666; font-size: 10pt; }
    .ps-cols { columns: 2; column-gap: 24pt; }
    .ps-cols section { break-inside: avoid; margin-bottom: 12pt; }
    .ps-chart { width: 100%; border-collapse: collapse; }
    .ps-chart th, .ps-chart td { border: 1pt solid #000; padding: 5pt 6pt; text-align: center; vertical-align: middle; }
    .ps-chart thead th small { font-weight: 400; }
    .ps-chart tbody th { text-align: left; font-weight: 600; width: 28%; }
    .ps-chart td { height: 24pt; }
    .ps-chart td small { display: inline; margin-left: 4pt; }
    .ps-chart .ps-box { margin: 0; vertical-align: middle; }
    .ps-chart .ps-off { background: #eee; }
    .ps-blank th, .ps-blank td { height: 24pt; }
  }