/* 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;
  white-space: nowrap; /* W31: the two-word name never breaks */
}

.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; }

/* W29.3 D-03: url, date, tel, number and search inputs get the same control
   style as text inputs (they were browser-default). No width rule here. */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="date"], input[type="tel"], input[type="number"], input[type="search"],
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));
}
/* W29.3 D-11: the flash takes the width of the content it belongs to — the
   72rem column on data-page / data-wide pages, the card on sign-in pages —
   instead of a centred 42rem strip offset from both. */
body:has(> main[data-page], > main[data-wide]) > :is(.flash-notice, .flash-alert) { max-width: 72rem; }
body:has(.auth-card) > :is(.flash-notice, .flash-alert) { max-width: calc(24rem + 2 * var(--space-4) + 2px); }

/* 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; }
/* W29.3 D-01: the dossier assistant's question field takes the row, never more
   (the view drops the size="1000" Rails derives from maxlength). Scoped to the
   assistant panel; the approval block on the same page is not reached. */
[data-testid="assistant-panel"] .upload-inline input[type="text"] { flex: 1 1 16rem; min-width: 0; max-width: 100%; }

/* W29.3 D-02: the factory share link is one unbreakable token; it breaks
   anywhere inside its line instead of pushing the page sideways. */
[data-testid="share-url"] { overflow-wrap: anywhere; }

/* W29.3 D-03: the factory profile's add-rows (sites, contacts, certifications)
   wrap at every width and use the column; the certification row (4 text
   fields, 2 dates, a button) no longer runs past the right edge. */
[data-page="factory-profile"] .invite-form { flex-wrap: wrap; max-width: none; }
[data-page="factory-profile"] .invite-form input:not([type="submit"]) { flex: 1 1 10rem; min-width: 0; }
[data-page="factory-profile"] .field input[type="url"] { width: 100%; }

/* W29.3 D-04: the operator ticket's answer routes — the registry-entry select
   (options up to ~90 characters) and the agenda field shrink to the column,
   and the route forms wrap instead of pushing the page sideways. */
[data-testid="routes"] .invite-form { flex-wrap: wrap; }
[data-testid="routes"] select, [data-testid="routes"] input[type="text"] { max-width: 100%; min-width: 0; }

/* W29.3 D-08: native selects with long German options on the intake and the
   M2 foundation stay inside the column and mark a cut option with an
   ellipsis. A native select cannot wrap; showing the whole chosen option at
   390 would need a radio-group redesign (not a minor fix). */
[data-page="client-intake"] select, [data-testid="m2-foundation"] select { max-width: 100%; text-overflow: ellipsis; }

/* W29.5 D-12 (Recap D, 14 Oct 2026: fix now, option A): the acknowledgment's
   sentence ("Ich habe gelesen, was dieser Schritt für … bedeutet") wraps at
   its card's edge instead of running past it — every word stays, only the
   line breaks. Scoped to the acknowledge form of the approval panel; no
   markup, string or behaviour changes. */
.approval form[data-testid^="acknowledge-"] input[type="submit"] { white-space: normal; max-width: 100%; text-align: left; }

/* W29.5 D-25 (Recap D, 14 Oct 2026: fix now, option A): the approval form —
   the name field and "Mx freigeben" — wraps inside its card: the field takes
   the row and the button moves below it when one row cannot hold both (at
   390 px the button ran 14-17 px past the edge). Scoped to the approval
   panel's form; no markup, string or behaviour changes. */
.approval .approve-form { flex-wrap: wrap; }
.approval .approve-form input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.approval .approve-form input[type="submit"] { white-space: normal; max-width: 100%; text-align: left; }

/* W29.5 D-26 (Recap D, 14 Oct 2026: fix now, option A): the M7 EUDAMED
   submission confirmation — environment, name, "Ich habe diese Übermittlung
   vorgenommen" — wraps inside its card: each control takes a row when one row
   cannot hold them (at 390 px the name field and the button ran up to 478 px
   past the edge); at 1024 and 1440 px the row holds all three as before.
   Scoped to the confirmation form; no markup, string or behaviour change. */
[data-testid="confirm-submission"].approve-form { flex-wrap: wrap; }
[data-testid="confirm-submission"].approve-form > * { min-width: 0; max-width: 100%; }
[data-testid="confirm-submission"].approve-form input[type="text"] { flex: 1 1 14rem; }
[data-testid="confirm-submission"].approve-form input[type="submit"] { white-space: normal; text-align: left; }

