/* Base: reset, typography, focus, tone classes and utilities. Tokens only (no colour literals). */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semibold); color: var(--color-text); }
h1 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
small { font-size: var(--text-sm); }
strong, b { font-weight: var(--weight-semibold); }
img, svg { max-width: 100%; }
svg { flex: none; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 0.35em; border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px; border-radius: 4px; background: var(--color-surface); font-size: var(--text-xs);
  line-height: 1.5; text-align: center; color: var(--color-text);
}
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }

a { color: var(--color-primary-ink); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
table { border-collapse: collapse; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
dialog { color: inherit; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

::selection { background: var(--color-primary-bg); color: var(--color-text); }

/* Numbers that align in columns (times, durations, counts in tables) */
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.strong { font-weight: var(--weight-semibold); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Times: a site-local HH:MM with an optional day marker ("+1") */
.time { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); white-space: nowrap; }
.time-offset {
  display: inline-block; margin-left: 2px; padding: 0 3px; border-radius: 4px; font-size: 0.72em;
  font-weight: var(--weight-semibold); line-height: 1.35; vertical-align: 0.35em;
  background: var(--color-surface-3); color: var(--color-text-muted);
}

/*
 * Tone classes: every component and chart takes its colour from --tone (marks, dots), --tone-bg (tinted
 * fills) and --tone-ink (text on the tint). Charts set fill/stroke from --tone; never inline colours.
 */
.tone-neutral { --tone: var(--color-neutral); --tone-bg: var(--color-neutral-bg); --tone-ink: var(--color-neutral-ink); }
.tone-primary { --tone: var(--color-primary); --tone-bg: var(--color-primary-bg); --tone-ink: var(--color-primary-ink); }
.tone-success { --tone: var(--color-success); --tone-bg: var(--color-success-bg); --tone-ink: var(--color-success-ink); }
.tone-warning { --tone: var(--color-warning); --tone-bg: var(--color-warning-bg); --tone-ink: var(--color-warning-ink); }
.tone-danger { --tone: var(--color-danger); --tone-bg: var(--color-danger-bg); --tone-ink: var(--color-danger-ink); }
.tone-info { --tone: var(--color-info); --tone-bg: var(--color-info-bg); --tone-ink: var(--color-info-ink); }
.tone-present { --tone: var(--status-present); --tone-bg: var(--status-present-bg); --tone-ink: var(--status-present-ink); }
.tone-late { --tone: var(--status-late); --tone-bg: var(--status-late-bg); --tone-ink: var(--status-late-ink); }
.tone-early_leave { --tone: var(--status-early_leave); --tone-bg: var(--status-early_leave-bg); --tone-ink: var(--status-early_leave-ink); }
.tone-incomplete { --tone: var(--status-incomplete); --tone-bg: var(--status-incomplete-bg); --tone-ink: var(--status-incomplete-ink); }
.tone-absent { --tone: var(--status-absent); --tone-bg: var(--status-absent-bg); --tone-ink: var(--status-absent-ink); }
.tone-pending { --tone: var(--status-pending); --tone-bg: var(--status-pending-bg); --tone-ink: var(--status-pending-ink); }
.tone-holiday { --tone: var(--status-holiday); --tone-bg: var(--status-holiday-bg); --tone-ink: var(--status-holiday-ink); }
.tone-leave { --tone: var(--status-leave); --tone-bg: var(--status-leave-bg); --tone-ink: var(--status-leave-ink); }
.tone-weekend { --tone: var(--status-weekend); --tone-bg: var(--status-weekend-bg); --tone-ink: var(--status-weekend-ink); }
/* Enrollment grades reuse the feedback tones */
.tone-excellent { --tone: var(--color-success); --tone-bg: var(--color-success-bg); --tone-ink: var(--color-success-ink); }
.tone-good { --tone: var(--color-info); --tone-bg: var(--color-info-bg); --tone-ink: var(--color-info-ink); }
.tone-fair { --tone: var(--color-warning); --tone-bg: var(--color-warning-bg); --tone-ink: var(--color-warning-ink); }
.tone-poor { --tone: var(--color-danger); --tone-bg: var(--color-danger-bg); --tone-ink: var(--color-danger-ink); }
/* Categorical identity (cameras, leave types, series); tint = the neutral surface */
.tone-cat-1 { --tone: var(--cat-1); }
.tone-cat-2 { --tone: var(--cat-2); }
.tone-cat-3 { --tone: var(--cat-3); }
.tone-cat-4 { --tone: var(--cat-4); }
.tone-cat-5 { --tone: var(--cat-5); }
.tone-cat-6 { --tone: var(--cat-6); }
.tone-cat-7 { --tone: var(--cat-7); }
.tone-cat-8 { --tone: var(--cat-8); }
[class*="tone-cat-"] { --tone-bg: var(--color-surface-3); --tone-ink: var(--color-text); }
/*
 * User-chosen colours (e.g. Shift.color) cannot be tone classes. Set them through the CSSOM only:
 *   el.style.setProperty("--tone", shift.color)   (allowed by the CSP; setAttribute("style") is not)
 * and add the class "tone-custom" so the tint and ink fall back to neutral surfaces.
 */
.tone-custom { --tone-bg: var(--color-surface-3); --tone-ink: var(--color-text); }

/* Generic swatch/dot in a tone */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--tone, var(--color-neutral)); flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--color-neutral)); flex: none; }

/* Layout utilities pages may use (tokens only) */
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.row-sm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.row-nowrap { flex-wrap: nowrap; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }
@media (max-width: 1199px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-sm { display: none !important; }
}
@media (max-width: 1199px) {
  .hide-md { display: none !important; }
}
@media (min-width: 768px) {
  .only-sm { display: none !important; }
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }