/* Manifest: a drawing register, not a dashboard.
   Graphite navigation, steel-blue actions, ruled white working surfaces.
   Monospace is reserved for part references, quantities and process steps. */

:root {
  color-scheme: light;
  --font-sans: "GeneralSans-Variable", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrainsMono-Variable", ui-monospace, Menlo, monospace;

  /* light zinc ramp, pinned so the surface never flips under a
     prefers-color-scheme: dark host */
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-hover: #f4f4f5;
  --border: rgba(28, 33, 39, .12);
  --border-strong: #858e98;
  --fg: #171717;
  --fg-muted: #666666;
  --fg-subtle: #6b7280;
  --accent: #2563a8;
  --accent-hover: #1d4f87;
  --accent-subtle: #ecf3f9;
  --accent-deep: #14395f;
  --ok: #176749;
  --warn: #b45309;
  --warn-subtle: #fffbeb;

  /* graphite operations chrome: header, navigation rail, auth backdrop */
  --graphite: #1c2127;
  --graphite-2: #262e36;
  --graphite-line: #37424d;
  --graphite-fg: #e7edf2;
  --graphite-muted: #9fadba;
  --rail: #171c21;

  --radius: 4px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-skip: 30;
  --focus: #303943;
  --disabled-bg: #eef0f2;
  --disabled-fg: #606973;
  --gray-9: var(--fg-muted);
  --gray-7: var(--border-strong);
  --warn-deep: #854407;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 28px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; line-height: 1.2; }
p { max-width: 65ch; }
input, select, textarea { font-size: 16px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
::selection { background: #dce7f0; color: var(--fg); }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: var(--z-skip); padding: 12px 18px; background: white; color: var(--fg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.workbench { scroll-margin-top: 72px; }

/* ---- shell ---- */

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: var(--graphite);
  border-bottom: 1px solid var(--graphite-line);
  color: var(--graphite-fg);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;
  text-decoration: none; color: var(--graphite-fg);
}
.logo-mark {
  width: 20px; height: 20px;
  border-radius: 2px;
  background: var(--accent);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.brand { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.brand-ver { margin-left: 7px; font-size: 10.5px; font-weight: 500; color: var(--graphite-muted); letter-spacing: .01em; }
.topbar-sep { color: var(--graphite-line); font-size: 13px; }
.topbar-context {
  font-size: 12.5px; color: var(--graphite-muted); font-family: var(--font-mono);
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-crumb { font-size: 12.5px; color: var(--fg-muted); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* The library uses the same ruled surfaces as the exported sheet. */
.global-nav { display: flex; align-items: center; gap: 16px; }
.global-nav a { color: var(--fg-muted); text-decoration: none; font-size: 12.5px; padding: 8px 0; }
.global-nav a:hover { color: var(--accent); }
.global-nav .global-nav-active { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 6px; }
.materials-page { padding-top: 36px; }
.materials-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.materials-heading h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.materials-heading p { color: var(--fg-muted); margin: 0; max-width: 65ch; }
.materials-page h2 { font-size: 18px; margin: 0 0 8px; }
.materials-page button:disabled { cursor: not-allowed; }
.materials-page :focus-visible, .global-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.materials-page ::selection { background: var(--accent-subtle); color: var(--accent-deep); }
.materials-page input { caret-color: var(--accent); }
.material-search { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.material-search label { font-weight: 600; }
.material-search input { width: 310px; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: 16px var(--font-sans); background: var(--bg); color: var(--fg); }
.material-search span { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.materials-page input::placeholder { color: var(--fg-muted); opacity: 1; }
.material-table-scroll { overflow: auto; max-height: 65vh; border: 1px solid var(--border-strong); border-radius: var(--radius); scrollbar-color: #a1a1aa var(--bg-subtle); }
.material-library-table { width: 100%; min-width: 1220px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.material-library-table th, .material-library-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.material-library-table thead th { position: sticky; top: 0; z-index: 2; font-size: 11px; background: var(--bg-hover); border-bottom-color: var(--border-strong); white-space: nowrap; }
.material-library-table tbody th { position: sticky; left: 0; background: var(--bg); z-index: 1; min-width: 150px; max-width: 200px; overflow-wrap: anywhere; }
.material-library-table thead th:first-child { left: 0; z-index: 3; }
.material-library-table .material-description { min-width: 200px; max-width: 240px; overflow-wrap: anywhere; }
.material-library-table tbody tr:hover > * { background: var(--accent-subtle); }
.material-library-table .material-number { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.material-library-table summary { cursor: pointer; white-space: nowrap; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.material-library-table ul { padding-left: 16px; min-width: 160px; }
.material-library-table a { color: var(--accent); text-underline-offset: 2px; }
.material-row-actions { white-space: nowrap; }
.material-delete-reason { max-width: 28ch; white-space: normal; }
.material-delete-reason p { margin: 4px 0; font-size: 12px; color: var(--fg-muted); }
.material-row-actions button + button { margin-left: 8px; }
@media (min-width: 761px) {
  /* Keep CRUD discoverable when the reference columns need horizontal scroll. */
  .material-library-table th:last-child, .material-library-table td:last-child { position: sticky; right: 0; background: var(--bg); box-shadow: -1px 0 var(--border); }
  .material-library-table thead th:last-child { z-index: 3; background: var(--bg-hover); }
}
.material-pagination, .material-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.material-pagination { justify-content: space-between; font-variant-numeric: tabular-nums; }
.material-editor, .material-delete { padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); margin: 20px 0; }
.material-editor fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.material-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.material-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.material-field input, .material-field select { width: 100%; padding: 9px 10px; min-height: 44px; font: 16px var(--font-sans); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.material-help { color: var(--fg-muted); max-width: 75ch; margin: 16px 0; font-size: 12px; }
.material-empty { padding: 32px 0; }
.material-error { background: #fff1f2; color: #9f1239; padding: 16px; border-radius: 6px; margin: 16px 0; }
.material-error button { margin-left: 16px; }
.material-success { color: #166534; padding: 12px 0; }
.material-danger { background: #b91c1c; color: white; }
.material-danger:hover { background: #991b1b; }
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 48px; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .topbar-left { flex-wrap: wrap; }
  .global-nav { gap: 12px; }
  .materials-heading { flex-direction: column; gap: 16px; }
  .material-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-editor, .material-delete { padding: 18px; }
  .material-search { align-items: flex-start; flex-direction: column; gap: 8px; }
  .material-search input { width: 100%; }
}
@media (max-width: 440px) {
  .material-form-grid { grid-template-columns: 1fr; }
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px 56px; }

/* ---- type ---- */

.micro {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ---- controls: stable sizes, one primary action ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  min-height: 44px; min-width: 44px; padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms cubic-bezier(.2,.8,.2,1), border-color 120ms cubic-bezier(.2,.8,.2,1), color 120ms cubic-bezier(.2,.8,.2,1);
}
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg); color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--fg-subtle); }
.btn-link {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; min-height: 44px; padding: 8px 4px;
  color: var(--accent); font-size: 12.5px; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn-sm { min-height: 44px; padding: 8px 12px; font-size: 12px; border-radius: var(--radius); }
.btn:active:not(:disabled), .project-del:active { filter: brightness(.92); }

/* ---- upload (tool-led: the dropzone is the argument) ---- */

.upload-screen {
  max-width: 720px;
  padding: 40px 0 0;
  text-align: left;
}
.upload-screen .micro { display: block; margin-bottom: 10px; }
.upload-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.upload-sub { color: var(--fg-muted); margin: 12px 0 32px; max-width: 58ch; }

.dropzone {
  padding: 40px 32px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.drag { border-color: var(--fg-muted); background: var(--bg-subtle); }
.dz-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--fg-muted);
  font-size: 15px;
  margin-bottom: 14px;
}
.dropzone h2 { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.dz-sub { color: var(--fg-muted); font-size: 13px; margin: 8px 0 24px; }
.dz-or { display: none; }

.sample-row { margin-top: 14px; font-size: 12.5px; color: var(--fg-subtle); }

/* ---- progress: bounded values without layout animation ---- */

.progress-wrap { max-width: 480px; margin: 120px auto 0; }
.progress-wrap h2 { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.progress-track { height: 2px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); transform-origin: left; transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.progress-wrap .hint, .fp-counts { font-variant-numeric: tabular-nums; }
.fp-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.fp-indeterminate { height: 100%; background: var(--border-strong); }
.hint { color: var(--fg-subtle); font-size: 12px; margin: 10px 0 0; }
.mode-line { color: var(--fg); font-size: 12.5px; margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---- processing (build-log geometry: sequence with status icons) ---- */

.stages { max-width: 480px; margin: 120px auto 0; }
.stages h2 { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.machine-name { color: var(--fg-subtle); font-size: 12px; margin: 0 0 20px; font-family: var(--font-mono); }
.stage-list {
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.stage {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg-subtle);
}
.stage:last-child { border-bottom: none; }
.stage .dot {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.stage.past { color: var(--fg-muted); }
.stage.past .dot { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.stage.current { color: var(--fg); font-weight: 500; }
.stage.current .dot { border-color: var(--accent); border-top-color: transparent; animation: spin 0.7s linear infinite; }

/* ---- failure ---- */

.failure { max-width: 480px; margin: 120px auto 0; }
.failure h2 { font-size: 14px; font-weight: 500; }
.err {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  padding: 14px 16px;
  white-space: pre-wrap; word-break: break-word;
}

/* ---- results: the parse strip is the argument ---- */

.results-page { display: flex; flex-direction: column; min-height: calc(100dvh - 112px); padding-top: 24px; }
.results-page > h1 { margin: 8px 0; }
.results-page > .btn-link { align-self: flex-start; }

.results-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 28px 0 20px;
}
.results-title .micro { display: block; margin-bottom: 6px; }
.results-title h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.job-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
.dl-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* the stat strip: one continuous data line, hairline bounded */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-cell {
  padding: 16px 0 14px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.stat-cell:first-child { border-left: none; padding-left: 0; }
.stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
  margin-top: 4px;
}

/* audit path: events list + exact table */
.results-cols {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 28px;
  padding-top: 20px;
  flex: 1; min-height: 0;
}
.results-col h2 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
  margin: 0 0 10px;
}
.audit-list { list-style: none; padding: 0; margin: 0; }
.audit-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.45; color: var(--fg-muted);
}
.audit-item:last-child { border-bottom: none; }
.audit-dot { flex: none; font-size: 11px; margin-top: 2px; }
.audit-item.ok .audit-dot { color: var(--ok); }
.audit-item.warn .audit-dot { color: var(--warn); }
.audit-item.warn { color: var(--fg); }
.audit-item code { font-family: var(--font-mono); font-size: 11.5px; }

.bom-col { display: flex; flex-direction: column; min-height: 0; }
.bom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bom-head h2 { margin: 0; }
.bom-count { font-size: 12px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.l3-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.l3-filter input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.l3-filter:hover { color: var(--fg); }
.bom-scroll {
  overflow-y: auto;
  flex: 1; min-height: 120px;
  max-height: calc(100vh - 400px);
  overscroll-behavior: contain;
}
.bom-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bom-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.bom-row td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.bom-row:last-child td { border-bottom: none; }
.bom-row:hover td { background: var(--bg-subtle); }
.bom-row.amber td { background: var(--warn-subtle); }
.bom-row.amber:hover td { background: #fdf6e3; }
td.code { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; letter-spacing: 0; }
.qty { font-variant-numeric: tabular-nums; text-align: right; }
.type-cell { font-size: 12px; color: var(--fg-muted); }
.type-cell.fab { color: var(--accent-deep); }

.dl-note { margin-top: 12px; font-size: 12px; color: var(--fg-subtle); }

/* ---- motion (restraint: one fade, one spinner) ---- */

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .results-page, .upload-screen, .stage.current .dot { animation: none !important; }
  .progress-fill { transition: none; }
}

/* phone: the wizard strip, tab strip and the item table must not
   break the page — wrap/scroll within their own containers */
@media (max-width: 560px) {
  .results-page { max-width: 100%; min-width: 0; }
  .wizard { flex-wrap: wrap; row-gap: 6px; }
  .tabs { flex-wrap: wrap; }
  .bom-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bom-scroll { overflow-x: auto; }
  .bom-table { min-width: 620px; }
  .sheet-card { overflow-x: auto; }
  .sheet-card table { min-width: 480px; }
  .sub-assy-table { min-width: 560px; display: block; overflow-x: auto; }
  .btn, .btn-sm { white-space: normal; }
}

@media (max-width: 820px) {
  .results-cols { grid-template-columns: 1fr; gap: 20px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { padding-left: 16px; }
  .stat-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .bom-scroll { max-height: 50vh; }
  .results-page { min-height: 0; }
}

/* ---- v1 wizard: breadcrumb, unit selection, parity, policies, tabs ---- */

.wizard {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--gray-9); margin-bottom: 20px; user-select: none;
}
.wz-step { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; color: var(--gray-9); text-decoration: none; font-weight: 500; }
.wz-step.wz-current { color: var(--fg); }
.wz-step.wz-done { color: var(--accent-deep); }
a.wz-step:hover { color: var(--accent-hover); }
.wz-num {
  display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%; font-size: 10px;
}
.wz-sep { color: var(--gray-7); }
.validate-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 18px 0; max-width: 960px; }
.unit-list { list-style: none; margin: 0; padding: 0; }
.unit-row { border-bottom: 1px solid var(--border); padding: 8px 2px; }
.unit-row label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.unit-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.unit-row:has(input:checked) { background: var(--accent-subtle); }
.unit-name { flex: 1; font-size: 13px; color: var(--fg); }
.unit-counts { font-family: var(--font-mono); font-size: 11px; color: var(--gray-9); font-variant-numeric: tabular-nums; }
.extras-h { margin-top: 22px; font-size: 12px; }
.extras { font-family: var(--font-mono); font-size: 11px; color: var(--warn-deep); background: var(--warn-subtle); border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; }
.parity-block { margin: 14px 0; }
.parity-banner {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; font-weight: 600;
  border-radius: 8px; padding: 10px 14px; margin: 10px 0;
}
.parity-banner.ok { background: var(--accent-subtle); color: var(--accent-deep); border: 1px solid var(--border); }
.parity-banner.diff { background: var(--warn-subtle); color: var(--warn-deep); border: 1px solid #fde68a; }
.run-btn { margin-top: 16px; padding: 10px 22px; font-size: 14px; }
.policies-block { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.policies-table { max-width: 460px; }
.policies-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--gray-9); padding: 6px 8px; }
.policies-table td { padding: 4px 8px; font-size: 13px; }
.policy-input, .plate-input {
  width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 16px; min-height: 44px; background: var(--bg); color: var(--fg);
}
.plate-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.save-cell { padding-top: 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 14px; }
.tab {
  border: none; background: none; cursor: pointer; padding: 8px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; min-height: 44px; letter-spacing: .04em; color: var(--gray-9);
  border-bottom: 2px solid transparent;
}
.tab.tab-active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.tab-badge { display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.summary-pane { max-width: 640px; }
.grand-total { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: 14px; }
.sap-next { margin-top: 22px; }
.sap-steps { max-width: 620px; }
.sap-steps li { margin: 10px 0; }
.partner-note { margin-top: 18px; border-left: 3px solid var(--border); padding-left: 12px; }
.zdr-row { display: flex; gap: 18px; align-items: center; margin-top: 22px; }
.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--border); }
@media (max-width: 860px) { .validate-cols { grid-template-columns: 1fr; } }

/* ---- projects index ---- */
.projects-screen { max-width: 1080px; padding: 40px 0 64px; }
.projects-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.projects-head .micro { display: block; margin-bottom: 6px; }
.projects-head h1, .upload-title { font-size: 26px; margin: 0; }
.project-list { border-top: 2px solid var(--graphite); background: var(--bg); }
.project-row { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--fg); }
.project-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.project-name { font-weight: 600; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.project-sub { font-size: 12px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.project-chevron { color: var(--fg-subtle); font-size: 18px; line-height: 1; }
.projects-empty { min-height: 280px; border-top: 2px solid var(--graphite); padding: 40px 0; text-align: left; color: var(--fg-muted); }
.projects-empty h2 { color: var(--fg); margin: 0 0 8px; font-size: 20px; }
.projects-empty .btn { margin-top: 16px; }
.projects-empty p { margin: 0; }

/* stage badges */
.badge { display: inline-flex; align-items: center; gap: 7px; min-width: 76px; font-size: 12px; font-weight: 500; }
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; pointer-events: none; }
.badge.stage-done { color: var(--ok); }
.badge.stage-failed { color: #b42318; }
.badge.stage-extracting, .badge.stage-root, .badge.stage-scan, .badge.stage-validating, .badge.stage-creating, .badge.stage-backing-up { color: var(--accent); }

/* DISCOVERED FIELDS pane */
.fields-pane .hint { color: var(--ink-2, #6b7280); font-size: 12px; margin: 0 0 10px; }
.fields-table { margin-bottom: 18px; }
.fields-table td.dim { color: var(--ink-2, #6b7280); font-size: 11.5px; }
.fields-table td.vals { color: var(--fg-muted); font-size: 11.5px; max-width: 380px; }
.fields-table tr.field-empty td { color: #b45309; }
.fields-table tr.field-empty td:first-child::after { content: " (declared, empty)"; color: var(--warn); font-size: 10.5px; }
.fields-h { font-size: 12px; letter-spacing: .08em; color: var(--ink-2, #6b7280); margin: 6px 0 8px; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid rgba(127,127,127,.35); border-radius: 999px; padding: 2px 10px; font-size: 11px; color: var(--ink-2, #6b7280); }
/* ---- project row: link + delete ---- */
.project-row .project-row-link {
  display: flex; align-items: center; min-height: 44px;
  width: fit-content; max-width: 100%;
  font-weight: 600; line-height: 1.5;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  color: var(--fg); overflow-wrap: anywhere;
}
.project-row-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.project-del {
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--fg-subtle);
  min-height: 44px; min-width: 64px;
  font: 12px var(--font-sans); padding: 8px 12px; cursor: pointer;
}
.project-row:hover .project-del, .project-del:focus-visible { opacity: 1; pointer-events: auto; }
.project-del:hover { color: #b42318; border-color: #f0b8ae; }
.project-actions { display: flex; align-items: center; gap: 12px; }
.project-confirm { flex-wrap: wrap; max-width: 280px; }
.project-confirm p { flex-basis: 100%; margin: 0; font-size: 12px; }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.project-search { display: flex; align-items: center; gap: 12px; }
.project-search input { min-height: 44px; width: 280px; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; font: 16px var(--font-sans); }
.project-count { margin: 0; color: var(--fg-muted); font: 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.project-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-variant-numeric: tabular-nums; }
.project-loading { min-height: 300px; padding-top: 24px; border-top: 2px solid var(--graphite); }
.project-ref { font-family: var(--font-mono); color: var(--fg-muted); margin-left: 12px; }

/* fieldscan name-anomaly flag (doubled / CUSTOM_-prefixed variants) */
.fields-table .field-note { color: #9a3412; font-size: 10.5px; font-weight: 500; }

/* Drawing metadata tables */
.kwtables { display: flex; flex-direction: column; gap: 8px; }
.kwtable { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; }
.kwtable-name { font-weight: 600; margin-bottom: 4px; }
.kwtable .kv { color: var(--ink-2, #6b7280); margin-right: 4px; }
.chip-warn { color: #9a3412; border-color: #fdba74; background: #fff7ed; }

/* Sheet furniture (tolerance schedule + standard notes) */
.chip-muted { color: var(--ink-2, #6b7280); border-color: var(--line, #e5e7eb); background: transparent; }
.std-note { font-size: 11.5px; color: var(--ink-2, #6b7280); margin: 6px 0 0; max-width: 640px; white-space: pre-wrap; }

/* Embedded sheet diagrams (drawing previews) */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sheet { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; cursor: pointer; padding: 0; text-align: left; font: inherit; }
.sheet:hover { border-color: var(--border-strong); }
.sheet-img-wrap { display: block; position: relative; aspect-ratio: 4 / 3; background: #f7f7f3; }
.sheet-skel { position: absolute; inset: 0; background: var(--bg-hover); pointer-events: none; }
@keyframes sheet-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sheet-skel { animation: none; } }
.sheet.sheet-ok .sheet-skel, .sheet.sheet-err .sheet-skel { display: none; }
.sheet-img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: #f8f8f4; }
.sheet.sheet-ok .sheet-img { opacity: 1; }
.sheet-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-2, #6b7280); pointer-events: none; }
.sheet.sheet-err .sheet-note-err { color: #b91c1c; font-weight: 600; }
.sheet-cap { display: block; padding: 5px 8px; font-size: 10.5px; color: var(--ink-2, #6b7280); border-top: 1px solid var(--line, #e5e7eb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-full { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 10px; margin-bottom: 14px; background: #fff; }
.sheet-full-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sheet-full-actions { display: flex; gap: 8px; }
.sheet-full-img { display: block; width: 100%; height: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; background: #f8f8f4; }
.btn.btn-sm { padding: 4px 10px; font-size: 11.5px; }

/* ---- v4 template (Joseph 'Final Template' 9/7): sales-order inputs
   on Validate + the BOM preview grid on SAP LOAD ---- */
.so-block {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 18px 0 6px;
    padding: 14px 16px;
    border: 1px solid var(--line, #d8dee6);
    border-radius: 10px;
    background: #f7f9fc;
}
.so-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #5b6675;
    min-width: 220px;
}
.so-field input {
    border: 1px solid var(--line, #c9d2dd);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 16px;
    min-height: 44px;
}
.bom-v4 {
    margin: 18px 0;
}
.so-head {
    display: flex;
    gap: 28px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #5b6675;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.bom-v4-scroll {
    overflow-x: auto;
    border: 1px solid var(--line, #d8dee6);
    border-radius: 10px;
    max-height: 460px;
    overflow-y: auto;
}
.bom-v4-table {
    /* separate, not collapse: collapsed borders misrender with sticky
       cells (borders stay painted at the unscrolled position) */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11.5px;
    white-space: nowrap;
}
.bom-v4-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef2f7;
    color: #33404f;
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid #b8c3d0;
    border-right: 1px solid #d5dde6;
    font-size: 10.5px;
    letter-spacing: 0.05em;
}
.bom-v4-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #d8dee6;
    border-right: 1px solid #e7ebf1;
    color: #223;
    font-variant-numeric: tabular-nums;
}
.bom-v4-table td:last-child, .bom-v4-table th:last-child {
    border-right: none;
}
.bom-v4-table :is(th, td):is(:nth-child(3), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) { text-align: right; }
/* zebra striping so blank section-1 rows still read as rows */
.bom-v4-table tbody tr:nth-child(even) td {
    background: #f7f9fc;
}
/* freeze the identifying column while scrolling right — the computed
   columns are blank on section-1 rows by layout, so the row identity
   must stay visible to make sense of them */
.bom-v4-table th:first-child, .bom-v4-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: inset -1px 0 0 #d5dde6;
}
.bom-v4-table th:first-child {
    z-index: 3;
    background: #eef2f7;
}
.bom-v4-table tbody tr:nth-child(even) td:first-child {
    background: #f7f9fc;
}

/* Job assumptions: separate source facts from consequential decisions. */
.assumptions-panel { background: #fff; border: 1px solid #d4d4d8; border-radius: 8px; padding: 24px; margin: 20px 0; }
.assumptions-panel { scroll-margin-top: 80px; }
.assumptions-panel .hint { color: #626262; }
.assumptions-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; margin-top: 24px; }
.assumptions-layout > * { min-width: 0; }
.assumptions-aside { border-left: 1px solid #ddd; padding-left: 24px; }
.assumption-row { border-bottom: 1px solid #e4e4e7; padding: 20px 0; }
.assumption-row:first-child { padding-top: 0; }
.assumption-row h3 { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.assumption-badge { font-size: 11px; font-weight: 500; color: var(--accent-deep); background: var(--accent-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; }
.assumption-row label { display: block; margin: 12px 0 6px; font-size: 13px; }
.assumption-row input:not([type=checkbox]) { display: block; box-sizing: border-box; width: 100%; max-width: 420px; min-height: 44px; font: 16px var(--font-sans); padding: 10px; border: 1px solid var(--border-strong); border-radius: 4px; }
.assumption-confirm { display: flex !important; gap: 10px; align-items: center; }
.assumption-confirm input { flex-shrink: 0; }
.assumptions-panel details { margin-top: 16px; border: 1px solid #ddd; border-radius: 5px; padding: 12px; }
.assumptions-panel summary { cursor: pointer; font-weight: 600; min-height: 44px; padding-block: 10px; }
.assumption-notice { padding: 14px 16px; border-left: 3px solid #b45309; background: #fffbeb; color: #78350f; }
.assumption-notice .btn-link { margin-left: 12px; }
.assumption-issues table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 12px; }
.assumption-issues th, .assumption-issues td { border: 1px solid #ddd; padding: 10px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.assumption-issues th { background: var(--accent-subtle); }
.assumption-issues th:first-child { width: 19%; }
.assumption-issues th:nth-child(2) { width: 23%; }
.assumptions-panel :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Drawing-text review: a reading never replaces an extraction silently,
   and every action here is a decision for this job only. */
.readings-list { display: grid; gap: 12px; margin-top: 12px; }
.reading-row { border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; background: #fcfcfd; }
.reading-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.reading-part { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.reading-field { color: #3f3f46; font-size: 13px; }
.read-band { font-size: 11px; font-weight: 500; border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; background: #fff; color: var(--accent-deep); }
.read-band.band-attention { border-color: #b45309; background: #fffbeb; color: #78350f; }
.reading-source { margin: 10px 0 4px; font-size: 14px; }
.reading-row .hint { margin: 4px 0 0; }
.reading-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.reading-staged { margin: 8px 0 0; font-size: 12.5px; color: #78350f; }
.reading-saved { margin: 8px 0 0; font-size: 12.5px; color: var(--accent-deep); }
.readings-agreed { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #52525b; }
.history-list { display: grid; gap: 10px; margin-top: 10px; }
.history-entry { border-top: 1px solid #e4e4e7; padding-top: 10px; font-size: 13px; }
.history-entry:first-child { border-top: 0; }
.history-head { display: flex; gap: 14px; flex-wrap: wrap; color: #52525b; font-size: 12px; font-family: var(--font-mono); }
.history-changes { margin: 6px 0 0; padding-left: 18px; }
.history-changes li { margin: 2px 0; }
.assumption-issues th:last-child { width: 16%; }

/* Enter-a-value dialog: fixed overlay, focus lands on the input, Escape closes. */
.modal-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(24, 24, 27, 0.45); z-index: 60; }
.modal-dialog { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); }
.modal-dialog h3 { margin: 0 0 8px; }
.modal-dialog .hint { color: #626262; }
.modal-dialog label { display: block; margin: 14px 0 6px; font-size: 13px; }
.modal-dialog input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; font: 16px var(--font-sans); padding: 10px; border: 1px solid var(--border-strong); border-radius: 4px; }
.modal-dialog :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* The approvals dialog owns the critical flow after validation: the same
   reading rows as the tab, plus refundable exit routes (Later, the tab,
   and the tab's count badge). */
.approval-dialog { display: flex; flex-direction: column; max-width: 720px; max-height: 84vh; padding: 0; overflow: hidden; }
.approval-dialog h3 { font-size: 17px; line-height: 1.35; }
.approval-head { padding: 22px 22px 0; }
/* The list scrolls; the title and the exit routes stay put, so the flow's
   three ways out are never below the fold. */
.approval-list { flex: 1 1 auto; overflow-y: auto; display: grid; gap: 12px; padding: 14px 22px 6px; }
.approval-foot { padding: 12px 22px 18px; border-top: 1px solid var(--border); background: var(--bg); }
.approval-foot .modal-actions { margin-top: 0; }
.approval-foot .hint { margin: 10px 0 0; }

/* The drawing check inside the review dialog. The sheet is the tallest
   thing on the surface, so it scrolls inside the dialog and the head
   stays reachable. The dialog widens only in this mode. */
.approval-dialog-peek { max-width: 1000px; }
.drawing-peek { flex: 1 1 auto; overflow: auto; margin: 14px 22px 0; }
.drawing-peek .sheet-full-head { position: sticky; top: 0; background: #fff; padding-bottom: 8px; }
.drawing-peek .sheet-full-img { max-height: 58vh; width: auto; max-width: 100%; margin: 0 auto; }

@media (max-width: 760px) {
    .assumptions-panel { padding: 16px; }
    .assumptions-layout { grid-template-columns: minmax(0, 1fr); }
    .assumptions-aside { grid-row: 1; border-left: 0; padding: 0 0 20px; border-bottom: 1px solid #ddd; }
    .assumption-issues th, .assumption-issues td { padding: 8px 5px; }
    .reading-actions .btn { width: 100%; }
    .modal-actions .btn { flex: 1; }
}

/* ============================================================
   Workspace shell and access screens
   Graphite chrome, steel-blue accent, light workbench.
   ============================================================ */

/* ---- shell geometry: instrument header + operations rail ---- */

.app-shell {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}
/* chrome wraps the header and rail so Elm renders one node; the children
   place themselves in the page grid */
.chrome { display: contents; }

.rail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 56px;
  height: calc(100dvh - 56px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 10px;
  background: var(--rail);
  border-right: 1px solid var(--graphite-line);
}
.rail-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--graphite-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 2px solid transparent;
  border-radius: 4px;
}
.rail-link:hover { background: var(--graphite-2); color: var(--graphite-fg); }
.rail-label-short { display: none; }
.rail-link-active {
  color: #ffffff;
  background: var(--graphite-2);
  border-left-color: var(--accent);
}

.workbench { grid-column: 2; grid-row: 2; min-width: 0; }
.workbench .container { max-width: 1280px; padding: 0 40px 72px; }

/* ---- header controls ---- */

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--graphite-line);
  border-radius: 999px;
  color: var(--graphite-fg);
  font-size: 12px;
  white-space: nowrap;
}
.role-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #6aa9d6; }
.team-switch {
  max-width: 240px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--graphite-line);
  border-radius: 6px;
  background: var(--graphite-2);
  color: var(--graphite-fg);
  font: inherit;
  font-size: 16px;
}
.team-switch option { color: #171717; background: #ffffff; }

.user-menu { position: relative; }
.user-menu-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--graphite-line);
  border-radius: var(--radius);
  color: var(--graphite-fg);
  user-select: none;
}
.user-menu-summary::-webkit-details-marker { display: none; }
.user-menu-initials {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
  background: var(--graphite-2);
  color: var(--graphite-fg);
  font-size: 10.5px;
  font-weight: 600;
}
.user-menu-chev { font-size: 10px; color: var(--graphite-muted); }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 264px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(16, 24, 40, .14);
}
.user-menu-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.user-menu-id span { font-size: 12px; color: var(--fg-muted); overflow-wrap: anywhere; }
.user-menu-link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-menu-link:hover { background: var(--bg-hover); }
.user-menu-signout { color: #b91c1c; }

/* ---- sign in and invitation screens ---- */

.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #f1f3f5;
}
.auth-panel { width: min(440px, 100%); display: flex; flex-direction: column; gap: 20px; }
.auth-brand-row { display: flex; align-items: center; gap: 9px; color: var(--fg); }
.auth-context { margin: 0 0 24px; font: 11px var(--font-mono); color: var(--fg-muted); letter-spacing: .04em; }
.auth-card {
  background: var(--bg);
  border-top: 3px solid var(--graphite);
  border-radius: 0;
  padding: 32px;
  width: min(440px, 100%);
}
.auth-card h1 { margin: 0 0 10px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.auth-lede { margin: 0 0 24px; color: var(--fg-muted); max-width: 60ch; }
.auth-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--accent-subtle);
  color: var(--accent-deep);
  font-size: 12.5px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: 12px; font-weight: 600; }
.auth-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.auth-field input:disabled { background: var(--bg-subtle); color: var(--fg-muted); }
input[aria-invalid=true] { border-color: #b42318; }
.auth-form > .auth-error { margin: 0; }
.auth-error:not(:empty) { margin-bottom: 16px; }
.field-help { font-size: 12px; color: var(--fg-subtle); }
.auth-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 12.5px;
}
.error-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; margin-right: 8px; font-weight: 600; pointer-events: none; }
.auth-foot { margin: 16px 0 0; color: var(--fg-muted); font-size: 12px; max-width: 65ch; }
.auth-foot a { color: var(--accent); }
.auth-actions { display: flex; justify-content: center; margin-top: 8px; }
.btn-block { width: 100%; min-height: 44px; justify-content: center; }

/* ---- team, account, and billing screens ---- */

.ws-page { max-width: 1080px; padding: 40px 0 64px; }
.ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ws-head h1 { margin: 0 0 10px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.ws-head .micro { display: block; }
.ws-lede { margin: 0; color: var(--fg-muted); max-width: 65ch; }
.ws-stack { display: flex; flex-direction: column; gap: 0; }
.ws-card {
  padding: 28px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.ws-card h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.ws-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-top: 2px solid var(--graphite); }
.ws-summary h2 { margin: 6px 0 0; }
.ws-card .hint { font-size: 13px; }
.ws-stack > .ws-card:first-child:not(.ws-summary) { border-top: 2px solid var(--graphite); }
.ws-secondary { padding: 24px 0; border-top: 1px solid var(--border); }
.ws-secondary > summary { cursor: pointer; min-height: 44px; padding-block: 12px; font-weight: 500; }
.ws-secondary .ws-card { border: 0; padding-top: 16px; }
.invite-created { padding: 24px; background: var(--accent-subtle); border: 0; }
.invite-created .ws-callout { padding: 0; border: 0; }
.invite-created h2 { overflow-wrap: anywhere; }
.ws-summary-side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ws-id { margin: 4px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); }
.ws-label { display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); }
.ws-table-scroll { overflow: auto; max-height: 520px; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-subtle);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.ws-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ws-table tr:last-child td { border-bottom: none; }
.ws-table .mono { font-family: var(--font-mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.ws-actions { white-space: nowrap; }
.ws-actions .btn + .btn { margin-left: 6px; }
.ws-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ws-current { font-size: 12px; color: var(--ok); font-weight: 500; }
.ws-field { display: flex; flex-direction: column; gap: 6px; }
.ws-field label { font-size: 12px; font-weight: 600; }
.ws-field input, .ws-field select {
  min-height: 44px;
  min-width: 200px;
  padding: 8px 10px;
  font: 16px var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.ws-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 18px; max-width: 680px; }
.ws-form > .field-row, .ws-form > .ws-field { width: 100%; }
.ws-form .hint { margin: 0; min-height: 40px; }
.field-row .ws-field { flex: 1; min-width: 0; }
.role-select { min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px; background: var(--bg); color: var(--fg); font: 16px var(--font-sans); }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ws-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; margin: 0; }
.ws-def { margin: 0; }
.ws-def dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); }
.ws-def dd { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.role-badge {
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 8px;
  border: 0;
  border-radius: 2px;
  background: var(--bg-hover);
  color: var(--fg-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.role-owner { border-color: #b9d4ea; background: var(--accent-subtle); color: var(--accent-deep); }
.role-admin { border-color: #cfe0ef; background: #f3f8fc; color: var(--accent-hover); }
.role-account_manager { border-color: #d8dee6; background: #f1f4f7; color: #444; }
.copy-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 10px 0; }
.copy-input {
  flex: 1 1 320px; min-width: 0; min-height: 44px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 16px;
  color: var(--fg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.ws-callout {
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  color: var(--accent-deep);
  font-size: 12.5px;
}
.confirm-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.confirm-inline > span { color: var(--fg-muted); font-size: 12px; }
.status-pill {
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.status-active, .status-trialing { border-color: #bbe3d2;
  background: #ecfdf5; color: #0f6b4c; }
.status-past_due, .status-incomplete { border-color: #fde68a; background: var(--warn-subtle); color: var(--warn); }
.status-pill.status-not_configured { border-color: #d8dee6; background: #f4f6f8; color: #55606b; }
.hint-ok { color: #166534; }
.material-readonly { font-size: 12px; color: var(--fg-subtle); }
.btn-danger { background: #b91c1c; color: #ffffff; border-color: #b91c1c; }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.shell-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
}
.shell-banner .btn-link { flex-shrink: 0; }
.shell-banner-ok { background: var(--accent-subtle); color: var(--accent-deep); border: 1px solid #cfe0ef; }
.shell-banner-err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.auth-panel .shell-banner { margin: 0 0 14px; }

/* visible keyboard focus through the chrome */
.topbar-brand:focus-visible,
.rail-link:focus-visible,
.user-menu-summary:focus-visible,
.user-menu-link:focus-visible,
.team-switch:focus-visible,
.auth-page :focus-visible,
.ws-page :focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}
.ws-page :focus-visible, .auth-page :focus-visible, .user-menu-panel :focus-visible { outline-color: var(--focus); }

/* touch: keep hit areas at 44px and inputs at 16px */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .btn, .btn-sm { min-height: 44px; height: auto; }
  .rail-link, .user-menu-link { min-height: 44px; }
  .ws-actions .btn { min-height: 44px; }
  .project-del, .role-select, .team-switch, .user-menu-summary { min-height: 44px; }
}

/* narrow: rail becomes a horizontal operations strip */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .rail {
    position: static;
    height: auto;
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding: 6px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--graphite-line);
  }
  .rail-link { white-space: nowrap; min-height: 44px; border-left: 0; border-bottom: 2px solid transparent; }
  .rail-link-active { border-bottom-color: var(--accent); }
  .workbench { grid-column: 1; grid-row: 3; }
  .workbench .container { padding: 0 20px 56px; }
  .topbar { flex-wrap: wrap; height: auto; min-height: 48px; padding: 6px 14px; gap: 8px; }
  .topbar-left { flex-wrap: wrap; }
  .topbar-context { max-width: 150px; }
  .ws-head { align-items: flex-start; }
  .ws-summary { flex-direction: column; }
  .ws-summary-side { align-items: flex-start; text-align: left; }
  .field-row { flex-direction: column; }
  .ws-field input, .ws-field select { width: 100%; min-width: 0; }
  .ws-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-table { min-width: 560px; }
  .copy-input { flex-basis: 100%; }
  .unit-row label { grid-template-columns: 20px minmax(0, 1fr); }
  .unit-counts { grid-column: 2; }
  .unit-name { overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  .rail-label-long { display: none; }
  .rail-label-short { display: inline; }
  .rail-link { flex-shrink: 0; }
  .projects-screen, .ws-page, .upload-screen { padding-top: 28px; }
  .projects-head { align-items: flex-start; flex-direction: column; margin-bottom: 24px; gap: 16px; }
  .project-toolbar, .project-search { align-items: flex-start; flex-direction: column; width: 100%; gap: 8px; }
  .project-search input { width: 100%; }
  .project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 20px 0; }
  .project-main { grid-column: 1 / -1; }
  .project-actions { justify-content: flex-end; }
  .project-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .project-ref { margin: 0; }
  .project-row-link { font-size: 14px; }
  .dropzone { padding: 28px 20px; }
  .ws-defs { grid-template-columns: 1fr; gap: 20px; }
  .ws-table { min-width: 0; }
  .ws-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ws-table, .ws-table tbody { display: block; }
  .ws-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 16px 0; gap: 8px 12px; border-bottom: 1px solid var(--border); }
  .ws-table tr:last-child { border-bottom: 0; }
  .ws-table td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .ws-table td:first-child, .ws-table td:nth-child(2) { grid-column: 1 / -1; }
  .ws-table .ws-actions { text-align: right; white-space: normal; }
  .ws-table-scroll { max-height: none; overflow: visible; }
  .ws-table .nowrap { white-space: normal; }
  .ws-summary { gap: 16px; }
  .ws-summary-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .ws-summary-side .hint { margin: 0; }
  .ws-summary-side .ws-label { display: none; }
  .ws-head { gap: 8px; }
  .ws-head h1 { font-size: 26px; }
  .team-switch { max-width: min(180px, 42vw); }
  .topbar:has(.team-switch) :is(.topbar-context, .topbar-sep) { display: none; }
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-context { max-width: 150px; font-size: 11px; }
  .auth-card { padding: 28px 24px; }
  .so-field { min-width: 0; width: 100%; }
  .so-field input { width: 100%; }
  .so-head { gap: 8px; }
  .zdr-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 430px) {
  .ws-defs { grid-template-columns: 1fr; }
  .topbar-context { max-width: 125px; }
  .role-chip { display: none; }
  .ws-page { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell, .app-shell *, .auth-page, .auth-page * { animation: none !important; transition: none !important; }
}