/* Self-hosted fonts — zero external origins (spec §4.4). Body type is the
   system stack (docs look); the mono face is self-hosted for stable numerics. */
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap;
  src: url("../fonts/jetbrains-mono-600.woff2") format("woff2"); }

/* CORE8 web stylesheet — restyled 2026-08-18 to the Core8 Docs page's visual
   language (light-only, top-header shell, underlined tab nav, mono figures).
   The class vocabulary from the v3 port survives; the tokens changed. */

:root {
  --app-bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --border: #e7eaef;
  --border-strong: #dfe3ea;
  --text: #1e2330;
  --ink: #12151c;
  --text-2: #5a6270;
  --text-3: #9aa1ad;
  --accent: #4550c9;
  --accent-hover: #3038a8;
  --accent-weak: #eceefb;
  /* The CORE8 eight — the docs page's brand-grid palette. */
  --red: #dc2626;     --red-bg: #fbe9e9;
  --orange: #e0701a;  --orange-bg: #fbeee1;
  --yellow: #c99700;  --yellow-bg: #f8f1d8;
  --green: #1f8a5b;   --green-bg: #e6f3ed;
  --blue: #2563eb;    --blue-bg: #e8effd;
  --purple: #6b46c1;  --purple-bg: #f0eafa;
  --brown: #8a5a2b;   --brown-bg: #f2ebe3;
  --gray: #6b7280;    --gray-bg: #eef0f4;
  --amber: #b45309;   --amber-bg: #f8ecd9;
  --conf-low: #b91c1c; --conf-mid: #b45309; --conf-high: #1f8a5b;
  --radius: 10px; --radius-tile: 14px; --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(18,21,28,.05);
  --shadow-lg: 0 12px 32px rgba(18,21,28,.14);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hover: #f2f4f7;
  --warn-border: #ecd9a8; --warn-bg: #fffcf4;
  --warn-ico-bg: #f8f1d8; --warn-ico: #9a6a10;
  --rationale-bg: #fbfcfd; --rationale-border: #e7eaef;
  --avatar-bg: #eceefb;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--app-bg); color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-3); }
input::placeholder { color: var(--text-3); }

/* ---------- App frame ---------- */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.main > main { flex: 1 0 auto; }
.content { padding: 24px 40px 80px; width: 100%; max-width: 1400px; margin: 0 auto; }
.content.narrow { max-width: 980px; }
.content.wide { max-width: 1400px; }

/* ---------- Top header (docs shell) ---------- */
.topnav { background: var(--app-bg); }
.topnav-inner {
  max-width: 1400px; margin: 0 auto; padding: 26px 40px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-grid {
  display: grid; grid-template-columns: repeat(4, 7px);
  grid-template-rows: repeat(2, 7px); gap: 2px; flex-shrink: 0;
}
.brand-grid .bc { border-radius: 1px; }
.bc.c1 { background: var(--red); }    .bc.c2 { background: var(--orange); }
.bc.c3 { background: var(--yellow); } .bc.c4 { background: var(--green); }
.bc.c5 { background: var(--blue); }   .bc.c6 { background: var(--purple); }
.bc.c7 { background: var(--brown); }  .bc.c8 { background: var(--gray); }
.brand-text { display: flex; flex-direction: column; }
.wordmark {
  font-size: 18px; font-weight: 800; letter-spacing: .02em; color: var(--ink);
}
.wordmark b { color: var(--accent); }
.brand-sub {
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin-top: 1px;
}

.statrow { display: flex; gap: 20px; margin-left: auto; }
.stat-cell { text-align: right; }
.stat-cell .n {
  font-family: var(--mono); font-size: 17px; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-cell .n.green { color: var(--green); }
.stat-cell .n.warn { color: var(--amber); }
.stat-cell .k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}

/* ---------- Tab bar (docs nav) ---------- */
.tabbar {
  max-width: 1400px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: stretch; gap: 8px;
  border-bottom: 2px solid var(--border);
}
.tabbar .tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--text-2);
  border-bottom: 3px solid transparent;
  padding: 12px 14px; margin-bottom: -2px; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-badge {
  background: var(--accent-weak); color: var(--accent);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.tab-badge.warn { background: var(--warn-ico-bg); color: var(--warn-ico); }

/* ---------- User menu (top-right) ---------- */
.usermenu { position: relative; }
.usermenu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--avatar-bg);
  color: var(--accent); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
}
.usermenu .role-chip {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--purple); background: var(--purple-bg); padding: 1px 6px; border-radius: 3px;
}
.usermenu .user-menu {
  position: absolute; top: 44px; right: 0; width: 220px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.user-menu form { margin: 0; }
.user-menu .menu-item { width: 100%; border: 0; background: none; font: inherit;
  cursor: pointer; text-align: left; }

/* ---------- Page heading strip ---------- */
.topbar {
  max-width: 1400px; width: 100%; margin: 0 auto;
  padding: 22px 40px 0; display: flex; align-items: center; gap: 18px;
}
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; flex: 1; color: var(--ink); }
.crumb { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.crumb b { color: var(--ink); font-weight: 700; }

/* ---------- Cards / tiles ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 22px; }
.split-h { display: flex; align-items: center; justify-content: space-between; }
.inline-h { display: flex; align-items: center; }
.smallcap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-tile); padding: 22px; min-height: 188px;
  display: flex; flex-direction: column; gap: 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile .arrow { position: absolute; top: 16px; right: 16px; color: var(--text-3); transition: transform .15s, color .15s; }
.tile:hover .arrow { transform: translate(2px,-2px); color: var(--accent); }
.tile .ti-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tile h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.tile p { margin: 0; font-size: 13px; color: var(--text-2); }
.tile .ti-foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.tile .ti-foot .n { font-family: var(--mono); font-size: 26px; font-weight: 800; color: var(--ink); }
.tile .ti-foot .u { font-size: 12.5px; color: var(--text-3); }

/* ---------- Review-attention banner ---------- */
.banner-review { border-color: var(--warn-border); background: var(--warn-bg); }
.banner-review .b-ico {
  width: 44px; height: 44px; border-radius: 11px; background: var(--warn-ico-bg); color: var(--warn-ico);
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Chips (status + all 8 CORE8 domains) ---------- */
.chip {
  display: inline-flex; align-items: center; padding: 2px 9px;
  font-size: 11.5px; font-weight: 600; border-radius: 20px;
  background: var(--gray-bg); color: var(--gray); white-space: nowrap;
}
.chip.green  { background: var(--green-bg);  color: var(--green); }
.chip.blue   { background: var(--blue-bg);   color: var(--blue); }
.chip.amber, .chip.yellow { background: var(--yellow-bg); color: var(--yellow); }
.chip.brown  { background: var(--brown-bg);  color: var(--brown); }
.chip.gray   { background: var(--gray-bg);   color: var(--gray); }
.chip.red    { background: var(--red-bg);    color: var(--red); }
.chip.purple { background: var(--purple-bg); color: var(--purple); }
.chip.orange { background: var(--orange-bg); color: var(--orange); }
/* UNASSIGNED (rule ladder 2026-09-16): not a domain. Dashed outline, no
   fill, so it reads as "held" rather than as a colour the row carries. */
.chip.unassigned {
  background: transparent; color: var(--text-2);
  box-shadow: none; border: 1px dashed var(--border-strong);
  font-weight: 500;
}
/* Informational, non-blocking (2026-07-15). Outlined rather than filled so it
   reads as context, not as a review verdict like the filled status chips. */
.chip.neutral {
  background: transparent; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-weight: 500;
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--gray); }
.dot.green { background: var(--green); } .dot.blue { background: var(--blue); }
.dot.yellow { background: var(--yellow); } .dot.brown { background: var(--brown); }
.dot.gray { background: var(--text-3); } .dot.red { background: var(--red); }
.dot.purple { background: var(--purple); } .dot.orange { background: var(--orange); }

/* ---------- Stats / summary strips ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.stat .v { font-family: var(--mono); font-size: 26px; font-weight: 800; margin-top: 4px; color: var(--ink); }
.stat .v.warn { color: var(--amber); } .stat .v.blue { color: var(--blue); }
.summary { display: flex; align-items: center; gap: 14px; padding: 16px 22px; }
.summary .big { font-family: var(--mono); font-size: 28px; font-weight: 800; color: var(--ink); }
.pagehint { font-size: 12.5px; color: var(--text-3); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-3); padding: 11px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--hover); }
.tbl .right { text-align: right; }
.tbl .desc { font-weight: 600; color: var(--ink); }
.tbl .mfr { color: var(--text-2); font-size: 12.5px; }
.skucell { font-family: var(--mono); font-size: 12.5px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  padding: 9px 12px; font-size: 13.5px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text);
  outline: none; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
.input input { border: none; outline: none; padding: 9px 0; font-size: 13.5px; flex: 1; background: transparent; }
.input.grow { flex: 1; min-width: 220px; }
.filterbar select {
  padding: 9px 12px; font-size: 13.5px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text);
  outline: none; font-family: inherit;
}
.filterbar select:focus { border-color: var(--accent); }

/* ---------- Confidence bar ---------- */
.conf { display: flex; align-items: center; gap: 9px; }
.conf .pct { font-family: var(--mono); font-size: 12.5px; font-weight: 600; min-width: 44px; }
.conf .pct.low { color: var(--conf-low); } .conf .pct.mid { color: var(--conf-mid); } .conf .pct.high { color: var(--conf-high); }
.conf .track { flex: 1; height: 5px; border-radius: 3px; background: var(--border); min-width: 60px; }
.conf .fill { height: 100%; border-radius: 3px; }
.conf .fill.low { background: var(--conf-low); } .conf .fill.mid { background: var(--conf-mid); } .conf .fill.high { background: var(--conf-high); }

/* ---------- Flash ---------- */
.flashwrap { max-width: 1400px; width: 100%; margin: 0 auto; padding: 16px 40px 0; }
.flash { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.flash--success { background: var(--green-bg); color: var(--green); }
.flash--error { background: var(--red-bg); color: var(--red); }
.flash--info { background: var(--blue-bg); color: var(--blue); }

/* ---------- Items list ---------- */
/* Informational, non-blocking (2026-07-20). Outlined rather than filled so it
   reads as context, not a verdict. */
.brandlink { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- User menu rows (native <details>, no JS) ---------- */
.menu-item {
  display: flex; gap: 11px; align-items: center; padding: 9px 11px;
  border-radius: 7px; font-size: 13.5px; color: var(--text-2);
}
.menu-item:hover { background: var(--hover); color: var(--text); }
.menu-item b { color: var(--text); font-weight: 600; }

/* ---------- Item detail ---------- */
.section-h {
  display: flex; align-items: center; gap: 10px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: 14px;
}
.section-h .ln { flex: 1; border-top: 1px solid var(--border); }
.section-h .chip { text-transform: none; letter-spacing: normal; }
.dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin: 0; }
.dl.single { grid-template-columns: 1fr; }
.dl .row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.dl .row:last-child { border-bottom: none; }
.dl dt { color: var(--text-2); }
.dl dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.dl dd.empty { color: var(--text-3); }
.okline { display: flex; gap: 8px; align-items: center; color: var(--green); font-size: 13px; }

/* ---------- Customers ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: var(--avatar-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Batches + detail ---------- */
.metabar { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; color: var(--text-2); }
.metabar b { color: var(--ink); font-weight: 600; }

/* ---------- Shell chrome ---------- */
.app-footer { text-align: center; padding: 14px 24px; font-size: 12px; color: var(--text-3); }
.ic-16 { width: 16px; height: 16px; }
.ic-22 { width: 22px; height: 22px; }
.ic-23 { width: 23px; height: 23px; }
.ic { width: 17px; height: 17px; }

/* ---------- Tile icon tints ---------- */
.ti-ico.blue   { background: var(--blue-bg);   color: var(--blue); }
.ti-ico.green  { background: var(--green-bg);  color: var(--green); }
.ti-ico.purple { background: var(--purple-bg); color: var(--purple); }

/* ---------- Auth pages ---------- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.brand-row { display: flex; align-items: center; gap: 11px; }
.auth-card { width: 380px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { margin: 0; font-size: 20px; color: var(--ink); }

/* ---------- Dashboard spacing ---------- */
.mb-24 { margin-bottom: 24px; }
.mb-14 { margin-bottom: 14px; }
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
.btn-row { display: flex; gap: 8px; }
.section-gap { margin: 36px 0 14px; }
.banner-body { flex: 1; }
.banner-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.banner-sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.smallcap-h { font-size: 14px; margin: 0; }

/* ---------- Upload ---------- */
.upload-form { display: flex; flex-direction: column; gap: 18px; }
.upload-zone {
  border: 2px dashed var(--border-strong); border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.upload-zone.is-dragging { border-color: var(--accent); background: var(--accent-weak); }
.upload-zone.has-file { border-style: solid; border-color: var(--green); }
.upload-picked { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.upload-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.upload-fields .field-span { grid-column: 1 / -1; }
.upload-actions { display: flex; align-items: center; justify-content: space-between; }
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--ink); color: var(--surface); padding: 10px 16px;
  border-radius: 8px; font-size: 13px; box-shadow: var(--shadow-lg);
}

/* ---------- Batches ---------- */
#batch-progress-fill { width: 0; transition: width .4s; }
.gap-10 { gap: 10px; }
.hidden { display: none; }
.banner-warn {
  border-color: var(--warn-border); background: var(--warn-bg);
  border-left: 4px solid var(--amber);
}

/* ---------- Confidence-bar fill widths, 10% steps (strict CSP: no inline
   style attributes, so a bucketed width class is the only mechanism). ---- */

/* ---------- Customer lookup results on the Upload page ---------- */
.lookup-results {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); max-height: 220px; overflow-y: auto;
}
.lookup-hit {
  text-align: left; padding: 8px 10px; font-size: 13px;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer;
}
.lookup-hit:last-child { border-bottom: 0; }
.lookup-hit:hover, .lookup-hit:focus { background: var(--accent-weak); }

/* ---------- Seqtable (the docs item-master tab, live) ---------- */
.seqtable-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.walk-toggle {
  display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: 8px; overflow: hidden;
}
.walk-toggle button {
  border: 0; background: var(--surface); color: var(--text-2);
  font: 600 12.5px system-ui, sans-serif; padding: 8px 14px; cursor: pointer;
}
.walk-toggle button + button { border-left: 1px solid var(--border-strong); }
.walk-toggle button.is-active { background: var(--accent); color: #fff; }
.seqtable-count {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.domainchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.domainchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); padding: 4px 12px 4px 8px;
  font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.domainchip .ct { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.domainchip:hover { border-color: var(--text-3); }
.domainchip.is-active { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.domainchip.is-active .ct { color: var(--accent); }
.seq-num {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.seq-key { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.groupcell .g { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.groupcell .r { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.review-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--warn-ico);
  background: var(--warn-ico-bg); border-radius: 20px; padding: 2px 9px;
  white-space: nowrap;
}
.seqtable-more { display: flex; justify-content: center; padding: 14px; }
.tbl th.sortable { cursor: pointer; }
.tbl th[data-dir="asc"]::after { content: " ↑"; }
.tbl th[data-dir="desc"]::after { content: " ↓"; }

/* seqtable column plan (2026-08-18): fixed layout so the Item column gets the
   slack instead of the mono sequence key; without it the nowrap key claimed
   ~340px, Item wrapped to 3-4 lines, and rows towered. Widths live on the
   header cells; every unlisted column (Item) shares the remainder. */
.seqtable-updated {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--text);
}
.seqtbl { table-layout: fixed; }
.seqtbl th.c-seq { width: 46px; }
.seqtbl th.c-uom { width: 52px; }
.seqtbl th.c-domain { width: 158px; }
.seqtbl th.c-group { width: 158px; }
.seqtbl th.c-key { width: 200px; }
.seqtbl th.c-conf { width: 52px; }
.seqtbl th.c-status { width: 96px; }
.seqtbl th.c-data { width: 128px; }
/* .btn.sm "View" is ~58px wide on its own; 64px forced the button through
   the cell padding and flush against the table edge. */
.seqtbl th.c-act { width: 88px; }
.seqtbl th { padding: 9px 12px; }
.seqtbl td { padding: 8px 12px; }
.seqtbl .seq-key { display: block; overflow: hidden; text-overflow: ellipsis; }
.seqtbl .chip { white-space: normal; }          /* long domain labels wrap inside their column */
.seqtbl .missing-flag { white-space: normal; }  /* multi-gap pills wrap instead of forcing h-scroll */
.missing-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--red);
  background: var(--red-bg); border-radius: 20px; padding: 2px 9px;
  white-space: nowrap;
}

/* ---------- Review adjudication (2026-08-18) ---------- */
.idpair { display: flex; gap: 28px; margin: 10px 0 6px; flex-wrap: wrap; }
.idcellbig { display: flex; flex-direction: column; }
.idcellbig .k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.idcellbig b { font-size: 16px; font-weight: 700; color: var(--ink); }
.review-flag.big { font-size: 12.5px; padding: 6px 14px; align-self: flex-start; }
.cand { display: block; cursor: pointer; }
.cand:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cand-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 8px; }
.cand-head input[type="radio"] { margin-top: 4px; accent-color: var(--accent); }
.cand-title { flex: 1; }
.cand-score { text-align: right; }
.cand-score .pct { font-size: 15px; font-weight: 700; }
.cand-evidence { padding: 0 18px 10px 44px; }
.cand-ctx { border-top: 1px solid var(--border); }
.cand-ctx th, .cand-ctx td { padding: 8px 14px; font-size: 12.5px; }
.cand-ctx-empty { padding: 0 18px 14px 44px; color: var(--warn-ico); }
.cand-manual { padding: 4px 18px 16px 44px; }
.seqtable-empty { padding: 28px; color: var(--text-3); font-size: 13.5px; }
.seqtable-detail td {
  background: var(--surface-2); font-size: 12.5px; color: var(--text-2);
  padding: 10px 16px 14px;
}
.seqtable-detail .kv { display: inline-flex; gap: 5px; margin-right: 22px; }
.seqtable-detail .kv b { color: var(--ink); font-weight: 600; }

/* All of a row's data, visible in the table (Aaron 2026-09-14 -> 09-17).
   Two at-a-glance columns (Codes, Size) and an expansion that lists EVERY
   payload field, grouped. The table pages drop the 1400px cap so the extra
   columns do not squeeze the Item column to nothing. */
.content.wide:has(#seqtable) { max-width: none; }
.seqtbl th.c-codes { width: 168px; }
.seqtbl th.c-dims { width: 120px; }
.seqtbl th.c-key { width: 170px; }
.seqtbl .code {
  font-size: 11.5px; line-height: 1.4; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.seqtbl .code .k {
  display: inline-block; min-width: 46px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-3);
}
.seqtbl .dims { font-size: 12px; white-space: nowrap; }
/* Multi-column FLOW, not a grid (Aaron 2026-10-01): a grid stretched every
   section in a row to its tallest neighbour (the matched GUDID record), so
   Identity, Codes and Dimensions sat over empty space and the next row of
   sections started only below it. Columns pack the sections top to bottom. */
.seqtable-detail .fields {
  columns: 280px; column-gap: 32px; margin-top: 4px;
}
.seqtable-detail .grp {
  break-inside: avoid; margin-bottom: 14px;
}
.seqtable-detail .grp h4 {
  margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.seqtable-detail .grp dl { margin: 0; }
.seqtable-detail .grp .f {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.seqtable-detail .grp .f:last-child { border-bottom: none; }
.seqtable-detail .grp dt { color: var(--text-2); white-space: nowrap; }
.seqtable-detail .grp dd {
  margin: 0; color: var(--ink); font-weight: 500; text-align: right;
  overflow-wrap: anywhere;
}
.seqtable-detail .grp dd.unk { color: var(--text-3); font-weight: 400; }
.seqtable-detail details.allfields { margin-top: 12px; }
.seqtable-detail details.allfields summary {
  cursor: pointer; font-weight: 600; color: var(--ink); font-size: 12.5px;
}

/* Configurable columns (Aaron 2026-09-17): every field is a column the viewer
   can add, remove and reorder; the choice lives in localStorage per table. */
.seqtable-card { overflow-x: auto; }
.colpicker {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px;
}
.colpicker.hidden { display: none; }
.colpicker-h { color: var(--text-2); margin-bottom: 8px; }
.colpicker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.colpicker-row {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 6px 3px 8px; background: var(--surface-2); cursor: grab;
}
.colpicker-row.dragging { opacity: .5; }
.colpicker-row.over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.colpicker-row .handle { color: var(--text-3); letter-spacing: -2px; margin-right: 2px; }
.colpicker-row .name { font-weight: 600; color: var(--ink); }
.colpicker-row button.mini {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 11px; padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.colpicker-row button.mini:hover { background: var(--hover); color: var(--ink); }
.colpicker-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.colpicker-add select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); max-width: 320px; }

/* ---------- Column matching (spec 2026-09-11) ---------- */
#columns-root.content.wide { max-width:none; }
/* The review queue offers every item column too (2026-09-17); it needs the
   same room as the Item Master or any added column crushes Item (Aaron
   2026-09-18). */
#review-root.content.wide { max-width:none; }
/* "i" tip beside the two review counts (Aaron 2026-09-18). CSS-only, the
   text rides a data attribute: the strict CSP forbids inline handlers and
   styles, and attr() needs neither. Keyboard-reachable via tabindex. */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--border);
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1; vertical-align: middle;
  cursor: help; color: inherit; opacity: .7; }
.info-tip:hover, .info-tip:focus { opacity: 1; outline: none; }
.info-tip::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px);
  width: 340px; padding: 10px 12px; background: var(--ink); color: var(--surface);
  font-size: 12.5px; font-weight: 400; font-style: normal; line-height: 1.45; text-align: left;
  white-space: normal; border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 20; }
