/* ─────────────────────────────────────────────────────────────────────────
   backorder-ui — "The Ledger", ported from @vector/tokens
   ─────────────────────────────────────────────────────────────────────────
   Server-rendered Jinja + vanilla JS, Hebrew RTL. This is a faithful port of
   Vector's design language (OKLCH tokens, brass accent, editorial typography,
   AI-confidence + sync-freshness domain colors) expressed as plain CSS — no
   framework — so the UI already looks like Vector ahead of integration.
   Every legacy class name is preserved; only colors/type/shape change.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted type (hebrew+latin woff2 subsets, variable-weight files) —
   first paint must never wait on an external font host. ── */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/static/fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/static/fonts/frank-ruhl-libre-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/static/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens · light (warm bone paper, ink-navy, brass) ── */
:root, .light {
  --paper: oklch(0.965 0.012 85);
  --paper-deep: oklch(0.938 0.014 82);
  --paper-soft: oklch(0.978 0.008 85);

  --ink: oklch(0.20 0.04 250);
  --ink-muted: oklch(0.42 0.04 250);
  --ink-subtle: oklch(0.50 0.03 250);

  --rule: oklch(0.85 0.02 80);
  --rule-strong: oklch(0.72 0.03 80);

  --primary: oklch(0.28 0.10 250);
  --brass: oklch(0.62 0.13 72);
  --brass-deep: oklch(0.52 0.13 65);
  --brass-soft: oklch(0.94 0.06 75);

  --positive: oklch(0.50 0.10 145);
  --negative: oklch(0.50 0.20 25);
  --caution: oklch(0.62 0.15 60);
  /* --caution as TEXT on --tint-caution is ~3.1:1 — below AA at badge sizes */
  --caution-text: oklch(0.50 0.14 60);

  --accent: var(--brass);
  --accent-strong: var(--brass-deep);
  --accent-focus: var(--brass-deep);
  /* filled controls: --brass under near-white text is ~3.4:1 on light paper */
  --accent-fill: var(--brass-deep);
  --accent-fill-hover: oklch(0.45 0.12 65);
  --on-accent: oklch(0.98 0.01 85);

  /* domain · AI confidence (verified / inferred / estimate) */
  --conf-verified: var(--positive);
  --conf-inferred: var(--brass-deep);
  --conf-estimate: var(--ink-muted);

  /* domain · sync freshness */
  --sync-fresh: var(--positive);
  --sync-syncing: var(--caution);
  --sync-stale: var(--negative);

  /* tinted fills derived from status hues (soft backgrounds) */
  --tint-positive: oklch(0.95 0.05 145);
  --tint-negative: oklch(0.95 0.06 25);
  --tint-caution: oklch(0.95 0.07 70);
  --tint-accent: var(--brass-soft);

  --radius-control: 6px;
  --radius-control-sm: 4px;
  --radius-stamp: 3px;

  --font-display: "Fraunces";
  --font-display-he: "Frank Ruhl Libre";
  --font-sans: "Geist";
  --font-sans-he: "Heebo";
  --font-mono: "Geist Mono";

  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

  /* legacy aliases — any stray reference keeps resolving to a Ledger color */
  --navy: var(--primary); --blue: var(--accent); --ok: var(--positive);
  --err: var(--negative); --warn: var(--caution); --muted: var(--ink-subtle);
  --bg: var(--paper); --line: var(--rule);

  color-scheme: light;
}

/* ── Tokens · dark (deep ink night, brass keeps warmth) ── */
.dark {
  --paper: oklch(0.135 0.025 250);
  --paper-deep: oklch(0.105 0.022 250);
  --paper-soft: oklch(0.175 0.028 250);

  --ink: oklch(0.93 0.01 80);
  --ink-muted: oklch(0.66 0.02 80);
  --ink-subtle: oklch(0.62 0.02 80);

  --rule: oklch(0.26 0.03 250);
  --rule-strong: oklch(0.40 0.03 250);

  --primary: oklch(0.78 0.10 230);
  --brass: oklch(0.75 0.14 72);
  --brass-deep: oklch(0.62 0.14 65);
  --brass-soft: oklch(0.22 0.05 60);

  --positive: oklch(0.68 0.12 145);
  --negative: oklch(0.66 0.18 25);
  --caution: oklch(0.74 0.15 60);
  --caution-text: var(--caution);

  --accent-focus: var(--brass);
  --accent-fill: var(--brass);
  --accent-fill-hover: var(--brass-deep);
  --on-accent: oklch(0.17 0.03 250);
  --conf-inferred: var(--brass);

  --tint-positive: oklch(0.26 0.06 145);
  --tint-negative: oklch(0.28 0.09 25);
  --tint-caution: oklch(0.28 0.08 70);
  --tint-accent: oklch(0.24 0.05 60);

  color-scheme: dark;
}

/* Follow the system scheme when no explicit choice was stored. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --paper: oklch(0.135 0.025 250); --paper-deep: oklch(0.105 0.022 250);
    --paper-soft: oklch(0.175 0.028 250); --ink: oklch(0.93 0.01 80);
    --ink-muted: oklch(0.66 0.02 80); --ink-subtle: oklch(0.62 0.02 80);
    --rule: oklch(0.26 0.03 250); --rule-strong: oklch(0.40 0.03 250);
    --brass: oklch(0.75 0.14 72); --brass-deep: oklch(0.62 0.14 65);
    --brass-soft: oklch(0.22 0.05 60); --positive: oklch(0.68 0.12 145);
    --negative: oklch(0.66 0.18 25); --caution: oklch(0.74 0.15 60);
    --caution-text: oklch(0.74 0.15 60);
    --accent-focus: var(--brass); --conf-inferred: var(--brass);
    --accent-fill: oklch(0.75 0.14 72); --accent-fill-hover: oklch(0.62 0.14 65);
    --on-accent: oklch(0.17 0.03 250);
    --tint-positive: oklch(0.26 0.06 145); --tint-negative: oklch(0.28 0.09 25);
    --tint-caution: oklch(0.28 0.08 70); --tint-accent: oklch(0.24 0.05 60);
    color-scheme: dark;
  }
}

/* ── Base ── */
* { box-sizing: border-box; border-color: var(--rule); }
/* --topbar-h is measured off the live masthead by base.html (the nav can wrap). */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-block-start: calc(var(--topbar-h, 55px) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans-he), var(--font-sans), system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: -0.003em;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 1140px; margin: 30px auto; padding: 0 24px; }

/* Film-grain atmosphere — the Ledger signature (subtle for a work tool). */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05; mix-blend-mode: multiply;
}
.dark body::before { opacity: 0.10; mix-blend-mode: screen; }

/* ── Ledger typography ── */
.display, h1 {
  font-family: var(--font-display-he), var(--font-display), Georgia, serif;
  font-weight: 500; line-height: 1.18; letter-spacing: 0;
}
h1 { font-size: 27px; margin: 0 0 4px; color: var(--ink); }
h2 { font-family: var(--font-display-he), var(--font-display), Georgia, serif; font-weight: 500; font-size: 19px; margin: 28px 0 10px; }
h3 { font-size: 15px; margin: 0 0 6px; font-weight: 600; }
.count { color: var(--ink-subtle); font-weight: 400; font-size: 15px; }
a { color: var(--accent-strong); text-underline-offset: 2px; }

/* Mono with tabular numerals — data / slugs / ids */
.mono { font-family: var(--font-mono), ui-monospace, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Mono-first with a Hebrew fallback: Latin/digits keep Geist Mono (tabular
   numerals), Hebrew glyphs fall through to Heebo per-glyph. */
[dir="rtl"] .mono { font-family: var(--font-mono), var(--font-sans-he), monospace; letter-spacing: 0; }

/* Small-caps mono label — section headers, marginalia */
.label { font-family: var(--font-mono), ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; color: var(--ink-subtle); }

/* ── Masthead ── */
.topbar {
  display: flex; align-items: center; gap: 26px;
  background: var(--paper-soft);
  border-block-end: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--brass-soft);
  padding: 12px 24px; position: sticky; top: 0; z-index: 50;
}
.topbar .brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--accent-strong); font-size: 18px; transform: translateY(1px); }
.brand-name { font-size: 20px; font-weight: 600; }
.brand-sub { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-subtle); text-transform: uppercase; }
[dir="rtl"] .brand-sub { letter-spacing: 0; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 2px; }
.topbar nav a {
  color: var(--ink-muted); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 7px 10px; min-block-size: 36px; display: inline-flex; align-items: center; border-radius: var(--radius-control-sm);
  transition: color .15s var(--ease-settle), background .15s var(--ease-settle);
}
.topbar nav a:hover { color: var(--ink); background: var(--paper-deep); }
.topbar nav a.active, .topbar nav a[aria-current="page"] { color: var(--accent-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.navbadge {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 999px;
  background: var(--tint-negative); color: var(--negative);
  border: 1px solid color-mix(in oklch, var(--negative), transparent 60%);
  font-size: 10.5px; font-weight: 600; line-height: 1.5; text-align: center;
  font-variant-numeric: tabular-nums;
}
.userbox { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-muted); }
.userbox .who { display: flex; align-items: center; gap: 6px; }
.userbox .role { font-family: var(--font-mono), monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-subtle); border: 1px solid var(--rule); border-radius: var(--radius-stamp); padding: 1px 5px; }
[dir="rtl"] .userbox .role { letter-spacing: 0; }
.inline { display: inline; }
.linklike { background: none; border: none; color: var(--ink-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; font-size: 12.5px; padding: 7px 4px; min-block-size: 36px; }
.linklike:hover { color: var(--accent-strong); }
.theme-toggle { background: none; border: 1px solid var(--rule); color: var(--ink-muted); width: 28px; height: 28px; border-radius: var(--radius-control); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.theme-toggle:hover { color: var(--accent-strong); border-color: var(--rule-strong); }

/* ── Login ── */
.login-card {
  max-width: 380px; margin: 88px auto; background: var(--paper-soft);
  border: 1px solid var(--rule); padding: 34px 32px; border-radius: var(--radius-control);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px rgba(0,0,0,.3);
}
.login-card h1 { text-align: center; margin-bottom: 20px; }
.login-card .login-who { text-align: center; margin: -10px 0 18px; color: var(--ink-muted); font-size: 13px; }
.login-card label { display: block; margin-bottom: 16px; font-size: 13px; color: var(--ink-muted); }
.login-card input { width: 100%; padding: 9px 11px; margin-top: 5px; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper); color: var(--ink); font: inherit; }

/* ── Buttons ── */
button.primary, a.btn.primary, .action-card button.primary {
  background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--accent-fill);
  padding: 8px 18px; border-radius: var(--radius-control); cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 600; font-size: 13px; transition: background .15s var(--ease-settle);
}
button.primary:hover, a.btn.primary:hover, .action-card button.primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.busy, input.busy { cursor: progress; }
a.btn, button, .action-row button, .action-card button {
  background: var(--paper-soft); border: 1px solid var(--rule); color: var(--ink);
  padding: 6px 13px; border-radius: var(--radius-control); text-decoration: none;
  font: inherit; font-size: 12.5px; min-block-size: 36px; cursor: pointer; transition: border-color .15s, background .15s;
}
/* A link styled as a button is still an inline element: in a narrow table
   cell its text wraps and the border breaks with it. Lay it out like a
   button — one line, one box, the same 36px height. */
a.btn { font-size: 12px; color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
a.btn:hover, button:hover, .action-row button:hover, .action-card button:hover { border-color: var(--rule-strong); background: var(--paper-deep); }
.action-row button.danger, button.danger { background: var(--tint-negative); color: var(--negative); border-color: color-mix(in oklch, var(--negative), transparent 65%); }
.crumb { text-decoration: none; color: var(--ink-muted); font-size: 13px; min-block-size: 36px; display: inline-flex; align-items: center; }
.crumb:hover { color: var(--accent-strong); }

/* ── Filters / inputs / chips ── */
.filters { margin: 14px 0; }
.filter-grid { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.filter-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-muted); }
.filter-grid input[type=search] { min-inline-size: 280px; }
.filters select, select, .map-row select, .map-row input, .action-card input[type=text], .action-row input[type=text], input[type=text], input[type=search], input[type=number], input[type=password], textarea {
  padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--radius-control);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13px;
}
textarea { width: 100%; }
:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip, .tab { border: 1px solid var(--rule); background: var(--paper-soft); border-radius: var(--radius-control); padding: 4px 13px; font-size: 12.5px; text-decoration: none; color: var(--ink-muted); }
.chip:hover, .tab:hover { border-color: var(--rule-strong); color: var(--ink); }
.chip.active, .tab.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }

/* ── Tables (documents: square corners + rules, mono data) ──
   No `overflow` on the table: it would become the sticky containing block and
   push `th { position: sticky; top }` DOWN into the body instead of tucking it
   under the masthead. Square corners are on-brand (a grid is a document) and
   mean no corner-clip is needed. */
table.grid { width: 100%; border-collapse: collapse; background: var(--paper-soft); font-size: 13px; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: 8px; scrollbar-gutter: stable; }
.table-scroll table.grid { min-inline-size: 760px; margin: 0; }
.table-scroll table.grid th { position: static; }
.table-scroll:focus-visible { outline-offset: 3px; }
table.grid th {
  background: var(--paper-deep); color: var(--ink-subtle);
  font-family: var(--font-mono), monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  padding: 9px 8px; text-align: start; position: sticky; top: var(--topbar-h, 55px); z-index: 2; border-block-end: 1px solid var(--rule-strong);
}
[dir="rtl"] table.grid th { letter-spacing: 0; font-family: var(--font-sans-he), var(--font-mono), monospace; font-size: 11px; }
table.grid td { padding: 8px; border-block-end: 1px solid var(--rule); vertical-align: top; }
table.grid tr:last-child td { border-block-end: none; }
table.grid tbody tr:hover { background: var(--paper-deep); }
td.num { text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono), monospace; }
/* Centered variant — data-scan tables (shipments watchlist) where mixed
   RTL/LTR values drift visually against start-aligned columns. */
table.grid.centered th, table.grid.centered td { text-align: center; }
table.grid.centered td { vertical-align: middle; }
table.grid.centered .subnote { text-align: center; }
[dir="rtl"] td.num { font-family: var(--font-mono), var(--font-sans-he), monospace; }
td.filename, td.reason { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.filename { direction: ltr; text-align: end; font-family: var(--font-mono), monospace; font-size: 12px; }
td.reason { max-width: 280px; font-size: 12px; color: var(--ink-muted); }
td.empty { text-align: center; color: var(--ink-subtle); padding: 28px; font-style: italic; }
p.empty { color: var(--ink-subtle); font-style: italic; }
.ok-text { color: var(--positive); font-weight: 600; } .err-text { color: var(--negative); font-weight: 600; }

/* ── Badges (stamp radius, tinted keylines) ── */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-stamp); font-size: 11px; font-weight: 600;
  color: var(--ink-muted); background: var(--paper-deep); border: 1px solid var(--rule); letter-spacing: 0.02em;
}
.badge.ok { color: var(--positive); background: var(--tint-positive); border-color: color-mix(in oklch, var(--positive), transparent 60%); }
.badge.err { color: var(--negative); background: var(--tint-negative); border-color: color-mix(in oklch, var(--negative), transparent 60%); }
.badge.warn { color: var(--caution-text); background: var(--tint-caution); border-color: color-mix(in oklch, var(--caution), transparent 55%); }
.badge.muted { color: var(--ink-subtle); background: var(--paper-deep); border-color: var(--rule); }

/* ── Cards / panels (raised paper) ── */
.wizard-step, .action-card, .supplier-card, .run-meta {
  background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-control);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.wizard-step { padding: 20px 24px; margin: 16px 0; }
.action-card { padding: 15px 20px; margin: 14px 0; }
.action-card h3 { margin: 0 0 6px; }
.action-card label { display: block; margin: 10px 0; font-size: 13px; }
.action-card input[type=text] { width: 100%; max-width: 340px; margin-top: 3px; }
.action-card .hint, .hint { font-size: 12px; color: var(--ink-subtle); }
label.checkbox { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink-muted); }
.action-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.action-row input[type=text] { width: 200px; }

