/* Class Date — shared styles (tokens from the Class Date brand kit) */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap");
:root {
  --paper: #f4f7fb; --surface: #ffffff; --line: #d5dee9; --ink: #0c1f33; --ink-muted: #4a5c70;
  --navy: #0e2b4a; --on-navy: #ffffff; --blue: #1b5ca6; --on-blue: #ffffff; --blue-soft: #e2ecf8;
  --green: #3fb27f; --cleared: #1c7247; --cleared-soft: #e3f3ea; --amber: #e3a03a; --amber-soft: #fcf1de; --amber-ink: #8a5a10;
  --hold: #b0281f; --hold-soft: #fbe6e4; --focus: #1b5ca6;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --shadow: 0 1px 2px rgba(12,31,51,.06), 0 8px 24px rgba(12,31,51,.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #09131e; --surface: #0f1d2b; --line: #24374a; --ink: #e7eef6; --ink-muted: #a2b2c3;
    --navy: #1d4269; --blue: #78aee8; --on-blue: #09131e; --blue-soft: #132f4c; --green: #52c48f; --cleared: #6fd3a0; --cleared-soft: #123726;
    --amber: #f0b552; --amber-soft: #3a2b12; --amber-ink: #f0b552; --hold: #f08a80; --hold-soft: #3d1714; --focus: #78aee8;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; background: var(--paper); color: var(--ink); }
a { color: var(--blue); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
.label { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.btn { font: inherit; font-size: 15px; font-weight: 600; line-height: 20px; min-height: 44px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:hover { border-color: var(--blue); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-lg { min-height: 52px; font-size: 17px; padding: 0 26px; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--blue); padding: 0 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 0 8px; border-radius: var(--r-sm); background: var(--paper); color: var(--ink-muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.cleared { background: var(--cleared-soft); color: var(--cleared); border-color: transparent; }
.badge.blue { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.badge.amber { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.badge.hold { background: var(--hold-soft); color: var(--hold); border-color: transparent; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.threshold { display: flex; gap: 6px; }
.threshold i { display: block; width: 28px; height: 6px; border-radius: 2px; background: var(--green); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
input, textarea, select { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; width: 100%; min-height: 44px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
label.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
label.field small { font-weight: 400; color: var(--ink-muted); }

/* simple pages (welcome, sign-in errors, terms) */
body.simple { background: var(--paper); }
.simple-main { max-width: 680px; margin: 0 auto; padding: 32px 20px 64px; display: grid; gap: 16px; }
.simple-main h1 { font-size: 30px; margin-top: 24px; }
.simple-main h2 { font-size: 20px; margin-top: 12px; }
.simple-main p, .simple-main li { color: var(--ink); }