/* The clean theme, light and dark.
 *
 * Built on Kit's tokens (css/kit/clean-tokens.css), against the component
 * table in the clean-theme plan (4.4) and the style guide at
 * willperlak.com/theme/: --bg page, --surface cards with a hairline and
 * --shadow-1, grouped lists with inset separators, a blue accent, 44px
 * controls, and the calendar as tinted cells with today a filled accent
 * circle. Every colour is a token, so the same rules draw light and dark;
 * the only values here are Scheduler's own bucket tints, restated for each
 * scheme below.
 *
 * Scoped under [data-theme="clean"] throughout: both theme sheets are always
 * linked, so an unscoped rule here would win over retro's.
 */

/* Muted tints, not the saturated blocks retro gets away with: a calm,
 * glanceable calendar, where a wall of solid red or green would read as an
 * alert rather than a busy day. Each fg clears 4.5:1 on its bg, and every
 * two fills are at least ΔE 10 apart so the buckets read at a glance
 * (tests/css.test.js). */
:root[data-theme="clean"] {
  --bucket-green-bg: #e3f7e9;
  --bucket-green-fg: #166534;
  --bucket-yellow-bg: #fff4c7;
  --bucket-yellow-fg: #7a5f00;
  --bucket-orange-bg: #ffdcc0;
  --bucket-orange-fg: #9a3f00;
  --bucket-red-bg: #ffd6d6;
  --bucket-red-fg: #a91b1b;
  --bucket-none-bg: #ececf1;
  --bucket-none-fg: #55555b;
}

/* Dark: the same hues as deep tints under light text, stepping up from
 * --surface (#16171d) so a tinted day still reads as a cell. Keep the two
 * dark blocks byte-identical, as Kit's are (tests/css.test.js): the first is
 * the chosen dark scheme, the second the system's dark while the scheme is
 * "system". */
:root[data-theme="clean"][data-scheme="dark"] {
  --bucket-green-bg: #0f3a1f;
  --bucket-green-fg: #a6ebbb;
  --bucket-yellow-bg: #3d340f;
  --bucket-yellow-fg: #ffe08a;
  --bucket-orange-bg: #442510;
  --bucket-orange-fg: #ffc79a;
  --bucket-red-bg: #4a1319;
  --bucket-red-fg: #ffbdc1;
  --bucket-none-bg: #24252e;
  --bucket-none-fg: #c3c6cf;
}

@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --bucket-green-bg: #0f3a1f;
  --bucket-green-fg: #a6ebbb;
  --bucket-yellow-bg: #3d340f;
  --bucket-yellow-fg: #ffe08a;
  --bucket-orange-bg: #442510;
  --bucket-orange-fg: #ffc79a;
  --bucket-red-bg: #4a1319;
  --bucket-red-fg: #ffbdc1;
  --bucket-none-bg: #24252e;
  --bucket-none-fg: #c3c6cf;
}
}

/* ============================== Page shell =============================== */

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

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

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

[data-theme="clean"] #brand {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

/* ================================== Nav ================================== */

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

[data-theme="clean"] .nav-item {
  min-height: var(--control-h);
  background: transparent;
  color: var(--text-muted);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

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

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

/* ================================= Views ================================= */

[data-theme="clean"] .view-head h2 {
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

[data-theme="clean"] h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

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

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

/* ============================== Card / panel ============================= */

[data-theme="clean"] .panel,
[data-theme="clean"] #scheduler-controls,
[data-theme="clean"] #calendar-pane,
[data-theme="clean"] #day-detail,
[data-theme="clean"] #additional-commitments {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

/* A panel's title, its note and its list sit a step apart, not touching. */
[data-theme="clean"] #day-detail,
[data-theme="clean"] #saved-calendars-panel {
  display: grid;
  gap: var(--space-3);
}

[data-theme="clean"] #additional-commitments > .empty-note,
[data-theme="clean"] #additional-commitments > .card-list {
  margin-top: var(--space-4);
}

/* ========================== List rows (grouped) ==========================
 * The roster, the day's people, the commitments, the saved calendars and the
 * People checklist are each one group: a --surface block with a hairline and
 * the group's radius, rows separated by a hairline inset from the left edge,
 * no shadow on rows. An empty list draws nothing. */

[data-theme="clean"] .card-list,
[data-theme="clean"] .check-list {
  gap: 0;
}

[data-theme="clean"] .card-list:not(:empty),
[data-theme="clean"] .check-list:not(:empty) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-theme="clean"] .person-card,
[data-theme="clean"] .saved-calendar,
[data-theme="clean"] .day-detail-row,
[data-theme="clean"] .commitment-row,
[data-theme="clean"] .check-list li {
  position: relative;
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: 0;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

[data-theme="clean"] .card-list > li + li::before,
[data-theme="clean"] .check-list > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: 0;
  border-top: 1px solid var(--border);
}