.run-meta { padding: 15px 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 13.5px; margin-bottom: 16px; }
.run-meta b { color: var(--ink-muted); font-weight: 500; }


/* ── Page head / suppliers ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.supplier-card { padding: 15px 20px; margin: 16px 0; }
.supplier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.supplier-head h2 { font-size: 17px; margin: 0; }
.supplier-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.slug { color: var(--ink-subtle); font-size: 12px; font-weight: 400; font-family: var(--font-mono), monospace; }
[dir="rtl"] .slug { font-family: var(--font-mono), var(--font-sans-he), monospace; }
.slug.live { color: var(--caution-text); font-weight: 600; }  /* drop zone: writes are really on */
.samples { margin: 8px 0; padding-inline-start: 20px; }
.samples li { font-size: 13px; }
.samples li.empty { color: var(--ink-subtle); font-style: italic; list-style: none; }

/* ── Dashboard ── */
.dashboard-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 28px; }
.metric-card { display: flex; flex-direction: column; min-block-size: 130px; padding: 16px; text-decoration: none; color: var(--ink-muted); background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-control); }
.metric-card:hover { border-color: var(--accent); background: var(--paper-deep); }
.metric-card strong { font: 600 30px/1 var(--font-mono), monospace; color: var(--ink); margin: 12px 0 7px; }
.metric-card small { color: var(--ink-subtle); }
.metric-card.attention { border-inline-start: 4px solid var(--caution); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 28px; }
.section-head h2 { margin-block: 0 10px; }

/* ── Shipment detail and tracking freshness ── */
.tracking-health { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 12px 15px; margin: 16px 0; border: 1px solid var(--rule); border-inline-start: 4px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--paper-soft); }
.tracking-health strong, .tracking-health span { grid-column: 1; }
.tracking-health small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-subtle); }
.tracking-health.ok { border-inline-start-color: var(--positive); background: var(--tint-positive); }
.tracking-health.warn { border-inline-start-color: var(--caution); background: var(--tint-caution); }
.tracking-health.err { border-inline-start-color: var(--negative); background: var(--tint-negative); }
.shipment-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shipment-layout .wizard-step { margin: 0; }
.detail-list { margin: 0; }
.detail-list div { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.4fr); gap: 12px; padding: 8px 0; border-block-end: 1px solid var(--rule); }
.detail-list div:last-child { border-block-end: 0; }
.detail-list dt { color: var(--ink-subtle); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-direction: column; gap: 5px; min-inline-size: 138px; }
.view-toggle { display: flex; gap: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding-bottom: 20px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 7px; top: 11px; bottom: -1px; border-inline-start: 1px solid var(--rule-strong); }
.timeline li:last-child::before { display: none; }
.timeline-dot { inline-size: 15px; block-size: 15px; margin-top: 3px; border: 3px solid var(--paper); border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 1px var(--positive); z-index: 1; }
.timeline li.inferred .timeline-dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline p { margin: 2px 0; color: var(--ink-muted); }
.timeline time, .timeline small { display: inline-block; color: var(--ink-subtle); font-size: 11.5px; margin-inline-end: 8px; }

/* ── Alerts (status keyline) ── */
.alert { padding: 10px 14px; border-radius: var(--radius-control); margin: 12px 0; font-size: 13px; border: 1px solid var(--rule); border-inline-start: 3px solid var(--rule-strong); }
.alert.err { background: var(--tint-negative); color: var(--negative); border-inline-start-color: var(--negative); }
.alert.info { background: var(--tint-accent); color: var(--accent-strong); border-inline-start-color: var(--accent); }
.alert.warn { background: var(--tint-caution); color: var(--caution-text); border-inline-start-color: var(--caution); }
.alert.ok { background: var(--tint-positive); color: var(--positive); border-inline-start-color: var(--positive); }
.safety-banner {
  display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: center;
  margin: -12px 0 22px; padding: 8px 12px; border: 1px solid color-mix(in oklch, var(--positive), transparent 55%);
  border-inline-start: 4px solid var(--positive); background: var(--tint-positive); color: var(--ink-muted);
  border-radius: var(--radius-control); font-size: 12.5px;
}
.safety-banner strong { color: var(--positive); }
.safety-banner.live {
  border-color: color-mix(in oklch, var(--caution), transparent 45%); border-inline-start-color: var(--caution);
  background: var(--tint-caution); color: var(--caution-text);
}
.safety-banner.live strong, .safety-banner.live b { color: var(--caution-text); }
.safety-banner.down { border-color: var(--rule); border-inline-start-color: var(--rule-strong); background: var(--paper-deep); }
.safety-banner.down strong { color: var(--ink-muted); }

