/* ============================================================================
   Dispo Extraction — frontend shell styles
   Palette + typography mirror wireframe_reference/ (IBM Plex, #2f5fd0 accent,
   the three field-status colors), but this is a real, API-wired app.
   ========================================================================== */

:root {
  --bg: #eef0f3;
  --panel: #ffffff;
  --ink: #1c2530;
  --ink-soft: #5b6573;
  --ink-faint: #97a0ac;
  --line: #e4e7ec;
  --line-soft: #eef0f3;
  --accent: #2f5fd0;
  --accent-soft: #f3f7fe;
  --accent-line: #dbe6fb;

  --valid: #1c8a55;
  --valid-bg: #eaf6ee;
  --valid-line: #c6e6d2;
  --unknown: #aab2bd;
  --unknown-bg: #f3f5f8;
  --invalid: #cf4434;
  --invalid-bg: #fdeceb;
  --invalid-line: #f3cdca;
  --disagreement: #7c4fc4;
  --disagreement-bg: #f3ecfc;
  --disagreement-line: #e0cef7;
  --warn: #a9711d;
  --warn-bg: #fbf1e3;
  --warn-line: #ecd9b6;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
  --shadow-lg: 0 8px 28px rgba(20, 30, 45, 0.18);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}
button, input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d3d8e0; border-radius: 6px; border: 2px solid #fff; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
.spacer { flex: 1; }
.mono { font-family: var(--mono); }

/* ─── App shell ─────────────────────────────────────────────────────────── */
#app { height: 100vh; display: flex; flex-direction: column; }