/* The roster entry is a person's name, not a control; it is a <button> only
   so it is reachable from the keyboard. */
[data-theme="clean"] .person-card-open {
  min-height: var(--control-h);
  min-width: var(--control-h);
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

[data-theme="clean"] .person-card-summary { color: var(--text-muted); opacity: 1; }

/* The day's people: who can make it reads first, who cannot steps back. */
[data-theme="clean"] .day-detail-row.available .day-detail-name { color: var(--text); }
[data-theme="clean"] .day-detail-row.unavailable .day-detail-name {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
[data-theme="clean"] .day-detail-hours { color: var(--text-muted); opacity: 1; }

/* A checkbox's label is its touch target. */
[data-theme="clean"] .check-row label,
[data-theme="clean"] .checkbox-row label {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
}

[data-theme="clean"] input[type="checkbox"],
[data-theme="clean"] .field-row.checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* ================================ Inputs ================================= */

[data-theme="clean"] .field-row label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] .field-row input,
[data-theme="clean"] .field-row select,
[data-theme="clean"] .field-row textarea,
[data-theme="clean"] #commitment-person,
[data-theme="clean"] #export-output,
[data-theme="clean"] #import-input {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] .field-row input[type="checkbox"] {
  min-height: 0;
}

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

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

[data-theme="clean"] #export-output,
[data-theme="clean"] #import-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[data-theme="clean"] fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] legend {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ================================ Buttons ================================
 * Primary: the accent fill. Danger: outlined in --danger with the label in
 * --danger-soft-text (dark --danger is a fill, not a text colour), filled on
 * hover. Secondary: every other button — the month arrows, Today, New, Load
 * Saved Calendar and the Cancel/Close buttons all sit outside .form-actions,
 * and without this they fell through to the browser's default chrome.
 * Excluding the buttons with their own look is deliberate: this selector
 * out-specifies .nav-item, .cal-day and Kit's .wp-segment, so source order
 * alone would not protect them. */

[data-theme="clean"] button.primary,
[data-theme="clean"] button.danger {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] button.primary,
[data-theme="clean"] .primary {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}

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

[data-theme="clean"] button:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open) {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--weight-medium);
}

[data-theme="clean"] a.button {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

/* The schedule editor is dense: seven day cards across on a laptop, two on a
   phone. Its buttons keep a small label and tight sides, but stay 44px tall,
   since a card has the height to spare and not the width. */
[data-theme="clean"] .sched-day button:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open) {
  padding: 0 6px;
  font-size: var(--text-xs);
}

@media (hover: hover) {
  [data-theme="clean"] .nav-item:hover:not([aria-current="page"]) {
    background: var(--surface-alt);
    color: var(--text);
  }
  [data-theme="clean"] button.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-1);
  }
  [data-theme="clean"] button.danger:hover {
    background: var(--danger);
    color: var(--danger-text);
  }
  [data-theme="clean"] button:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open):hover {
    background: var(--surface-alt);
  }
  [data-theme="clean"] a.button:hover {
    background: var(--surface-alt);
  }
  [data-theme="clean"] .person-card-open:hover { color: var(--link); }
}

/* ================================ Errors ================================= */

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

/* The Data tab reports an export or an import through the same list; a
   report that went well reads as success, not as an error. */
[data-theme="clean"] .errors.messages-ok {
  background: var(--success-soft);
  color: var(--success-soft-text);
  border-color: var(--success);
}

[data-theme="clean"] .errors.messages-error {
  background: var(--danger-soft);
  color: var(--danger-soft-text);
}

/* ====================== Availability / schedule grid ===================== */

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

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

[data-theme="clean"] .sched-interval input[type="time"] {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: calc(var(--radius-sm) - 2px);
}

[data-theme="clean"] .sched-time-label { color: var(--text-muted); opacity: 1; }

[data-theme="clean"] .sched-day .check-row label { font-size: var(--text-sm); }

[data-theme="clean"] .checklist-search {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
}

/* A chip that matches the ticked people reads as pressed. */
[data-theme="clean"] button.group-chip[aria-pressed="true"]:not(.primary):not(.danger):not(.nav-item):not(.wp-segment):not(.cal-day):not(.person-card-open) {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--accent);
  font-weight: var(--weight-semibold);
}