/* ── Settings: runtime switches ── */
.switch-list { border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-soft); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-block-end: 1px solid var(--rule); }
.switch-row:last-child { border-block-end: none; }
.switch-text { min-width: 0; }
.switch-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.switch-label .env { font-size: 11px; color: var(--ink-subtle); }
.switch-text .hint { margin: 3px 0 0; max-width: 64ch; }
.switch-state { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.switch-word { font-size: 12.5px; color: var(--ink-muted); min-width: 2.6em; }
/* toggle: 32x18, a thin track and a small knob (Ben, 2026-09-22: compact, professional) */
button.switch {
  position: relative; box-sizing: border-box; width: 32px; height: 18px; min-width: 32px; min-height: 0; max-height: 18px; padding: 0; margin: 0;
  border-radius: 9px; flex-shrink: 0; vertical-align: middle; line-height: 0; font-size: 0;
  border: 1px solid var(--rule-strong); background: var(--paper-deep); cursor: pointer;
  transition: background .18s var(--ease-settle), border-color .18s var(--ease-settle);
}
button.switch:hover { border-color: var(--ink-subtle); }
button.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.switch .knob {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: inset-inline-start .18s var(--ease-settle);
}
button.switch[aria-checked="true"] { background: var(--accent-fill); border-color: var(--accent-fill); }
button.switch[aria-checked="true"]:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
button.switch[aria-checked="true"] .knob { inset-inline-start: 16px; }
.switch-word { font-size: 12px; color: var(--ink-muted); vertical-align: middle; }
.footer-line { margin-top: 12px; }
.action-row input[type=password] { width: 10rem; }
@media (max-width: 720px) {
  .switch-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .switch-state { justify-content: flex-end; }
}

/* ── Wizard mapping ── */
.map-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.map-row label { width: 170px; font-size: 13.5px; color: var(--ink-muted); }
.map-row select, .map-row input { min-width: 230px; }
.mapping-evidence { font-size: 11.5px; color: var(--positive); }
.sample-preview { margin-top: 20px; }
.sample-preview h3 { margin-top: 0; }
.sample-grid .suggested-col { background: var(--tint-positive); box-shadow: inset 2px 0 0 color-mix(in oklch, var(--positive), transparent 40%); }
.sample-grid td { white-space: nowrap; max-inline-size: 260px; overflow: hidden; text-overflow: ellipsis; }
.sticky-actions { position: sticky; bottom: 10px; z-index: 12; display: flex; gap: 10px; align-items: center; padding: 10px; margin-top: 20px; background: color-mix(in oklch, var(--paper-soft), transparent 4%); border: 1px solid var(--rule); border-radius: var(--radius-control); box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }

/* ── Localized drag/drop upload ── */
.file-picker { margin: 14px 0; }
.file-picker-label { display: block; font-weight: 600; margin-bottom: 7px; }
.file-drop { position: relative; min-block-size: 150px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 22px; border: 2px dashed var(--rule-strong); border-radius: var(--radius-control); background: var(--paper-deep); color: var(--ink-muted); text-align: center; transition: border-color .15s, background .15s; }
.file-drop strong { color: var(--ink); font-size: 14px; }
.file-drop-icon { font-size: 28px; color: var(--accent-strong); }
.file-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.file-picker.dragging .file-drop, .file-picker.has-file .file-drop { border-color: var(--accent); background: var(--tint-accent); }
.file-input:focus-visible + .file-drop-icon { outline: 2px solid var(--accent-focus); outline-offset: 8px; border-radius: 2px; }
.file-receipt { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius-control); margin-top: 8px; background: var(--paper-soft); }
/* display:flex above beats the [hidden] attribute — restate it, or the empty
   receipt shows before any file is chosen */
.file-receipt[hidden] { display: none; }
.file-receipt span { min-width: 0; }
.file-receipt strong, .file-receipt small { display: block; direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }
.file-receipt small { color: var(--ink-subtle); margin-top: 2px; }
.file-receipt button { flex: none; }
.preview-frame, .doc-embed { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-soft); }
.preview-frame { height: 70vh; }
.doc-embed { height: 78vh; }
.doc-fallback { background: var(--paper-soft); border: 1px dashed var(--rule-strong); border-radius: var(--radius-control); padding: 30px; text-align: center; color: var(--ink-subtle); }

/* ── Split view (exceptions / preview) ── */
.split { display: grid; grid-template-columns: minmax(380px, 5fr) minmax(320px, 6fr); gap: 20px; align-items: start; min-width: 0; }
.split > * { min-width: 0; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }
.split-fields h2, .split-doc h2 { font-size: 15px; color: var(--ink); margin-top: 0; }
table.kv { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--paper-soft); font-size: 13px; border: 1px solid var(--rule); border-radius: var(--radius-control); overflow: hidden; }
table.kv th { text-align: right; background: var(--paper-deep); color: var(--ink-muted); padding: 8px 11px; width: 38%; border-block-end: 1px solid var(--rule); vertical-align: top; font-weight: 500; }
table.kv td { padding: 8px 11px; border-block-end: 1px solid var(--rule); overflow-wrap: anywhere; }
table.kv tr:last-child th, table.kv tr:last-child td { border-block-end: none; }

/* ── Misc ── */
.ltr { direction: ltr; unicode-bidi: isolate; }
.subnote { font-size: 11px; color: var(--ink-subtle); font-style: italic; }
.pager { display: flex; gap: 16px; margin: 16px 0; align-items: center; }
.pager a { color: var(--accent-strong); }
.hrule { block-size: 1px; background: var(--rule); width: 100%; border: 0; margin: 18px 0; }

