/* MyNurse component primitives (M0).
   Built entirely on design/tokens.css — no new colours, no hard-coded hex.
   Every value is a token. These are the small set of components the marketing
   site and the M0 shell need (design-visual §component specs); richer
   components arrive with their milestones. Colour is never the only cue:
   statuses carry a glyph + a word, course pills carry their code text (§3.4). */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: 1080px; margin-inline: auto; }
.container-narrow { width: 100%; max-width: 720px; margin-inline: auto; }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row-wrap { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 840px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.center-text { text-align: center; }
.muted { color: var(--color-text-2); }
.subtle { color: var(--color-text-3); }
.hidden { display: none !important; }
.stack-0 > * + * { margin-top: 0; }

/* ---------- accessibility utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-2); top: -3rem; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  text-decoration: none; font: var(--text-label); transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ---------- small icon button (theme toggle etc.) ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-control); height: var(--size-control);
  border-radius: var(--radius-full); border: 1px solid transparent;
  background: transparent; color: var(--color-text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-icon { width: 18px; height: 18px; display: inline-block; border-radius: var(--radius-full); border: 2px solid currentColor; position: relative; }
.icon-btn[data-mode="light"] .theme-icon { background: transparent; }
.icon-btn[data-mode="dark"] .theme-icon { background: currentColor; }
.icon-btn[data-mode="system"] .theme-icon { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ---------- type ---------- */
.hero-title { font: var(--text-hero); letter-spacing: var(--track-hero); margin: 0; color: var(--color-text); }
.display { font: var(--text-display); letter-spacing: var(--track-display); margin: 0; }
h1, .h1 { font: var(--text-h1); letter-spacing: var(--track-h1); margin: 0 0 var(--space-3); }
h2, .h2 { font: var(--text-h2); letter-spacing: var(--track-h2); margin: var(--space-8) 0 var(--space-3); }
h3, .h3 { font: var(--text-h3); margin: var(--space-4) 0 var(--space-2); }
p { font: var(--text-body-lg); color: var(--color-text-2); margin: 0 0 var(--space-3); }
.lead { font: var(--text-body-lg); color: var(--color-text-2); }
small, .caption { font: var(--text-caption); letter-spacing: var(--track-caption); color: var(--color-text-3); }
a { color: var(--color-link); text-underline-offset: 2px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
/* `.checks` was scoped `ul.checks`, so install.html's NUMBERED steps (<ol>) were
   unstyled. The ordered list is the right element for "do these in order", so
   the selector widened rather than the markup being bent to fit it. */
.checks { padding-left: var(--space-5); }
.checks li { margin: 0 0 var(--space-2); color: var(--color-text-2); }
code, .mono { font: var(--text-body-sm); font-family: var(--font-mono); }

/* ---------- surfaces / cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--elev-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.card[data-surface="1"] { background: var(--color-surface); }
.well {
  background: var(--color-surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-control); padding: 0 var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: var(--text-label); letter-spacing: var(--track-label); cursor: pointer;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-pressed); }
.btn-secondary { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.btn-secondary:hover { background: var(--color-primary-soft-hover); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-input); }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-lg { min-height: var(--size-control-lg); padding: 0 var(--space-6); font: var(--text-h3); }
.btn-block { width: 100%; }
/* A control that cannot be used must not look like one that can.
   Until 2026-09-20 nothing in any stylesheet styled `:disabled`, so /forgot's
   "Email me a reset link" sat at full brand navy with a pointer cursor,
   directly under a notice saying the server cannot send email — the page said
   one thing and the button said the opposite. Measured: opacity 1,
   cursor: pointer, background rgb(34,56,92).
   `--color-text-disabled` is 2.51:1 and that is deliberate: WCAG 1.4.3 exempts
   inactive controls, and looking inactive is the entire point.
   Only the real `:disabled` attribute. `[aria-disabled="true"]` is a different
   state — system.css uses it for a button that is BUSY, which is working, not
   unusable — and greying that out mid-action would be a lie of its own. */
.btn:disabled { cursor: not-allowed; }
.btn-primary:disabled, .btn-secondary:disabled {
  background: var(--color-surface-3); color: var(--color-text-disabled);
  border-color: var(--color-border);
}
.btn-primary:disabled:hover, .btn-secondary:disabled:hover { background: var(--color-surface-3); }
.btn-ghost:disabled { color: var(--color-text-disabled); border-color: var(--color-border); }
.btn-ghost:disabled:hover { background: transparent; }
/* Touch screens get 44px targets everywhere (phone pass, 2026-09-24). The 40px
   control height is right for a mouse; a thumb needs the extra 4px. A view
   that sets its own smaller height on purpose (a compact row) still wins,
   because its selector is more specific than this one. */
@media (pointer: coarse) {
  .btn { min-height: var(--size-hit); }
  .icon-btn { min-width: var(--size-hit); min-height: var(--size-hit); }
}

/* ---------- form fields ---------- */
.field { display: block; margin-bottom: var(--space-4); }
.field > label { display: block; font: var(--text-label); letter-spacing: var(--track-label); margin-bottom: var(--space-1); color: var(--color-text); }
.field .hint { display: block; margin-top: var(--space-1); color: var(--color-text-3); font: var(--text-caption); }
.input {
  width: 100%; min-height: var(--size-control); padding: 0 var(--space-3);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-md);
  font: var(--text-body-lg);
}
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
@media (pointer: coarse) { .input { min-height: var(--size-hit); } }
.input:disabled {
  background: var(--color-surface-2); color: var(--color-text-disabled);
  border-color: var(--color-border); cursor: not-allowed;
}
.checkbox-row { display: flex; gap: var(--space-2); align-items: flex-start; }
/* iOS Safari: an empty date or time field collapses to the height of nothing
   and centres its value; give it the same box as every other field. The
   feature query is true only on iOS WebKit. */
@supports (-webkit-touch-callout: none) {
  .input[type="date"], .input[type="time"], .input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none; display: block; text-align: left; line-height: var(--size-control);
  }
  .input::-webkit-date-and-time-value { text-align: left; }
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- chips / badges (glyph + word, never colour alone) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--size-pill); padding: 0 var(--space-2);
  border-radius: var(--radius-full); font: var(--text-caption); letter-spacing: var(--track-caption);
  background: var(--color-surface-3); color: var(--color-text-2);
}
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-sm);
  font: var(--text-overline); letter-spacing: var(--track-overline); text-transform: uppercase;
}
.badge-soon { background: var(--color-practice-soft); color: var(--color-on-practice-soft); }
.badge-stub { background: var(--color-warning-soft); color: var(--color-on-warning-soft); }
/* Live connection states (M2). Colour is never the only signal — the badge
   always carries the word ("Connected", "Needs attention"), per design-visual. */
