/* UI component layer (presentation build, 18 Jul 2026).
 * Same discipline as tokens.css: one accent, status colour only for
 * compliance state, sharp corners, Instrument Sans prose / IBM Plex Mono
 * identifiers. No gradients, no illustration. */

/* ---------- Shell ---------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.site-header {
  border-bottom: 2px solid var(--color-ink);
  background: var(--color-paper);
}

.site-header .bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.wordmark {
  font-family: var(--font-prose);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.face-label {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--color-accent); }

.site-nav .whoami {
  font-family: var(--font-identifier);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.site-nav form { display: inline; }
.site-nav .quiet-button {
  background: none;
  border: none;
  padding: 0 0 2px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.site-nav .quiet-button:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }

main { flex: 1; width: 100%; }
main[data-wide] { max-width: 72rem; }

.site-footer {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-5);
}
.site-footer .bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-3);
  font-family: var(--font-identifier);
  font-size: 0.75rem;
  color: var(--color-muted);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.site-footer a { color: var(--color-muted); }

/* ---------- Buttons & forms ---------- */

button, input[type="submit"], .btn {
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  background: var(--color-accent);
  color: #fff;
  border: 2px solid var(--color-accent);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, input[type="submit"]:hover, .btn:hover { background: #003070; border-color: #003070; }

.btn-secondary, a.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.btn-secondary:hover, a.btn-secondary:hover { background: var(--color-ink); color: #fff; }

input[type="text"], input[type="email"], input[type="password"], textarea, select {
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: 0.55rem 0.65rem;
  background: var(--color-paper);
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}

label { font-size: 0.9375rem; }

/* ---------- Auth card ---------- */

.auth-card {
  max-width: 24rem;
  margin: 12vh auto 0;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-4);
}
.auth-card h1 { font-size: 1.25rem; margin: var(--space-3) 0; }
.auth-card .field { margin: var(--space-3) 0; }
.auth-card input[type="email"], .auth-card input[type="password"] { width: 100%; }
.auth-card input[type="submit"] { width: 100%; }
.auth-card .aside { font-size: 0.875rem; margin-top: var(--space-3); }

/* ---------- Landing ---------- */

main[data-page="landing"] { max-width: none; padding: 0; }

.landing-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

.hero .kicker {
  font-family: var(--font-identifier);
  font-size: 0.8125rem;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--space-3) 0;
  max-width: 46rem;
}

.hero .lede {
  font-size: 1.125rem;
  color: var(--color-muted);
  max-width: 40rem;
}

.hero .actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0;
  border-top: 2px solid var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.claims > div { padding: var(--space-4) var(--space-3); border-left: 1px solid var(--color-line); }
.claims > div:first-child { border-left: none; }
.claims strong { display: block; margin-bottom: var(--space-2); }
.claims p { margin: 0; color: var(--color-muted); font-size: 0.9375rem; }

.landing-section h2 { font-size: 1.5rem; letter-spacing: -0.01em; }

.milestone-strip {
  display: flex;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}
.milestone-strip li {
  flex: 1 1 8rem;
  border-top: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-2) 0 0;
}
.milestone-strip .milestone-id { display: block; }
.milestone-strip .strip-title { font-size: 0.875rem; }

.face-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}
.face-cards article { border: 1px solid var(--color-line); padding: var(--space-4); }
.face-cards h3 { margin-top: 0; font-size: 1.0625rem; }
.face-cards .face-tag {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.face-cards p { color: var(--color-muted); font-size: 0.9375rem; }

.deadline-banner {
  border-top: 2px solid var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}
.deadline-banner .landing-section { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.deadline-banner .identifier { color: #9db8dd; }

/* ---------- Cards & progress (client) ---------- */

.dossier-cards { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.dossier-cards li { border: 1px solid var(--color-line); padding: var(--space-3) var(--space-4); }
.dossier-cards a.title { font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.dossier-cards a.title:hover { color: var(--color-accent); }

.device-chip {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--color-line);
  padding: 1px 6px;
  color: var(--color-muted);
}

.progress-track {
  display: flex;
  gap: 3px;
  margin: var(--space-2) 0;
}
.progress-track span { flex: 1; height: 5px; background: var(--color-line); }
.progress-track span[data-state="closed"] { background: var(--state-closed); }
.progress-track span[data-state="open"], .progress-track span[data-state="awaiting_approval"] { background: var(--color-accent); }
.progress-track span[data-state="blocked"] { background: var(--state-blocked); }

.progress-note { font-family: var(--font-identifier); font-size: 0.75rem; color: var(--color-muted); }

/* Milestone rail as cards */
.milestone-rail li {
  border: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.milestone-rail li[data-state="open"], .milestone-rail li[data-state="awaiting_approval"] {
  border-left: 3px solid var(--color-accent);
}
.milestone-rail li[data-state="closed"] { border-left: 3px solid var(--state-closed); }
.milestone-rail li[data-state="blocked"] { border-left: 3px solid var(--state-blocked); }
.milestone-rail li[data-state="locked"] { color: var(--color-muted); }

.approved-line { font-size: 0.875rem; color: var(--color-muted); }

/* ---------- Generic page header ---------- */

.page-header h1 { margin-bottom: var(--space-1); }
.page-header .sub { color: var(--color-muted); margin-top: 0; }

/* ---------- Tables ---------- */

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); border-bottom: 2px solid var(--color-ink); padding: 6px 8px; }
td { border-bottom: 1px solid var(--color-line); padding: 8px; vertical-align: top; }

/* Flash lives at body level (rendered by the layout) */
body > .flash-notice, body > .flash-alert {
  max-width: var(--measure);
  margin: var(--space-3) auto 0;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--space-3));
}

/* Operator invite form */
.invite-form { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); max-width: 32rem; }
.invite-form input[type="email"] { flex: 1; }
table .quiet-button {
  background: none; border: none; padding: 0; font: inherit; font-size: 0.875rem;
  color: var(--color-accent); cursor: pointer; text-decoration: underline;
}