/* ── Narrow windows: a real menu keeps the masthead and page width stable ── */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  main { margin-block: 18px; padding-inline: 14px; }
  .topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; align-items: center; order: 2; margin-inline-start: auto; }
  .topbar nav { display: none; order: 4; flex: 1 0 100%; flex-direction: column; padding-block: 6px; border-block-start: 1px solid var(--rule); }
  .topbar nav.open { display: flex; }
  .topbar nav a { inline-size: 100%; min-block-size: 42px; }
  .userbox { order: 3; margin-inline-start: 0; }
  .userbox .who { display: none; }
  .brand-sub { display: none; }
  .page-head, .supplier-head { align-items: flex-start; flex-direction: column; }
  .supplier-actions { margin-inline-start: 0; flex-wrap: wrap; }
  .map-row { align-items: stretch; flex-direction: column; gap: 5px; }
  .map-row label, fieldset.map-row legend { width: auto; }
  .map-row select, .map-row input { min-width: 0; width: 100%; }
  .wizard-step { padding: 16px; }
  .sticky-actions { bottom: 4px; flex-wrap: wrap; }
  .llm-fields { min-width: 0; }
  .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipment-layout { grid-template-columns: 1fr; }
  .tracking-health { grid-template-columns: 1fr; }
  .tracking-health small { grid-column: 1; grid-row: auto; }
  .filter-grid > * { flex: 1 1 180px; }
  .filter-grid input[type=search] { min-inline-size: 0; width: 100%; }
}
@media (max-width: 480px) {
  .brand-name { font-size: 18px; }
  .theme-toggle { display: none; }
  .topbar { gap: 7px; }
  .safety-banner { margin-top: -6px; }
  .table-scroll table.grid { min-inline-size: 680px; }
  .dashboard-cards { grid-template-columns: 1fr; }
}

/* ── Print (run / exception records): no grain, no chrome, no sticky ── */
@media print {
  body::before { display: none; }
  .topbar, .pager, .filters { display: none; }
  table.grid th { position: static; }
}

/* ── New-supplier form ── */
.wizard-step.narrow { max-width: 640px; }
.map-row input.wide { min-width: 280px; }

/* ── Numeric column headers align with their tabular digits ── */
table.grid th.num { text-align: center; }

/* ── Split-pane document viewer (LLM wizard + mapping review) ── */
.llm-split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.llm-doc { flex: 1 1 52%; max-height: 82vh; overflow: auto; border: 1px solid var(--rule); background: var(--paper-deep); padding: 8px; border-radius: var(--radius-control); position: relative; }
.llm-fields { flex: 1 1 40%; min-width: 360px; }
/* the first step sits flush with the document panel's top edge — the two
   columns start on the same line */
.llm-fields form > .wizard-step:first-of-type { margin-top: 0; }
.zoombar { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; align-items: center; background: color-mix(in oklch, var(--paper-soft), transparent 8%); padding: 4px; border-radius: var(--radius-control); width: max-content; }
.page-wrap { position: relative; margin: 0 auto 10px; display: block; width: max-content; max-width: 100%; }
.page-wrap img { display: block; max-width: 100%; height: auto; user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px rgba(0,0,0,.3); }
.llm-doc.zoomed .page-wrap { max-width: none; }
.llm-doc.zoomed .page-wrap img { max-width: none; }
.overlay { position: absolute; inset: 0; }
/* Physical `left` on purpose: positions over rendered PDF page images, whose geometry is physical, not RTL-flowed. */
.page-num { position: absolute; bottom: 4px; left: 6px; background: color-mix(in oklch, var(--ink), transparent 25%); color: var(--paper); font-size: 10px; padding: 1px 6px; border-radius: var(--radius-stamp); }

/* ── Screen-reader-only text (e.g. unnamed action-column headers) ── */
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Semantic chip variants (UOM diff: added/removed/truncated), mirroring .badge ── */
.chip.ok { color: var(--positive); background: var(--tint-positive); border-color: color-mix(in oklch, var(--positive), transparent 60%); }
.chip.err { color: var(--negative); background: var(--tint-negative); border-color: color-mix(in oklch, var(--negative), transparent 60%); }
.chip.muted { color: var(--ink-subtle); }

/* ── Excel wizard step 3: config JSON panel + accessible checkbox-group rows ── */
.config-json { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-control); padding: 12px 14px; max-height: 70vh; overflow: auto; margin: 0; }
fieldset.map-row { border: 0; padding: 0; min-inline-size: 0; }
/* Floating strips the legend's special fieldset rendering so it lines up like a .map-row label. */
fieldset.map-row legend { float: inline-start; width: 170px; padding: 0; font-size: 13.5px; color: var(--ink-muted); }

/* ── Stage badge (שלב בשרשרת): brass classification stamp, deliberately NOT a
   status color — semantic ok/err/warn stay reserved for the lifecycle family ── */

/* ── "איך זה עובד" strip (suppliers): one-line pipeline overview ── */
.how-it-works { margin: 10px 0 2px; }
.how-it-works summary { cursor: pointer; width: max-content; font-size: 12.5px; color: var(--ink-subtle); }
.how-it-works summary:hover, .how-it-works[open] summary { color: var(--accent-strong); }
.how-it-works .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 4px; font-size: 12.5px; color: var(--ink-muted); }
.how-it-works .flow .step { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-stamp); padding: 2px 9px; }
.how-it-works .flow .arr { color: var(--ink-subtle); }

/* ── rule-*: plain-language rule copy in the onboarding wizards ──
   rule-summary: the generated "in plain words" sentence — brass ledger callout.
   rule-hint: help line indented to sit under a .map-row control (label 170px + 12px gap).
   rule-safe: the verbatim safe-default sentence — attention treatment, never error-red. */
.rule-summary { border-inline-start: 3px solid var(--accent); background: var(--paper-deep); border-radius: var(--radius-control); padding: 10px 14px; margin: 14px 0 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-muted); }
.rule-summary strong { color: var(--ink); }
.rule-hint { margin: -4px 0 10px; padding-inline-start: 182px; }
.rule-safe { border-inline-start: 3px solid var(--caution); background: var(--tint-caution); color: var(--caution-text); border-radius: var(--radius-control); padding: 8px 12px; margin: 8px 0 0; }
@media (max-width: 900px) { .rule-hint { padding-inline-start: 0; } }