.badge-ok   { background: var(--color-success-soft); color: var(--color-on-success-soft); }
.badge-warn { background: var(--color-warning-soft); color: var(--color-on-warning-soft); }

/* Course pill: reads --c-mark bound in tokens.css by data-course="<canvas id>".
   The container must declare data-surface so --c-mark picks identity vs -strong. */
.course-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--size-pill); padding: 0 var(--space-2);
  border-radius: var(--radius-full); font: var(--text-caption); font-weight: 600;
  background: var(--c-soft); color: var(--c-on-soft);
}
.course-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--c-mark); }

/* ---------- notice / empty states ---------- */
.notice {
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
}
.notice-info { background: var(--color-info-soft); color: var(--color-on-info-soft); border-color: transparent; }
.notice-soon { background: var(--color-practice-soft); color: var(--color-on-practice-soft); border-color: transparent; }
.notice-warn { background: var(--color-warning-soft); color: var(--color-on-warning-soft); border-color: transparent; }
/* signin.html has used `.notice-error` since M1 and no stylesheet defined it, so
   the sign-in failure box rendered as bare text on the page background. Added
   2026-09-20 with the danger-soft pair, which tokens.css defines in both themes. */
.notice-error { background: var(--color-danger-soft); color: var(--color-on-danger-soft); border-color: transparent; }
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-3); }
.empty-state .empty-circle {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-surface-3); margin: 0 auto var(--space-4);
}

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border);
}
.list-item:last-child { border-bottom: 0; }
.list-item .when { font-variant-numeric: tabular-nums; color: var(--color-text-3); min-width: 76px; font: var(--text-body-sm); }
.list-item .what { flex: 1; }
.list-item .what .t { color: var(--color-text); font: var(--text-body); }
.list-item .what .m { color: var(--color-text-3); font: var(--text-caption); }