/* Design tokens (BUILD_FOUNDATION.md §5).
 * One accent. Status colour only for compliance state, never decoration.
 * Fonts: Instrument Sans (prose), IBM Plex Mono (identifiers, dates, citations)
 * — self-hosted from app/assets/fonts (EU data path: no font CDNs), OFL
 * licenses vendored alongside. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/InstrumentSans-Variable-647f35c4.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-Regular-537ab494.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --color-accent: #00408F;
  --color-ink: #101E2C;
  --color-paper: #FFFFFF;
  --color-muted: #5A6B7D;
  --color-line: #D9E0E7;

  /* Compliance-state colours — the ONLY non-accent colours in the system */
  --state-pending: #5A6B7D;
  --state-open: #00408F;
  --state-blocked: #A3392C;
  --state-awaiting-approval: #8A6D1E;
  --state-closed: #1E6B45;

  /* Type */
  --font-prose: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-identifier: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --measure: 42rem;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-prose);
  line-height: 1.5;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
  box-sizing: border-box;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

a {
  color: var(--color-accent);
}

/* Milestone rail — the "where am I" spine */
.milestone-rail {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.milestone-rail li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-line);
}

.milestone-id {
  font-family: var(--font-identifier);
  font-size: 0.875rem;
  color: var(--color-accent);
  min-width: 2.5rem;
}

.milestone-title {
  flex: 1;
}

.milestone-state {
  font-family: var(--font-identifier);
  font-size: 0.8125rem;
}

.milestone-state[data-state="pending"] { color: var(--state-pending); }
.milestone-state[data-state="open"] { color: var(--state-open); }
.milestone-state[data-state="blocked"] { color: var(--state-blocked); }
.milestone-state[data-state="awaiting_approval"] { color: var(--state-awaiting-approval); }
.milestone-state[data-state="closed"] { color: var(--state-closed); }

/* Registry tables (/requirements, /review/thin) */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: var(--space-3) 0 var(--space-5);
}

th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-2) var(--space-2);
  border-bottom: 2px solid var(--color-ink);
}

td {
  vertical-align: top;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

td p { margin: 0 0 var(--space-1); }

.identifier, .locator, .status-tag {
  font-family: var(--font-identifier);
  font-size: 0.8125rem;
}

.status-tag[data-status="V"], .status-tag[data-status="V_legal"] { color: var(--state-closed); }
.status-tag[data-status="D"] { color: var(--state-awaiting-approval); }
.status-tag[data-status="O"] { color: var(--state-blocked); }

.blocking-badge {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  color: var(--state-blocked);
  border: 1px solid currentColor;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
}

.teach-what, .evidence { color: var(--color-muted); }

main[data-page] { max-width: 72rem; }

/* Registry review (§14) */
.review-entry {
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-line);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.review-entry[data-marked="correct"] { border-left-color: var(--state-closed); }
.review-entry[data-marked="wrong"] { border-left-color: var(--state-blocked); }

.teach-review dt {
  font-family: var(--font-identifier);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

.teach-review dd { margin: 0; }

.mark-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.mark-actions .wrong-form { display: flex; gap: var(--space-2); flex: 1; }
.mark-actions input[type="text"] { flex: 1; }

.mark-badge {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  padding: 0 var(--space-1);
  border: 1px solid currentColor;
}
.mark-badge[data-verdict="correct"] { color: var(--state-closed); }
.mark-badge[data-verdict="wrong"] { color: var(--state-blocked); }

.missing-report { margin: var(--space-3) 0 var(--space-5); }
.review-finish { border-top: 2px solid var(--color-ink); padding-top: var(--space-3); }

/* Source-highlight viewer (Phase 4) */
.document-page .page-canvas {
  position: relative;
  display: inline-block;
  border: 1px solid var(--color-line);
  max-width: 100%;
}

.document-page img { display: block; max-width: 100%; height: auto; }

.field-highlight {
  position: absolute;
  border: 2px solid var(--color-accent);
  background: rgba(0, 64, 143, 0.12);
  pointer-events: none;
}

/* Factory portal (Phase 5). Same one-accent discipline; state colour is
 * compliance state, never decoration. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.flash-alert {
  border-left: 3px solid var(--state-blocked);
  color: var(--state-blocked);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}

.request-state {
  font-family: var(--font-identifier);
  font-size: 0.8125rem;
  border: 1px solid currentColor;
  padding: 0 var(--space-1);
}
.request-state[data-state="sent"],
.request-state[data-state="viewed"] { color: var(--state-open); }
.request-state[data-state="submitted"] { color: var(--state-awaiting-approval); }
.request-state[data-state="rejected"] { color: var(--state-blocked); }
.request-state[data-state="accepted"] { color: var(--state-closed); }

.request-facts {
  border-top: 1px solid var(--color-line);
  margin: var(--space-4) 0;
}
.request-facts dt {
  font-family: var(--font-identifier);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.request-facts dd { margin: 0; }

.request-text {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-4) 0;
}

.rejection {
  border-left: 3px solid var(--state-blocked);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-4) 0;
}
.rejection h2 { font-size: 1rem; margin: 0 0 var(--space-2); }

.request-notice {
  border-left: 3px solid var(--color-line);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-4) 0;
}
[data-notice="accepted"] { border-left-color: var(--state-closed); }

/* Operator console (Phase 7). Status colour only for compliance state. */
.console-dossier {
  border-top: 2px solid var(--color-ink);
  padding: var(--space-3) 0 var(--space-4);
}
.console-dossier h2 { font-size: 1.0625rem; margin: 0 0 var(--space-2); }

.console-milestones {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-3);
}
.console-milestones li { min-width: auto; }

.console-facts dt {
  font-family: var(--font-identifier);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.console-facts dd { margin: 0; }

.ceiling-breach {
  font-family: var(--font-identifier);
  font-size: 0.8125rem;
  color: var(--state-blocked);
  border: 1px solid currentColor;
  padding: 0 var(--space-1);
  margin-left: var(--space-2);
}
[data-package-state="invalid"] { color: var(--state-blocked); }
[data-package-state="validated"] { color: var(--state-closed); }

.console-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.defect-form { display: flex; gap: var(--space-2); flex: 1; min-width: 20rem; }
.defect-form input[type="text"] { flex: 1; }

/* Client face (Phase 8). Teaching leads or collapses by level — never decoration. */
.flash-notice {
  border-left: 3px solid var(--state-closed);
  color: var(--state-closed);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}

.placement-prompt {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
}

.milestone-rail li { display: block; }
.milestone-body { margin: var(--space-2) 0 var(--space-3); }

.determination {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}

.teach-block {
  border: 1px solid var(--color-line);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}
.teach-block summary { cursor: pointer; }
.teach-block .citation-hover { font-size: 0.75rem; color: var(--color-muted); margin-left: var(--space-2); }

.approve-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.approve-form input[type="text"] { flex: 1; }
.approval-hint { font-size: 0.875rem; color: var(--color-muted); }
.acknowledged { color: var(--state-closed); }

fieldset {
  border: 1px solid var(--color-line);
  margin: var(--space-3) 0;
  padding: var(--space-3);
}
fieldset legend { font-weight: 600; padding: 0 var(--space-1); }
.field { margin: var(--space-3) 0; }
.field label { display: block; margin-bottom: var(--space-1); }
.field input[type="text"], .field textarea, .field select { width: 100%; }
.checkboxes label { display: block; margin: var(--space-1) 0; }
label.option { display: block; margin: var(--space-1) 0; }