/* ---------- 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: 40rem; }
/* W29.3 D-07: inside its scroll box a table keeps readable columns — headers
   stay on one line, long words hyphenate (pages carry lang) rather than
   wrapping letter by letter. */
.table-scroll th { white-space: nowrap; }
.table-scroll td { hyphens: auto; }

@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%; }
  /* W29.3 D-05: flex: 1 (tokens.css) gave a 0 % basis that beat width: 100%,
     so the defect form squeezed beside the time-log buttons. */
  .defect-form { flex-wrap: wrap; min-width: 0; width: 100%; flex: 1 1 100%; }
  .defect-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
  /* W29.3 D-07: on small screens a column never drops below 9rem; the table
     scrolls in its box instead of wrapping each cell word by word. */
  .table-scroll td { min-width: 9rem; }
}

/* 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; }

/* v2 R5: a library document's releases — chips and their actions in one wrapping row. */
.releases { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.35rem; flex-basis: 100%; }
.releases form { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.releases .quiet-button, .releases input[type="submit"] { padding: 0.15rem 0.6rem; font-size: 0.85rem; }
.releases select { padding: 0.15rem 0.4rem; font-size: 0.85rem; }

/* Linked seats: the same person in another role. */
.seat-switch { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.6rem; }
.seat-switch form { display: inline; }
.seat-switch .quiet-button { padding: 0.1rem 0.45rem; font-size: 0.8rem; }

/* ---------- Expert test round 1 (26 Sep 2026): next step, approval block, factory trail ---------- */

.next-step {
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-paper));
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
.next-step[data-waiting="true"] { border-left-color: var(--color-line); background: transparent; color: var(--color-muted); }
.setup-complete { font-weight: 600; margin: var(--space-2) 0 0; }
.approval-block { border: 1px solid var(--color-line); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.approval-block h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin: var(--space-2) 0 var(--space-1); }
.approval-block p { margin: 0 0 var(--space-2); }
.request-detail { display: inline-flex; flex-direction: column; gap: 2px; }
.request-trail, .what-next { display: block; }
.what-next { font-size: 0.875rem; color: var(--color-muted); }
.forward-link summary { font-size: 0.875rem; cursor: pointer; }
.forward-link input { width: 100%; font-family: var(--font-identifier); font-size: 0.75rem; margin-top: var(--space-1); }
.requirement-note { display: block; max-width: 48rem; }
.factory-line { margin-top: 0; }
.academy-hook { margin: 0 0 var(--space-2); font-size: 0.875rem; }
.amend-note { border-left: 3px solid var(--state-closed); padding-left: var(--space-2); }
.field-hint { display: block; margin-top: 2px; }
table.duties td .quiet-button { margin-left: var(--space-2); }

/* ADR-0036: the sign-up forms — the auth card, wider for a longer form; the
   error summary and the field messages. DE polishes in this lane. */