.registry-strip {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  max-width: 46rem;
}

/* Academy (R2) */
.academy-progress { max-width: 32rem; }
.academy-units .unit-summary { color: var(--color-muted); font-size: 0.9375rem; margin: var(--space-2) 0 0; }

.video-slot { margin: var(--space-4) 0; }
.video-slot video { width: 100%; max-width: 46rem; border: 1px solid var(--color-line); }
.video-poster {
  border: 1px solid var(--color-line);
  background: var(--color-ink);
  color: #fff;
  max-width: 46rem;
  aspect-ratio: 16 / 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
}
.video-poster .identifier { color: #9db8dd; }
.video-poster p { margin: 0; color: #c8d2dd; font-size: 0.9375rem; max-width: 30rem; }

.pending-note {
  border-left: 3px solid var(--color-line);
  padding: var(--space-2) var(--space-3);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.cert-card {
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--state-closed);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.cert-card h2 { margin-top: 0; font-size: 1.125rem; }
.cert-caveat { font-size: 0.875rem; color: var(--color-muted); }
.page-header .kicker { font-family: var(--font-identifier); font-size: 0.8125rem; color: var(--color-accent); }

/* M2 foundation section (R3) */
.foundation { border-top: 1px solid var(--color-line); margin-top: var(--space-3); padding-top: var(--space-2); }
.foundation h2, .foundation h3 { font-size: 1rem; margin: var(--space-3) 0 var(--space-2); }
.foundation details { margin: var(--space-2) 0; }
.foundation summary { cursor: pointer; color: var(--color-accent); }
.evidence-list { list-style: none; padding: 0; }
.evidence-list li {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--color-line); padding: var(--space-2) 0;
}
.upload-inline { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }

/* ---------- Small screens (R7d mechanical pass, 19 Jul 2026) ----------
 * Wide data (registry tables, console tables, request-link inputs) scrolls
 * inside its own container; the page itself never scrolls sideways. */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 36rem; }

@media (max-width: 44rem) {
  main { padding: var(--space-4) var(--space-3); }
  .site-header .bar { flex-wrap: wrap; row-gap: var(--space-1); }
  .site-nav { margin-left: 0; }
  .hero .actions { flex-wrap: wrap; }
  .invite-form { flex-wrap: wrap; }
  .invite-form input[type="email"] { flex: 1 1 14rem; }
  .upload-inline { margin-left: 0; flex-wrap: wrap; }
  .milestone-rail li { padding: var(--space-3) var(--space-2); }
  input[readonly] { max-width: 100%; }
  .defect-form { flex-wrap: wrap; min-width: 0; width: 100%; }
  .defect-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
}

/* Expert review 20 Aug 2026 (#6): the corrective question phrases itself for
   the selected device type — pure CSS via :has, no script (CSP-safe). */
.corrective-label span { display: none; }
.corrective-label .corr-fallback { display: inline; }
form:has(#intake_product option[value="frame"]:checked) .corrective-label .corr-frame { display: inline; }
form:has(#intake_product option[value="uncut_lens"]:checked) .corrective-label .corr-lens { display: inline; }
form:has(#intake_product option[value="reader"]:checked) .corrective-label .corr-reader { display: inline; }
form:has(#intake_product option[value="frame"]:checked) .corrective-label .corr-fallback,
form:has(#intake_product option[value="uncut_lens"]:checked) .corrective-label .corr-fallback,
form:has(#intake_product option[value="reader"]:checked) .corrective-label .corr-fallback { display: none; }

.teach-note { margin-bottom: 0.4rem; }