header.topbar {
  flex: 0 0 auto; height: 54px; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line);
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.brand .logo i { width: 11px; height: 11px; border-radius: 3px; background: #fff; opacity: 0.92; }
.brand .title { display: flex; flex-direction: column; line-height: 1.12; white-space: nowrap; }
.brand .title b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.brand .title span { font-size: 11px; color: var(--ink-faint); font-weight: 500; }

.tabs {
  display: flex; align-items: center; gap: 2px; background: var(--unknown-bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-left: 6px;
}
.tabs button {
  padding: 6px 13px; border: none; background: transparent; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.tabs button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

.conn {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.conn .dot { width: 7px; height: 7px; border-radius: 50%; }
.conn.ok { background: var(--valid-bg); border: 1px solid var(--valid-line); color: #1c6b45; }
.conn.ok .dot { background: var(--valid); }
.conn.bad { background: var(--invalid-bg); border: 1px solid var(--invalid-line); color: var(--invalid); }
.conn.bad .dot { background: var(--invalid); }

.userchip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.userchip button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.userchip button:hover { background: var(--unknown-bg); }

/* ─── Generic buttons ───────────────────────────────────────────────────── */
.btn {
  padding: 9px 15px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.btn:hover { background: var(--unknown-bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.success { background: var(--valid); border-color: var(--valid); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-faint); }
.btn.ghost:hover { background: var(--invalid-bg); border-color: var(--invalid-line); color: var(--invalid); }

/* ─── Main panes ────────────────────────────────────────────────────────── */
main { flex: 1 1 0; display: flex; min-height: 0; position: relative; }

.center-msg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px; font-weight: 500; text-align: center; padding: 24px;
}
.center-msg.error { color: var(--invalid); }

/* ─── Pane resizers ─────────────────────────────────────────────────────── */
/* A 5px grab strip straddling the seam between two panes. Negative margins let
   it overlap the neighbouring pane borders, so the 1px border stays the visual
   divider and no extra gap appears in the layout. */
.pane-resizer {
  flex: 0 0 5px; margin: 0 -2px; z-index: 10;
  cursor: col-resize; background: transparent;
  border: none; padding: 0; align-self: stretch;
  transition: background 0.12s ease;
}
.pane-resizer:hover, .pane-resizer.dragging { background: var(--accent-line); }

/* While dragging: kill text selection everywhere and stop the native-PDF
   iframe from swallowing pointer events once the cursor crosses it. */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }

/* Inbox (left) */
aside.inbox {
  flex: 0 0 var(--inbox-w, 288px); background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.pane-head {
  flex: 0 0 auto; padding: 14px 16px 11px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between;
}
.pane-head .label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: #687180;
}
.pane-head .count { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.inbox .list { flex: 1; overflow-y: auto; min-height: 0; }

.inbox-item {
  width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.inbox-item:hover { background: #fafbfc; }
.inbox-item.active { background: var(--accent-soft); }
.inbox-item .bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
}
.inbox-item.active .bar { background: var(--accent); }
/* Remove-from-review affordance — hidden until the row is hovered/active. */
.inbox-item .inbox-remove {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--ink-faint);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer; opacity: 0; transition: opacity 0.12s ease; z-index: 1;
}
.inbox-item:hover .inbox-remove, .inbox-item.active .inbox-remove { opacity: 1; }
.inbox-item .inbox-remove:hover { background: var(--invalid-bg); border-color: var(--invalid-line); color: var(--invalid); }
.inbox-item .body { display: flex; flex-direction: column; gap: 5px; min-width: 0; width: 100%; }
.inbox-item .row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-item .from { font-size: 12.5px; font-weight: 600; color: #2b3440; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item .time { font-size: 11px; color: var(--ink-faint); font-weight: 500; flex: none; }
.inbox-item .subject {
  font-size: 12px; color: var(--ink-soft); line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.inbox-item .row3 { display: flex; align-items: center; gap: 7px; margin-top: 1px; }

/* doc-type chip */
.chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  background: #eef1f6; color: #44505f; white-space: nowrap;
}
.chip.unknown { background: var(--unknown-bg); color: #76808d; }
/* provenance: a use-case profile, the layout a part was extracted with, and
   the field-name contract version it was emitted in */
.chip.profile { background: var(--accent-soft); color: var(--accent); }
.chip.layout { background: #f3f0e6; color: #6b5d2e; font-weight: 500; }
.chip.version { background: #eef1f6; color: #76808d; font-weight: 500; }

/* status dot + label */
.status { display: inline-flex; align-items: center; gap: 5px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; }
.status .txt { font-size: 11px; font-weight: 500; color: #76808d; }
.s-validated .dot, .s-valid .dot { background: var(--valid); }
.s-needs_review .dot, .s-invalid .dot { background: var(--invalid); }
.s-partial .dot, .s-unknown .dot { background: var(--unknown); }
.s-approved .dot { background: var(--accent); }
.s-disagreement .dot { background: var(--disagreement); }

/* Workarea (middle + right) */
section.workarea { flex: 1 1 0; display: flex; min-width: 0; min-height: 0; }

.viewer { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f8fa; }
.viewer .vhead {
  flex: 0 0 auto; padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px; background: var(--panel);
}
.viewer .vhead .top { display: flex; align-items: center; gap: 10px; }
.viewer .vhead .via { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .vhead .modality { font-size: 11px; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.part-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.part-switch button {
  padding: 5px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.part-switch button.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.viewer .vbody { flex: 1; overflow-y: auto; min-height: 0; padding: 20px; display: flex; flex-direction: column; }
/* Summary / email-envelope cards keep their natural height (don't let the flex
   column squish them); the PDF / attachment viewers below fill the height. */
.viewer .vbody > .card { flex: 0 0 auto; }
.card {
  max-width: 720px; margin: 0 auto; border: 1px solid #e9ecf1; border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
}
.card .card-head { padding: 14px 18px; border-bottom: 1px solid #f0f2f5; display: flex; flex-direction: column; gap: 6px; }
.card .kv { display: flex; gap: 10px; font-size: 12.5px; }
.card .kv .k { flex: 0 0 96px; color: var(--ink-faint); font-weight: 500; }
.card .kv .v { color: #2b3440; font-weight: 500; min-width: 0; }
.card .card-body { padding: 18px; }
.placeholder-doc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px; color: var(--ink-faint); text-align: center;
}
.placeholder-doc .glyph {
  width: 64px; height: 80px; border-radius: 8px; border: 1.5px dashed #c2c9d3;
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: 12px; color: #aab2bd; background: repeating-linear-gradient(135deg, #f4f6f9 0 14px, #fbfcfd 14px 28px);
}
.badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
}
.badge.scan { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); }

/* Fields editor (right) */
/* min-width:0 is load-bearing: without it the flex item's automatic minimum size
   is its min-content width, so a wide .obj-tbl (e.g. an 11-column consignments
   table) forces the pane far past its basis and squeezes the viewer. */
.fields {
  flex: 0 0 var(--fields-w, 408px); min-width: 0;
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.fields .fhead {
  flex: 0 0 auto; padding: 13px 18px 12px; border-bottom: 1px solid var(--line-soft);
  background: #fbfcfd; display: flex; flex-direction: column; gap: 10px;
}
.fields .fhead .top { display: flex; align-items: center; gap: 10px; }
/* Wraps rather than clipping the CHICARGO DB toggle when the pane is narrowed. */
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.legend .status .txt { color: #76808d; }
.fields .flist { flex: 1; overflow-y: auto; min-height: 0; padding: 14px 18px; }
/* Inset to the 18px gutter of .fhead/.flist so the rounded corners don't sit
   flush against the panel border (unlike the full-bleed .gt-status below it). */
.quality-banner {
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  padding: 6px 12px;
  font-size: 12px;
  margin: 10px 18px 8px;
  border-radius: 4px;
  color: var(--ink-soft);
}

.field-row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.field-row .frow1 { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.field-row label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.tag.s-valid { color: var(--valid); background: var(--valid-bg); }
.tag.s-invalid { color: var(--invalid); background: var(--invalid-bg); }
.tag.s-unknown { color: #76808d; background: var(--unknown-bg); }
.tag.s-disagreement { color: var(--disagreement); background: var(--disagreement-bg); }
.field-row input.value {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--ink); background: var(--panel); outline: none;
}
.field-row input.value:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }
.field-row.is-invalid input.value { border-color: var(--invalid-line); }
.field-row.is-valid input.value { border-color: var(--valid-line); }
.field-row.is-disagreement input.value { border-color: var(--disagreement-line); }
.field-row .meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; min-height: 14px; }
.field-row .meta .conf { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); }
.field-row .meta .hw { font-size: 10px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
/* Why a field is flagged: hover for the rule messages / quality reason. */
.field-row .meta .vmsg { font-size: 10px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px dashed var(--warn-line); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; cursor: help; }
.field-row .revert { font-size: 10.5px; color: var(--ink-faint); background: none; border: none; cursor: pointer; font-weight: 600; padding: 0; }
.field-row .revert:hover { color: var(--ink-soft); }

/* select inputs (boolean / enum scalars) match the text input chrome */
.field-row select.value {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--ink); background: var(--panel); outline: none; cursor: pointer;
}
.field-row select.value:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }

/* ── Array chip editor (Task 1) ── */
.value-array { display: flex; flex-direction: column; gap: 8px; }
.value-array .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.value-array .chips-empty { font-size: 11.5px; color: var(--ink-faint); font-style: italic; }
.chip-item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 5px 3px 9px; border-radius: 6px; border: 1px solid var(--line);
  background: #fbfcfd; font-size: 12px; color: var(--ink); line-height: 1.3;
}
.chip-item .chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.chip-item .chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: none; border-radius: 4px; cursor: pointer;
  background: #e9edf3; color: #76808d; font-size: 10px; font-weight: 700; padding: 0; flex: none;
}
.chip-item .chip-x:hover { background: var(--invalid-bg); color: var(--invalid); }
.chip-item.struck { background: var(--invalid-bg); border-color: var(--invalid-line); }
.chip-item.struck .chip-text { text-decoration: line-through; color: var(--invalid); opacity: 0.7; }
.chip-item.struck .chip-x { background: #f3d4d0; color: var(--invalid); }
.chip-item.struck .chip-x:hover { background: var(--valid-bg); color: var(--valid); }
.chip-item.added { background: var(--accent-soft); border-color: var(--accent-line); }
.chip-item.added .chip-text { color: var(--accent); font-weight: 600; }
.chip-add { display: flex; gap: 6px; align-items: center; }
.chip-add-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
  font-size: 12.5px; color: var(--ink); background: var(--panel); outline: none;
}
.chip-add-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }
.chip-add-btn {
  flex: none; border: 1px solid var(--line); background: var(--panel); border-radius: 7px;
  padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.chip-add-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip-note { font-size: 10.5px; color: var(--ink-faint); font-style: italic; }

/* ── Object-array table editor ── */
/* max-content keeps columns readable at any pane width; .nested-body scrolls. */
.obj-tbl { width: 100%; min-width: max-content; border-collapse: collapse; }
.obj-tbl-th {
  text-align: left; padding: 5px 8px; font-size: 10.5px; font-weight: 600;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.obj-tbl-th-num { width: 28px; text-align: center; color: var(--ink-faint); }
.obj-tbl-th-act { width: 30px; }
.obj-tbl-td { padding: 3px 4px; vertical-align: middle; }
.obj-tbl-td-num { text-align: center; font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); }
.obj-tbl-td-act { text-align: center; }
.obj-tbl-input {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px;
  font-size: 12px; color: var(--ink); background: var(--panel); outline: none;
}
.obj-tbl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 95, 208, 0.12); }
.obj-tbl-row.struck .obj-tbl-td { background: var(--invalid-bg); }
.obj-tbl-struck-val {
  text-decoration: line-through; color: var(--invalid); opacity: 0.7;
  font-size: 12px; padding: 5px 7px; display: block;
}
.obj-tbl-row.added .obj-tbl-td { background: var(--accent-soft); }
.obj-tbl-row.added .obj-tbl-input { border-color: var(--accent-line); }
.obj-tbl-row-action {
  width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); cursor: pointer; font-size: 11px; font-weight: 700;
  color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.obj-tbl-remove:hover { background: var(--invalid-bg); border-color: var(--invalid-line); color: var(--invalid); }
.obj-tbl-undo:hover { background: var(--valid-bg); border-color: var(--valid-line); color: var(--valid); }
.obj-tbl-add-btn {
  align-self: flex-start; border: 1px solid var(--line); background: var(--panel);
  border-radius: 7px; padding: 5px 12px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; margin-top: 2px;
}
.obj-tbl-add-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ── Nested object group (Task 2) ── */
.nested-group { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fbfcfd; }
.nested-head {
  padding: 7px 11px; background: #f1f4f9; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.nested-body { padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; overflow-x: auto; }
.sub-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; }
.sub-row .sub-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-row .sub-input {
  width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
  font-size: 12.5px; color: var(--ink); background: var(--panel); outline: none;
}
.sub-row select.sub-input { cursor: pointer; }
.sub-row .sub-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }
.sub-row.is-derived .sub-label { color: var(--ink-faint); }
.sub-row .sub-derived {
  font-size: 12px; color: var(--ink-faint); font-family: var(--mono);
  padding: 6px 9px; border: 1px dashed var(--line); border-radius: 7px; background: var(--line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fields .ffoot {
  flex: 0 0 auto; padding: 13px 18px; border-top: 1px solid var(--line-soft); background: var(--panel);
  display: flex; align-items: center; gap: 12px;
}
.ffoot .counts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ffoot .counts b { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.ffoot .counts span { font-size: 10.5px; color: var(--ink-faint); }

/* ─── Ground Truth toggle switch + inline annotations ───────────────────── */
.gt-switch { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; margin-left: auto; }
.gt-switch-track {
  position: relative; width: 28px; height: 16px; border-radius: 8px;
  background: var(--line); transition: background 0.2s;
}
.gt-switch-track.on { background: var(--accent); }
.gt-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.gt-switch-track.on .gt-switch-thumb { transform: translateX(12px); }
.gt-switch-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); transition: color 0.2s;
}
.gt-switch-label.on { color: var(--accent); }
.gt-annotation {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 5px;
}
.gt-annotation .gt-ann-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 4px; background: var(--unknown-bg); color: var(--ink-faint);
}
.gt-annotation .gt-ann-value {
  font-size: 11px; font-weight: 600; font-family: var(--mono);
  padding: 2px 7px; border-radius: 5px;
}
.gt-annotation.gt-match .gt-ann-value { color: var(--valid); background: var(--valid-bg); }
.gt-annotation.gt-mismatch .gt-ann-value { color: var(--invalid); background: var(--invalid-bg); }
.gt-annotation.gt-info .gt-ann-value { color: var(--ink-faint); background: var(--unknown-bg); }
.gt-status {
  padding: 6px 12px; font-size: 11px; color: var(--ink-faint);
  background: var(--unknown-bg); border-bottom: 1px solid var(--line-soft);
}
.gt-status.err { color: var(--invalid); background: var(--invalid-bg); }

/* ─── Schemas view ──────────────────────────────────────────────────────── */
aside.schema-list { flex: 0 0 268px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.schema-list .list { flex: 1; overflow-y: auto; min-height: 0; padding: 8px; }
.schema-item {
  width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
  border-radius: 10px; padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column;
  gap: 2px; margin-bottom: 4px;
}
.schema-item:hover { background: #fafbfc; }
.schema-item.active { background: var(--accent-soft); border-color: var(--accent-line); }
.schema-item .r1 { display: flex; align-items: center; gap: 8px; width: 100%; }
.schema-item .title { font-size: 12.5px; font-weight: 600; color: #2b3440; margin-top: 7px; }
.schema-item .sub { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.pending-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 2px 7px; border-radius: 20px;
}

.schema-detail { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f8fa; }
.schema-detail .dhead { flex: 0 0 auto; padding: 16px 22px; border-bottom: 1px solid #e7eaef; background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.schema-detail .dhead .titlerow { display: flex; align-items: flex-start; gap: 14px; }
.schema-detail h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.schema-detail .id { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.schema-detail .hint { font-size: 12.5px; color: #687180; line-height: 1.5; max-width: 640px; }
.schema-detail .dbody { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 22px; }
.schema-detail .inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.pending-box {
  border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 10px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 8px;
}
.pending-box .h { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.pending-box .corr { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.pending-box .corr .fk { font-family: var(--mono); font-weight: 600; color: #3a434f; }
.pending-box .corr .mod { font-size: 10px; color: #8b94a0; text-transform: uppercase; letter-spacing: 0.04em; }
.pending-box .corr .before { font-family: var(--mono); color: var(--invalid); text-decoration: line-through; }
.pending-box .corr .after { font-family: var(--mono); color: #1c6b45; font-weight: 600; }

.schema-field { border: 1px solid #e7eaef; background: var(--panel); border-radius: 12px; overflow: hidden; }
.schema-field .sfhead { padding: 11px 14px; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; gap: 10px; background: #fbfcfd; }
.schema-field .sfhead .fk { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #2b3440; }
.schema-field .sfhead .lb { font-size: 12.5px; color: var(--ink-soft); }
.schema-field .sfhead .metalabel { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.schema-field .sfbody { padding: 13px 16px; display: flex; flex-direction: column; gap: 10px; }
.schema-field .desc { font-size: 12.5px; color: #3a434f; line-height: 1.5; white-space: pre-wrap; }
.kind {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; background: #eef1f6; color: #5b6573;
}

.proposal {
  border: 1px solid var(--valid-line); background: #f1f9f4; border-radius: 9px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.proposal.pending { border-color: var(--accent-line); background: var(--accent-soft); }
.proposal .h { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--valid); }
.proposal.pending .h { color: var(--accent); }
.proposal .text { font-size: 12.5px; color: #2b3440; line-height: 1.5; }
.proposal .why { font-size: 11px; color: #5b8a6e; line-height: 1.45; }
.proposal .actions { display: flex; gap: 8px; margin-top: 2px; align-items: center; }
.proposal .st { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.proposal .st.accepted { color: var(--valid); }
.proposal .st.rejected { color: var(--invalid); }

/* ─── Login overlay ─────────────────────────────────────────────────────── */
.login-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 28px; }
.login-card h1 { font-size: 18px; margin: 0 0 4px; }
.login-card p { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 20px; }
.login-card label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.login-card input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; outline: none; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }
.login-card .err { font-size: 12px; color: var(--invalid); margin-bottom: 12px; min-height: 16px; }
.login-card .btn { width: 100%; justify-content: center; display: flex; }

/* ─── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  /* Must outrank .progress-overlay (100): modals raise toasts, and that overlay
     blurs anything behind it. */
  font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200;
  display: flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.show.start { transform: translateX(-50%) translateY(8px); }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd08f; }
.toast.error .dot { background: var(--invalid); }

/* ─── Upload control ────────────────────────────────────────────────────── */
.upload { display: flex; align-items: center; gap: 8px; }.upload .upload-type {
  width: 100%; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}.upload .upload-type + .upload-type { margin-top: 4px; }.empty-hint { padding: 28px; text-align: center; color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; }

/* ─── Source viewer (locally-browsed PDF / email bytes) ─────────────────── */
/* Wraps a native-PDF / image / sandboxed-HTML preview. Fills the .vbody flex
   column so the iframe gets a real height (iframes have no intrinsic size). */
.source-pdf {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid #e9ecf1; border-radius: 12px; overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow);
}
.source-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid #f0f2f5; background: #fbfcfd;
}
.source-toolbar .fname {
  font-size: 11.5px; color: #44505f; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-frame { flex: 1 1 0; width: 100%; min-height: 360px; border: none; background: #525659; }
.img-wrap { flex: 1 1 0; min-height: 0; overflow: auto; padding: 14px; background: #f4f6f9; text-align: center; }
.img-wrap img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); }

/* Annotated pouch scan: rendered page image with handwriting bounding boxes
   (LAT + stamp) overlaid. Boxes are positioned with page-relative percentages
   so they track the image as it scales. */
.scan-stage {
  flex: 1 1 0; min-height: 0; overflow: auto; padding: 14px; background: #f4f6f9;
  display: flex; align-items: flex-start; justify-content: center;
}
/* image+overlay wrapper shrinks to the rendered image so the overlay aligns. */
.scan-frame { position: relative; display: inline-block; max-width: 100%; transition: transform 0.15s ease; }
.scan-frame .scan-img {
  display: block; max-width: 100%; height: auto;
  border-radius: 4px; box-shadow: var(--shadow);
}
.scan-overlay { position: absolute; inset: 0; pointer-events: none; }

/* Viewer-only rotation (app.js rotateScan). The FRAME turns, not the image, so
   the bbox overlay turns with it and no box_2d coordinate needs transforming.
   A transform reserves no layout space, so quarter turns need the .scan-rotor
   wrapper to hold the swapped footprint: with rotor width W and the page's
   aspect ratio `ar` (--page-ar, width/height), a frame of width W·ar is W tall,
   so once turned it is exactly W wide and W·ar tall — hence the inverted
   aspect-ratio below. Half turns keep their footprint and need no wrapper. */
.scan-rotor { position: relative; width: 100%; display: flex; justify-content: center; }
.scan-rotor.quarter { aspect-ratio: 1 / var(--page-ar); }
.scan-rotor.quarter .scan-frame {
  position: absolute; top: 50%; left: 50%; width: calc(100% * var(--page-ar)); max-width: none;
}
.scan-frame.rot-90 { transform: translate(-50%, -50%) rotate(90deg); }
.scan-frame.rot-180 { transform: rotate(180deg); }
.scan-frame.rot-270 { transform: translate(-50%, -50%) rotate(270deg); }
/* Counter-rotate box labels so their text still reads horizontally. */
.scan-frame.rot-90 .bbox-label { transform: translateY(-100%) rotate(-90deg); }
.scan-frame.rot-180 .bbox-label { transform: translateY(-100%) rotate(180deg); }
.scan-frame.rot-270 .bbox-label { transform: translateY(-100%) rotate(90deg); }
.rot-controls { display: inline-flex; gap: 4px; align-items: center; }
.rot-controls .rot-btn { font-size: 14px; line-height: 1; padding: 3px 7px; }
.rot-controls .rot-angle { font-size: 10.5px; font-weight: 700; padding: 4px 7px; }
.bbox {
  position: absolute; box-sizing: border-box; border: 2.5px solid var(--accent);
  border-radius: 3px; background: rgba(47, 95, 208, 0.08);
}
.bbox.lat { border-color: #1f9d57; background: rgba(31, 157, 87, 0.10); }
.bbox.stamp { border-color: #2f5fd0; background: rgba(47, 95, 208, 0.10); }
/* Bbox-crop self-consistency check (extraction_core/bbox_check.py):
   .field = scalar fields like mawb/gross_weight_kg; .consignment = per-row
   receipt fields (awb/weight_kg). Distinct colors from lat/stamp so all box
   kinds stay visually distinguishable on one page. */
.bbox.field { border-color: #b5651d; background: rgba(181, 101, 29, 0.10); }
.bbox.consignment { border-color: #8449c4; background: rgba(132, 73, 196, 0.10); }
.bbox-label {
  position: absolute; top: -2px; left: -2px; transform: translateY(-100%);
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.02em;
  padding: 2px 5px; border-radius: 4px 4px 4px 0; color: #fff; white-space: nowrap;
}
.bbox.lat .bbox-label { background: #1f9d57; }
.bbox.stamp .bbox-label { background: #2f5fd0; }
.bbox.field .bbox-label { background: #b5651d; }
.bbox.consignment .bbox-label { background: #8449c4; }
.scan-legend { display: inline-flex; gap: 6px; align-items: center; }
.scan-legend.muted { color: #8a94a3; font-size: 11px; }
.scan-legend .legend-item {
  font-size: 10px; font-weight: 700; color: #fff; padding: 2px 7px; border-radius: 999px;
}
.scan-legend .legend-item.lat { background: #1f9d57; }
.scan-legend .legend-item.stamp { background: #2f5fd0; }
.scan-legend .legend-item.field { background: #b5651d; }
.scan-legend .legend-item.consignment { background: #8449c4; }
.source-toolbar .page-count {
  font-size: 11px; color: var(--ink-faint); font-weight: 600; white-space: nowrap;
}

/* Multi-page parts (e.g. a 2-3 page Anlieferquittung) stack every page
   vertically inside .scan-stage instead of showing just one centered image.
   Each page reuses .scan-frame/.scan-img/.scan-overlay; .scan-page-sep is a
   lightweight label between pages, only rendered when there's more than one. */
.scan-stage.scan-pages { flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; }
.scan-page-block { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.scan-page-sep {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--line-soft); padding: 3px 10px; border-radius: 999px;
}

/* Plain-text attachment fallback */
.source-text {
  flex: 1 1 0; min-height: 0; overflow: auto; margin: 0; padding: 16px 18px;
  border: 1px solid #e9ecf1; border-radius: 12px; background: var(--panel);
  font-size: 12px; line-height: 1.55; color: #2b3440; white-space: pre-wrap;
  word-break: break-word; box-shadow: var(--shadow);
}

/* Email envelope (the "cover" view) — plain-text body + attachment chips */
.email-body {
  padding: 16px 18px; font-size: 12.5px; line-height: 1.6; color: #2b3440;
  white-space: pre-wrap; word-break: break-word; border-bottom: 1px solid #f0f2f5;
  max-height: 360px; overflow: auto;
}
.email-body .muted { color: var(--ink-faint); font-style: italic; }

.attach-bar { padding: 13px 18px; display: flex; flex-direction: column; gap: 8px; }
.attach-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #687180;
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--panel); border-radius: 9px;
  padding: 9px 12px; cursor: pointer; color: var(--ink); transition: background 0.12s ease, border-color 0.12s ease;
}
.attach-chip:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.attach-chip .mono { font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .doc-glyph {
  flex: 0 0 auto; width: 22px; height: 26px; border-radius: 4px; background: #eef1f6;
  border: 1px solid #dde2ea; position: relative;
}
.attach-chip .doc-glyph::after {
  content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px;
  background: #fff; border-left: 1px solid #dde2ea; border-bottom: 1px solid #dde2ea;
  border-bottom-left-radius: 3px;
}
.attach-chip .open { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ─── Processing Progress Overlay ───────────────────────────────────────── */
.progress-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 37, 48, 0.35); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}
.progress-overlay.show { opacity: 1; }

.progress-card {
  background: var(--panel); border-radius: 16px; padding: 28px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); min-width: 340px; max-width: 440px;
}

.progress-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}

.progress-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

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

.progress-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
}

.progress-stages {
  display: flex; flex-direction: column; gap: 0;
}

.progress-stage {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  opacity: 0; animation: fadeSlideIn 0.3s ease forwards;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-stage:first-child { border-top: none; }

.progress-stage-indicator {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; position: relative;
}

.progress-stage.active .progress-stage-indicator {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.2);
  animation: pulse 1.2s ease infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(47, 95, 208, 0.08); }
}

.progress-stage.done .progress-stage-indicator {
  background: var(--valid);
}

.progress-stage-label {
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}

.progress-stage.active .progress-stage-label {
  color: var(--ink); font-weight: 600;
}

.progress-stage.done .progress-stage-label {
  color: var(--ink-faint);
}

/* ─── Schema authoring (frontend/assets/schemas*.js) ─────────────────────── */
.chip.draft { background: #fdf3e0; color: #8a5a10; }
.chip.shadow { background: #eef1f6; color: #5b6573; font-weight: 500; }
.chip.dirty { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip.ok { background: var(--valid-bg); color: var(--valid); }
.schema-list .pane-head .btn { margin-left: auto; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid #e7eaef; margin: 4px -22px -16px; padding: 0 22px; }
.tabs .tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 12.5px; color: var(--ink-faint); cursor: pointer; font-weight: 600; }
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.vbanner { font-size: 12px; border-radius: 10px; padding: 8px 12px; border: 1px solid; }
.vbanner.ok { background: var(--valid-bg); border-color: var(--valid-line, #cfe8d8); color: var(--valid); }
.vbanner.warn { background: #fff8e6; border-color: #f1dfae; color: #7a5a10; }
.vbanner.err { background: var(--invalid-bg); border-color: var(--invalid-line); color: var(--invalid); }
.vbanner summary { cursor: pointer; font-weight: 600; }
.vbanner ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.vbanner li.warning { color: #7a5a10; }
.vbanner li.error { color: var(--invalid); }
.vbanner .mono { font-family: var(--mono); font-size: 11px; opacity: 0.85; }

.schema-field.editing { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.08); }
.schema-field.busy { opacity: 0.6; pointer-events: none; }
.schema-field .sfactions { display: flex; gap: 4px; align-items: center; margin-left: 8px; }
.schema-field .fk.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.schema-field .fk.linklike:hover { color: var(--accent); }
.kind.rule { background: var(--valid-bg); color: var(--valid); }
.kind.deriv { background: #eef1f6; color: #5b6573; }
.why-agent { font-size: 11.5px; color: #5b6573; background: #f7f8fa; border-radius: 8px; padding: 8px 10px; line-height: 1.45; }
.why-agent .h { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.decisions { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #3a434f; line-height: 1.5; }

.nested { border: 1px dashed #dfe3ea; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.nested-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.nested-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.nested-row .fk { font-weight: 600; color: #2b3440; }
.nested-row .lb { color: var(--ink-soft); }

.fe { display: flex; flex-direction: column; gap: 12px; }
.fe-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.fe-label { font-size: 12px; font-weight: 600; color: #3a434f; padding-top: 7px; }
.fe-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fe-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid #d9dee6; border-radius: 8px; background: #fff; color: var(--ink); }
.fe-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 95, 208, 0.12); }
.fe-input.mono, .mono { font-family: var(--mono); }
.fe-textarea { resize: vertical; line-height: 1.5; }
.fe-help { font-size: 11px; color: var(--ink-faint); line-height: 1.4; }
.fe-keyerr:not(:empty) { font-size: 11px; color: var(--invalid); line-height: 1.4; margin-top: 4px; }
.fe-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #3a434f; cursor: pointer; }
.fe-check.sm { font-size: 11.5px; }
.fe-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.fe-adv { border: 1px solid #eceff3; border-radius: 10px; padding: 8px 12px; }
.fe-adv summary { font-size: 12px; font-weight: 600; color: var(--ink-faint); cursor: pointer; }
.fe-adv[open] summary { margin-bottom: 10px; }
.fe-adv .fe-row { margin-bottom: 10px; }

.progress-stages .stage { font-size: 11.5px; color: #5b6573; padding: 2px 0; }
.result-part { display: flex; flex-direction: column; gap: 8px; }
.result-grid { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 14px; align-items: start; }
.result-grid:has(> :only-child) { grid-template-columns: 1fr; }
.result-preview { width: 100%; border: 1px solid #e7eaef; border-radius: 8px; background: #fff; }
.result-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.result-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); padding: 4px 8px; border-bottom: 1px solid #e7eaef; }
.result-table td { padding: 5px 8px; border-bottom: 1px solid #f0f2f5; vertical-align: top; word-break: break-word; }
.result-table tr.invalid td { background: var(--invalid-bg); }
.result-table tr.unknown td { background: #fbfbf6; }
.result-table .st { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.result-table .st.valid { color: var(--valid); }
.result-table .st.invalid { color: var(--invalid); }
.result-table .st.unknown, .result-table .st.disagreement { color: #8a5a10; }
.run summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12px; padding: 6px 0; }
.run[open] summary { margin-bottom: 8px; }

.rev-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
.rev-row:last-child { border-bottom: 0; }
.rev-row .lb { color: #3a434f; }

.modal { cursor: default; }
.modal-card { max-width: 720px; min-width: 520px; max-height: 88vh; display: flex; flex-direction: column; }
.modal-body { overflow: auto; min-height: 0; }
.modal-footer { margin-top: 16px; }
#derive-status.error { color: var(--invalid); font-weight: 600; }
pre.json { font-family: var(--mono); font-size: 11px; line-height: 1.45; background: #f7f8fa; border-radius: 8px; padding: 12px; max-height: 60vh; overflow: auto; margin: 0; }

/* ─── Profile editor (schemas_profile.js) ─────────────────────────────────── */
.kind.origin { text-transform: none; letter-spacing: 0; font-weight: 500; background: #f3f0e6; color: #6b5d2e; }
.kind.origin.inherits { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.kind.origin.missing { background: #fff8e6; color: #7a5a10; }
.kind.profile-use { text-transform: none; letter-spacing: 0; background: var(--accent-soft); color: var(--accent); }
.chip.linklike { border: 0; cursor: pointer; font: inherit; }
.chip.linklike:hover { text-decoration: underline; }
.map-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.map-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); padding: 4px 8px; border-bottom: 1px solid #e7eaef; }
.map-table td { padding: 5px 8px; border-bottom: 1px solid #f0f2f5; vertical-align: top; }
.map-table td:first-child { width: 28%; font-weight: 600; color: #2b3440; }
.map-table td:last-child { width: 80px; }
.map-table .fe-input.sm { padding: 4px 8px; font-size: 11.5px; width: 100%; }