.auth-card-wide { max-width: 32rem; margin-top: var(--space-5); } /* the 12vh of the small sign-in card is too far below the header line for the wide cards (Christian, dev review 21 Oct) */
.auth-card fieldset { border: none; padding: 0; margin: var(--space-3) 0 0; }
.auth-card legend { font-weight: 600; padding: 0; }
.auth-card input[type="text"], .auth-card select { width: 100%; }
.auth-card .consent label { display: flex; gap: var(--space-2); align-items: flex-start; }
.auth-card .consent input[type="checkbox"] { margin-top: 0.25rem; flex: none; }
.error-summary { border: 1px solid var(--color-line); border-left: 3px solid var(--color-accent); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.error-summary h2 { font-size: 1rem; margin: 0 0 var(--space-2); }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.field-error { margin: 2px 0 0; font-size: 0.875rem; }
.claim-panel { border: 1px solid var(--color-line); border-top: 3px solid var(--color-accent); padding: var(--space-3); margin: var(--space-3) 0; }

/* ---------- The customer cockpit (M-A, 21 Oct 2026, ADR-0038) ----------
 * Under a dossier the client face is a sidebar beside the page: where the
 * client is (the milestone marks are compliance state, never decoration),
 * where everything else is. One column below 64rem, the sidebar becomes a
 * strip above the page that scrolls sideways inside itself; the page never
 * scrolls sideways. */

.cockpit {
  flex: 1;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--space-3);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.cockpit > main { max-width: 60rem; margin: 0; padding-inline: 0; }
body:has(> .cockpit) > :is(.flash-notice, .flash-alert) { max-width: 84rem; }

.cockpit-nav {
  position: sticky;
  top: var(--space-3);
  padding: var(--space-5) 0 var(--space-3);
  font-size: 0.9375rem;
}
.cockpit-nav ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.cockpit-nav li { margin: 0; }
.cockpit-nav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.3rem var(--space-2);
  border-left: 3px solid transparent;
  /* the containing block of the "(you are here)" marker (.visually-hidden is
     position: absolute): inside the scrolling strip it would otherwise be
     placed against the page, at the current step's x, and widen the document
     by 58–126 px at 390 px (walkthrough overflow probe, 21 Oct 2026). */
  position: relative;
}
.cockpit-nav a:hover { border-left-color: var(--color-line); }
.cockpit-nav a[aria-current="page"] { border-left-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.cockpit-dossier { margin: 0 0 var(--space-3); padding: 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.cockpit-client { font-weight: 600; }
.cockpit-group {
  font-family: var(--font-identifier);
  font-size: 0.6875rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--space-2);
}
.cockpit-milestones .milestone-id { min-width: 2rem; }
.cockpit-milestones .nav-title { flex: 1; }
.nav-state { width: 8px; height: 8px; flex: none; background: var(--color-line); align-self: center; }
.nav-state[data-state="open"], .nav-state[data-state="awaiting_approval"] { background: var(--color-accent); }
.nav-state[data-state="blocked"] { background: var(--state-blocked); }
.nav-state[data-state="closed"] { background: var(--state-closed); }
.cockpit-milestones li[data-state="locked"] a { color: var(--color-muted); }

/* The overview's tiles: one number each, the compliance state only in the sub line. */
.cockpit-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
  min-width: 0;
}
a.tile:hover { border-top-color: var(--color-accent); }
a.tile .tile-label { color: var(--color-accent); }
.tile-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.tile-label { font-size: 0.9375rem; }
.tile-sub { font-family: var(--font-identifier); font-size: 0.75rem; color: var(--color-muted); }
.tile-sub[data-state="blocked"] { color: var(--state-blocked); }

