/* Circle — the Clean theme.
 *
 * The modern look from the clean-theme plan: system font, white (or
 * near-black) cards, hairline separators, generous whitespace, a single blue
 * accent, rounded corners, soft layered shadows. 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, which is the whole point of the system stack.
 *
 * The house colour tokens, elevation, radii, spacing, type and the toast
 * aliases all come from css/kit/clean-tokens.css now (light, dark under
 * [data-scheme="dark"], and the same dark block again under
 * prefers-color-scheme so `system` works with no script); only the
 * app-local tokens (bucket-*, mark-*, hue-*) still live here, restated per
 * variant as they always were — light below, dark under both the
 * data-scheme and the media-query blocks, kept byte-for-byte the same
 * between those two (Kit's darkBlocksIdentical check has an app-side
 * equivalent in tests/css.test.js).
 */

:root[data-theme="clean"] {
  /* Tints, not blocks. This is a calm, glanceable calendar; a wall of solid
     red or green reads as an alert rather than as a busy day. */
  --bucket-green-bg: #e3f7e9;
  --bucket-green-fg: #166534;
  --bucket-yellow-bg: #fff6da;
  --bucket-yellow-fg: #7a5f00;
  --bucket-orange-bg: #ffe8d6;
  --bucket-orange-fg: #9a3f00;
  --bucket-red-bg: #ffe1e0;
  --bucket-red-fg: #a3121f;
  --bucket-none-bg: #ececf1;
  --bucket-none-fg: #55555b;

  --mark-event-bg: #0056d6;
  --mark-event-fg: #ffffff;
  --mark-interest-bg: #ffb020;
  --mark-interest-fg: #3d2600;
  --mark-busy-bg: #636366;
  --mark-busy-fg: #ffffff;

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

/* The same app-local tokens after dark: chosen (data-scheme="dark") and
   from the system while the scheme is "system" (the media query, gated on
   :not([data-scheme="light"]) exactly like clean-tokens.css). The two
   blocks are kept byte-identical — tests/css.test.js checks it, the same
   way Kit's darkBlocksIdentical checks clean-tokens.css itself. Edit one,
   then copy it over the other. */
:root[data-theme="clean"][data-scheme="dark"] {
  --bucket-green-bg: #14361f;
  --bucket-green-fg: #9fe6b4;
  --bucket-yellow-bg: #3a3210;
  --bucket-yellow-fg: #ffe08a;
  --bucket-orange-bg: #3d2410;
  --bucket-orange-fg: #ffbb80;
  --bucket-red-bg: #3d1418;
  --bucket-red-fg: #ffb3b8;
  --bucket-none-bg: #2c2d36;
  --bucket-none-fg: #c7c7cc;

  --mark-event-bg: #0a66d8;
  --mark-event-fg: #ffffff;
  --mark-interest-bg: #5c4500;
  --mark-interest-fg: #ffe9a8;
  --mark-busy-bg: #48484a;
  --mark-busy-fg: #e5e5ea;

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

@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --bucket-green-bg: #14361f;
  --bucket-green-fg: #9fe6b4;
  --bucket-yellow-bg: #3a3210;
  --bucket-yellow-fg: #ffe08a;
  --bucket-orange-bg: #3d2410;
  --bucket-orange-fg: #ffbb80;
  --bucket-red-bg: #3d1418;
  --bucket-red-fg: #ffb3b8;
  --bucket-none-bg: #2c2d36;
  --bucket-none-fg: #c7c7cc;

  --mark-event-bg: #0a66d8;
  --mark-event-fg: #ffffff;
  --mark-interest-bg: #5c4500;
  --mark-interest-fg: #ffe9a8;
  --mark-busy-bg: #48484a;
  --mark-busy-fg: #e5e5ea;

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

[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. Without a
 * plain-button rule the month arrows, "Today", Share and the rest fall back
 * to the browser's own chrome, which matches neither theme.
 */
/* Secondary button (4.4): --surface, 1px --border-alt, --text; hover
   --surface-alt. */
/* :not(:where(...)) so Kit's appearance-control segments keep their own
   look (review F1: a bare `button` selector otherwise outranks
   .wp-segment's own, painting every segment as a boxed secondary button —
   in clean dark the selection differed only by bold text), a link button
   does not pick up the hover fill (review N2), and the grouped-list rows
   below are not boxed a second time (review F3). :where() keeps every
   name's specificity at zero, so this exclusion costs nothing: a plain
   `:not(.wp-segment)` (no :where) ties the class column with any other
   single-class button rule (.cal-day, .rsvp-btn[...], .seg-btn[...]) and
   then wins outright on the extra `button` type selector, silently
   overriding their own colours — caught rendering the calendar and the
   RSVP buttons wrong after the first draft of this fix. */
[data-theme="clean"] button:not(:where(.wp-segment)):not(:where(.link-btn)):not(:where(.person-row-link)):not(:where(.feed-link)),
[data-theme="clean"] .button {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  font-family: inherit;
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] button:not(:where(.wp-segment)):not(:where(.link-btn)):not(:where(.person-row-link)):not(:where(.feed-link)):hover,
  [data-theme="clean"] .button:hover {
    background-color: var(--surface-alt);
  }
}

/* 5.2's press scale, clean-only (review N6: base.css's copy was removed so
   retro's :active stays exactly border-style: inset, as on main). */
[data-theme="clean"] button:not(:where(.wp-segment)):active,
[data-theme="clean"] .button:active {
  transform: scale(0.98);
}

[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);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] input,
[data-theme="clean"] select {
  min-height: var(--control-h);
}

[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,
[data-theme="clean"] .facts dt {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
}

/* Primary button (4.4): --accent fill, --accent-text, --radius-sm,
   --control-h; hover --accent-hover + --shadow-1. */
[data-theme="clean"] .primary {
  background-color: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
  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 (4.4): outlined in --danger on --surface; fills on hover.
   The text is --danger-soft-text, not --danger: in dark, --danger like
   --accent is a fill colour (3.28:1 on --surface as text), and
   --danger-soft-text is the token built for danger text on a plain
   surface. */
[data-theme="clean"] .danger {
  background-color: var(--surface);
  color: var(--danger-soft-text);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  min-height: var(--control-h);
}

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

/* Link / text button (4.4): --link, no chrome, underline on hover. */
[data-theme="clean"] .link-btn {
  background: none;
  border: 0;
  color: var(--link);
  font-weight: var(--weight-medium);
}

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

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

/* Empty state (4.4): --text-muted centred copy in a dashed --border box. */
[data-theme="clean"] .empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

[data-theme="clean"] .muted,
[data-theme="clean"] .empty,
[data-theme="clean"] .tbd-hint,
[data-theme="clean"] .option-meta,
[data-theme="clean"] .person-row-sub,
[data-theme="clean"] .comment-time,
[data-theme="clean"] .feed-time,
[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 =============================== */

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

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

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

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

[data-theme="clean"] #offline-banner {
  background-color: var(--danger-soft);
  color: var(--danger-soft-text);
  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 =================================== */

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

/* Nav (4.4): inactive --text-muted, active --accent with an --accent-soft
   pill behind the icon+label. */
[data-theme="clean"] .nav-link {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

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

[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 (4.4): --surface, 1px --border, --radius, --shadow-1. */
[data-theme="clean"] .panel,
[data-theme="clean"] #calendar-pane,
[data-theme="clean"] #ft-calendar-pane {
  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,
[data-theme="clean"] #import-scheduler summary { color: var(--text); }

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

/* The hairline separators of a grouped list, drawn between rows only. */
[data-theme="clean"] .comment-list > li + li,
[data-theme="clean"] .option-list > li + li {
  border-top: 1px solid var(--border);
}

/* Rows inside a checklist keep base's --radius-sm (a checkbox row can sit
   alone, e.g. availability's allow-list); zero it here so a hairline
   between two checked-in rows does not curl at both ends (review N4). */
[data-theme="clean"] .checklist .check-item,
[data-theme="clean"] .checklist .check-row {
  border-radius: 0;
}
[data-theme="clean"] .checklist > li + li {
  border-top: 1px solid var(--border);
}

/* Grouped list (4.4: List row): .person-list/.feed-list are one rounded
   --surface group with no shadow, not a stack of separate row cards
   (review F3). gap: 0 always; the group's own background/border/radius
   only when the list is not already inside a .panel (the panel already
   draws that frame). */
[data-theme="clean"] .person-list,
[data-theme="clean"] .feed-list {
  gap: 0;
}
[data-theme="clean"] .person-list:not(.panel *),
[data-theme="clean"] .feed-list:not(.panel *) {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
[data-theme="clean"] .person-row,
[data-theme="clean"] .feed-item {
  border-radius: 0;
}
/* The hairline sits on the row's inner content, inset from the avatar/icon
   rather than edge to edge (4.4: "inset from the left edge"), so it never
   meets a rounded corner and never fights a row's own left accent stripe
   (person-row[data-state] below, both box-shadow). */
[data-theme="clean"] .person-list > .person-row + .person-row .person-row-main,
[data-theme="clean"] .feed-list > .feed-item + .feed-item .feed-link {
  border-top: 1px solid var(--border);
}

/* ============================== Segmented ================================ */

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

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

/* Selected segment (4.4): a --surface thumb (--surface-raised in dark) with
   --shadow-2. --link, not --accent, is the text: in dark --accent is a fill
   colour and is not legible at this size on --surface (Kit's README). */
[data-theme="clean"] .seg-btn[aria-selected="true"],
[data-theme="clean"] .seg-btn[aria-pressed="true"],
[data-theme="clean"] .seg-radio:checked + .seg-btn {
  background-color: var(--surface);
  color: var(--link);
  border-color: var(--segment-thumb-border);
  /* --weight-medium, not semibold (review N3): semibold's wider glyphs
     overrun the segment at 390 ("Upcoming" measured 66px in a 65px
     track). */
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-2);
}

[data-theme="clean"][data-scheme="dark"] .seg-btn[aria-selected="true"],
[data-theme="clean"][data-scheme="dark"] .seg-btn[aria-pressed="true"],
[data-theme="clean"][data-scheme="dark"] .seg-radio:checked + .seg-btn {
  background-color: var(--surface-raised);
}
@media (prefers-color-scheme: dark) {
  [data-theme="clean"]:not([data-scheme="light"]) .seg-btn[aria-selected="true"],
  [data-theme="clean"]:not([data-scheme="light"]) .seg-btn[aria-pressed="true"],
  [data-theme="clean"]:not([data-scheme="light"]) .seg-radio:checked + .seg-btn {
    background-color: var(--surface-raised);
  }
}

[data-theme="clean"] .rsvp-btn[data-response="yes"][aria-pressed="true"] {
  background-color: var(--bucket-green-bg);
  color: var(--bucket-green-fg);
}

[data-theme="clean"] .rsvp-btn[data-response="maybe"][aria-pressed="true"] {
  background-color: var(--bucket-yellow-bg);
  color: var(--bucket-yellow-fg);
}

[data-theme="clean"] .rsvp-btn[data-response="no"][aria-pressed="true"] {
  background-color: var(--bucket-red-bg);
  color: var(--bucket-red-fg);
}

/* ============================ Cards and rows ============================= */

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

/* A card (4.4), so a rest --shadow-1 like a panel's (review N8); the hover
   rule below raises it to --shadow-2. */
[data-theme="clean"] .event-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

/* Cards that are links (4.4): hover translateY(-1px) and --shadow-2. The
   card is the hit target; :has() reaches it from its inner .event-card-link. */
@media (hover: hover) {
  [data-theme="clean"] .event-card:has(.event-card-link:hover) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
  }
}

[data-theme="clean"] .person-row,
[data-theme="clean"] .option-row,
[data-theme="clean"] .feed-item,
[data-theme="clean"] .check-item,
[data-theme="clean"] .check-row {
  background-color: var(--surface);
  color: var(--text);
}

[data-theme="clean"] .event-card-link,
[data-theme="clean"] .person-row-link,
[data-theme="clean"] .feed-link {
  color: var(--text);
}

/* No button chrome (review F3): the row itself (.person-row/.feed-item,
   above) is already --surface; a second bordered, rounded box around the
   link inside it read as a card in a card. */
[data-theme="clean"] .person-row-link,
[data-theme="clean"] .feed-link {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (hover: hover) {
  [data-theme="clean"] .person-row-link:hover,
  [data-theme="clean"] .feed-link:hover {
    background: transparent;
  }
}

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

[data-theme="clean"] .event-card[data-kind="interest"] {
  border-left: 4px solid var(--mark-interest-bg);
}

[data-theme="clean"] .event-card[data-status="cancelled"] {
  border-left: 4px solid var(--danger);
}

[data-theme="clean"] .event-card[data-status="cancelled"] .event-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

[data-theme="clean"] .feed-item-unread {
  background-color: var(--toast-info-bg);
}

[data-theme="clean"] .person-row[data-state="free"] {
  box-shadow: inset 3px 0 0 0 var(--bucket-green-fg);
}

[data-theme="clean"] .person-row[data-state="busy"] {
  box-shadow: inset 3px 0 0 0 var(--danger);
}

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

[data-theme="clean"] .person-chip[data-response="yes"] { border-color: var(--bucket-green-fg); }
[data-theme="clean"] .person-chip[data-response="maybe"] { border-color: var(--bucket-yellow-fg); }
[data-theme="clean"] .person-chip[data-response="no"] { border-color: var(--danger); }

/* ================================ Badges ================================= */

[data-theme="clean"] .badge-kind,
[data-theme="clean"] .badge-status,
[data-theme="clean"] .badge-conflict,
[data-theme="clean"] .badge-full {
  border-radius: 999px;
}

[data-theme="clean"] .badge-kind[data-kind="event"] {
  background-color: var(--mark-event-bg);
  color: var(--mark-event-fg);
}

[data-theme="clean"] .badge-kind[data-kind="interest"] {
  background-color: var(--mark-interest-bg);
  color: var(--mark-interest-fg);
}

[data-theme="clean"] .badge-status[data-status="active"] {
  background-color: var(--bucket-green-bg);
  color: var(--bucket-green-fg);
}

[data-theme="clean"] .badge-status[data-status="cancelled"] {
  background-color: var(--danger);
  color: var(--danger-text);
}

[data-theme="clean"] .badge-conflict {
  background-color: var(--mark-busy-bg);
  color: var(--mark-busy-fg);
}

[data-theme="clean"] .badge-full {
  background-color: var(--bucket-orange-bg);
  color: var(--bucket-orange-fg);
}

/* ================================ 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);
}

/* ================================ 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 transparent;
}

[data-theme="clean"] .cal-day[data-bucket="green"] { background-color: var(--bucket-green-bg); color: var(--bucket-green-fg); }
[data-theme="clean"] .cal-day[data-bucket="yellow"] { background-color: var(--bucket-yellow-bg); color: var(--bucket-yellow-fg); }
[data-theme="clean"] .cal-day[data-bucket="orange"] { background-color: var(--bucket-orange-bg); color: var(--bucket-orange-fg); }
[data-theme="clean"] .cal-day[data-bucket="red"] { background-color: var(--bucket-red-bg); color: var(--bucket-red-fg); }
[data-theme="clean"] .cal-day[data-bucket="none"] { background-color: var(--bucket-none-bg); color: var(--bucket-none-fg); }

/* Dimmed with a wash rather than with a lighter text colour: the date has to
   stay as readable as any other, it is only the cell that recedes. */
[data-theme="clean"] .cal-day[data-busy="true"] {
  background-color: var(--surface-alt);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(60, 60, 67, 0.16) 0 3px,
    rgba(0, 0, 0, 0) 3px 7px
  );
}

[data-theme="clean"] .cal-busy { color: var(--text-muted); }

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

/* Calendar day cell (4.4): today a filled --accent circle, selected a
   --focus ring inset — this branch had them swapped (review F2). The
   circle sits on .cal-day-number so the cell itself keeps its own bucket
   tint or busy hatch. */
[data-theme="clean"] .cal-today .cal-day-number {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

[data-theme="clean"] .cal-selected {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 2px var(--focus);
}

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

[data-theme="clean"] .cal-mark[data-mark="event"] { background-color: var(--mark-event-bg); }
[data-theme="clean"] .cal-mark[data-mark="interest"] { background-color: var(--mark-interest-bg); }
[data-theme="clean"] .cal-mark[data-mark="busy"] { background-color: var(--mark-busy-bg); }

[data-theme="clean"] .legend-item { color: var(--text); }
[data-theme="clean"] .legend-item[data-mark="event"] { --swatch: var(--mark-event-bg); }
[data-theme="clean"] .legend-item[data-mark="interest"] { --swatch: var(--mark-interest-bg); }
[data-theme="clean"] .legend-item[data-mark="busy"] { --swatch: var(--mark-busy-bg); }
[data-theme="clean"] .legend-item[data-bucket="green"] { --swatch: var(--bucket-green-bg); }
[data-theme="clean"] .legend-item[data-bucket="yellow"] { --swatch: var(--bucket-yellow-bg); }
[data-theme="clean"] .legend-item[data-bucket="orange"] { --swatch: var(--bucket-orange-bg); }
[data-theme="clean"] .legend-item[data-bucket="red"] { --swatch: var(--bucket-red-bg); }
[data-theme="clean"] .legend-item[data-bucket="none"] { --swatch: var(--bucket-none-bg); }

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

[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);
}

/* ================================= Toast =================================
 * 4.4: --surface-raised, --shadow-3, --radius, a 3px left rule in the
 * status colour. */

[data-theme="clean"] .toast {
  background-color: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-3);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
}

[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-right: 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"] {
    background: none;
    color: var(--link);
  }
}

@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);
    }
  }
}

/* The dark tint follows the same two paths as clean-tokens.css: chosen
   (data-scheme="dark") and by system while the scheme is "system" — not
   only prefers-color-scheme, which missed a visitor who explicitly picked
   Dark while their OS stays on Light (composited nav-text measured
   ~1.6:1 against the light backdrop before this fix). */
@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(28, 28, 30, 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(28, 28, 30, 0.82);
      }
    }
  }
}

[data-theme="clean"] .badge-status[data-status="full"] {
  background-color: var(--accent);
  color: var(--accent-text);
}
[data-theme="clean"] .rsvp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }