/* PGxGATE UI. Layout from the approved design canvas (page #F8FAFC, cards white with 1px
   #E2E8F0 and 8px radius, pills green/amber/red); colours from the PGxGATE brand kit
   (docs/DECISIONS.md, 2026-11-14): navy for the header, sidebar, links and primary buttons;
   dark green for success and confirm states; blue and lime only as decorative accents and
   focus rings on navy, never as text on white. The training banner stays red. Checked against
   WCAG 2.1 AA success criteria 1.4.3 and 1.4.11 by tools/contrast_check.py (text pairs at or
   above 4.5:1, control borders and focus indicators at or above 3:1; the unit test
   tests/unit/test_accessibility.py fails below either). Controls are 36 to 44px. */

/* Bundled fonts (see fonts/NOTICE.md); nothing is fetched from outside the appliance. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root {
  --brand-navy: #052B58; --brand-blue: #13AFF3; --brand-green: #08730B; --brand-lime: #67D41D;
  --brand-white: #FFFFFF;
  --sidebar: var(--brand-navy); --sidebar-ink: #E2E8F0; --sidebar-muted: #A9B8CC; --sidebar-active: #0A3A70;
  --sidebar-line: #1B4A80; --focus-on-dark: var(--brand-blue);
  --page: #F8FAFC; --setup-page: #F1F5F9; --card: var(--brand-white); --line: #E2E8F0;
  --ink: #0F172A; --ink-muted: #475569; --heading: var(--brand-navy);
  --primary: var(--brand-navy); --primary-ink: var(--brand-white);
  --green-bg: #DCFCE7; --green-ink: #14532D; --success: var(--brand-green); --amber-bg: #FEF3C7; --amber-ink: #78350F;
  --red-bg: #FEE2E2; --red-ink: #7F1D1D; --slate-bg: #E2E8F0; --slate-ink: #1E293B;
  --focus: var(--brand-navy); --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.5 var(--sans); color: var(--ink); background: var(--page); min-height: 100vh; }
code, .mono { font-family: var(--mono); font-size: 0.9375em; }
code { overflow-wrap: anywhere; }
a { color: var(--primary); }
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; color: var(--heading); }
h2 { font-size: 1.0625rem; margin: 0 0 0.75rem; color: var(--heading); }
p { margin: 0 0 0.75rem; }
.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--card); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 0.5rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: var(--focus-on-dark); }

/* Shell */
.shell { display: flex; min-height: 100vh; }
/* Training profile: a fixed banner on every page (PGX_TRAINING_MODE=1 only). */
.training-banner { position: sticky; top: 0; z-index: 1000; background: #b91c1c; color: #fff; font-weight: 600; text-align: center; padding: 0.4rem 1rem; font-size: 0.9375rem; letter-spacing: 0.01em; }
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); width: 280px; max-width: 280px; flex: 0 0 280px; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar .brand { display: flex; flex-direction: column; gap: 0.375rem; padding-bottom: 0.875rem; border-bottom: 2px solid var(--brand-blue); }
.sidebar .brand-name { font-weight: 600; font-size: 1.0625rem; }
.brand-logo { display: block; width: 100%; max-width: 220px; height: auto; }
.sidebar .brand-lab { color: var(--sidebar-muted); font-size: 0.875rem; }
.sidebar .nav { display: flex; flex-direction: column; gap: 1.25rem; }
.nav-group { display: flex; flex-direction: column; gap: 0.125rem; }
.nav-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-muted); margin: 0 0.5rem 0.25rem; }
.nav-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--sidebar-ink); text-decoration: none; padding: 0.5rem 0.75rem; min-height: 40px; border-radius: 6px; }
.nav-link:hover { background: var(--sidebar-active); }
.nav-link[aria-current="page"] { background: var(--sidebar-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-lime); }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--sidebar-line); padding-top: 1rem; font-size: 0.8125rem; color: var(--sidebar-muted); display: flex; flex-direction: column; gap: 0.375rem; }
.sidebar-footer .mono { color: var(--sidebar-ink); }
.sidebar-footer form { margin: 0.25rem 0 0; }
.main { flex: 1; min-width: 0; padding: 1.5rem; }
.main:focus { outline: none; }
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.page-header p { margin: 0; }

/* Cards and grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; }
.card.amber { background: var(--amber-bg); border-color: #FDE68A; color: var(--amber-ink); }
.card.amber h2, .card.amber .muted { color: var(--amber-ink); }
.grid { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.stat-label { font-size: 0.8125rem; color: var(--ink-muted); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.card-head h2 { margin: 0; }
section { margin-bottom: 1.25rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
dl.facts dt { color: var(--ink-muted); }
dl.facts dd { margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.5rem 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }

/* Pills */
.pill { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pill.green { background: var(--green-bg); color: var(--green-ink); }
.pill.amber { background: var(--amber-bg); color: var(--amber-ink); }
.pill.red { background: var(--red-bg); color: var(--red-ink); }
.pill.slate { background: var(--slate-bg); color: var(--slate-ink); }
.pill.blue { background: #DBEAFE; color: #1E3A8A; }
.pill.dashed { background: var(--card); color: var(--ink-muted); border: 1px dashed #64748B; }
.pill.count { background: var(--sidebar-line); color: var(--sidebar-ink); min-width: 1.75rem; text-align: center; }
.pill.count.amber { background: var(--amber-bg); color: var(--amber-ink); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.625rem 0.75rem; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; background: var(--page); font-size: 0.8125rem; color: var(--ink-muted); font-weight: 600; }
tr.rejected td { background: var(--amber-bg); }
tr.flagged td { background: #FFFBEB; }
ul.plain.compact li { padding: 0.125rem 0; border-top: 0; font-size: 0.875rem; }

/* Worklist */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; min-height: 40px; color: var(--ink-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.tab .pill.count { background: var(--slate-bg); color: var(--slate-ink); }
input[type="search"] { font: inherit; padding: 0.5rem 0.75rem; border: 1px solid #64748B; border-radius: 6px; background: var(--card); color: var(--ink); min-height: 40px; }
.page-header form.actions input[type="date"] { width: auto; }

/* Case review */
.breadcrumb { font-size: 0.875rem; color: var(--ink-muted); margin-bottom: 0.5rem; }
.case-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.case-main, .case-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.case-main > section, .case-side > section { margin-bottom: 0; }
h1 .pill { vertical-align: middle; margin-left: 0.5rem; font-size: 0.875rem; }
h3 { font-size: 0.9375rem; margin: 1rem 0 0.5rem; }
.flag-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 1rem; padding: 0.75rem 0; border-top: 1px solid #FDE68A; }
.flag-row:first-of-type { border-top: 0; }
.flag-title { font-weight: 600; margin-bottom: 0.25rem; }
.flag-form .field { margin-bottom: 0.5rem; }
.card.amber input[type="text"] { border-color: #92400E; }
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-body { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 5; width: min(360px, 90vw); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
table.nested { min-width: 0; margin-top: 0.5rem; }
details > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
textarea { width: 100%; font: inherit; padding: 0.5rem 0.75rem; border: 1px solid #64748B; border-radius: 6px; background: var(--card); color: var(--ink); }
@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
  .flag-row { grid-template-columns: 1fr; }
  .popover-body { position: static; width: auto; margin-top: 0.5rem; box-shadow: none; }
}
td .detail { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.empty { padding: 2rem 1rem; text-align: center; color: var(--ink-muted); }

/* Forms and buttons */
.field { margin-bottom: 1rem; }
label, legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="file"], select, textarea {
  width: 100%; font: inherit; padding: 0.5rem 0.75rem; border: 1px solid #64748B; border-radius: 6px; background: var(--card); color: var(--ink); min-height: 40px;
}
.help { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.25rem; }
.button { font: inherit; font-weight: 600; min-height: 40px; padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.button.primary { background: var(--primary); color: var(--primary-ink); }
.button.secondary { background: var(--card); color: var(--ink); border-color: #64748B; }
.button.small { min-height: 36px; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button.sidebar-quiet { background: transparent; color: var(--sidebar-ink); border-color: var(--sidebar-muted); min-height: 36px; width: 100%; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; margin: 0; }
.alert { padding: 0.75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.alert.error { background: var(--red-bg); color: var(--red-ink); border: 1px solid #FCA5A5; }
.alert.ok { background: var(--green-bg); color: var(--green-ink); border: 1px solid #86EFAC; }
.alert.info { background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; }
.radio-cards { display: grid; gap: 0.75rem; }
.radio-card { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 0.875rem 1rem; }
.radio-card input { margin-top: 0.3rem; width: 1.125rem; height: 1.125rem; }
.radio-card:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.radio-card .title { font-weight: 600; }
.radio-card.disabled { color: var(--ink-muted); background: var(--page); }

/* Setup wizard */
body.setup { background: var(--setup-page); }
.setup-wrap { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem; }
.setup-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; margin-bottom: 1.25rem; }
.setup-header .title { font-weight: 600; font-size: 1.0625rem; color: var(--heading); }
.setup-header .brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.setup-logo { display: block; width: 180px; height: auto; }
.signin-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 1.25rem; }
.setup-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; }
ol.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
ol.steps li a, ol.steps li span.step { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; min-height: 44px; border-radius: 8px; color: var(--ink); text-decoration: none; }
ol.steps li.current > * { background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.step-circle { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; flex: 0 0 auto; }
.step-circle.done { background: var(--success); color: var(--brand-white); }
.step-circle.current { background: var(--primary); color: var(--brand-white); }
.step-circle.upcoming { border: 2px solid #64748B; color: var(--ink-muted); }
.step-footer { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sign and release */
.pdf-embed { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; align-items: start; }
.check > span:last-child { display: flex; flex-direction: column; gap: 0.125rem; }
.check-mark { font-weight: 700; line-height: 1.5; }
.check.ok .check-mark { color: var(--success); }
.check.fail .check-mark, .check-fail-text, .check.fail .check-label { color: var(--red-ink); }
.check-label { font-weight: 600; }
.field.checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.625rem; align-items: start; }
.field.checkbox input { width: 1.125rem; height: 1.125rem; margin-top: 0.25rem; }
.field.checkbox .help { grid-column: 2; }
.sign-box .button { width: 100%; }

/* Configuration and bundles, Validation (Milestone 3) */
.section { margin-bottom: 1.25rem; }
.card.dashed { border: 2px dashed #64748B; }
td.was { background: var(--red-bg); color: var(--red-ink); }
td.now { background: var(--green-bg); color: var(--green-ink); }
.sign-inline { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); max-width: 36rem; }
.inspect { margin-top: 1rem; }
.inspect dl.facts { margin-bottom: 0.75rem; }
.stat .stat-pill { font-size: 1rem; }
.actions input[type="text"] { width: 11rem; }
#validation-status { margin: 0 0 1rem; }

/* Audit log, Raw calls, Released reports (Milestone 4) */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1rem; align-items: end; }
.filters .field { margin: 0; }
.filters .actions { grid-column: 1 / -1; }
.chain { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-top: 0.75rem; }
.hash { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.button.copy { min-height: 36px; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
dl.facts dd.mono { overflow-wrap: anywhere; }
td.mono.wrap, .wrap { overflow-wrap: anywhere; }
tr.in-use td { background: #EFF6FF; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pair > div { border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.75rem; }
.pair > div.in-use { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.file-meta { margin-bottom: 0.75rem; }

@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; }
  .shell { flex-direction: column; }
  .sidebar { width: auto; max-width: none; flex: none; }
  .sidebar-footer { margin-top: 0.5rem; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .main { padding: 1rem; }
  .card { padding: 0.875rem; }
}

/* Sign-in, MFA, step-up, error and home pages (base.html) */
.site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.5rem; background: var(--sidebar); color: var(--sidebar-ink); border-bottom: 3px solid var(--brand-lime); }
.site-header .brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.site-header .brand-logo { width: 200px; max-width: 60vw; }
.site-header .brand-name { font-weight: 600; font-size: 1.0625rem; }
.site-header .brand-lab { color: var(--sidebar-muted); font-size: 0.875rem; }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: var(--focus-on-dark); }
.site-header .button.quiet { background: transparent; color: var(--sidebar-ink); border-color: var(--sidebar-muted); }
.content { padding: 1.5rem 1rem; }
.content:focus { outline: none; }
.card.narrow { max-width: 30rem; margin: 0 auto; }
.site-footer { padding: 1rem 1.5rem; font-size: 0.875rem; color: var(--ink-muted); }
.site-footer p { margin: 0; }
.hint { font-size: 0.875rem; color: var(--ink-muted); margin-top: 0.75rem; }
.alert.alert-error { background: var(--red-bg); color: var(--red-ink); border: 1px solid #FCA5A5; }
.setup-footer { margin-top: 1.25rem; }

/* Inline label + control pairs in header forms (labels stay visible; no placeholder labels). */
.inline-field { display: flex; flex-direction: column; gap: 0.125rem; }
.inline-field label { font-size: 0.8125rem; margin: 0; }
.pager-state { margin: 0.75rem 0 0; }

/* Scrolling table regions are focusable so keyboard users can scroll them. */
.table-wrap:focus-visible { outline-offset: 0; }

/* Reflow at 320 CSS px (WCAG 2.1 SC 1.4.10): wrap long values and pills, stack definition
   lists. Wide data tables scroll inside their own labelled region. */
dl.facts dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pill { white-space: normal; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dd { margin-bottom: 0.375rem; }
  .page-header .actions, .page-header form.actions { width: 100%; }
  .actions input[type="text"], .inline-field, .inline-field input { width: 100%; }
  .site-header, .content { padding-left: 1rem; padding-right: 1rem; }
  .setup-wrap { padding: 1rem 0.75rem; }
}

/* Motion (SC 2.3.3 is AAA; honoured anyway): no animation or transition when the user asks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Import screen (import-pages job (a)) */
.import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1.25rem; }
.import-grid > .card { min-width: 0; }
.hl7-input { font-family: var(--mono); font-size: 0.8125rem; min-height: 12rem; white-space: pre; overflow-x: auto; resize: vertical; }
.dropzone { border: 2px dashed #64748B; border-radius: 8px; padding: 0.875rem; background: var(--page); }
.dropzone.dragging { border-color: var(--primary); background: #EFF6FF; }
.dropzone input[type="file"] { background: var(--card); }
.dropzone .chosen li { overflow-wrap: anywhere; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
label.choice { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; min-height: 40px; margin: 0; }
label.choice input { width: 1.125rem; height: 1.125rem; margin: 0; }
.field.checkbox label { margin: 0; }
.result-region:not(:empty) { margin-top: 1rem; }
.result .alert { margin-bottom: 0.75rem; }
.result h3 { margin-top: 1rem; }
details.ack { margin-top: 0.25rem; }
details.ack > summary { min-height: 36px; font-size: 0.8125rem; }
details.ack pre { margin: 0.25rem 0 0; padding: 0.5rem; background: var(--page); border: 1px solid var(--line); border-radius: 6px; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.assembly-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; }
.assembly-acc { font-weight: 600; }
.assembly-list .detail { flex-basis: 100%; font-size: 0.8125rem; color: var(--ink-muted); }
.part.missing { color: var(--ink-muted); }
.part.have { color: var(--success); font-weight: 600; }
.example-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.filter-card { margin-bottom: 0.75rem; }
.sticky-head { max-height: 70vh; overflow: auto; }
.sticky-head thead th { position: sticky; top: 0; z-index: 1; }
.files-table .col-name { width: 24%; }
td.nowrap { white-space: nowrap; }
@media (max-width: 900px) {
  .import-grid { grid-template-columns: 1fr; }
}