/* Choreing — the Clean theme.
 *
 * The refined iOS/system look from the clean-theme plan: system font, white
 * or near-black surfaces with soft layered shadows, 8/12/16px radii,
 * hairline borders, a single blue accent, grouped-list surfaces. The house
 * tokens (--bg, --surface, --accent, --shadow-*, --radius*, --space-*, and
 * the rest of the contract in Kit's public/README.md) come from
 * css/kit/clean-tokens.css; this file adds this app's own tokens (--hue-*,
 * --chore-*, restated for clean light and clean dark) and every selector's
 * look, on the tokens only.
 *
 * Scoped under [data-theme="clean"] throughout for the same reason
 * retro.css is scoped — both sheets are always linked, so an unscoped rule
 * here would win over the other theme's the instant someone switched back.
 *
 * No web font is declared here: this theme asks for the faces the device
 * already has (--font-body from clean-tokens.css), which is the whole point
 * of the system stack.
 */

:root[data-theme="clean"] {
  --hue-0-bg: #ffe0ef; --hue-0-fg: #9b1350;
  --hue-1-bg: #dcecff; --hue-1-fg: #0b4ea2;
  --hue-2-bg: #dcf5e4; --hue-2-fg: #146c2e;
  --hue-3-bg: #ffeed0; --hue-3-fg: #7a4a00;
  --hue-4-bg: #ece0ff; --hue-4-fg: #5227a8;
  --hue-5-bg: #ffe4d6; --hue-5-fg: #8f3a00;
  --hue-6-bg: #d6f5f0; --hue-6-fg: #0f5f57;
  --hue-7-bg: #fbf3cf; --hue-7-fg: #6b5500;
  --hue-8-bg: #e6f5d6; --hue-8-fg: #3f5f00;
  --hue-9-bg: #ffe2e2; --hue-9-fg: #a3121f;

  /* Chore colours: soft pastel fills with a deep tint of the same hue for
     text, spaced 30 degrees apart so no two read as the same colour. Light
     only: 4 and 10 are nudged 10 degrees off their 30-degree slot (4 toward
     yellow-green/away from 5, 10 toward magenta/away from 9), because the
     pastel fills read as too close to their neighbour at this saturation
     even though the fg/bg pairs and the fg-to-fg distinctness both clear
     WCAG (review N3); every fg/bg pair here still clears 4.5:1 (4 is
     4.59:1, 10 is 5.69:1; tests/css.test.js APP_PAIRS checks all twelve). */
  --chore-1-bg:  #f4cdcd; --chore-1-fg:  #ac1515;
  --chore-2-bg:  #f4e0cd; --chore-2-fg:  #915212;
  --chore-3-bg:  #f4f4cd; --chore-3-fg:  #6d6d0d;
  --chore-4-bg:  #e6f4cd; --chore-4-fg:  #53760f;
  --chore-5-bg:  #cdf4cd; --chore-5-fg:  #0f760f;
  --chore-6-bg:  #cdf4e0; --chore-6-fg:  #0f7642;
  --chore-7-bg:  #cdf4f4; --chore-7-fg:  #0f7676;
  --chore-8-bg:  #cde0f4; --chore-8-fg:  #1561ac;
  --chore-9-bg:  #cdcdf4; --chore-9-fg:  #1515ac;
  --chore-10-bg: #e6cdf4; --chore-10-fg: #7a15ac;
  --chore-11-bg: #f4cdf4; --chore-11-fg: #a314a3;
  --chore-12-bg: #f4cde0; --chore-12-fg: #ac1561;
}

/* Dark, chosen. Kept byte-identical to the block under the media query
   below, the same discipline css/kit/clean-tokens.css holds its own dark
   blocks to (Kit's darkBlocksIdentical test does not reach app files, but
   drifting them is still a bug). Values unchanged from before this plan —
   they already clear contrast against --surface. */
