/* Design tokens and accessibility layer. Loaded last so these rules refine, never fork, the base theme. */
:root {
  --focus-ring: 3px solid var(--focus-color);
  --focus-offset: 2px;
  --tap-min: 44px;
}

/* One consistent keyboard focus indicator for every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }
#main:focus { outline: none; }

/* Skip link: the first tab stop, visible only while focused. */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--skip-bg); color: var(--skip-fg);
  font-weight: 600; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Touch targets on phones (WCAG 2.5.8 requires >= 24px; we aim for 36–44px). */
@media (max-width: 900px), (max-height: 480px) and (orientation: landscape) {
  .top-actions button, .group-btn, .seg-btn, .install-tab-btn, .ref-asset-btn { min-height: var(--tap-min); }
  .inline-notice-btn, .duty-link { min-height: 36px; padding-block: 6px; }
  summary { min-height: var(--tap-min); display: flex; align-items: center; }
  label.small:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); }
  input[type="checkbox"] { width: 20px; height: 20px; }
}

/* Dense table cells keep at least the WCAG 2.5.8 minimum target size (24px). */
table.schedule .duty-link { min-height: 24px; padding-block: 4px; }

/* ---- Theme switch ---- */
:root { color-scheme: light; }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; }
.theme-btn .ti { display: none; }
:root[data-theme-pref="auto"] .theme-btn .ti-auto,
:root[data-theme-pref="light"] .theme-btn .ti-light,
:root[data-theme-pref="dark"] .theme-btn .ti-dark { display: inline-block; }
/* Phones: icon-only so the header actions keep a single row. */
@media (max-width: 440px) {
  .top-actions { gap: 6px; }
  .top-actions button { padding-inline: 7px; font-size: 0.8125rem; }
}
@media (max-width: 600px) {
  .theme-btn span { display: none; }
  .top-actions .theme-btn { flex: 0 0 auto; width: auto; min-width: var(--tap-min); padding-inline: 10px; }
}
.theme-options { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; }
.theme-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-border); border-radius: 12px; background: var(--paper-bg); cursor: pointer; min-height: var(--tap-min); }
.theme-option:has(input:checked) { border-color: var(--blue-border); background: var(--softblue-bg); }
.theme-option:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.theme-option input { width: 18px; height: 18px; accent-color: var(--blue-bg); flex: none; }
.theme-option-icon { font-size: 1.25rem; flex: none; }
.theme-option-text { display: grid; gap: 2px; }
.theme-option-text small { color: var(--muted-text); font-size: 0.8125rem; }
.theme-status { margin: 14px 2px 0; color: var(--muted-text); font-size: 0.875rem; }

/* Smooth the switch, but never for people who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  body, .panel, .sidebar, .stat, .event, .tag, dialog { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
}

/* Dark mode: legend swatches reuse the week-grid block colours so the key matches the cells. */
:root[data-theme="dark"] .swatch { background: var(--c-79a0ed-bg); border-color: var(--c-79a0ed-bg); }
:root[data-theme="dark"] .swatch.makeup { background: var(--c-da8c9b-bg); border-color: var(--c-da8c9b-bg); }
:root[data-theme="dark"] .swatch.reservation { background: var(--c-d3ad67-bg); border-color: var(--c-d3ad67-bg); }
:root[data-theme="dark"] .swatch.software { background: var(--c-a855f7-bg); border-color: var(--c-a855f7-bg); }
:root[data-theme="dark"] .swatch.free { background: var(--c-dceddf-bg); border-color: var(--c-dceddf-bg); }
:root[data-theme="dark"] .swatch.unknown { background: var(--c-e1e5eb-bg); border-color: var(--c-e1e5eb-bg); }

/* Reference-page bell schedule rests and warning callouts (colours come from theme.css). */
.ref-period-intermission--noon { background: var(--c-f0f7ff-bg); color: var(--c-2563eb-text); }
.ref-period-intermission--evening { background: var(--c-fdf2f8-bg); color: var(--c-9d174d-text); }
.ref-period-intermission--curfew { background: var(--c-fef3c7-bg); color: var(--c-92400e-text); }
.install-alert--warn { background: var(--c-fee2e2-bg); border-color: var(--c-fecaca-border); color: var(--c-991b1b-text); }

/* Small controls that were below the 24px minimum target size. */
.page-footer button { min-height: 28px; padding: 4px 2px; }
.duty-course-list > summary, .duty-rule-details > summary { padding-block: 7px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }

/* Dialogs paint the page's card colour instead of the browser default (near-black in dark mode). Light is unchanged: both are white. */
dialog { background: var(--paper-bg); }

/* Windows high-contrast mode keeps state markers visible. */
@media (forced-colors: active) {
  .event, .tag, .day-btn.active, .nav-btn.active { border: 1px solid CanvasText; }
}

@media print { .skip-link { display: none; } }