/* css/site.css */
/* Meat Proxy Certification: shared stylesheet. Contract: docs/ARCHITECTURE.md, "CSS contract".
   Budget: 6 KB gzip. Page CSS (exam.css, cert.css, landing.css) may only add exam-, cert-, landing- classes. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f3f4f6;
  --fg: #1a1d21;
  --fg-muted: #5a6370;
  --border: #767676;
  --border-soft: #c9ced4;
  --accent: #0b57c2;
  --accent-fg: #ffffff;
  --link: #0b57c2;
  --focus: #0b57c2;
  --pass: #1a7a32;
  --fail: #b42318;
  --note-bg: #fff8e1;
  --note-border: #8a6d00;
  --term-bg: #14161a;
  --term-fg: #e6e8eb;
  --term-muted: #a9b0b8;
  --term-border: #6e7681;
  --term-accent: #7dd3a0;
  --term-warn: #f2c75c;
  --term-fail: #ff8a80;
  --term-focus: #9cc4ff;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 0.375rem;
  --measure: 44rem;
  --wide: 68rem;
  --space: 1rem;
  --space-s: 0.5rem;
  --space-l: 2rem;
  --target: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1b1f26;
    --fg: #e8eaed;
    --fg-muted: #a4adb8;
    --border: #8a929c;
    --border-soft: #3a414b;
    --accent: #8ab4f8;
    --accent-fg: #0b1220;
    --link: #8ab4f8;
    --focus: #8ab4f8;
    --pass: #5dd27a;
    --fail: #ff8a80;
    --note-bg: #2a2410;
    --note-border: #d9b84a;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 { line-height: 1.2; margin: 1.5em 0 0.5em; font-weight: 700; }
h1 { font-size: 2rem; margin-top: 1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p, ul, ol, dl, table, pre, blockquote, figure, fieldset, details { margin: 0 0 var(--space); }
ul, ol { padding-left: 1.5rem; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
small, .text-muted { color: var(--fg-muted); }
small { font-size: 0.9rem; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }
pre { background: var(--surface); padding: var(--space); border-radius: var(--radius); white-space: pre-wrap; }
kbd { border: 1px solid var(--border); border-radius: 0.25rem; padding: 0 0.3em; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-l) 0; }
blockquote { border-left: 0.25rem solid var(--border-soft); margin-left: 0; padding-left: var(--space); }
img, svg { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* Focus: visible everywhere, 3:1 against both schemes */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Layout */
.container { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--space); }
.container-wide { max-width: var(--wide); }
.stack > * + * { margin-top: var(--space); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space); align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space); padding: 0; list-style: none; }
.card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space); background: var(--surface); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space);
  top: -100%;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; }

/* Preview banner (non-release builds only) */
.preview-banner { margin: 0; padding: 0.4rem var(--space); background: var(--note-bg); border-bottom: 2px solid var(--note-border); text-align: center; font-weight: 600; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--border-soft); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space); padding-block: var(--space-s); }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target); }
.brand svg { width: 1.75rem; height: 1.75rem; flex: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-s); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 0.5rem; }
.site-footer { border-top: 1px solid var(--border-soft); margin-top: var(--space-l); padding-block: var(--space-l); font-size: 0.95rem; color: var(--fg-muted); }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 var(--space); display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space); }
.site-footer a { color: inherit; display: inline-flex; align-items: center; min-height: 1.5rem; }
.site-footer p { margin: 0; }

/* Compliance note: the one box for the plain register */
.note {
  border: 2px solid var(--note-border);
  border-radius: var(--radius);
  background: var(--note-bg);
  padding: var(--space);
  margin: 0 0 var(--space);
  color: var(--fg);
}
.note-title { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.note p:last-child { margin-bottom: 0; }

/* Buttons: real buttons and links styled alike, 44x44 minimum */
.btn, button {
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target);
  min-width: var(--target);
  padding: 0.5rem 1rem;
  border: 2px solid var(--fg);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-secondary { background: transparent; }
.btn-quiet { border-color: transparent; background: transparent; text-decoration: underline; font-weight: 500; }
.btn:hover, button:hover { filter: brightness(1.08); }
.btn[aria-disabled="true"], button:disabled { cursor: not-allowed; opacity: 0.6; }

/* Forms */
label, legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space); min-width: 0; }
legend { padding: 0 0.5rem; }
.field { margin-bottom: var(--space); }
.field-hint { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.95rem; }
.field-error { display: block; color: var(--fail); font-weight: 600; margin-top: 0.25rem; }
.field-error:empty { display: none; }
input[type="text"], input[type="email"], textarea, select {
  font: inherit;
  width: 100%;
  min-height: var(--target);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fail); }
.choice { display: flex; align-items: flex-start; gap: 0.75rem; min-height: var(--target); padding: 0.5rem 0; font-weight: 500; }
.choice input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--accent); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 1.5rem; height: 1.5rem; }

/* Switch: a checkbox with role="switch". Its label never changes with state. */
.switch { display: flex; align-items: center; gap: var(--space); min-height: var(--target); padding: 0.25rem 0; font-weight: 500; }
.switch > span:first-child { flex: 1 1 auto; }
.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border: 2px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.switch input::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 150ms;
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::before { background: var(--accent-fg); transform: translateX(1.25rem); }
.switch-state { font-family: var(--font-mono); font-size: 0.9rem; color: var(--fg-muted); min-width: 2rem; }

/* Tables */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--border-soft); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--surface); }
caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; }

/* Terminal panel: dark in both schemes, generic, no vendor styling */
.terminal {
  --focus: var(--term-focus);
  --fg-muted: var(--term-muted);
  --border: var(--term-border);
  --border-soft: var(--term-border);
  --surface: #1f2329;
  --bg: var(--term-bg);
  --fg: var(--term-fg);
  --accent: var(--term-accent);
  --accent-fg: #0f1a12;
  --link: var(--term-focus);
  --pass: var(--term-accent);
  --fail: var(--term-fail);
  background: var(--term-bg);
  color: var(--term-fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  border: 1px solid var(--term-border);
  border-radius: var(--radius);
  padding: var(--space);
  overflow-wrap: anywhere;
}
.terminal-agent, .terminal-prompt, .terminal pre { white-space: pre-wrap; }
.terminal-status { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--term-muted); border-bottom: 1px solid var(--term-border); padding-bottom: 0.5rem; margin-bottom: var(--space); }
.terminal-agent { margin: 0 0 var(--space); }
.terminal-agent::before { content: "agent> "; color: var(--term-accent); }
.terminal-prompt { color: var(--term-warn); font-weight: 700; margin: 0 0 var(--space-s); }
.terminal fieldset { border-color: var(--term-border); }
.terminal button, .terminal .btn { background: var(--term-bg); color: var(--term-fg); border-color: var(--term-fg); }
.terminal .btn-primary { background: var(--term-accent); border-color: var(--term-accent); color: #0f1a12; }
.terminal input[type="text"], .terminal input[type="email"] { background: #1f2329; color: var(--term-fg); border-color: var(--term-muted); }
.terminal input[aria-invalid="true"] { border-color: var(--term-fail); }

/* Status text: never colour alone; pair with text and an icon */
.pass { color: var(--pass); font-weight: 600; }
.fail { color: var(--fail); font-weight: 600; }
.icon { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }

/* Accessibility utilities */
.visually-hidden, .live {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Forced colours (Windows high contrast) */
@media (forced-colors: active) {
  .btn, button { border: 2px solid ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
  .btn-primary { background: Highlight; color: HighlightText; border-color: Highlight; }
  .switch input { appearance: auto; -webkit-appearance: auto; width: 1.5rem; height: 1.5rem; border-radius: 0; }
  .switch input::before { content: none; }
  .note, .terminal, .card, fieldset { border: 2px solid CanvasText; }
  .skip-link:focus { outline: 2px solid Highlight; }
  .terminal { background: Canvas; color: CanvasText; }
  .preview-banner { border-bottom: 2px solid CanvasText; }
}

/* Print: pages hide their own chrome; cert.css handles the certificate box */
@media print {
  .skip-link, .preview-banner, .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}

@media (max-width: 30rem) {
  h1 { font-size: 1.6rem; }
  body { font-size: 1rem; }
}

/* css/exam.css */
/* exam.css: the examination page (/exam/<track>/). Bundled after site.css by the build.
   Contract: classes prefixed exam-, rules scoped under body.exam (docs/ARCHITECTURE.md, section 6).
   The terminal look comes from .terminal in site.css: generic, dark in both schemes, no vendor styling. */

body.exam .exam-lead {
  margin-bottom: var(--space);
}
body.exam .exam-briefing li + li {
  margin-top: var(--space-s);
}
body.exam .exam-begin {
  margin: var(--space) 0 var(--space-s);
}
body.exam .exam-resume-note {
  display: block;
  margin-bottom: var(--space-s);
  font-weight: 600;
}
body.exam .exam-load-error {
  font-weight: 600;
}

/* ---------- Accommodations: before the clock in DOM order, real toggle buttons ---------- */
.exam-acc {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space);
  margin: var(--space-l) 0 var(--space);
}
.exam-acc-heading {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}
.exam-acc-note {
  margin-bottom: var(--space-s);
  color: var(--fg-muted);
  font-size: 0.95rem;
}
.exam-acc-toggle {
  text-align: left;
}
.exam-acc-state {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 700;
  border: 2px solid currentColor;
  border-radius: 1rem;
  padding: 0 0.5em;
  min-width: 3em;
  text-align: center;
}
.exam-acc-toggle[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* ---------- The cosmetic clock: reserved space, aria-hidden, never in a live region ---------- */
.exam-clock {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 var(--space);
  min-height: 3.25rem; /* two mono lines at 320 px so the waiting line never shifts the terminal */
  margin: 0 0 var(--space-s);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--fg-muted);
}
.exam-clock-time {
  min-width: 22ch;
}
.exam-clock-msg {
  font-weight: 700;
  color: var(--fg);
}
.exam-clock-hidden {
  visibility: hidden;
}

/* ---------- The terminal ---------- */
.exam-terminal {
  margin-bottom: var(--space);
}
.exam-step-heading {
  font-size: 1.15rem;
  margin: 0 0 var(--space-s);
  color: var(--term-fg);
}

/* The previous question's pass or fail line, above the next question. Space is reserved on the first question too. */
.exam-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 1.6rem;
  margin: 0 0 var(--space);
}
.exam-feedback .icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
}

/* Simulated streaming: the full text is in the DOM; this is a visual wipe plus a cursor, nothing more. */
@keyframes exam-wipe {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 -0.2em 0);
  }
}
@keyframes exam-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.exam-reveal {
  animation: exam-wipe 1000ms steps(8, end) forwards;
}
.exam-reveal::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  border-left: 0.55em solid currentColor;
  animation: exam-blink 1s step-end infinite; /* 1 Hz; removed with the class when the wipe ends */
}
.exam-anim {
  margin: 0 0 var(--space-s);
  min-height: var(--target);
}
.exam-anim-done {
  visibility: hidden;
} /* keeps its space: nothing shifts when the animation ends */
.exam-skip {
  color: var(--term-focus);
  padding-inline: 0.25rem;
}

/* "Read the diff": native details inside the question, outside the answer group; the count sits beside it. */
.exam-diff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--space);
  margin: 0 0 var(--space);
}
.exam-diff {
  margin: 0;
}
.exam-diff[open] {
  flex: 1 1 100%;
}
.exam-diff summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 0.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--term-focus);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.exam-diff[open] summary {
  margin-bottom: var(--space-s);
}
.exam-diff-text {
  margin: 0;
  max-height: 20rem;
  overflow: auto;
  background: #1f2329;
  color: var(--term-fg);
  border: 1px solid var(--term-border);
  font-size: 0.9em;
}
.exam-diff-count {
  color: var(--term-muted);
  font-size: 0.95em;
}

/* The answer group */
.exam-question fieldset {
  margin-bottom: var(--space-s);
}
.exam-question legend {
  margin-bottom: 0;
}
.exam-arrival {
  color: var(--term-muted);
  font-weight: 400;
  font-size: 0.95em;
  margin: 0.25rem 0 var(--space-s);
}
.exam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space);
  margin-top: var(--space);
}

/* Results */
.exam-results {
  margin: 0 0 var(--space);
}
.exam-results dt {
  color: var(--term-muted);
}
.exam-results dd {
  margin: 0 0 var(--space-s);
  font-weight: 700;
}
.exam-commentary {
  color: var(--term-muted);
}

/* Self-completion (senior): lines fade in once over 2.5 s; no loop; omitted under reduced motion by the engine. */
@keyframes exam-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.exam-completion-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space);
}
.exam-completion-lines li {
  animation: exam-fade 400ms ease-out both;
}
.exam-completion-lines li:nth-child(2) {
  animation-delay: 700ms;
}
.exam-completion-lines li:nth-child(3) {
  animation-delay: 1400ms;
}
.exam-completion-lines li {
  border-left: 0.25rem solid var(--term-accent);
  padding-left: 0.75rem;
  margin-bottom: 0.25rem;
}

/* Name step */
.exam-name .field-hint {
  color: var(--term-muted);
}
.exam-name input[type='text'] {
  max-width: 32rem;
}

/* ---------- Media ---------- */
@media (prefers-reduced-motion: reduce) {
  .exam-reveal {
    clip-path: none;
  }
  .exam-reveal::after {
    content: none;
  }
  .exam-anim {
    display: none;
  }
  .exam-completion-lines li {
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .exam-acc {
    border: 2px solid CanvasText;
  }
  .exam-acc-toggle[aria-pressed='true'] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  .exam-acc-state {
    border-color: currentColor;
  }
  .exam-reveal::after {
    border-left-color: CanvasText;
  }
  .exam-diff-text {
    border: 1px solid CanvasText;
  }
  .exam-diff summary {
    color: LinkText;
  }
  .exam-skip {
    color: LinkText;
  }
}

@media print {
  .exam-acc,
  .exam-clock,
  .exam-anim {
    display: none !important;
  }
}