:root[data-theme="clean"][data-scheme="dark"] {
  --hue-0-bg: #3d1030; --hue-0-fg: #ffb3dd;
  --hue-1-bg: #0a2440; --hue-1-fg: #a8d4ff;
  --hue-2-bg: #0d3020; --hue-2-fg: #9fe6b4;
  --hue-3-bg: #3a2a08; --hue-3-fg: #ffd98a;
  --hue-4-bg: #2a1a45; --hue-4-fg: #d4bbff;
  --hue-5-bg: #3d2010; --hue-5-fg: #ffc0a0;
  --hue-6-bg: #0d3330; --hue-6-fg: #99ebe0;
  --hue-7-bg: #3a3410; --hue-7-fg: #ffef8a;
  --hue-8-bg: #223808; --hue-8-fg: #cdf59a;
  --hue-9-bg: #3d1418; --hue-9-fg: #ffb3b8;

  --chore-1-bg:  #571919; --chore-1-fg:  #e07b7b;
  --chore-2-bg:  #573819; --chore-2-fg:  #dba166;
  --chore-3-bg:  #575719; --chore-3-fg:  #d6d651;
  --chore-4-bg:  #385719; --chore-4-fg:  #94d651;
  --chore-5-bg:  #195719; --chore-5-fg:  #56d756;
  --chore-6-bg:  #195738; --chore-6-fg:  #51d694;
  --chore-7-bg:  #195757; --chore-7-fg:  #51d6d6;
  --chore-8-bg:  #193857; --chore-8-fg:  #6ea6dd;
  --chore-9-bg:  #191957; --chore-9-fg:  #8383e2;
  --chore-10-bg: #381957; --chore-10-fg: #ad7be0;
  --chore-11-bg: #571957; --chore-11-fg: #df77df;
  --chore-12-bg: #571938; --chore-12-fg: #e07bad;
}

/* Dark, from the system while the scheme is "system" (or unset). Byte-
   identical to the block above. */
@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --hue-0-bg: #3d1030; --hue-0-fg: #ffb3dd;
  --hue-1-bg: #0a2440; --hue-1-fg: #a8d4ff;
  --hue-2-bg: #0d3020; --hue-2-fg: #9fe6b4;
  --hue-3-bg: #3a2a08; --hue-3-fg: #ffd98a;
  --hue-4-bg: #2a1a45; --hue-4-fg: #d4bbff;
  --hue-5-bg: #3d2010; --hue-5-fg: #ffc0a0;
  --hue-6-bg: #0d3330; --hue-6-fg: #99ebe0;
  --hue-7-bg: #3a3410; --hue-7-fg: #ffef8a;
  --hue-8-bg: #223808; --hue-8-fg: #cdf59a;
  --hue-9-bg: #3d1418; --hue-9-fg: #ffb3b8;

  --chore-1-bg:  #571919; --chore-1-fg:  #e07b7b;
  --chore-2-bg:  #573819; --chore-2-fg:  #dba166;
  --chore-3-bg:  #575719; --chore-3-fg:  #d6d651;
  --chore-4-bg:  #385719; --chore-4-fg:  #94d651;
  --chore-5-bg:  #195719; --chore-5-fg:  #56d756;
  --chore-6-bg:  #195738; --chore-6-fg:  #51d694;
  --chore-7-bg:  #195757; --chore-7-fg:  #51d6d6;
  --chore-8-bg:  #193857; --chore-8-fg:  #6ea6dd;
  --chore-9-bg:  #191957; --chore-9-fg:  #8383e2;
  --chore-10-bg: #381957; --chore-10-fg: #ad7be0;
  --chore-11-bg: #571957; --chore-11-fg: #df77df;
  --chore-12-bg: #571938; --chore-12-fg: #e07bad;
}
}