.info-tip:hover::after, .info-tip:focus::after { opacity: 1; }
.grid-wrap { padding-bottom:4px; }
.mtbl { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.mtbl th, .mtbl td { padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; text-align:left; vertical-align:top; overflow:hidden; text-overflow:ellipsis; }
.mtbl th { background:var(--surface-2); font-size:12.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--border-strong); }
.mtbl thead tr.pair td { background:var(--surface); border-bottom:2px solid var(--border-strong); overflow:visible; }
.mtbl col.rn { width:38px; }
.mtbl col.desc { width:13%; }
.mtbl .rn { color:var(--text-3); font-family:var(--mono); font-size:11px; padding-right:4px; text-align:right; }
.mtbl tbody td.val { font-family:var(--mono); font-size:12px; color:var(--text); }
.mtbl tbody td.val.blank { color:var(--text-3); text-align:center; }
.mtbl tbody td.val.unassigned { background:repeating-linear-gradient(135deg, transparent 0 6px, var(--gray-bg) 6px 12px); color:var(--text-3); text-align:center; }
.mtbl tbody td.just-moved { animation:moved 1.4s ease-out; }
@keyframes moved { 0% { background:var(--green-bg); } 100% { background:transparent; } }
.xtbl th { background:var(--gray-bg); color:var(--text-2); font-weight:600; font-size:12px; }
.xtbl tbody td { font-family:var(--mono); font-size:12px; color:var(--text-2); }
.xtbl th.draggable, .xtbl td.draggable { cursor:grab; user-select:none; }
.xtbl td.draggable:hover { background:var(--hover); }
.xtbl th.draggable::before { content:"\283F"; color:var(--text-3); margin-right:6px; font-size:11px; }
.xtbl th.draggable:active, .xtbl td.draggable:active { cursor:grabbing; }
.xtbl .dragging { opacity:.45; }
.mtbl .drop-target { background:var(--accent-weak) !important; box-shadow:inset 0 0 0 2px var(--accent); }
.xtbl-empty { padding:18px 16px; color:var(--text-3); font-style:italic; font-size:13px; }
.mtbl th.core-th { position:relative; cursor:help; overflow:visible; }
.core-th .name { display:flex; gap:6px; align-items:center; }
.core-th .name > span:first-child { min-width:0; white-space:normal; line-height:1.25; }
.core-th:nth-last-child(-n+3) .pop { left:auto; right:0; }
.core-th .q { display:inline-flex; width:15px; height:15px; border-radius:50%; border:1px solid var(--border-strong); color:var(--text-3); font-size:10px; font-weight:600; align-items:center; justify-content:center; }
.core-th .tags { margin-top:4px; display:flex; gap:4px; }
.core-th .tags .chip { font-size:10.5px; padding:1px 7px; }
.core-th .pop { display:none; position:absolute; left:0; top:calc(100% + 4px); z-index:20; width:270px; white-space:normal; background:var(--ink); color:#fff; padding:10px 12px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:400; line-height:1.45; box-shadow:var(--shadow-lg); }
.core-th .pop b { color:#ffd166; display:block; margin-bottom:3px; }
.core-th:hover .pop, .core-th:focus-within .pop { display:block; }
.mtbl select { width:100%; min-width:0; padding:6px 8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font:inherit; font-size:12.5px; background:var(--surface); }
.mtbl select:focus { border-color:var(--accent); outline:none; }
.mtbl select.is-error { border-color:var(--red); background:var(--red-bg); }
.mtbl select.is-none { color:var(--text-3); font-style:italic; }
.srcchip { margin-top:5px; }
.srcchip .chip { font-size:10.5px; padding:1px 7px; }
.uom-extra { margin-top:6px; display:flex; gap:4px; align-items:center; }
.uom-extra .btn { padding:4px 8px; font-size:11.5px; }
.uom-add { margin-top:6px; padding:4px 8px; font-size:11.5px; }
.floor { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:18px; flex-wrap:wrap; }
.floor-msg { font-size:13px; color:var(--red); margin-top:4px; }
.floor-msg.ok { color:var(--green); }
.preview-cap { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-size:12.5px; color:var(--text-2); gap:16px; flex-wrap:wrap; }
.preview-cap .legend { display:flex; gap:14px; align-items:center; }
.preview-cap .sw { display:inline-block; width:14px; height:10px; border:1px solid var(--border); vertical-align:middle; margin-right:4px; }
.preview-cap .sw.un { background:repeating-linear-gradient(135deg, transparent 0 3px, var(--gray-bg) 3px 6px); }