/* The overview's rail: one line per step, leading to its page. */
.milestone-rail-overview li { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.milestone-rail-overview .milestone-title { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.milestone-rail-overview .milestone-title:hover { color: var(--color-accent); }
.milestone-rail-overview .rail-step { flex-basis: 100%; font-size: 0.9375rem; color: var(--color-muted); }
.milestone-rail-overview .rail-step[data-waiting="false"] { color: var(--color-ink); }

/* The milestone page. */
.milestone-header h1 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.milestone-header .milestone-id { font-size: 1rem; }
.milestone-page { border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.milestone-neighbours {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  font-size: 0.9375rem;
}
.milestone-neighbours a { text-decoration: none; }
.milestone-neighbours a:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  /* W31: the two-word wordmark takes the room the one-line header had at
     tablet widths; tighter gaps keep the face label and the nav on one row. */
  .site-header .bar { gap: var(--space-3); }
  .site-nav { gap: var(--space-2); }
  .face-label { white-space: nowrap; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), and the strip's
     nowrap entries would widen the one column past the viewport (CI system
     tests + the walkthrough's overflow probe at 390 px, 21 Oct 2026). */
  .cockpit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cockpit-nav { position: static; padding: var(--space-3) 0 0; min-width: 0; max-width: 100%; }
  .cockpit-nav ul { display: flex; gap: var(--space-1); overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; padding-bottom: var(--space-1); min-width: 0; }
  /* M-E: with eight entries the "more" strip no longer fits a tablet width;
     between phone and desktop the lists wrap instead of growing a scrollbar
     (a phone keeps the strip that scrolls inside itself). */
  @media (min-width: 48rem) { .cockpit-nav ul { flex-wrap: wrap; overflow-x: visible; } }
  .cockpit-nav li { flex: none; }
  .cockpit-nav a { border-left: none; border-bottom: 3px solid transparent; padding: 0.3rem var(--space-2); white-space: nowrap; }
  .cockpit-nav a:hover { border-bottom-color: var(--color-line); }
  .cockpit-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
  .cockpit-dossier { flex-direction: row; gap: var(--space-2); align-items: baseline; padding: 0; }
  .cockpit-group { margin: var(--space-2) 0 0; padding: 0; }
  .cockpit-milestones .nav-title { display: none; }
  .cockpit-milestones a[aria-current="page"] .nav-title { display: inline; }
  .cockpit > main { padding-top: var(--space-4); }
}

/* Documents on file (M-B): the filters as a wrapping row of plain links, the
   current one marked like the sidebar; the validity form inline on a row. */
.document-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0; font-size: 0.9375rem; }
.document-filters .cockpit-group { margin: 0 var(--space-1) 0 0; padding: 0; }
.document-filters a { text-decoration: none; padding: 0 var(--space-1); border-bottom: 2px solid transparent; }
.document-filters a[aria-current="true"] { border-bottom-color: var(--color-accent); font-weight: 600; }
.documents-group h2 .progress-note { margin-left: var(--space-2); }
.document-rows li { align-items: baseline; }
.validity-form input[type="date"] { max-width: 11rem; }
.validity-form input[type="submit"] { padding: 0.3rem 0.7rem; font-size: 0.875rem; }

/* Factories & requests (M-C): the directory as cards, the board as columns
   of rows, a request's page with its spec list and timeline. */
.factory-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3); }
.factory-card { border: 1px solid var(--color-line); border-top: 3px solid var(--color-ink); padding: var(--space-3); min-width: 0; }
.factory-card h3 { margin: 0 0 var(--space-1); font-size: 1.0625rem; }
.factory-card h4 { margin: var(--space-3) 0 var(--space-1); font-size: 0.8125rem; font-family: var(--font-identifier); color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.factory-card p { margin: 0 0 var(--space-1); }
.evidence-list.compact li { padding: var(--space-1) 0; }
.bare-list { list-style: none; padding: 0; margin: 0; }
.bare-list li { margin: 0 0 var(--space-1); }
.board-column h3 .sub { font-weight: 400; font-size: 0.875rem; margin-left: var(--space-1); }
.request-rows li { align-items: baseline; }
.request-rows .request-title { font-weight: 600; }
/* A registry document name can be one long German word ("Qualitätssicherungsvereinbarung"):
   let it break rather than widen a phone-width page. */
main[data-page="client-factory-request"] h1, .request-rows .request-title { overflow-wrap: anywhere; hyphens: auto; }
.request-spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; }
.request-spec dt { font-family: var(--font-identifier); font-size: 0.8125rem; color: var(--color-muted); }
.request-spec dd { margin: 0; min-width: 0; }
.factory-text p { font-size: 1rem; line-height: 1.7; }
.request-timeline { list-style: none; padding: 0; margin: var(--space-2) 0; }
.request-timeline li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.request-timeline time { font-family: var(--font-identifier); font-size: 0.8125rem; min-width: 6.5rem; }
@media (max-width: 40rem) {
  .request-spec { grid-template-columns: minmax(0, 1fr); }
  .request-spec dt { margin-top: var(--space-1); }
}

/* M-D: the products page — one card per model, facts in a definition list,
   two or three short sections side by side where the width allows. */
.product-card { padding-block: 1rem; }
.product-card > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.product-card h3 { margin-top: 1rem; }
.product-grid { display: grid; gap: 0 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.product-grid > section { min-width: 0; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem 0; margin: 0; }
.facts dt { color: var(--muted, #555); font-size: 0.85rem; margin-top: 0.6rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.variant-form { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; max-width: 60rem; }
.variant-form .field { margin: 0; }
.variant-edit { flex-basis: 100%; }
/* The products page's inline forms (placing, drawing) sit inside a grid
   column: they wrap and their controls never exceed the column. */
.product-card .upload-inline { flex-wrap: wrap; margin-left: 0; max-width: 100%; }
.product-card .upload-inline select, .product-card .upload-inline input:not([type="submit"]) { flex: 1 1 10rem; min-width: 0; max-width: 100%; }
/* E-2: a long list a page at a time — the page index wraps at any width. */
.page-index ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0.25rem 0 1rem; }
.page-index [aria-current="page"] { font-weight: 600; }
/* E-2: a long set of codes folded behind its count. */
.code-list summary { cursor: pointer; }
.code-list p { margin: 0.25rem 0 0; overflow-wrap: anywhere; }

/* M-F: ongoing QM — the review's numbered questions with their answer row,
   the vigilance form, the audit trail's table. */
.review-items { padding-left: 1.25rem; }
.review-items > li { margin-bottom: 1rem; }
.review-answer { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.review-answer input[type="text"] { flex: 1 1 16rem; min-width: 0; }
.preview-form fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; border: 0; padding: 0; margin: 0; }
.preview-result { margin-top: 1rem; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.audit-table th, .audit-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--color-line, #ddd); vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 48rem) { .audit-table thead { display: none; } .audit-table tr { display: grid; gap: 0.1rem; padding: 0.4rem 0; } .audit-table td { border: 0; padding: 0; } }

/* ADR-0043: the Stelion umbrella landing reuses the landing sections; the
   module cards are two wide, the "next" card is quiet. */
.module-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-cards .btn { margin-top: var(--space-2); }
.module-card-next { border-style: dashed; color: var(--color-muted); }
@media (max-width: 48rem) { .module-cards { grid-template-columns: 1fr; } }

/* ADR-0044 (P4-1/P4-2): the overview tables — a real table that scrolls
   inside its own box at phone width (the page never scrolls sideways), its
   caption carrying the row count, sortable headers as links, numbers right-
   aligned; the search and the view switch as quiet rows above it. */
.view-switch { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font-size: 0.9375rem; }
.view-switch a { text-decoration: none; padding: 0 var(--space-1); border-bottom: 2px solid transparent; }
.view-switch a[aria-current="page"] { border-bottom-color: var(--color-accent); font-weight: 600; color: var(--color-ink); }
.table-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0 0; }
.table-search label { font-weight: 600; font-size: 0.9375rem; }
.table-search input[type="search"] { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.table-search input[type="submit"] { padding: 0.3rem 0.8rem; font-size: 0.875rem; }
.table-search .sub { flex-basis: 100%; font-size: 0.8125rem; color: var(--color-muted); margin: 0; }
.overview-table { margin: var(--space-2) 0 var(--space-3); max-width: 100%; }
.overview-table:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.overview-table table { min-width: 44rem; font-size: 0.875rem; }
.documents-table table { min-width: 62rem; }
/* Headers may wrap here (German column names are long): the room goes to
   the cells, which keep names and codes whole — no letter-by-letter breaks. */
.overview-table th, .overview-table th a { white-space: normal; }
.overview-table td { hyphens: manual; padding: 6px 8px; }
.overview-table .identifier { overflow-wrap: normal; word-break: normal; }
.overview-table caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 var(--space-2); }
.overview-table caption .progress-note { font-weight: 400; margin-left: var(--space-2); }
.overview-table th a { color: inherit; text-decoration: none; }
.overview-table th a:hover { color: var(--color-accent); text-decoration: underline; }
.overview-table th[aria-sort] { color: var(--color-ink); }
.overview-table .sort-mark { font-size: 0.6875rem; }
.overview-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; border-bottom: 1px solid var(--color-line); padding: 8px; vertical-align: top; white-space: nowrap; }
.overview-table .num { text-align: right; white-space: nowrap; }
.overview-table tbody tr:hover { background: color-mix(in srgb, var(--color-line) 30%, transparent); }
.overview-table .status-tag { white-space: nowrap; }
.overview-table .overdue { display: block; font-family: var(--font-identifier); font-size: 0.75rem; color: var(--state-blocked); }
.overview-table .reason-list { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.overview-table .reason-list li { white-space: nowrap; }
.overview-table .document-title { min-width: 13rem; max-width: 20rem; overflow-wrap: break-word; }
.overview-table .document-models { min-width: 7rem; }
.overview-table tbody th, .overview-table .code { white-space: nowrap; }
.overview-table .document-source { min-width: 9rem; }
.overview-table .validity-edit summary { cursor: pointer; font-size: 0.8125rem; color: var(--color-accent); margin-top: var(--space-1); }
.overview-table .validity-form { margin: var(--space-1) 0 0; }
.table-pages ul { align-items: baseline; }

/* ADR-0044 (P4-4): the family at a glance — one line of five facts, each a
   link to its table or page; it wraps at narrow widths. */
.family-strip { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; padding: var(--space-2) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.family-strip > div { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
.family-strip dt { font-size: 0.8125rem; color: var(--color-muted); }
.family-strip dd { margin: 0; font-weight: 600; }
.family-strip dd a { text-decoration: none; }
.family-strip dd a:hover { text-decoration: underline; }
.family-strip dd a[data-state="blocked"] { color: var(--state-blocked); }
.dossier-cards .family-strip { margin: var(--space-2) 0 0; padding: var(--space-1) 0 0; border-bottom: 0; }
/* The row's name (model code, register number) stays in view while the
   rest of a wide table scrolls under it. */
.overview-table tbody th, .overview-table thead th:first-child { position: sticky; left: 0; background: var(--color-paper); z-index: 1; }