[data-theme="clean"] body {
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ============================== Controls =================================
 * First, so every later rule with its own look out-specifies it. Secondary
 * button per 4.4: --surface, 1px --border-alt, hover --surface-alt.
 * :not(.wp-segment) throughout: Kit's appearance control is built of real
 * <button> elements, and without the exclusion this generic rule (0,1,1)
 * outranks appearance.css's `.wp-segment { background: transparent; border:
 * 0 }` (0,1,0), boxing every segment and nearly hiding the clean-dark
 * selection (review F1).
 */
[data-theme="clean"] button:not(.wp-segment),
[data-theme="clean"] .button {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  font-family: inherit;
  font-weight: var(--weight-medium);
}

/* :not(.color-btn): a picker button's background is its colour, and this
   (0,3,1) would otherwise blank it under the pointer (UX-choreing-20). */
@media (hover: hover) {
  [data-theme="clean"] button:not(.wp-segment):not(.color-btn):hover,
  [data-theme="clean"] .button:hover {
    background-color: var(--surface-alt);
  }
}

[data-theme="clean"] button:not(.wp-segment):active,
[data-theme="clean"] .button:active {
  opacity: 0.85;
}

[data-theme="clean"] button:not(.wp-segment)[disabled],
[data-theme="clean"] .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Input, select, textarea per 4.4: --surface, 1px --border-alt, --radius-sm,
   focus border-color --focus plus --ring. */
[data-theme="clean"] input,
[data-theme="clean"] select,
[data-theme="clean"] textarea {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
}

[data-theme="clean"] input:focus-visible,
[data-theme="clean"] select:focus-visible,
[data-theme="clean"] textarea:focus-visible {
  border-color: var(--focus);
  box-shadow: var(--ring);
}

[data-theme="clean"] ::placeholder { color: var(--text-faint); opacity: 1; }

[data-theme="clean"] .field-row > label,
[data-theme="clean"] .field-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
}

/* Primary button per 4.4: --accent fill, hover --accent-hover + --shadow-1,
   active scale(.98) (base.css's generic :active rule). */
[data-theme="clean"] .primary {
  background-color: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-1);
  }
}

/* Danger button per 4.4: outlined in --danger on --surface, fills on
   hover. */
[data-theme="clean"] .danger {
  background-color: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] .budget-warn {
  color: var(--danger);
}

@media (hover: hover) {
  [data-theme="clean"] .danger:hover {
    background-color: var(--danger);
    color: var(--danger-text);
  }
}

/* Link / text button per 4.4: --link, no chrome, underline on hover. The
   generic button rule above already excludes .wp-segment, not .link-btn, so
   this restates background/border transparent (review F2: without it, the
   generic rule's --surface fill and --border-alt frame box the link). */
[data-theme="clean"] .link-btn {
  background-color: transparent;
  border-color: transparent;
  color: var(--link);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .link-btn:hover { background-color: transparent; text-decoration: underline; }
}

[data-theme="clean"] .errors {
  background-color: var(--danger-soft);
  color: var(--danger-soft-text);
  border: 1px solid var(--danger);
}

[data-theme="clean"] .muted,
[data-theme="clean"] .empty,
[data-theme="clean"] .week-item-meta,
[data-theme="clean"] .week-item-why,
[data-theme="clean"] .fair-count,
[data-theme="clean"] .chore-card-meta,
[data-theme="clean"] .cal-count,
[data-theme="clean"] .sched-day-empty,
[data-theme="clean"] .sched-time-label,
[data-theme="clean"] .sched-interval-time,
[data-theme="clean"] #demo-note {
  color: var(--text-muted);
}

/* ============================== The chrome =================================
 * Top bar / brand row per 4.4: --surface with a bottom hairline.
 */

[data-theme="clean"] #topbar {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

[data-theme="clean"] #brand {
  color: var(--text);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* Badge / chip per 4.4: --accent-soft + --accent-soft-text, --radius-full.
   This one badge is a notification count, which reads as attention rather
   than a neutral chip, so it keeps the danger tint; shape follows 4.4. */
[data-theme="clean"] .badge {
  background-color: var(--danger);
  color: var(--danger-text);
  border-radius: var(--radius-full);
}

[data-theme="clean"] #unavailable-banner,
[data-theme="clean"] .banner {
  background-color: var(--danger-soft);
  color: var(--danger-soft-text);
  border-top: 1px solid var(--danger);
  border-bottom: 1px solid var(--danger);
}

[data-theme="clean"] #demo-bar {
  background-color: var(--surface-alt);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

/* ================================= Nav ======================================
 * Nav per 4.4: inactive --text-muted, active an --accent-soft pill. The text
 * on the pill is --accent-soft-text, not --accent: Kit's README is explicit
 * that in dark, --accent is a fill colour, not a text one (3.3:1 on
 * --surface) — --accent-soft-text is the pair already held to 4.5:1.
 */

[data-theme="clean"] #nav {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

[data-theme="clean"] .nav-link {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .nav-link:hover {
    background-color: var(--surface-alt);
  }
}

[data-theme="clean"] .nav-link[aria-current="page"] {
  color: var(--accent-soft-text);
  background-color: var(--accent-soft);
  font-weight: var(--weight-semibold);
}

/* ============================== Panels ======================================
 * Card / panel per 4.4: --surface, 1px --border, --radius, --shadow-1.
 */

[data-theme="clean"] .panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

[data-theme="clean"] .view-title { color: var(--text); }

[data-theme="clean"] .panel h2,
[data-theme="clean"] .panel h3 { color: var(--text); }

/* ============================== Segmented ===================================
 * The chores filter and the week/month switch: a grouped track, the same
 * vocabulary as .wp-segmented (kit/appearance.css) though this app's own
 * markup has no sliding thumb element, so the selected segment is a filled
 * surface with elevation instead.
 */

[data-theme="clean"] .segmented {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .seg-btn {
  background-color: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] .seg-btn[aria-selected="true"],
[data-theme="clean"] .seg-btn[aria-pressed="true"] {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-2);
}

/* ================================ Avatars ================================== */

[data-theme="clean"] .avatar[data-hue="0"] { background-color: var(--hue-0-bg); color: var(--hue-0-fg); }
[data-theme="clean"] .avatar[data-hue="1"] { background-color: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-theme="clean"] .avatar[data-hue="2"] { background-color: var(--hue-2-bg); color: var(--hue-2-fg); }
[data-theme="clean"] .avatar[data-hue="3"] { background-color: var(--hue-3-bg); color: var(--hue-3-fg); }
[data-theme="clean"] .avatar[data-hue="4"] { background-color: var(--hue-4-bg); color: var(--hue-4-fg); }
[data-theme="clean"] .avatar[data-hue="5"] { background-color: var(--hue-5-bg); color: var(--hue-5-fg); }
[data-theme="clean"] .avatar[data-hue="6"] { background-color: var(--hue-6-bg); color: var(--hue-6-fg); }
[data-theme="clean"] .avatar[data-hue="7"] { background-color: var(--hue-7-bg); color: var(--hue-7-fg); }
[data-theme="clean"] .avatar[data-hue="8"] { background-color: var(--hue-8-bg); color: var(--hue-8-fg); }
[data-theme="clean"] .avatar[data-hue="9"] { background-color: var(--hue-9-bg); color: var(--hue-9-fg); }

[data-theme="clean"] .avatar {
  background-color: var(--surface-alt);
  color: var(--text-muted);
}

/* ================================ Chores ==================================== */

[data-theme="clean"] .chore-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

[data-theme="clean"] .chore-card-title { color: var(--text); }

[data-theme="clean"] .chore-swatch {
  border: 1px solid var(--border);
}

[data-theme="clean"] .chore-pref {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .chore-pref[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

[data-theme="clean"] .template-btn {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (hover: hover) {
  [data-theme="clean"] .template-btn:hover {
    border-color: var(--accent);
  }
}

/* Chore colours: the only place a colour id turns into paint. Same twelve
   classes, same order, everywhere one is used — the swatch on a card, the
   button in the picker, the fill of a calendar banner. The .chore-swatch and
   .color-btn forms (0,3,0) are there to outrank the generic
   `button:not(.wp-segment)` rule above (0,2,1), which otherwise paints every
   picker button the plain surface (UX-choreing-20), as retro.css does. */
[data-theme="clean"] .banner-color-1,  [data-theme="clean"] .chore-swatch.banner-color-1,  [data-theme="clean"] .color-btn.banner-color-1  { background-color: var(--chore-1-bg);  color: var(--chore-1-fg); }
[data-theme="clean"] .banner-color-2,  [data-theme="clean"] .chore-swatch.banner-color-2,  [data-theme="clean"] .color-btn.banner-color-2  { background-color: var(--chore-2-bg);  color: var(--chore-2-fg); }
[data-theme="clean"] .banner-color-3,  [data-theme="clean"] .chore-swatch.banner-color-3,  [data-theme="clean"] .color-btn.banner-color-3  { background-color: var(--chore-3-bg);  color: var(--chore-3-fg); }
[data-theme="clean"] .banner-color-4,  [data-theme="clean"] .chore-swatch.banner-color-4,  [data-theme="clean"] .color-btn.banner-color-4  { background-color: var(--chore-4-bg);  color: var(--chore-4-fg); }
[data-theme="clean"] .banner-color-5,  [data-theme="clean"] .chore-swatch.banner-color-5,  [data-theme="clean"] .color-btn.banner-color-5  { background-color: var(--chore-5-bg);  color: var(--chore-5-fg); }
[data-theme="clean"] .banner-color-6,  [data-theme="clean"] .chore-swatch.banner-color-6,  [data-theme="clean"] .color-btn.banner-color-6  { background-color: var(--chore-6-bg);  color: var(--chore-6-fg); }
[data-theme="clean"] .banner-color-7,  [data-theme="clean"] .chore-swatch.banner-color-7,  [data-theme="clean"] .color-btn.banner-color-7  { background-color: var(--chore-7-bg);  color: var(--chore-7-fg); }
[data-theme="clean"] .banner-color-8,  [data-theme="clean"] .chore-swatch.banner-color-8,  [data-theme="clean"] .color-btn.banner-color-8  { background-color: var(--chore-8-bg);  color: var(--chore-8-fg); }
[data-theme="clean"] .banner-color-9,  [data-theme="clean"] .chore-swatch.banner-color-9,  [data-theme="clean"] .color-btn.banner-color-9  { background-color: var(--chore-9-bg);  color: var(--chore-9-fg); }
[data-theme="clean"] .banner-color-10, [data-theme="clean"] .chore-swatch.banner-color-10, [data-theme="clean"] .color-btn.banner-color-10 { background-color: var(--chore-10-bg); color: var(--chore-10-fg); }
[data-theme="clean"] .banner-color-11, [data-theme="clean"] .chore-swatch.banner-color-11, [data-theme="clean"] .color-btn.banner-color-11 { background-color: var(--chore-11-bg); color: var(--chore-11-fg); }
[data-theme="clean"] .banner-color-12, [data-theme="clean"] .chore-swatch.banner-color-12, [data-theme="clean"] .color-btn.banner-color-12 { background-color: var(--chore-12-bg); color: var(--chore-12-fg); }

[data-theme="clean"] .cal-banner,
[data-theme="clean"] .chore-swatch,
[data-theme="clean"] .color-btn {
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .color-btn {
  border: 1px solid var(--border);
}

[data-theme="clean"] .color-btn[aria-pressed="true"] {
  outline: 3px solid var(--accent);
}

/* ================================ Wizard ==================================== */

[data-theme="clean"] .wizard-step {
  background-color: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .wizard-step-active {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

[data-theme="clean"] .member-row {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

/* =========================== Schedule editor ============================== */

[data-theme="clean"] .sched-day {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .sched-day-name,
[data-theme="clean"] .sched-day-label { color: var(--text); }

[data-theme="clean"] .sched-interval {
  background-color: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .check-row label { color: var(--text); }

/* ================================ Calendar ================================== */

[data-theme="clean"] .cal-weekday {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="clean"] .cal-day {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .cal-day-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: var(--weight-semibold);
}

[data-theme="clean"] .cal-day-outside {
  color: var(--text-muted);
  background-color: var(--surface-alt);
}

[data-theme="clean"] .cal-week-selected .cal-day {
  border-color: var(--accent);
}

[data-theme="clean"] .cal-banner {
  border: 1px solid var(--border);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] .cal-banner-unpin {
  background-color: var(--danger);
  color: var(--danger-text);
  border: 0;
  border-radius: var(--radius-full);
}

[data-theme="clean"] .cal-more {
  background-color: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .week-row {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .week-row-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

[data-theme="clean"] .week-row-date { color: var(--text-muted); }

[data-theme="clean"] .month-nav-day {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .month-nav-selected {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

[data-theme="clean"] .cal-bar {
  border-radius: var(--radius-full);
}

[data-theme="clean"] .cal-bar.banner-color-1  { background-color: var(--chore-1-bg); }
[data-theme="clean"] .cal-bar.banner-color-2  { background-color: var(--chore-2-bg); }
[data-theme="clean"] .cal-bar.banner-color-3  { background-color: var(--chore-3-bg); }
[data-theme="clean"] .cal-bar.banner-color-4  { background-color: var(--chore-4-bg); }
[data-theme="clean"] .cal-bar.banner-color-5  { background-color: var(--chore-5-bg); }
[data-theme="clean"] .cal-bar.banner-color-6  { background-color: var(--chore-6-bg); }
[data-theme="clean"] .cal-bar.banner-color-7  { background-color: var(--chore-7-bg); }
[data-theme="clean"] .cal-bar.banner-color-8  { background-color: var(--chore-8-bg); }
[data-theme="clean"] .cal-bar.banner-color-9  { background-color: var(--chore-9-bg); }
[data-theme="clean"] .cal-bar.banner-color-10 { background-color: var(--chore-10-bg); }
[data-theme="clean"] .cal-bar.banner-color-11 { background-color: var(--chore-11-bg); }
[data-theme="clean"] .cal-bar.banner-color-12 { background-color: var(--chore-12-bg); }

/* ------------------------------ Week list ----------------------------------- */

[data-theme="clean"] .week-list-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .overdue-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 0 var(--accent);
  color: var(--text);
}

[data-theme="clean"] .is-pinned {
  box-shadow: inset 3px 0 0 0 var(--accent);
}

[data-theme="clean"] .is-done {
  opacity: 0.65;
}

[data-theme="clean"] .is-done .week-item-title {
  text-decoration: line-through;
}

[data-theme="clean"] .is-placing {
  outline-color: var(--accent);
}

[data-theme="clean"] .week-item-pin,
[data-theme="clean"] .week-item-done {
  background-color: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .week-item-pin[aria-pressed="true"],
[data-theme="clean"] .week-item-done[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

[data-theme="clean"] #pin-status { color: var(--text-muted); }

[data-theme="clean"] .fair-row + .fair-row {
  border-top: 1px solid var(--border);
}

[data-theme="clean"] .fair-name { color: var(--text); }

[data-theme="clean"] .today-item {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .today-done {
  color: var(--text-muted);
  border-color: var(--border);
}

[data-theme="clean"] .today-toggle {
  background-color: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

[data-theme="clean"] .today-toggle[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ================================ Profile =================================== */

[data-theme="clean"] .profile-card {
  background-color: var(--surface);
  border-radius: var(--radius);
}

[data-theme="clean"] .profile-app-link { color: var(--link); }

/* ================================= Toast ===================================== */

/* Toast per 4.4: --surface-raised, --shadow-3, --radius (base.css), a 3px
   left rule in the status colour, status -soft-text for the icon text (this
   app's toast has no separate icon glyph, so the fill stays --text and only
   the rule changes colour; review F3 caught the old version filling the
   whole toast with the -soft tint instead). */
[data-theme="clean"] .toast {
  background-color: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  box-shadow: var(--shadow-3);
}

[data-theme="clean"] .toast-info { border-left-color: var(--info); }
[data-theme="clean"] .toast-success { border-left-color: var(--success); }
[data-theme="clean"] .toast-error { border-left-color: var(--danger); }

/* ============================ Compact widths ================================
 * The tab bar gets the frosted backdrop iOS gives it, with an opaque
 * fallback first so a browser without backdrop-filter still gets a bar you
 * cannot read the page through.
 */

@media (max-width: 700px) {
  [data-theme="clean"] #nav {
    background-color: var(--surface);
    border-bottom: 0;
    border-top: 1px solid var(--border);
  }
  [data-theme="clean"] .nav-link {
    border: 0;
    border-radius: 0;
    background: none;
  }
  [data-theme="clean"] .nav-link[aria-current="page"] {
    /* Per 4.4, the same --accent-soft pill as the wide nav, sized to the
       icon+label column (review N1: the phone tab bar had none). */
    background: var(--accent-soft);
    border-radius: var(--radius);
    color: var(--accent-soft-text);
  }
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  @media (max-width: 700px) {
    [data-theme="clean"] #nav {
      background-color: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
  }
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  @media (max-width: 700px) {
    [data-theme="clean"][data-scheme="dark"] #nav {
      background-color: rgba(22, 23, 29, 0.82);
    }
  }
}

@media (prefers-color-scheme: dark) {
  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    @media (max-width: 700px) {
      [data-theme="clean"]:not([data-scheme="light"]) #nav {
        background-color: rgba(22, 23, 29, 0.82);
      }
    }
  }
}

/* The count under a navigator day sits on the day button's own background,
   so it takes the button's colour, not the muted one (1.17:1 otherwise). */
[data-theme="clean"] .month-nav-day .cal-count {
  color: inherit;
}