/* ── rule-* (continued): wizard rule cards ──
   rule-option/rule-example: option lists with an optional before→after
   example under a choice (source right, result left in RTL).
   rule-advanced: progressive-disclosure expander for rarely-changed settings. */
.rule-option { margin: 8px 0; }
.rule-option .checkbox { color: var(--ink); }
.rule-example { font-size: 12px; color: var(--ink-subtle); margin: 2px 0 0; padding-inline-start: 26px; }
.rule-example .ltr, .rule-summary .ltr {
  font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums;
  background: var(--paper-deep); padding: 0 4px; border-radius: var(--radius-stamp);
}
/* inside the callout the card bg IS paper-deep — keep the chip visible */
.rule-summary .ltr { background: var(--paper-soft); border: 1px solid var(--rule); }
details.rule-advanced > summary { cursor: pointer; font-size: 13px; color: var(--ink-muted); }
details.rule-advanced > summary:hover { color: var(--accent-strong); }
details.rule-advanced[open] > summary { margin-bottom: 10px; }

/* ── Busy indication (window.vaiWait) — ONE waiting vocabulary app-wide ──
   .spinner: inline indeterminate ring; sits inline-start of the busy label.
   .progress-strip: 3px indeterminate strip for long operations (hidden until
   the op starts); the runner travels with the reading direction (RTL-aware
   via logical inset). Busy buttons use aria-disabled + a JS resubmit guard —
   the `disabled` attribute would throw keyboard focus back to <body>. */