/* "Copy to..." is a select in the card, a control as tall as its buttons. */
[data-theme="clean"] .sched-day select.sched-copy {
  min-height: var(--control-h);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* =============================== Calendar ================================
 * Day cells: --surface with a hairline, tinted by bucket, today as a filled
 * accent circle behind the date, the selected day as a ring inset. */

[data-theme="clean"] .cal-weekday {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

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

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

/* Outside the month: the cell steps back to a plain hairline square with the
   date in --text-faint, rather than fading the whole button — opacity would
   drag its text under 4.5:1. */
[data-theme="clean"] .cal-day.cal-outside {
  background: transparent;
  color: var(--text-faint);
  border-color: transparent;
}

[data-theme="clean"] .cal-day-number {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

[data-theme="clean"] .cal-day-count { opacity: 1; }

[data-theme="clean"] .cal-today .cal-day-number {
  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"] .legend-item { color: var(--text); }
[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); }

/* The day timeline: each person's colour by index (FEAT-scheduler-7). */
[data-theme="clean"] .timeline-cell[data-color="0"] { --swatch: #ff3b30; }
[data-theme="clean"] .timeline-cell[data-color="1"] { --swatch: #ff9500; }
[data-theme="clean"] .timeline-cell[data-color="2"] { --swatch: #ffcc00; }
[data-theme="clean"] .timeline-cell[data-color="3"] { --swatch: #34c759; }
[data-theme="clean"] .timeline-cell[data-color="4"] { --swatch: #00c7be; }
[data-theme="clean"] .timeline-cell[data-color="5"] { --swatch: #30b0c7; }
[data-theme="clean"] .timeline-cell[data-color="6"] { --swatch: #007aff; }
[data-theme="clean"] .timeline-cell[data-color="7"] { --swatch: #5856d6; }
[data-theme="clean"] .timeline-cell[data-color="8"] { --swatch: #af52de; }
[data-theme="clean"] .timeline-cell[data-color="9"] { --swatch: #ff2d55; }
[data-theme="clean"] .timeline-cell[data-color="all"] { --swatch: var(--bucket-green-bg); }

/* The swatch's edge: pale light tints and deep dark ones both need one to
   hold their shape at 12px. */
[data-theme="clean"] .legend-item::before {
  border-color: var(--border-alt);
  border-radius: 4px;
}

/* ============================== Disclosure =============================== */

/* Stays a list-item so it keeps its disclosure triangle; the padding makes
   it a 44px target (24px line + 2 x 10px). */
[data-theme="clean"] #additional-commitments summary {
  display: list-item;
  padding: 10px 0;
  line-height: 24px;
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* ============================ Appearance menu ============================
 * On a phone: a secondary button on the brand row, and a raised panel below
 * the topbar (base.css places both). */

[data-theme="clean"] #appearance-toggle {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

@media (max-width: 700px) {
  [data-theme="clean"] #appearance {
    background-color: var(--surface-raised);
    background-image: linear-gradient(var(--surface-highlight), var(--surface-highlight));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    border: 1px solid var(--border);
  }
  /* The summary already says "Appearance". */
  [data-theme="clean"] #appearance .wp-appearance-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================== Person form ============================== */

[data-theme="clean"] #person-form-title { margin-bottom: var(--space-4); }
[data-theme="clean"] #person-schedule { margin-top: var(--space-4); }
[data-theme="clean"] #person-schedule-title { margin-bottom: var(--space-1); }
[data-theme="clean"] #person-schedule-grid { margin-top: var(--space-3); }

/* ================================= Toast =================================
 * A raised surface with --shadow-3 and a 3px rule on the left in the
 * status colour; dark raised surfaces carry the 1px inner highlight. */

[data-theme="clean"] #toast {
  background-color: var(--surface-raised);
  background-image: linear-gradient(var(--surface-highlight), var(--surface-highlight));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  box-shadow: var(--shadow-3);
  text-align: left;
  font-weight: var(--weight-medium);
}

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

/* ============================= Narrow screens ============================
 * A phone gets the space back that a 7-column calendar needs to keep each
 * cell a 44px target. */

@media (max-width: 700px) {
  /* base.css gives the one-column shell two row tracks for three areas, so
     the nav row takes the 1fr and its tabs stretch to fill the screen. A tab
     bar is as tall as its tabs. */
  [data-theme="clean"] #app { grid-template-rows: auto auto 1fr; }
  [data-theme="clean"] #main { padding: var(--space-4) var(--space-4) var(--space-7); }
  [data-theme="clean"] #sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
  }
  [data-theme="clean"] .nav-item {
    width: auto;
    flex: 1 1 0;
    text-align: center;
  }
  [data-theme="clean"] .sidebar-note { padding: 0 var(--space-3); }
  [data-theme="clean"] #calendar-pane { padding: var(--space-3); }
  [data-theme="clean"] .cal-grid { gap: 2px; }
}