.spinner {
  display: inline-block; inline-size: 14px; block-size: 14px;
  border: 2px solid currentColor; border-block-start-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: vai-spin 0.8s linear infinite;
}
@keyframes vai-spin { to { transform: rotate(360deg); } }
button.busy .spinner { margin-inline-end: 7px; }
button[aria-disabled="true"], input[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
button.busy[aria-disabled="true"], input.busy[aria-disabled="true"] { cursor: progress; }

.progress-strip {
  position: relative; block-size: 3px; inline-size: 100%; flex-basis: 100%;
  border-radius: 999px; overflow: hidden; margin: 8px 0 2px;
  background: color-mix(in oklch, var(--rule), transparent 30%);
}
.progress-strip[hidden] { display: none; }
.progress-strip::before {
  content: ""; position: absolute; inset-block: 0;
  inset-inline-start: -35%; inline-size: 35%;
  border-radius: 999px; background: var(--accent);
  animation: vai-strip 1.4s ease-in-out infinite;
}
@keyframes vai-strip {
  from { inset-inline-start: -35%; }
  to { inset-inline-start: 100%; }
}
/* Vestibular safety (WCAG 2.2.2): no rotation/sweep — a gentle opacity pulse
   keeps the "still working" signal without motion; text tickers keep updating. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: vai-pulse 1.6s ease-in-out infinite; }
  .progress-strip::before {
    animation: vai-pulse 1.6s ease-in-out infinite;
    inset-inline-start: 0; inline-size: 100%;
  }
}
@keyframes vai-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

/* ── Document-detail intent zones (zone-*) + danger zone (dz-*) ──
   The document page is ordered by task frequency: תפעול (daily) →
   הגדרות וכיול (one-time, <details> whose summaries carry the section's
   state so collapsing hides detail, never information) → חיבור וניהול
   (rare). dz-panel is the GitHub-style danger zone: negative keyline,
   destructive actions only, always the last thing on the page. */
.zone-head { margin: 34px 0 4px; padding-block-end: 5px; border-block-end: 1px solid var(--rule-strong); }
.zone-head .label { display: block; margin-block-end: 1px; }
.zone-head h2 { margin: 0; }
details.zone-section {
  background: var(--paper-soft); border: 1px solid var(--rule);
  border-radius: var(--radius-control); box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin: 12px 0;
}
details.zone-section > summary {
  cursor: pointer; list-style: none; padding: 11px 18px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
details.zone-section > summary::-webkit-details-marker { display: none; }
details.zone-section > summary::before {
  content: "▹"; color: var(--accent-strong); font-size: 13px;
  transition: transform .15s var(--ease-settle);
}
[dir="rtl"] details.zone-section > summary::before { content: "◃"; }
details.zone-section[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] details.zone-section[open] > summary::before { transform: rotate(-90deg); }
details.zone-section > summary:hover { color: var(--accent-strong); }
details.zone-section > summary .zone-state { font-weight: 400; font-size: 12.5px; color: var(--ink-subtle); }
details.zone-section > .zone-body { padding: 2px 18px 16px; }
@media (prefers-reduced-motion: reduce) {
  details.zone-section > summary::before { transition: none; }
}
.dz-panel {
  border: 1px solid color-mix(in oklch, var(--negative), transparent 55%);
  background: var(--paper-soft); border-radius: var(--radius-control);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  padding: 15px 20px; margin: 26px 0 34px;
}
.dz-panel h3 { color: var(--negative); margin: 0 0 6px; }
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dz-row .hint { margin: 0; max-width: 62ch; }

/* Hebrew kicker: same RTL treatment as table.grid th — no letter-spacing,
   Hebrew sans first (Hebrew has no uppercase for the mono small-caps look). */
[dir="rtl"] .zone-head .label { letter-spacing: 0; font-family: var(--font-sans-he), var(--font-mono), monospace; font-size: 11px; }


/* ── Document onboarding checklist: the five stages as one persistent strip,
   so the operator always sees where they are and what remains. ─────────── */
.onboard-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 4px; font-size: 13px; }
.onboard-steps .ostep { padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-subtle); background: var(--paper-soft); white-space: nowrap; }
.onboard-steps .ostep.done { border-color: #2e7d32; color: #2e7d32; background: rgba(46,125,50,.08); }
.onboard-steps .ostep.current { border-color: var(--accent, #8c6a2f); color: var(--ink);
  font-weight: 600; box-shadow: 0 0 0 2px rgba(140,106,47,.15); }
.onboard-steps .osep { color: var(--ink-subtle); opacity: .6; }
/* collapsed advanced/secondary sections (shared by wizard + document page) */
.adv-settings summary { cursor: pointer; color: var(--ink-subtle); font-size: 13px; padding: 4px 0; }
.adv-settings[open] summary { margin-bottom: 6px; }

/* ── Run-done dialog (dashboard): the run's outcome in one breath, the
   stored PDF report — the run's detail — one click away. ─────────────── */
dialog.run-done {
  border: 1px solid var(--rule); border-radius: var(--radius-control);
  background: var(--paper-soft); color: var(--ink);
  padding: 22px 26px; max-width: 480px; width: calc(100% - 32px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(0,0,0,.45);
}
dialog.run-done::backdrop { background: rgba(0,0,0,.38); }
dialog.run-done h2 { margin: 0 0 4px; }
.run-done-what { margin: 0 0 14px; color: var(--ink-muted); font-size: 13px; overflow-wrap: anywhere; }
.run-done-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.run-done-facts b { font-family: var(--font-mono), monospace; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink); margin-inline-end: 6px; }
.run-done .alert { margin: 0 0 14px; }
.run-done-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Excel wizard: the worksheets box (rule proposed, refined in words, previewed) ── */
.sheet-rule { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-deep); }
.sheet-rule h4 { margin: 0 0 8px; font-size: 13.5px; }
.sheet-rule table.sheet-table { font-size: 12.5px; margin-bottom: 8px; }
.sheet-rule tr.sheet-read td { background: var(--tint-positive); }
.sheet-rule .rule-summary { margin: 8px 0 10px; }
.sheet-rule textarea { flex: 1 1 320px; min-width: 240px; }
.sheet-rule .map-row { flex-wrap: wrap; }

/* ── Shipments page: the engine's nightly-poll timer in one line ── */
.schedule-line { margin: 6px 0 0; line-height: 1.9; }
.schedule-line .badge { vertical-align: 1px; margin-inline-end: 2px; }

/* batch processing from the dashboard drop zone (2026-09-15) */
.file-rows { margin: 12px 0; }
.file-rows td.filename { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-rows select { min-width: 260px; }
.batch-progress { height: 8px; margin: 10px 0 16px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.batch-progress > i { display: block; height: 100%; background: var(--positive); transition: width .4s ease; }
.batch-progress.failed > i { background: var(--caution); }
.batch-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; }
.batch-facts b { font-family: var(--font-mono), monospace; }

/* integrations (settings, 2026-09-22): compact table, one expandable row per service */
table.integrations td { vertical-align: top; }
table.integrations tr.dim > td { opacity: .72; }
table.integrations .toggle-cell { width: 34px; padding-inline-end: 0; }
table.integrations .row-toggle { border: 1px solid var(--rule); background: var(--paper-soft); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; color: var(--ink-muted); font-size: 14px; line-height: 1; transition: transform .15s ease; }
table.integrations tr.open .row-toggle { transform: rotate(180deg); }
table.integrations tr.integration-detail > td { background: var(--paper-soft); border-top: 0; padding-block: 10px 14px; }
.integration-form { margin-top: 6px; }
.integration-form input { min-width: 280px; max-width: 480px; }

/* settings: collapsible sections + compact switches table (2026-09-22) */
details.settings-section { margin: 18px 0; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-soft); }
details.settings-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
details.settings-section > summary::-webkit-details-marker { display: none; }
details.settings-section > summary::before { content: "▸"; color: var(--ink-subtle); font-size: 14px; transition: transform .15s ease; }
details.settings-section[open] > summary::before { transform: rotate(90deg); }
details.settings-section > summary h2 { margin: 0; font-size: 17px; }
details.settings-section .section-meta { margin-inline-start: auto; font-size: 12px; color: var(--ink-subtle); }
details.settings-section .section-body { padding: 4px 16px 16px; border-top: 1px solid var(--rule); }
table.switches td { vertical-align: top; }
table.switches .switch-desc { max-width: 46ch; color: var(--ink-muted); font-size: 13px; }
table.switches .switch-state { white-space: nowrap; }
table.switches .switch-state form { display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
table.switches .env { font-size: 11px; }

/* ── The platform console ── */
.link-card .copy-row { display: flex; gap: 10px; align-items: center; }
.link-card .copy-row input { flex: 1; min-inline-size: 0; }

/* ── A new organization's first steps (dashboard) ── */
.first-steps ol { margin: 0; padding-inline-start: 22px; }
.first-steps li { margin: 6px 0; }
.first-steps li .badge, .first-steps li .hint { margin-inline-start: 8px; }
.first-steps li.done a { color: var(--ink-subtle); }
/* the dry-run switch while the live-write gate is closed */
.gate-line { margin-top: 4px; font-size: 12px; color: var(--caution-text); }
button.switch:disabled { cursor: not-allowed; opacity: .55; }
/* the Priority row: our addresses and the request for the customer's IT */
.priority-access { margin: 6px 0 14px; }
.priority-access label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--ink-muted); }
.priority-access textarea { width: 100%; max-width: 640px; font-size: 13px; }