/* WI-0111 — the Alpha web application's only stylesheet.
   Redesigned on 17 September 2026 under the owner's visual direction
   (ADR-0007 and the visual redesign note under docs/ux/alpha). Standards-only CSS: no
   framework, no design system, no external font, no image, no CDN, no import
   and no external reference of any kind.
   Fonts are the reader's own installed Persian-capable system fonts, named in a
   fallback stack; this Alpha downloads and selects no typeface (CQ-0026,
   CQ-0027 untouched).

   TWO SHELLS, ONE DOCUMENT. `body[data-shell]` is set by the client from the
   server-derived role -- customer, staff, or entry -- and every colour below is
   a token that the shell redefines. The customer works in a deep forest-green
   shell with focused quote cards; staff work on a light warm-neutral canvas with
   a dark persistent sidebar. Warm gold is the single accent in both. Buy is
   always green and always says "خرید"; sell is always red and always says
   "فروش" -- colour never carries a meaning on its own. */

:root {
  /* UR-20261106 (WP-0, spec §1.3): no typeface is downloaded (CQ-0026); the wide "DejaVu Sans" fallback is no longer
     named, and the monospace stack is kept only for `.idchip` outside tables and the technical folds */
  --font: "Vazirmatn", "Vazir", "IRANSansX", "IRANSans", "Segoe UI", Tahoma,
          "Noto Sans Arabic", "Noto Naskh Arabic", "SF Arabic", "Geeza Pro", sans-serif;
  --mono: "DejaVu Sans Mono", "Consolas", monospace;

  --gold: #c9a24a;
  --gold-soft: #e6cf8a;
  --gold-ink: #6b4f0e;

  --green-950: #0b1c17;
  --green-900: #0f2620;
  --green-800: #153229;
  --green-700: #1c4034;
  --green-600: #245544;

  --buy: #2f9e63;
  --buy-deep: #1f7a4a;
  --sell: #d4523f;
  --sell-deep: #a63a2b;

  --charcoal: #1e2724;
  --charcoal-2: #27322e;

  --canvas: #f4f1ea;
  --paper: #fffdf8;
  --ink: #1c2320;
  --muted: #5f6b65;

  --warn-bg: #fff3d1;
  --warn-line: #d9a441;
  --danger: #9b2f24;
  --danger-soft: #fbe7e4;
  --ok: #2f7a55;

  /* shell tokens, defaulted to the light canvas (entry + staff) */
  --bg: var(--canvas);
  --surface: var(--paper);
  --surface-2: #efeadf;
  --text: var(--ink);
  --text-muted: var(--muted);
  --line: #e1dacb;
  --line-strong: #c9c0ad;
  --shadow: 0 1px 2px rgba(20, 30, 25, 0.06), 0 6px 18px rgba(20, 30, 25, 0.06);
  --wash-ink: rgba(155, 47, 36, 0.085);
  --nav-bg: var(--paper);
  --nav-fg: var(--ink);
  --nav-active-bg: var(--green-800);
  --nav-active-fg: #fff;
  --radius: 12px;
  --radius-sm: 8px;

  /* UR-20261106 (WP-0, spec §1.2): status inks, the spacing scale, pills, shadows and the focus ring */
  --ok-ink: #1f6b45;
  --ok-bg: rgba(47, 122, 85, 0.12);
  --bad-ink: #a63a2b;
  --warn-ink: #6b4f0e;
  --error-ink: #9b2f24;
  --met-ink: #2f7a55;
  --focus: var(--gold);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.4);
}

body[data-shell="customer"] {
  --bg: var(--green-900);
  --surface: var(--green-800);
  --surface-2: var(--green-700);
  --text: #f2eee3;
  --text-muted: #b6c4bb;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 24px rgba(0, 0, 0, 0.25);
  --wash-ink: rgba(255, 255, 255, 0.07);
  --nav-bg: var(--green-950);
  --nav-fg: #d9e3dd;
  --nav-active-bg: var(--gold);
  --nav-active-fg: var(--green-950);
  --warn-bg: rgba(201, 162, 74, 0.16);
  --warn-line: var(--gold);
  --danger-soft: rgba(212, 82, 63, 0.18);
  /* UR-20261106 (WP-0, spec §1.2): the same inks, readable on the dark green shell */
  --ok-ink: #8fe0b3;
  --ok-bg: rgba(95, 207, 149, 0.16);
  --bad-ink: #f2a396;
  --warn-ink: #f3d98a;
  --error-ink: #f08a78;
  --met-ink: #5fcf95;
}

body[data-shell="staff"] {
  --nav-bg: var(--charcoal);
  --nav-fg: #d7ddd9;
  --nav-active-bg: var(--gold);
  --nav-active-fg: var(--charcoal);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is the ONE visibility mechanism the client uses, so
   it must beat every layout rule below (a `.navbtn { display: flex }` would
   otherwise out-rank the user agent's `[hidden]` rule and show a control the
   client had hidden). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
}
body { min-height: 100vh; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; margin: 0; }
p { margin: 0; }

svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
      stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

/* Latin identifiers and numbers are isolated so RTL punctuation and joining
   never reorder them. `bdi` carries its own direction; the class sets it. */
.ltr, bdi.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* An LTR run placed in an RTL grid or flex box must sit at the INLINE START
   (the right), shrink-wrapped, or its own left-to-right text alignment drags
   the number to the far left of the card. */
.ltr, bdi.ltr, .quote-value, .price-magnitude { justify-self: start; align-self: start; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.idchip {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-family: var(--mono); font-size: 0.78em;
  padding: 0.05em 0.5em; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-muted);
}

/* ---------------------------------------------------------------- watermark
   P-2 / A22. Two independent carriers, both permanent. The band is a real
   element in the document flow; the wash is a fixed, non-interactive overlay
   across the whole viewport. Neither is written to by any script in this tree,
   neither is behind a class toggle, and the print rules below repeat both. */
.watermark-band {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  align-items: baseline;
  justify-content: center;
  background: #8c2f28;
  color: #fff;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.watermark-band strong { letter-spacing: 0.12em; font-family: var(--mono); font-size: 0.78rem; }
@media (max-width: 30rem) { .watermark-band { font-size: 0.72rem; padding: 0.3rem 0.6rem; } }

.watermark-wash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, transparent 0 140px, var(--wash-ink) 140px 142px);
}
.watermark-wash::after {
  content: "INTERNAL ALPHA / TEST DATA";
  position: fixed;
  top: 48%;
  right: 50%;
  transform: translate(50%, -50%) rotate(-24deg);
  font-family: var(--mono);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--wash-ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- frame */
.app { position: relative; z-index: 35; min-height: calc(100vh - 2.2rem); }
.frame { display: flex; flex-direction: column; min-height: inherit; }
.topbar, .mainnav, main { min-width: 0; }
/* Grid and flex items default to min-width:auto, which lets a wide intrinsic
   child (a <select> with a long option) push a card past the viewport. */
.block, .stat, .fact, .board, .persona-card, .pricebox, .axis { min-width: 0; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 1.05rem; }
.topbar-sub { color: var(--text-muted); font-size: 0.78rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* C05 (P11-F1): the build identity, in the server's words; a quiet line, never a badge */
.build-identity { color: var(--text-muted); font-size: 0.72rem; margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.topbar-session { display: flex; align-items: center; gap: 0.6rem; }
.who { font-size: 0.86rem; color: var(--text-muted); display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.who strong { color: var(--text); font-weight: 700; }

.nonbinding {
  display: inline-block;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: inherit;
  border-radius: 999px;
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
  justify-self: start;   /* never stretched when it lands in a grid */
}

main {
  flex: 1;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1rem 1rem 5.5rem;   /* room for the bottom navigation on a phone */
}

/* ---------------------------------------------------------------- nav
   Mobile first: a bottom bar with icons and short labels, every target at
   least 44px tall. Disabled orientation entries are hidden on a phone. */
.mainnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  justify-content: space-around;
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-top: 1px solid var(--line-strong);
  padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom, 0));
}
.mainnav .brand { display: none; }
.navbtn {
  flex: 1 1 0;
  min-height: 56px;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.2rem;
  cursor: pointer;
  white-space: nowrap;
}
.navbtn svg { width: 1.45rem; height: 1.45rem; }
.navbtn small { display: none; }
.navbtn[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.navbtn[disabled] { display: none; }

/* ---------------------------------------------------------------- pages */
.view > .page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0.25rem 0 1rem;
}
.page-head h2 { font-size: 1.35rem; line-height: 1.35; }
.page-context { color: var(--text-muted); font-size: 0.86rem; max-width: 46rem; }
.page-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow);
}
.block-head { margin-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; }
.block h3 { font-size: 1.1rem; }
.block h4 { font-size: 1rem; color: var(--text); font-weight: 700; }

.hint { color: var(--text-muted); font-size: 0.84rem; }
.hint.tiny { font-size: 0.84rem; }
.lead { font-size: 0.95rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
label.inline { font-size: 0.86rem; color: var(--text-muted); }

/* ------------------------------------------------ the live look (ADR-0010)
 * Worn ONLY by the owner's evaluation instance, which tells the browser so.
 * Without that, nothing below matches and the application looks as it did. */
body[data-look="live"] #watermark-band,
body[data-look="live"] #watermark-wash,
body[data-look="live"] .nonbinding,
body[data-look="live"] [data-testword] { display: none !important; }
/* 2026-11-09 R6 (owner item 1): the live look's FIRST PAINT. The document's markup is the plain build's entry (its test
 * wording); the live server marks the body data-look="live" before the first byte, and app.js rewrites the page and
 * marks it data-worn="live" (wearLiveLook) once it has arrived. Until then nothing of the frame is painted -- a hard
 * refresh over a slow line shows an empty page and, after a short pause, one quiet ring; never the plain entry. */
body[data-look="live"]:not([data-worn="live"]) .frame { display: none !important; }
body[data-look="live"]:not([data-worn="live"])::after {
  content: ""; position: fixed; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem;
  box-sizing: border-box; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--gold);
  opacity: 0; animation: row-fetch-turn 0.9s linear infinite, look-wait-show 0.2s ease-out 0.3s forwards;
}
@keyframes look-wait-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body[data-look="live"]:not([data-worn="live"])::after { animation: look-wait-show 0.2s ease-out 0.3s forwards; }
}
.live-login { max-width: 24rem; margin: 0 auto; display: grid; gap: 0.8rem; text-align: start; }
.live-login .cfg-field input { width: 100%; }
.live-login input[type="password"] {
  font: inherit; padding: 0.5rem 0.7rem; min-height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: inherit; width: 100%;
}
.who small { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }

/* ------------------------------------------ phones: rotation and zoom
 * A phone browser enlarges text when it rotates and zooms into any field whose
 * text is under 16px, and then stays zoomed. Both are switched off here. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: max(16px, 1rem); font-family: inherit; }
body[data-look="live"] .app {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
@media (orientation: landscape) and (max-height: 32rem) {
  .sheet { max-height: 96vh; }
  .topbar { padding-block: 0.3rem; }
}

/* --------------------------------------------------- the price boards */
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem; }
.board-head h3 { font-size: 1rem; }
.board-updated { font-size: 0.84rem; color: var(--text-muted); }
.board-list { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.board-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.6rem; display: grid; gap: 0.45rem; }
.board-asset { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0.2rem; }
.board-unit { font-size: 0.76rem; color: var(--text-muted); }
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 0.8fr) minmax(0, 1fr); gap: 0.45rem; align-items: stretch; }
.board-title { display: grid; place-items: center; align-content: center; text-align: center; font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.boardbtn { display: grid !important; gap: 0.1rem; justify-items: center; padding: 0.5rem 0.3rem; min-height: 56px; width: 100%; position: relative; }
.boardbtn small { font-size: 0.78rem; font-weight: 500; opacity: 0.9; }
.boardbtn .num { font-size: 1.02rem; font-weight: 700; }
.board-arrow { position: absolute; top: 0.2rem; inset-inline-start: 0.4rem; font-size: 0.7rem; }
.boardbtn.flash { animation: boardflash 1.6s ease-out 1; }
@keyframes boardflash { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.95); } 100% { box-shadow: 0 0 0 14px rgba(201, 162, 74, 0); } }
.board-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.board-caption { font-size: 0.84rem; color: var(--text-muted); }
.board-controls .segmented button { border: 0; border-radius: 0; }
.board-controls .segmented button[aria-pressed="true"] { background: var(--gold); color: var(--green-950); }
.board-row.operator { grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.5fr) minmax(0, 1fr); }
.board-edit { display: grid; gap: 0.25rem; padding: 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.board-edit.buy { border-inline-start: 3px solid var(--buy); }
.board-edit.sell { border-inline-start: 3px solid var(--sell); }
.board-edit small { font-size: 0.74rem; color: var(--text-muted); }
.board-editline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.3rem; align-items: center; }
.board-editline input { width: 100%; text-align: center; font-weight: 700; }
.stepbtn { min-width: 44px; font-size: 1.2rem; padding: 0.2rem; }
@media (max-width: 47.99rem) {
  .board-row.operator { grid-template-columns: 1fr; }
  .board-row.operator .board-title { order: -1; justify-items: start; text-align: start; }
}

/* ------------------------------------------------ ONE board, one table */
#trade-board, .board-table { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 1rem; }
#trade-board .board-row, .board-table .board-row { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); }
#trade-board .board-row:last-child, .board-table .board-row:last-child { border-bottom: 0; }
.board-headrow { font-size: 0.84rem; color: var(--text-muted); text-align: center; padding-block: 0.35rem !important; background: var(--surface-2); }
.board-title { display: grid; gap: 0.1rem; place-items: center; align-content: center; text-align: center; line-height: 1.25; }
.board-assetname { font-size: 0.9rem; }
.board-term { font-size: 0.84rem; color: var(--text-muted); font-weight: 500; }
.boardbtn { min-height: 64px; }
.boardbtn .num { font-size: 1.05rem; }
/* WI-0126 P08-C2: the server's mesghal display figure first, the unit price second */
.price-secondary { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.price-secondary .num-secondary { font-family: var(--mono); }
.boardbtn .price-per { font-size: 0.78rem; }
.mesghal-basis { display: block; font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.mesghal-basis .mesghal-grams { font-family: var(--mono); }
.board-basis { padding: 0.35rem 0.6rem; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ------------------------------------------------ the customer's panel */
.statgrid { display: grid; gap: 0.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0.9rem; }
.stat-tile { display: grid; gap: 0.2rem; padding: 0.8rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.stat-tile-name { font-size: 0.84rem; color: var(--text-muted); }
.stat-tile-value { font-size: 1.25rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-tile-value small { font-size: 0.84rem; font-weight: 500; color: var(--text-muted); }
.block-head.spread { flex-direction: row; justify-content: space-between; align-items: center; }
.filterbar { margin-bottom: 0.8rem; flex-wrap: wrap; }
.filterbar button { border: 0; border-radius: 0; flex: 1 1 auto; }
.filterbar button[aria-pressed="true"] { background: var(--gold); color: var(--green-950); }

/* ------------------------------------------------ the operator's board */
.board-control { display: flex; gap: 0.4rem; align-items: center; }
.opboard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.opboard-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(7rem, 1fr) minmax(5rem, 0.6fr) minmax(0, 1.5fr); gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); }
.opboard-row:last-child { border-bottom: 0; }
.opboard-head { background: var(--surface-2); font-size: 0.76rem; color: var(--text-muted); text-align: center; padding-block: 0.4rem; }
.opboard-gap { text-align: center; font-weight: 700; color: var(--text); font-family: inherit; }
/* OVERNIGHT-C2: three tracks for −/input/+; the Save (4th child) wraps to its OWN full-width row when visible
   (dirty), so it never steals width from the price input. */
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0.25rem; align-items: center; }
.stepper input { width: 100%; text-align: center; font-weight: 700; font-size: 1.05rem; border-width: 2px; }
.stepper.buy input { border-color: var(--buy); }
.stepper.sell input { border-color: var(--sell); }
.stepper .stepbtn { min-width: 44px; font-size: 1.3rem; padding: 0; border-radius: 999px; }
/* OVERNIGHT-DB1-C1 section C: a hidden Save must not RESERVE its grid column and clip the price. `visibility:
   hidden` still occupies the `auto` track, squeezing the buy input; `display:none` collapses it so the price
   input takes the freed width, and the control reappears only while editing. */
.stepper .stepsave { display: none; }
/* OVERNIGHT-C2: the JS toggles `dirty` on the .pricecell (the edit cell), not the .stepper — so the Save is
   keyed off the pricecell, and it appears on its own full-width row below −/input/+ (never squeezing the input). */
.pricecell.dirty .stepper .stepsave { display: inline-flex; grid-column: 1 / -1; }
/* The derived SELL side is a SOLE read-only output, not a stepper: it must use the whole cell width (it was
   landing in the 44px first track of the 4-column stepper grid and clipping to a few digits). */
.pricecell.sell .stepper, .pricecell.derived .stepper { grid-template-columns: minmax(0, 1fr); }
/* OVERNIGHT-DB1-C1 section C: wherever the row is tight (a phone, OR a desktop at 125–150% zoom, i.e. an
   effective width up to ~912px) the buy price takes its OWN full-width line ABOVE the −/+ steppers, so a long
   magnitude is never squeezed between the two round buttons. Above this, the inline −/input/+ layout stays. */
@media (max-width: 57rem) {
  .pricecell.buy .stepper { grid-template-columns: 1fr 1fr; }
  .pricecell.buy .stepper input { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 47.99rem) {
  .opboard-head { display: none; }
  .opboard-row { grid-template-columns: 1fr 1fr; grid-template-areas: "title gap" "buy buy" "sell sell"; }
  .opboard-row .board-title { grid-area: title; justify-items: start; text-align: start; }
  .opboard-row .opboard-gap { grid-area: gap; text-align: end; }
  .opboard-row .stepper.buy { grid-area: buy; }
  .opboard-row .stepper.sell { grid-area: sell; }
}

/* ---------------------------- the operator's board looks like the board */
/* UR-20261106 (WP-3, spec §5.D.4, DC-27): neutral cells -- the surface, the text colour and a line border, with a 4px
   side marker at the inline start (buy-deep / sell-deep); a closed side keeps full opacity on the quieter surface */
.pricecell {
  display: grid; gap: 0.3rem; padding: 0.4rem 0.45rem; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-inline-start-width: 4px;
}
.pricecell.buy { border-inline-start-color: var(--buy-deep); }
.pricecell.sell { border-inline-start-color: var(--sell-deep); }
.pricecell.closed { opacity: 1; background: var(--surface-2); }
.pricecell .stepper input { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); }
.pricecell .stepper input[readonly] { color: var(--text); border-style: dashed; }
.pricecell .stepbtn { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
.sidegate { min-height: 40px; font-size: 0.82rem; padding: 0.15rem 0.6rem; justify-self: center; }
.opboard-gap input { width: 100%; text-align: center; font-weight: 700; color: var(--text); border: 1px solid var(--line-strong); background: var(--surface); min-height: 40px; }
.togglebtn[aria-pressed="true"] { background: var(--gold); color: var(--green-950); border-color: var(--gold); }
.board-table.preview { pointer-events: none; opacity: 0.95; }

/* ------------------------------------------------ configuration tabs */
.cfg-section { display: grid; gap: 0.8rem; }
.cfg-section .block { margin: 0; }
.fold { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 0.4rem 0.8rem; }
.fold > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.fold .block { border: 0; box-shadow: none; padding: 0.4rem 0 0.6rem; background: transparent; }

/* ------------------------------------------- a quieter page (live look)
 * Fewer words, the same colours. Refusals and outcomes are untouched. */
body[data-look="live"] .page-context,
body[data-look="live"] .block-head .fact-note,
body[data-look="live"] .block-head .hint,
body[data-look="live"] .freshness:not(.stale),
body[data-look="live"] .axis-note,
body[data-look="live"] #reason-limitation,
body[data-look="live"] #action-target,
body[data-look="live"] .ticket-form .fieldrow .fact-note,
body[data-look="live"][data-shell="customer"] [data-byid],
body[data-look="live"][data-shell="customer"] #btn-load-detail { display: none !important; }
body[data-look="live"] .page-head h2 { font-size: 1.35rem; }
body[data-look="live"] .block { padding: 1rem; }
@media (min-width: 48rem) { body[data-look="live"] main > .view > .block { margin-bottom: var(--sp-5); } }

/* ------------------------------------------------ the price board rows */
#trade-assets { display: grid; gap: 0.45rem; }
.boardrow { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem;
  align-items: center; width: 100%; text-align: start; border-radius: var(--radius); padding: 0.6rem 0.8rem; height: auto; }
.boardrow-name { font-weight: 700; }
.boardrow-price { display: grid; justify-items: end; line-height: 1.25; }
.boardrow-price small { font-size: 0.72rem; opacity: 0.8; font-weight: 500; }
.boardrow-price .num { font-family: var(--mono); font-size: 0.98rem; font-weight: 700; }
.boardrow-price.buy .num { color: #7fd8a7; }
.boardrow-price.sell .num { color: #f2a396; }
.asset-tab.boardrow[aria-selected="true"] .num { color: inherit; }

/* the eye sits INSIDE the password field */
.secret-wrap { position: relative; display: block; }
.secret-wrap input { width: 100%; padding-right: 3rem; padding-left: 0.7rem; text-align: left; }
.secret-eye { position: absolute; right: 0.2rem; left: auto; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 0.3rem 0.5rem; border: 0; background: transparent; }

/* ---------------------------------------------------- request cards */
body[data-look="live"] .reqhead { display: none; }
.reqcard:not(tr) { display: grid !important; gap: 0.45rem; width: 100%; text-align: start; padding: 0.8rem 0.9rem; height: auto;
  grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; justify-items: stretch; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.reqcard:not(tr) > span { grid-area: auto !important; min-width: 0; }
.reqcard-top { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.reqcard-asset { font-size: 1rem; margin-inline-end: auto; }
.reqcard-sum { font-size: 0.92rem; color: var(--text); display: block; }
.reqcard-net { font-weight: 700; }
.reqcard-foot { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }
.reqcard-who { font-weight: 600; color: var(--text); }
.list-section { font-size: 0.9rem; margin: 0.9rem 0 0.4rem; color: var(--text-muted); }
.reqlist .reqrow + .reqrow { margin-top: 0.5rem; }

/* ------------------------------------------------ the ticket sheet */
.trade-sheet { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0)); }
.ticket-price { display: grid; gap: 0.2rem; padding: 0.7rem 0.8rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.ticket-price .quote-number { font-size: 1.7rem; font-weight: 700; font-family: var(--mono); direction: ltr; unicode-bidi: isolate; text-align: end; }
.ticket-price .quote-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.kvlist { display: grid; gap: 0.3rem; font-size: 0.86rem; }
.kv { display: flex; justify-content: space-between; gap: 0.8rem; border-bottom: 1px dashed var(--line); padding: 0.25rem 0; }
.kv-name { color: var(--text-muted); flex: 0 0 auto; }
.kv-value { text-align: end; }
.kv-strong { font-weight: 700; font-size: 1rem; border-bottom: 0; }
.kv-strong .kv-name { color: var(--text); }
.secret-wrap { display: flex; gap: 0.3rem; align-items: stretch; }
.secret-wrap input { flex: 1 1 auto; min-width: 0; }
.secret-eye svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secret-eye[aria-pressed="true"] .eye-slash { display: none; }

/* ----------------------------------------------- entered trading (ADR-0008) */
.trade-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-bottom: 0.9rem; }
.trade-grid .block { margin: 0; }
.quotepair { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 0.6rem; }
.quotebox { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; display: grid; gap: 0.4rem; background: var(--surface-2); min-width: 0; }
.quotebox .quote-side { font-size: 0.84rem; color: var(--text-muted); }
.quotebox .quote-number { font-size: 1.6rem; font-weight: 700; font-family: var(--mono); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
body[data-shell="customer"] .quotebox .quote-number { color: var(--gold-soft); }
.quotebox .quote-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; font-size: 0.78rem; color: var(--text-muted); }
.quotebox.unavailable .quote-number { font-size: 1rem; font-family: inherit; color: var(--text-muted); }
.ticket-form { display: grid; gap: 0.7rem; }
.ticket-form .fieldrow { display: grid; gap: 0.3rem; }
.ticket-form .fieldrow label, .cfg-field label { font-size: 0.84rem; color: var(--text-muted); }
.ticket-form input[type="text"] { width: 100%; font-size: 1.25rem; }
.remaining { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.chip.remaining-chip { background: var(--warn-bg); border-color: var(--warn-line); }
.cfg-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.cfg-field { display: grid; gap: 0.25rem; min-width: 0; }
.cfg-field input[type="text"], .cfg-field select { width: 100%; }
.cfg-flags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
button.flag { font-size: 0.82rem; font-weight: 500; }
button.flag[aria-pressed="true"] { background: rgba(47, 122, 85, 0.16); border-color: var(--ok); }
button.flag[aria-pressed="false"] { background: var(--danger-soft); border-color: var(--danger); }
.cfg-term { border-top: 1px dashed var(--line); margin-top: 0.7rem; padding-top: 0.7rem; }
.cfg-term h4 { margin-bottom: 0.3rem; }
.cfg-scope { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem; margin-top: 0.5rem; background: var(--surface-2); }
.cfg-scope-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.cfg-version { font-size: 0.76rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- controls */
button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  padding: 0.55rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 600;
  line-height: 1.2;
}
button.small { min-height: 44px; padding: 0.35rem 0.8rem; font-size: 0.86rem; font-weight: 500; }
button.block { width: 100%; }
button.primary { background: var(--green-800); border-color: var(--green-800); color: #fff; }
body[data-shell="customer"] button.primary { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
button.secondary { background: var(--surface); border-color: var(--line-strong); }
button.ghost { background: transparent; border-color: transparent; color: inherit; }
button.ghost:hover { text-decoration: underline; }
button.danger { background: var(--sell-deep); border-color: var(--sell-deep); color: #fff; }
button.danger-outline { background: transparent; border-color: var(--sell-deep); color: var(--sell-deep); }
body[data-shell="customer"] button.danger-outline { border-color: var(--bad-ink); color: var(--bad-ink); }
button.buy  { background: var(--buy-deep);  border-color: var(--buy-deep);  color: #fff; }
button.sell { background: var(--sell-deep); border-color: var(--sell-deep); color: #fff; }
button.icon { min-width: 44px; min-height: 44px; width: 44px; padding: 0; border-radius: var(--radius-sm); flex: 0 0 auto; }
button.icon svg { width: 1.3rem; height: 1.3rem; }
button[disabled] { opacity: 0.55; cursor: not-allowed; }

select, input[type="text"] {
  font: inherit;
  padding: 0.5rem 0.7rem;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  min-width: 0;
  max-width: 100%;
}
.row select { flex: 1 1 12rem; }
select[dir="ltr"], input[dir="ltr"] { font-family: inherit; font-size: max(16px, 1rem); font-variant-numeric: tabular-nums; }

.segmented { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg { flex: 1 1 0; border: 0; border-radius: 0; background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg + .seg { border-inline-start: 1px solid var(--line-strong); }
.seg.buy[aria-pressed="true"]  { background: var(--buy-deep);  color: #fff; }
.seg.sell[aria-pressed="true"] { background: var(--sell-deep); color: #fff; }

/* ---------------------------------------------------------------- entry */
.view-entry { display: flex; justify-content: center; }
.entry { width: 100%; max-width: 44rem; }
.entry-hero { text-align: center; margin: 0.75rem 0 1.25rem; }
.entry-hero svg { width: 3rem; height: 3rem; color: var(--gold); margin-bottom: 0.25rem; }
.entry-hero h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.entry-hero .lead { color: var(--text-muted); max-width: 32rem; margin: 0 auto; }
.persona-cards { display: grid; gap: 1rem; }
.persona-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.persona-card label { font-size: 0.84rem; color: var(--text-muted); margin-top: 0.3rem; }
.persona-card button { margin-top: auto; }
.persona-icon svg { width: 2rem; height: 2rem; color: var(--gold-ink); }
.entry-note { margin-top: 1.2rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; }

/* ---------------------------------------------------------------- board */
.board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.asset-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.asset-tab {
  min-height: 44px;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  direction: ltr;
  font-weight: 500;
}
.asset-tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--green-950); font-weight: 700; }

.quote-card { display: grid; gap: 0.35rem; }
.quote-card .quote-label { color: var(--text-muted); font-size: 0.84rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.quote-card .quote-value {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}
body[data-shell="customer"] .quote-card .quote-value { color: var(--gold-soft); }
.quote-card .quote-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.quote-card .quote-unavailable { font-size: 1.15rem; font-weight: 600; color: var(--text-muted); }

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: var(--radius-pill); padding: 0.1rem 0.55rem;
  font-size: 0.8rem; font-weight: 600; line-height: 1.5;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  /* review 2026-11-06: a chip that still carries a sentence wraps inside its box (never past the card or the window);
     a chip short by contract stays on one line (the rule below) */
  max-width: 100%; white-space: normal; text-align: start;
}
.data-table .chip:not(.transfer-chip), .pending-line .chip, .page-head .chip,
.chip.buy, .chip.sell, .chip.remaining-chip { white-space: nowrap; }
.chip.buy  { background: rgba(47, 158, 99, 0.16); border-color: var(--buy);  color: var(--buy-deep); }
.chip.sell { background: rgba(212, 82, 63, 0.16); border-color: var(--sell); color: var(--sell-deep); }
body[data-shell="customer"] .chip.buy  { color: #8fe0b3; }
body[data-shell="customer"] .chip.sell { color: #f2a396; }
.chip.state { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.chip.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.chip.bad { background: var(--danger-soft); border-color: var(--danger); color: var(--bad-ink); }
.chip.attention { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.chip.neutral { background: var(--surface-2); border-color: var(--line); color: var(--text-muted); }
.chip.muted { opacity: 0.85; }

.trade-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1rem; }
.trade-actions button { min-height: 52px; font-size: 1.05rem; font-weight: 700; }

/* stats */
.stat-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat-grid + .stat-grid { margin-top: 0.6rem; }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.stat-name { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.stat-note { font-size: 0.74rem; color: var(--text-muted); }
.stat.withheld, .stat.unavailable { border-style: dashed; }
.stat.withheld .stat-value, .stat.unavailable .stat-value { font-size: 0.95rem; color: var(--text-muted); }
.stat.untrusted { border-color: var(--warn-line); background: var(--warn-bg); }

/* request rows */
.reqlist { display: grid; gap: 0.5rem; }
.reqrow { margin: 0; }
.reqrow-open {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dir main state" "id id state";
  gap: 0.2rem 0.7rem;
  align-items: center;
  text-align: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  font-weight: 500;
}
.reqrow-open:hover { border-color: var(--gold); }
.reqrow-open .r-dir { grid-area: dir; }
.reqrow-open .r-main { grid-area: main; min-width: 0; overflow-wrap: anywhere; }
.reqrow-open .r-state { grid-area: state; justify-self: end; }
.reqrow-open .r-id { grid-area: id; }
.reqlist .empty { padding: 0.9rem; }
/* B2B-OPERATOR-CUSTOMERS-01: the operator's customer directory and profile */
.page-actions { display: flex; gap: 0.5rem; align-items: center; }
.dir-controls { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin: 0.4rem 0 0.8rem; }
.dir-controls .cfg-field input[type="search"] {
  font: inherit; padding: 0.5rem 0.7rem; min-height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: inherit; width: 100%;
}
.dir-counts { font-size: 0.84rem; color: var(--text-muted); margin: 0 0 0.5rem; }
/* owner 2026-11-05: the directory is a real table (.data-table); these only style its cells. UR-20261106 (WP-4, spec
   §3.1.1): a word is never broken -- the table system wraps text at spaces only */
.dir-row > * { min-width: 0; }
.dir-row .dir-name { font-weight: 700; }
.dir-row .dir-company { color: var(--text-muted); font-size: 0.86rem; }
.dir-group { font-size: 0.9rem; margin: 0.9rem 0 0.3rem; color: var(--text-muted); }
.dir-pager { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; }
.dir-pager .freshness { margin-inline-start: auto; }
/* UR-20261106 (WP-4, spec §1.7): the profile's facts are one two-column list, never a box per fact */
.profile-facts { margin: 0.4rem 0 0.8rem; }
.profile-fact { min-width: 0; }
.profile-fact .kv-name { color: var(--text-muted); }
.profile-fact.unavailable .kv-value { color: var(--text-muted); }
/* B2B-CUSTOMER-API-UI-01: stale / not-read notes and the history retry sit with the list, not over it */
.fact-note.stale { color: var(--text); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; }
#customers-history-failed { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dir-requests .fact-note { display: inline; }
/* B2B-OPERATOR-INLINE-DECISIONS-01: decide on the card, in the list */
.reqrow-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.35rem 0 0.2rem; }
.reqrow-actions:empty { display: none; }
.reqrow-actions .freshness { flex-basis: 100%; }
.inline-confirm { flex-basis: 100%; border: 1px solid var(--line); border-inline-start: 5px solid var(--gold); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; background: var(--surface-2); display: grid; gap: 0.35rem; }
.inline-confirm h4 { font-size: 0.98rem; margin: 0; }
.inline-confirm .actions, .inline-outcome .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.inline-outcome { flex-basis: 100%; margin-top: 0; }
.inline-outcome:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.reqhead { display: none; }
.reqlist.table .reqrow-open { background: var(--surface); }

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------------- ticket
   A bottom sheet on a phone; a centred card over a scrim on wider screens. */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 46;
  background: rgba(8, 20, 16, 0.55);
}
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 47;
  max-height: 92vh;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--line-strong);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  padding: 0.6rem 1rem 1.2rem;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.sheet-head h2 { font-size: 1.1rem; }
.ticket { display: grid; gap: 0.8rem; }
.ticket-row { display: grid; gap: 0.3rem; }
.ticket-row label, .ticket-label { font-size: 0.84rem; color: var(--text-muted); font-weight: 600; }
.ticket-row select { width: 100%; }
.ticket-quote {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 0.6rem 0.8rem;
  display: grid; gap: 0.15rem;
  font-size: 0.86rem; color: var(--text-muted);
}
.ticket-quote .quote-value { font-size: 1.4rem; font-weight: 700; color: var(--text); direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ticket-actions { display: grid; gap: 0.5rem; }
.ticket .outcome { margin-top: 0; }

/* ---------------------------------------------------------------- detail */
.byid { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; }
.byid input { flex: 1 1 14rem; max-width: 26rem; }
.detail-summary {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center;
  margin-bottom: 0.9rem;
}
.detail-summary .asset { font-weight: 700; font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.detail-grid { display: grid; gap: 1rem; }
.detail-grid .block { margin: 0; }

.price-hero { display: grid; gap: 0.7rem; }
.pricebox { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; background: var(--surface-2); }
.pricebox.locked { border-inline-start: 5px solid var(--gold); }
.pricebox.live { border-inline-start: 5px solid var(--line-strong); }
.pricebox > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.price-magnitude {
  font-size: 1.8rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}
.pricebox.live .price-magnitude { font-size: 1.2rem; color: var(--text-muted); }
body[data-shell="customer"] .pricebox.locked .price-magnitude { color: var(--gold-soft); }

.axes { display: grid; gap: 0.6rem; }
.axis {
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
}
#axis-sync { border-inline-start-color: #8d76bf; }
#axis-settlement { border-inline-start-color: var(--ok); }
.axis-state { font-size: 1.05rem; font-weight: 700; display: block; }
#axis-approval .axis-state { font-size: 1.25rem; }
.axis-note { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; }
.notconfirmed {
  display: inline-block;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 0 0.5rem;
  font-size: 0.74rem;
}

.facts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.fact {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  display: grid; gap: 0.1rem; min-width: 0;
}
.fact-name { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.fact-value { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.fact-value.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.fact-note { color: var(--text-muted); font-size: 0.84rem; }
/* B2B-APP-INTEGRATION-READY-01: the accounting pilot's own notice and guidance.
   Deliberately NOT .nonbinding / [data-testword], which the live look hides:
   this wording must stay visible in every look. */
.pilot-notice {
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--warn-line);
  border-inline-start: 5px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.7;
}
.pilot-guidance { margin: 0.3rem 0 0; font-size: 0.84rem; font-weight: 600; }
.kv.pilot-state .kv-value { font-weight: 700; }
.fact.withheld, .fact.unavailable { border-style: dashed; }
.fact.withheld .fact-value, .fact.unavailable .fact-value { color: var(--text-muted); font-size: 0.9rem; }
.fact.untrusted { border-color: var(--warn-line); background: var(--warn-bg); }

.decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.4rem 0 0.5rem; }
.decision-actions button { min-height: 52px; font-size: 1.02rem; font-weight: 700; }

.messages { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.message {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; background: var(--surface-2);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; font-size: 0.86rem;
}
.subpanel { margin-top: 0.8rem; border-top: 1px dashed var(--line-strong); padding-top: 0.5rem; }
.subpanel summary { cursor: pointer; font-size: 0.86rem; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }

/* ------------------------------------------------------------- freshness */
.freshness { font-size: 0.84rem; color: var(--text-muted); }
.freshness.stale { color: #e3a26a; font-weight: 700; }
body[data-shell="staff"] .freshness.stale, body[data-shell="entry"] .freshness.stale { color: var(--danger); }

.outcome:empty { display: none; }
.outcome {
  margin-top: 0.7rem;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  background: var(--surface-2);
  display: grid; gap: 0.25rem;
}
.outcome.bad { border-inline-start-color: var(--sell); }
.outcome.good { border-inline-start-color: var(--buy); }
/* WI-0127 R1 (RT-P9-05): an answer that is neither done nor refused -- UNKNOWN, CONFLICT */
.outcome.warn { border-inline-start-color: var(--warn-line); background: var(--warn-bg); }
.outcome h4 { font-size: 0.98rem; color: var(--text); }
.outcome ul { margin: 0; padding-inline-start: 1.2rem; font-size: 0.86rem; }
.outcome button { justify-self: start; }

/* ---------------------------------------------------------------- tools */
.tools-grid { display: grid; gap: 1rem; }
.debug { margin: 0.5rem 0 1rem; color: var(--text-muted); font-size: 0.85rem; }
.debug summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.debug-log {
  max-height: 22rem;
  overflow: auto;
  background: #10151a;
  color: #cfe3ef;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  direction: ltr;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.76rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* UR-20261106 (WP-0, spec §1.10): bottom centre on a desk, under the top bar on a phone (rule in the WP-0 section) */
.toast {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  z-index: 78;
  background: var(--charcoal);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  max-width: min(32rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-pop);
  text-align: center;
}

/* ================================================================ tablet */
@media (min-width: 48rem) {
  .persona-cards { grid-template-columns: 1fr 1fr; }
  .axes { grid-template-columns: repeat(3, 1fr); }
  .price-hero { grid-template-columns: 3fr 2fr; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .reqrow-open {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "dir main id state";
    min-height: 52px;
  }
  .reqrow-open .r-id { justify-self: start; }
  .reqhead {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.2rem 0.7rem;
    padding: 0 0.8rem 0.2rem; font-size: 0.76rem; color: var(--text-muted); font-weight: 600;
  }
  .reqhead span:last-child { justify-self: end; }
  main { padding: 1.25rem 1.5rem 2rem; }

  /* the navigation becomes a horizontal bar under the top bar */
  .mainnav {
    position: static;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.35rem 1.25rem;
  }
  .navbtn { flex: 0 0 auto; flex-direction: row; gap: 0.45rem; min-height: 44px; padding: 0.35rem 0.9rem; font-size: 0.88rem; }
  .navbtn svg { width: 1.15rem; height: 1.15rem; }
  .navbtn[disabled] { display: inline-flex; opacity: 0.5; cursor: not-allowed; }
  .navbtn[disabled] small { display: inline; font-size: 0.8rem; opacity: 0.85; }

  /* the ticket becomes a centred card over the board */
  .sheet {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, calc(100vw - 2rem));
    max-height: 88vh;
    border-radius: var(--radius);
    padding: 0.9rem 1.3rem 1.3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  .ticket-actions { grid-template-columns: 2fr 1fr; }
}

/* ================================================================ desktop */
@media (min-width: 64rem) {
  .trade-sheet { inset-inline: auto; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(34rem, 92vw); border-radius: var(--radius); }
  .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .detail-grid .price-hero, .detail-grid .axes-block { grid-column: 1 / -1; }
  .board { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tabs tabs" "quote actions"; align-items: end; column-gap: 2rem; }
  .board .asset-tabs { grid-area: tabs; }
  .board .quote-card { grid-area: quote; }
  .board .trade-actions { grid-area: actions; margin-top: 0; min-width: 20rem; }
  .quote-card .quote-value { font-size: 3rem; }

  /* STAFF: the navigation is a persistent sidebar at the inline start (the
     right-hand side in this RTL document), beside the top bar AND the main
     area. The frame becomes a two-column grid; the DOM order is unchanged. */
  body[data-shell="staff"] .frame {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-areas: "nav top" "nav main";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  body[data-shell="staff"] .topbar { grid-area: top; }
  body[data-shell="staff"] main { grid-area: main; max-width: 68rem; }
  body[data-shell="staff"] .mainnav {
    grid-area: nav;
    position: sticky;
    top: 2.2rem;
    height: calc(100vh - 2.2rem);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 1rem 0.8rem;
    border: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--nav-bg);
    color: var(--nav-fg);
  }
  body[data-shell="staff"] .mainnav .brand {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "i s";
    column-gap: 0.6rem; align-items: center;
    padding: 0.3rem 0.4rem 1rem; margin-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gold-soft);
  }
  body[data-shell="staff"] .mainnav .brand svg { grid-area: i; width: 2rem; height: 2rem; color: var(--gold); }
  body[data-shell="staff"] .mainnav .brand span { grid-area: n; font-weight: 700; }
  body[data-shell="staff"] .mainnav .brand small { grid-area: s; font-size: 0.72rem; opacity: 0.75; }
  body[data-shell="staff"] .navbtn {
    width: 100%; justify-content: flex-start; padding: 0.55rem 0.75rem; font-size: 0.92rem;
  }
  body[data-shell="staff"] .navbtn[disabled] { flex-direction: column; align-items: flex-start; gap: 0; }
  body[data-shell="staff"] .navbtn[disabled] small { padding-inline-start: 1.7rem; }
}

/* ------------------------------------------------- WI-0126 (Scenario 2 P08)
   The customer's waiting overlay, the paired price control, the accounting
   section. Below the watermark band (z-index 60) so the band stays visible;
   above the page and its sheets. The ring's fullness is a CSS variable the page
   sets from two server instants; nothing here is a value. */
.wait-overlay {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  /* B2B-PRIVATE-C3-20261026 (S01): the customer's STANDBY covers the WHOLE panel -- opaque, not a dimmed page the
     person could read or reach; the page behind it is inert while it stands */
  background: var(--bg);
  overflow-y: auto;
}
.wait-card {
  width: min(26rem, 100%);
  max-height: 92vh; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch;
}
.wait-card h3 { font-size: 1.05rem; text-align: center; }
.wait-card h3:focus { outline: none; }
.wait-card h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wait-ring {
  --wait-share: 0;
  align-self: center;
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--wait-share) * 1%), var(--line) 0);
  display: flex; align-items: center; justify-content: center;
}
.wait-ring-text {
  width: 7.4rem; height: 7.4rem; border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 700; text-align: center;
}
.wait-overlay[data-phase="checking"] .wait-ring-text,
.wait-overlay[data-phase="unavailable"] .wait-ring-text,
.wait-overlay[data-phase="reconciling"] .wait-ring-text,
.wait-overlay[data-phase="submitting"] .wait-ring-text,
.wait-overlay[data-phase="submit-unknown"] .wait-ring-text { font-size: 0.95rem; }
/* C3 (S01): the countdown in SECONDS -- the number, then its unit */
.wait-ring-text { flex-direction: column; gap: 0.1rem; }
.wait-ring-unit { font-size: 0.84rem; font-weight: 400; color: var(--text-muted); }
.wait-account { text-align: center; }
@media (max-width: 30rem) {
  .wait-overlay { align-items: flex-start; padding: 0.75rem; }
  .wait-card { width: 100%; max-height: none; }
}
.wait-status p { margin: 0; }
.wait-final { font-size: 1rem; font-weight: 600; text-align: center; }
.wait-final.good { color: var(--ok-ink); }
.wait-final.bad { color: var(--bad-ink); }
.wait-final.neutral { color: var(--text-muted); }
.wait-card .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.wait-card button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .wait-ring, .wait-ring-text { transition: none; animation: none; } }

.pricecell.derived input[readonly] { background: transparent; border-style: dashed; cursor: default; }
.board-paired-note { max-width: 32rem; }

.acct-section { display: flex; flex-direction: column; gap: 0.9rem; }
.acct-block .acct-body { display: flex; flex-direction: column; gap: 0.6rem; }
.acct-block > button { align-self: flex-start; margin-block: 0.4rem; min-height: 44px; }
.acct-section button, .acct-profile button { min-height: 44px; }
.acct-case-detail .cfg-grid { margin-top: 0.5rem; }
.acct-queue { display: flex; flex-direction: column; gap: 0.5rem; }
.dir-accounting { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; }
.acct-profile { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

@media print { .wait-overlay { display: none !important; } }

/* ---------------------------------------------------------------- print
   A22: the watermark survives every print and export path. The band prints at
   the top of every page and the wash prints behind the content. */
@media print {
  body { background: #fff; color: #000; }
  .mainnav, .toast, .debug, button, .sheet-scrim { display: none !important; }
  .watermark-band {
    position: fixed;
    top: 0;
    inset-inline: 0;
    display: flex !important;
    background: #fff;
    color: var(--danger);
    border-bottom: 2px solid var(--danger);
  }
  .watermark-wash {
    display: block !important;
    position: fixed;
    inset: 0;
  }
  .watermark-wash::after { color: rgba(140, 47, 40, 0.16); }
  .block, .board { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------------- D2a (B2B-CLAUDE-RETURN-20261024, WI-0126)
   Staff navigation, the Accounting destination and truthful qualifiers in the existing app.
   Presentation only: nothing below hides an authorized action or a confirmation qualifier. */
.nav-short { display: none; }
.build-chip {
  display: inline-block; margin-top: 0.15rem; padding: 0 0.5rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap;
}
.build-chip .build-label { font-family: var(--mono); }
/* D-1 (D1-DEC-1): the sync state, its simulation marker and the not-confirmed badge on one line */
.axis-line { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; align-items: center; }
.axis-line .axis-state { display: inline; }
.axis-sim { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.axis-badge { font-weight: 600; }
/* the qualifier is financial meaning, not test wording: the quieter live look keeps it (ADR-0010) */
body[data-look="live"] .axis-note.axis-qualifier { display: block !important; }
.queue-byid { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; width: 100%; }
.queue-byid input { min-height: 44px; max-width: 18rem; flex: 1 1 10rem; }
/* the Accounting destination */
.acct-strip {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 0.84rem;
}
.acct-strip-name { font-weight: 700; }
.acct-strip-window { color: var(--text-muted); }
.acct-tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.acct-section .kv { flex-wrap: wrap; }
.acct-section .kv-value { min-width: 0; overflow-wrap: break-word; }
.acct-section .cfg-field input[type="file"] { width: 100%; max-width: 100%; min-width: 0; }
.acct-tabs button { white-space: nowrap; }
.acct-count { font-size: 0.72rem; padding: 0 0.35rem; border-radius: 999px; border: 1px solid currentColor; }
.acct-panel { display: grid; gap: 0.8rem; }
.acct-panel[hidden] { display: none; }
.acct-disagreement { margin: 0.2rem 0 0.4rem; font-weight: 600; }
.acct-unavailable { margin: 0; padding-inline-start: 1.1rem; }
.acct-actionable-notes { display: grid; gap: 0.15rem; margin: 0.3rem 0; justify-items: start; }
#cfg-panel[hidden] { display: none; }
@media (max-width: 47.99rem) {
  body[data-look="live"][data-shell="staff"] .navbtn .nav-long { display: none; }
  body[data-look="live"][data-shell="staff"] .navbtn .nav-short { display: inline; }
  /* PD-01 / §8: at phone width پیکربندی is reached from «بیشتر», so the bar keeps five entries */
  body[data-look="live"][data-shell="staff"] #mainnav .navbtn[data-view="config"] { display: none; }
  .topbar-titles .build-chip { margin-top: 0; }
}
/* PD-17 / §8: at phone width the top bar is one row -- the title with its chip, and the session */
@media (max-width: 30rem) {
  body[data-look="live"] .topbar { flex-wrap: nowrap; padding: 0.45rem 0.75rem; gap: 0.5rem; }
  body[data-look="live"] .topbar h1 { font-size: 0.92rem; white-space: nowrap; }
  body[data-look="live"] .topbar-titles { min-width: 0; }
  body[data-look="live"] .topbar-session { flex: 0 1 auto; min-width: 0; gap: 0.3rem; }
  body[data-look="live"] .topbar-session .who { flex-wrap: nowrap; white-space: nowrap; }
  body[data-look="live"] .topbar-session .who small { display: none; }
}
@media (min-width: 64rem) {
  body[data-look="live"][data-shell="staff"] .mainnav .navbtn[data-view="tools"] { margin-top: auto; }
}

/* ------------------------------------------------- D2b (B2B-CLAUDE-RETURN-20261024, WI-0126)
   Customers, the customer side, read-failure states, deep links and focus. Presentation only:
   nothing below hides an authorized action, a refusal or a confirmation qualifier. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* a failed read, said where the content is; the last good content stays and is marked stale */
.read-issue { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; margin: 0 0 0.6rem; }
.read-issue[hidden] { display: none; }
.read-issue-title { font-weight: 700; }
.view[data-stale="yes"] .reqlist,
.view[data-stale="yes"] .statgrid,
.view[data-stale="yes"] .board-table,
.view[data-stale="yes"] .board-list,
.view[data-stale="yes"] #trade-portfolio-body { opacity: 0.62; }
.stat-tile.unread .stat-tile-value { color: var(--text-muted); }
/* the customers list: short chips, the long sentence is the profile's */
.dir-chips { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; align-items: center; }
.dir-chips .chip { white-space: nowrap; }
.add-menu { position: relative; display: inline-grid; gap: 0.35rem; }
/* UR-20261106 (WP-4, spec §5.E.3): the menu lies over the page (it never pushes the heading down) */
.add-menu-list {
  position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0; z-index: 30;
  display: grid; gap: 0.15rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); min-width: 21rem; max-width: calc(100vw - 1.5rem); box-shadow: var(--shadow-pop);
}
.add-menu-list[hidden] { display: none; }
.add-menu-off { display: grid; gap: 0.15rem; }
.add-reason { font-size: 0.78rem; color: var(--text-muted); }
/* B2B-CUSTOMER-IDENTITY-R1-C1 §D: the local-customer create form + the masked identity section */
.dir-create[hidden] { display: none; }
.dir-create { margin: 0.6rem 0; }
.create-form {
  display: grid; gap: 0.6rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); max-width: 34rem;
}
.create-form .cfg-field { display: grid; gap: 0.25rem; }
.create-form label { font-size: 0.85rem; }
.create-form input[type="text"], .create-form select { width: 100%; box-sizing: border-box; }
.create-form .create-checkline { display: flex; gap: 0.4rem; align-items: center; }
.create-form .create-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.create-error:empty { display: none; }
.create-error { color: var(--error-ink); font-size: 0.86rem; }
.create-hint { font-size: 0.84rem; color: var(--text-muted); }
.profile-identity { margin-top: 0.8rem; }
.profile-identity .idchip { word-break: normal; overflow-wrap: break-word; }
.profile-balance-link { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.acct-balance-focus { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; }
/* KF-1: the heading that receives focus on a view change shows where the keyboard is, quietly */
.view h2[tabindex="-1"]:focus { outline: none; }
.view h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 3px; }

/* B2B-PRIVATE-INTEGRATION-20261025 P5 (main session, ADR-0020): technical folds, drafts, the role-mode queue
   summary and the send allowance. Presentation only; existing tokens only. */
.acct-tech { margin-top: 6px; }
.acct-tech > summary { cursor: pointer; font-size: 0.86rem; color: var(--text-muted); min-height: 44px;
  display: flex; align-items: center; }
.acct-queue[data-access="summary"] .kvlist { max-width: 28rem; }
.acct-allowance { margin: 8px 0; }
.draft-dirty { outline: 2px dashed var(--warn-line); outline-offset: 1px; }
.draft-server { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--text-muted);
  background: var(--warn-bg); padding: 4px 8px; border-radius: 6px; }
/* B2B-PRIVATE-C3-20261026 (R06): a draft whose earlier write's outcome is unknown, until the server is read again */
.draft-unknown { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--text-muted);
  background: var(--warn-bg); padding: 4px 8px; border-radius: 6px; border-inline-start: 3px solid var(--warn-line); }
.draft-leave { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.draft-leave button { min-height: 44px; }

/* B2B-PRIVATE-CORRECTION-20261025 (C08 completion): on a phone the fixed bottom navigation must never cover the
   control that has the keyboard -- focus and scrollIntoView keep this margin above it. */
@media (max-width: 47.99rem) {
  html { scroll-padding-bottom: 6.5rem; }
}
.acct-resolve { margin-top: 6px; }
.acct-resolve > summary { cursor: pointer; font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; }

/* ------------------------------------------------------------------ */
/* Direct-owner fix (2026-10-29): operator price table readability.    */
/* Large gold magnitudes (Toman/Rial) were clipped by the board's      */
/* overflow:hidden and by white-space:nowrap in constrained grid cells */
/* ("numbers cut off / out of the box"). Let every price/number cell   */
/* shrink to its column and wrap instead of overflowing, and keep the  */
/* operator's inline edit inputs inside their cell. Additive, scoped.  */
.board-row > *, .board-row.operator > *, .board-editline > *,
.board-group > *, .board-asset > * { min-width: 0; }

.quote-value,
.boardbtn .num,
.price-magnitude,
.price-secondary .num-secondary,
.board-editline .num {
  min-width: 0;
  max-width: 100%;
  white-space: normal;          /* was nowrap: a long magnitude now wraps rather than clipping */
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.board-editline input,
.board-edit input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* a very long board figure steps down slightly to stay on one line where it fits */
.boardbtn .num { font-size: clamp(0.82rem, 2.6vw, 1.05rem); }

/* B2B-OVERNIGHT-DB1-C4 (B1/B4): the grouped, searchable asset configuration. Local, additive; no existing rule
   is changed. Colours use the existing tokens. */
.cfg-group-head { font-weight: 600; opacity: 0.85; margin: 0 0 0.35rem; }
.cfg-asset-search { margin: 0.5rem 0 0.75rem; }
.cfg-asset-search input[type="search"] { width: 100%; box-sizing: border-box; }
.cfg-asset-row > summary { cursor: pointer; }
.cfg-asset-meta { opacity: 0.75; font-size: 0.86em; }
.cfg-asset-empty { margin: 0.5rem 0; }

/* ------------------------------------------------------------------ */
/* B2B-RESUME-UI-20261103 (owner, 3 Nov 2026). Additive and scoped.    */

/* (3) The pending-request countdown: the NUMERAL's own box sits on the ring's geometric centre; the unit is placed
   separately below it (the pair is no longer centred as a group, and the global `.ltr { align-self: start }` no
   longer moves the numeral). Only the ring changes; general LTR/price rules are untouched. */
.wait-ring-text { position: relative; }
.wait-ring-text > .remaining {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  align-self: auto; justify-self: auto; margin: 0; line-height: 1; white-space: nowrap;
  font-size: 1.7rem; font-variant-numeric: tabular-nums;
}
.wait-ring-text > .wait-ring-unit {
  position: absolute; left: 50%; top: calc(50% + 1.25rem); transform: translateX(-50%);
  white-space: nowrap; line-height: 1;
}

/* (2) Configuration: one compact row per asset; its overlay */
.cfg-asset-search input {
  width: 100%; min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit;
}
.cfg-asset-item[hidden] { display: none; }
.cfg-asset-row { text-align: center; }
.cfg-asset-name { font-weight: 700; }
.cfg-asset-open { color: var(--gold); font-size: 0.86rem; white-space: nowrap; }
.cfg-asset-sheet .sheet-head h3:focus { outline: none; }
.cfg-asset-sheet .sheet-head h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cfg-asset-sheet-note { margin: 0 0 0.5rem; }
.cfg-asset-sheet .outcome:empty { display: none; }
@media (min-width: 48rem) { .cfg-asset-sheet { width: min(48rem, calc(100vw - 2rem)); } }

/* (2) The operator board: one header per asset with its customer-visibility control */
.opboard-asset {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem;
  padding: 0.45rem 0.7rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.opboard-asset-name strong { font-size: 0.95rem; }
.opboard-asset .visbtn { min-height: 40px; }
.opboard-asset.hidden-from-customer .opboard-asset-name strong { color: var(--text-muted); }
.opboard-row.hidden-from-customer .board-title strong { color: var(--text-muted); }

/* (4)(5) The operator's row: buy FROM the customer (editable base) | title | difference (−/+) | sell TO the customer.
   The difference column holds −, the value and + side by side, so it gets a real minimum width. */
.opboard-row { grid-template-columns: minmax(0, 1.35fr) minmax(7rem, 0.85fr) minmax(11.5rem, 1fr) minmax(0, 1.35fr); }
.pricecell .fact-note { color: var(--text-muted); font-size: 0.84rem; }
.opboard-gap input { font-size: 0.98rem; padding-inline: 0.2rem; }
.pricecell.base .stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.pricecell .stepper.single { grid-template-columns: minmax(0, 1fr); }
.pricecell.dirty .stepper .stepsave { display: inline-flex; grid-column: 1 / -1; }
.gapline { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 0.25rem; align-items: center; }
.gapline .gapbtn { min-width: 40px; min-height: 40px; padding: 0; border-radius: 999px; font-size: 1.2rem; }
.opboard-gap { display: grid; gap: 0.3rem; }
.opboard-gap .manualbtn { justify-self: center; }
.opboard-gap.dirty input, .pricecell.dirty input:not([readonly]) { outline: 2px dashed var(--gold); outline-offset: 1px; }
.opboard-draftnote { margin: 0; font-size: 0.86rem; color: var(--text); }
.opboard-draftnote strong { color: var(--warn-ink); }
.opboard-draftnote[hidden] { display: none; }
@media (max-width: 57rem) {
  .pricecell.base .stepper { grid-template-columns: 1fr 1fr; }
  .pricecell.base .stepper input { grid-column: 1 / -1; order: -1; }
}
/* B2B-RESUME-UI-C1-20261103 (6): on a phone the header row is hidden, so every operator card names its own side and
   the currency; on wider screens the header row alone names the columns (no duplicate label). */
.pricecell-side { display: none; }
@media (max-width: 47.99rem) {
  .pricecell .pricecell-side { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); line-height: 1.4; }
  .opboard-row { grid-template-columns: 1fr; grid-template-areas: "title" "bid" "gap" "ask" "note"; }
  .opboard-row > .board-title { grid-area: title; justify-items: start; text-align: start; }
  .opboard-row > .pricecell.sell { grid-area: bid; }
  .opboard-row > .opboard-gap { grid-area: gap; }
  .opboard-row > .pricecell.buy { grid-area: ask; }
  .opboard-row > .opboard-draftnote { grid-area: note; }
}

/* (4)(6) The customer's board: the customer's action on each button; on a phone the name takes its own line and the
   two prices sit side by side, whole -- the layout re-flows instead of shrinking the digits without limit. */
.boardbtn .board-action { font-size: 0.82rem; font-weight: 700; letter-spacing: 0; }
@media (max-width: 30rem) {
  #trade-board .board-row:not(.board-headrow), .board-table .board-row:not(.board-headrow) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "bid ask";
  }
  #trade-board .board-row > .board-title, .board-table .board-row > .board-title { grid-area: title; }
  #trade-board .board-row > .boardbtn[data-direction="CUSTOMER_SELL"],
  .board-table .board-row > .boardbtn[data-direction="CUSTOMER_SELL"] { grid-area: bid; }
  #trade-board .board-row > .boardbtn[data-direction="CUSTOMER_BUY"],
  .board-table .board-row > .boardbtn[data-direction="CUSTOMER_BUY"] { grid-area: ask; }
  #trade-board .board-headrow, .board-table .board-headrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #trade-board .board-headrow > .board-col:nth-child(2), .board-table .board-headrow > .board-col:nth-child(2) { display: none; }
  .boardbtn .num, .boardbtn .price-mesghal {
    font-size: clamp(1rem, 4.8vw, 1.2rem); white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
  }
  .boardbtn .price-secondary .num-secondary { white-space: nowrap; }
  .boardbtn { padding-inline: 0.25rem; }
}

/* B2B-ACCOUNTING-OPERATOR-20261103 P3: the operator's «فروش به مشتری» card centres its OWN label, price and explanation
   -- manual and derived, phone and desktop; the bid card, the difference column and every other note keep their
   alignment, and no value, side or currency changes. */
.pricecell.buy > .pricecell-side, .pricecell.buy > .fact-note { text-align: center; justify-self: stretch; }
.pricecell.buy .stepper.single input { text-align: center; }

/* P2: incoming requests -- the bell (server-confirmed pending count), its list, and the one popup of a new arrival.
   Presentation only: hiding them decides nothing; the queue stays the decision surface.
   UR-20261106 (WP-0, spec §1.10): the bell sits in the top bar at every width (icon + count); its list is a sheet under
   the top bar with a header row and an X; the arrival pop-up stands in the ONE notification stack (`.notify-stack`). */
.pending-bell { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; min-width: 44px;
  padding: 0.3rem 0.5rem; }
.pending-bell .pending-bell-label { display: none; }
.pending-bell .pending-count { min-width: 1.5rem; padding: 0 0.4rem; border-radius: var(--radius-pill); text-align: center;
  font-size: 0.78rem; font-weight: 700; line-height: 1.5rem; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pending-bell.has-pending .pending-count { background: var(--sell-deep); color: #fff; border-color: var(--sell-deep); }
.pending-bell.stale .pending-count { outline: 2px dashed var(--warn-line); outline-offset: 1px; }
.pending-inbox { position: fixed; inset-block-start: 4rem; inset-inline-end: 1rem; z-index: 72;
  width: min(30rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 0.5rem 0.9rem 0.8rem; display: grid; gap: 0.55rem; }
.pending-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pending-inbox h4 { margin: 0; font-size: 1rem; }
.pending-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center;
  padding-block: 0.5rem; border-top: 1px solid var(--line); }
.pending-summary { margin: 0; display: grid; gap: 0.15rem; justify-items: start; }
.pending-summary .pending-line { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.pending-summary .pending-figures { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.pending-summary .pending-who { color: var(--text-muted); }
.notify-stack { position: fixed; inset-block-start: 4.5rem; inset-inline-end: 1rem; z-index: 75;
  width: min(26rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.notify-stack > * { pointer-events: auto; }
.notify-stack:empty { display: none; }
.pending-popup { position: fixed; inset-block-start: 4.5rem; inset-inline-end: 1rem; z-index: 75;
  width: min(26rem, calc(100vw - 2rem)); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-inline-start: 4px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 0.8rem 0.9rem 0.75rem; display: grid; gap: 0.5rem; }
.notify-stack > .pending-popup, .notify-stack > .ob-popup { position: relative; inset: auto; width: auto; z-index: auto; }
.pending-popup h3 { margin: 0; font-size: 1.05rem; padding-inline-end: 2.6rem; display: flex; align-items: center; gap: 0.2rem; }
.pending-popup .pending-live { margin: 0; font-size: 0.86rem; }
.pending-popup .pending-close { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem;
  min-width: 44px; min-height: 44px; padding: 0; }
.pending-popup .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 47.99rem) {
  .pending-bell { padding-inline: 0.35rem; }
  .notify-stack, .pending-popup { inset-block-start: 4.25rem; inset-inline: 0.75rem; width: auto; }
  .notify-stack > .pending-popup { inset: auto; }
  .pending-inbox { inset-block-start: 4.25rem; inset-inline: 0.75rem; width: auto; max-height: calc(100vh - 11rem); }
}

/* P1: the customer's transfer state toward the accounting test database (the server's state, in words) */
.transfer-chip { display: inline-block; font-weight: 700; white-space: nowrap; }
.transfer-chip.transfer-ready { border-color: var(--gold); }
.transfer-chip.transfer-linked { border-color: var(--buy); }
.transfer-chip.transfer-conflict, .transfer-chip.transfer-unknown, .transfer-chip.transfer-refused {
  border-color: var(--danger); background: var(--danger-soft); }
.acct-ordinary { display: grid; gap: 0.35rem; }

/* ---------------------------------------------- ADR-0021: user management (the account-roles model only) */
.users-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.3rem 0 0.8rem; }
.users-editor { display: grid; gap: 0.8rem; }
.users-editor h3 { margin: 0; }
.users-section { display: grid; gap: 0.5rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); justify-items: start; }
.users-section .cfg-field { width: 100%; }
.users-password-line { display: flex; gap: 0.4rem; align-items: center; width: 100%; }
.users-password-line input {
  font: inherit; padding: 0.5rem 0.7rem; min-height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: inherit; flex: 1 1 auto; min-width: 0;
}
.users-access { display: grid; gap: 0.5rem; width: 100%; }
.users-perms { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0; padding: 0.4rem 0.7rem;
  display: grid; gap: 0.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.users-perms legend { font-size: 0.85rem; padding: 0 0.3rem; }
.users-perm { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; }
.users-perm input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; flex: 0 0 auto; }
.users-perm label { cursor: pointer; }
.users-add { max-width: none; border: 0; padding: 0; background: transparent; }
.users-add input[type="text"] { width: 100%; box-sizing: border-box; }
@media (max-width: 47.99rem) {
  /* the bar keeps five entries: کاربران is reached from «بیشتر», as پیکربندی is */
  body[data-look="live"][data-shell="staff"] #mainnav #nav-users { display: none; }
}

/* ---------------------------------- owner request 2026-11-05: collections as tables, details in a panel
   UR-20261106 (WP-0, spec §3): the ONE table system. Words never break inside a cell: text wraps only at spaces, and
   numbers, dates, ids, chips and buttons stay on one line (`overflow-wrap: anywhere` / `word-break: break-all` are
   never used in or around a cell). A cell's KIND (`col-primary`, `col-text`, `col-num`, `col-date`, `col-id`,
   `col-badge`, `col-status`, `col-note`, `col-actions`, `col-detail`; app.js `columnKinds`) decides its wrapping,
   width and phone placement. Desktop cells stay centred (owner 2026-11-05) with tabular digits; a table wider than its
   column scrolls inside its own wrapper. At <=47.99rem a row becomes a card: the primary cell and the status chip on the
   title line, then label | value lines, then the actions as full-width 48px buttons (`keep-table` keeps a short table
   a table). Area packages add area-scoped table rules only in their own slot at the end of this file. */
.data-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin: 0.3rem 0 0.8rem; }
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.data-table th, .data-table td {
  text-align: center; vertical-align: middle; padding: 0.6rem 0.7rem; line-height: 1.5;
  border-bottom: 1px solid var(--line); overflow-wrap: normal; word-break: normal; hyphens: none;
}
.data-table thead th {
  font-size: 0.85rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--text-muted); background: var(--surface-2);
}
.data-table tbody td { height: 48px; }
.data-table.dense tbody td { height: 40px; padding: 0.45rem 0.6rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.row-opens { cursor: pointer; }
.data-table tr.row-opens:hover td, .data-table tr.row-opens:focus-within td { background: var(--surface-2); }
.data-table .col-num, .data-table .col-date, .data-table .col-id,
.data-table .col-badge { white-space: nowrap; width: 1%; }
/* the actions column stays on one line per button; with the system's at most two buttons (.row-actions) it is as
   narrow as its buttons, and an area's older wrapping group keeps the room it had */
.data-table .col-actions { white-space: nowrap; }
.data-table td.col-actions:has(> .row-actions) { width: 1%; }
.data-table td.col-primary { min-width: 10rem; font-weight: 600; }
.data-table td.col-text { min-width: 8rem; max-width: 18rem; }
.data-table td.col-note { min-width: 12rem; max-width: 24rem; font-size: 0.86rem; color: var(--text-muted); }
.data-table td.col-id { font-size: 0.86rem; color: var(--text-muted); }
.data-table td.col-status .chip { white-space: nowrap; }
.data-table td .chip:not(.transfer-chip), .data-table .ltr, .data-table bdi.ltr, .data-table .num { white-space: nowrap; }
.data-table .idchip, .data-table .ob-exact {
  font-family: inherit; background: none; border: 0; padding: 0; font-size: 0.86rem;
  color: var(--text-muted); white-space: nowrap;
}
.data-table .cell-sub { display: block; font-size: 0.82rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.data-table .cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.data-table .row-actions { display: inline-flex; flex-wrap: nowrap; gap: 0.4rem; justify-content: center; align-items: center; }
.data-table .row-actions button { white-space: nowrap; }
.data-table .row-open {
  border: 0; background: transparent; min-height: 44px; padding: 0.2rem 0; display: inline-flex;
  align-items: center; justify-content: center; gap: 0.45rem; font: inherit; font-weight: 700; color: var(--text);
}
.data-table .row-open:hover { text-decoration: underline; }
.data-table .row-open.has-sub { flex-direction: column; gap: 0; }
.data-table .row-open .cell-sub { font-weight: 400; }
.data-table tr.row-extra td { background: var(--surface-2); text-align: start; white-space: normal; height: auto; }
.data-table tr.row-quiet td.col-num { opacity: 0.6; }
.data-table tr.just-decided td { background: var(--warn-bg); transition: background 0.6s; }
/* compatibility until each area adopts `row-open` / `row-actions` / `row-extra` (spec §3.5): the existing open
   buttons, action groups and kept-outcome rows read as the system's own */
.data-table .reqrow-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem 0.45rem; flex-wrap: wrap;
  width: auto; min-height: 44px; padding: 0.2rem 0.3rem; grid-template-columns: none; grid-template-areas: none;
  background: transparent; border: 0; text-align: center; font-weight: 700; color: var(--text);
}
.data-table .reqrow-open:hover { text-decoration: underline; border-color: transparent; }
/* review 2026-11-06: a hovered or focused row shows no old card box inside its own hover colour (focus keeps a ring);
   the old list's white button (`.reqlist.table .reqrow-open`) is outranked here */
.data-table .reqrow-open:hover, .data-table .reqrow-open:focus-visible,
.reqlist.table .data-table .reqrow-open { background: transparent; }
/* review 2026-11-06: the side chip sits ABOVE the product name, so a name has the cell's width and wraps at most once */
.data-table .reqrow-open { flex-direction: column; flex-wrap: nowrap; }
.data-table .reqrow-open .reqcard-asset { white-space: normal; min-width: 9rem; margin-inline-end: 0; }
.data-table .reqcard-mesghal { display: block; color: var(--text-muted); font-size: 0.82rem; }
.data-table .reqcard-state { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; white-space: normal; max-width: 10rem; }
.data-table td.col-badge p { white-space: normal; min-width: 10rem; }
.data-table .acct-row-actions { display: inline-flex; flex-wrap: nowrap; gap: 0.4rem; justify-content: center; margin: 0; }
/* review 2026-11-06: the queue's decision group stacks (as it did before the table system), so the column is as
   narrow as ONE button; an open confirmation or a kept outcome keeps that column narrow and wraps its own lines */
.data-table .req-actions-cell .reqrow-actions {
  display: inline-flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0.4rem;
  justify-content: center; margin: 0;
}
.data-table .req-actions-cell .reqrow-actions .freshness { flex-basis: auto; white-space: normal; max-width: 12rem; }
.data-table .req-actions-cell .inline-confirm, .data-table .req-actions-cell .inline-outcome {
  text-align: start; white-space: normal; width: min-content; min-width: 9rem; max-width: 16rem; padding-inline: 0.6rem;
}
.data-table .req-actions-cell .inline-confirm .kv,
.data-table .req-actions-cell .inline-outcome .kv { display: block; text-align: start; }
.data-table .req-actions-cell .inline-confirm .kv-name { margin-inline-end: 0.4rem; }
.data-table .req-actions-cell .inline-confirm .kv-value,
.data-table .req-actions-cell .inline-confirm .ltr,
.data-table .req-actions-cell .inline-outcome .ltr { white-space: normal; text-align: start; }
.data-table .req-actions-cell .inline-confirm .actions button,
.data-table .req-actions-cell .inline-outcome .actions button { flex: 1 1 auto; white-space: nowrap; }
.data-table td > .dir-chips, .data-table td > .reqrow-actions { justify-content: center; }
.data-table .acct-outcome-row td { background: var(--surface-2); text-align: start; white-space: normal; height: auto; }
.data-table tr.acct-balance-focus td { outline: 0; background: var(--surface-2); }
.data-table .acct-balance-field { color: var(--text-muted); }
/* a holdings row keeps the .kv class (its old name): as a table row it is laid out by the table */
.data-table tr.kv { display: table-row; border: 0; padding: 0; }
.data-table tr.kv .kv-name { color: var(--text); }
/* review 2026-11-06 (spec §3.1): on a desk a cell may break between a figure and its unit, or between a date and its
   time -- at a space, never inside a number, a date, an id or a word. A narrower window drops the columns a request's
   overlay repeats, so the request tables fit their column instead of pushing their last columns out of view: the id
   (every request table) and, for staff, the unit price below 96rem (a 1536px window); for staff also the time below
   80rem (1280px, where the menu becomes a rail). The countdown stays in «وضعیت», and the overlay shows all three.
   (Media queries count 16px to the rem.) */
@media (min-width: 48rem) {
  .data-table td.col-num, .data-table td.col-date, .data-table td.col-date bdi.ltr { white-space: normal; }
  .data-table td.col-num .reqcard-mesghal { white-space: nowrap; }
}
@media (min-width: 48rem) and (max-width: 95.99rem) {
  .data-table.req-table .col-id,
  body[data-shell="staff"] .data-table.req-table th[data-col="قیمت واحد"],
  body[data-shell="staff"] .data-table.req-table td[data-label="قیمت واحد"] { display: none; }
}
@media (min-width: 48rem) and (max-width: 79.99rem) {
  body[data-shell="staff"] .data-table.req-table .col-date { display: none; }
}
@media (max-width: 47.99rem) {
  .data-table:not(.keep-table), .data-table:not(.keep-table) tbody { display: block; width: 100%; }
  .data-table:not(.keep-table) thead { display: none; }
  .data-table:not(.keep-table) tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem;
    padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line); text-align: start;
  }
  .data-table:not(.keep-table) tbody tr:last-child { border-bottom: 0; }
  /* review 2026-11-06: a hovered or focused card is painted as ONE surface (each cell painted alone showed the grid's
     gaps as stripes) */
  .data-table:not(.keep-table) tr.row-opens:is(:hover, :focus-within) { background: var(--surface-2); }
  .data-table:not(.keep-table) tr.row-opens:is(:hover, :focus-within) td { background: transparent; }
  .data-table:not(.keep-table) td {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
    gap: 0.5rem; align-items: baseline; height: auto; padding: 0; border: 0; width: auto;
    text-align: start; white-space: normal; min-width: 0; max-width: none;
  }
  .data-table:not(.keep-table) td[data-label]::before { content: attr(data-label); font-size: 0.8rem; color: var(--text-muted); }
  .data-table:not(.keep-table) td:not([data-label]) { display: block; }
  .data-table:not(.keep-table) td.col-primary { grid-column: 1; grid-row: 1; display: block; min-width: 0; font-weight: 700; }
  .data-table:not(.keep-table) td.col-badge { grid-column: 2; grid-row: 1; display: block; justify-self: end; }
  .data-table:not(.keep-table) td.col-primary::before,
  .data-table:not(.keep-table) td.col-badge::before,
  .data-table:not(.keep-table) td.col-actions::before { display: none; }
  .data-table:not(.keep-table) td.col-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
  .data-table:not(.keep-table) td.col-actions .row-actions,
  .data-table:not(.keep-table) td.col-actions .reqrow-actions,
  .data-table:not(.keep-table) td.col-actions .acct-row-actions {
    display: flex; flex-wrap: wrap; width: 100%; flex-direction: row;
  }
  .data-table:not(.keep-table) td.col-actions button { flex: 1 1 0; min-height: 48px; }
  .data-table:not(.keep-table) td.col-detail,
  .data-table:not(.keep-table) tr.row-opens td.col-id { display: none; }
  .data-table:not(.keep-table) tr.row-extra,
  .data-table:not(.keep-table) tr.acct-outcome-row { display: block; }
  .data-table:not(.keep-table) .row-open,
  .data-table:not(.keep-table) .reqrow-open { justify-content: flex-start; text-align: start; flex-wrap: wrap; }
  .data-table:not(.keep-table) .reqrow-open { flex-direction: row; }
  .data-table:not(.keep-table) td.col-badge .chip { margin-inline-start: 0.2rem; }
  .data-table:not(.keep-table) td.col-actions .inline-confirm,
  .data-table:not(.keep-table) td.col-actions .inline-outcome {
    min-width: 0; flex-basis: 100%; width: auto; max-width: none;
  }
}

.view.has-panel, main.has-panel { position: relative; }
/* the page's own heading (its buttons and their menus) stays above a panel laid over the list */
.view.has-panel > .page-head { position: relative; z-index: 21; }
.panel {
  position: absolute; z-index: 20; inset-inline: 0; top: var(--panel-top, 0px);
  min-height: calc(100% - var(--panel-top, 0px));
  display: grid; align-content: start; gap: 0.7rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  padding: 0.9rem 1rem 1.4rem;
}
main > .view.panel { inset-inline: 1rem; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 0.5rem;
}
.panel-head h3 { margin: 0; }
.panel-body { display: grid; gap: 0.8rem; }
@media (max-width: 47.99rem) {
  .panel { padding: 0.75rem 0.75rem 6rem; }   /* the last lines clear the fixed bottom navigation */
  main > .view.panel { inset-inline: 0; }
}


/* ---------------------------------- ADR-0022 (owner 2026-11-06, design §6): true overlays, live look only
   Every detail view stands centred above the page, scrolling inside itself and fitting a 360px phone. One
   full-window backdrop blurs the page behind it; the page, the top bar and the menu are inert. A request opened
   over another detail lies on top; the one under it stays under the backdrop. The customer's standby and the
   pending pop-up are on the body, above the whole application, and stay above this. */
.overlay-backdrop {
  position: fixed; inset: 0; z-index: 51;
  background: rgba(8, 20, 16, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.overlay-backdrop[hidden] { display: none; }
body[data-look="live"] .overlay,
body[data-look="live"] main > .view.overlay {
  position: fixed; z-index: 52; inset: 0; margin: auto; transform: none;
  width: min(56rem, calc(100vw - 1.5rem)); height: fit-content; min-height: 0;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: 0.9rem 1rem 1.2rem;
}
/* UR-20261106 (WP-0, spec §1.7): an overlay that holds a table is wider, so its columns are not squeezed */
body[data-look="live"] .overlay:has(.data-table-wrap),
body[data-look="live"] main > .view.overlay:has(.data-table-wrap) { width: min(72rem, calc(100vw - 1.5rem)); }
body[data-look="live"] .overlay.overlay-under { z-index: 50; }
body[data-look="live"] .overlay > .page-head,
body[data-look="live"] .overlay > .panel-head,
body[data-look="live"] .overlay > .sheet-head { align-items: center; }
/* behind the backdrop while an overlay stands: the bell and its list (inert there); a question that asks before
   leaving stands above it, so it can be answered */
body[data-overlay="open"] .pending-bell,
body[data-overlay="open"] .pending-inbox { z-index: 44; }
body[data-overlay="open"] #draft-leave {
  position: fixed; z-index: 53; inset-inline: 0.75rem; top: 0.75rem;
  background: var(--surface); box-shadow: var(--shadow);
}
@media (max-width: 47.99rem) {
  body[data-look="live"] .overlay,
  body[data-look="live"] main > .view.overlay {
    width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem);
    padding: 0.75rem 0.75rem 1rem;
  }
}
/* the X close: an icon, at least 44px, named «بستن» */
button.icon-close {
  min-width: 44px; min-height: 44px; padding: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
button.icon-close svg { width: 1.4rem; height: 1.4rem; }

/* ---------------------------------- ADR-0022 (design §5): «؟» -- a needed explanation, behind a help button
   UR-20261106 (WP-0, spec §1.9): a quiet 26px circle drawn inside the 44px button (the hit area), placed about 4px after
   the text it explains; on a desk the note has a caret, on a phone it is a bottom sheet with its own «بستن». */
.help { position: relative; display: inline-flex; vertical-align: middle; margin-block: -9px; margin-inline: -5px -9px; }
button.help-btn {
  position: relative; min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--text-muted);
}
button.help-btn::before {
  content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); z-index: -1;
}
button.help-btn { isolation: isolate; }
button.help-btn:hover::before, button.help-btn[aria-expanded="true"]::before { border-color: var(--gold); }
button.help-btn[aria-expanded="true"] { color: var(--text); }
.help-tip {
  position: absolute; z-index: 30; top: calc(100% + 0.25rem); inset-inline-start: 0;
  width: max-content; max-width: min(20rem, calc(100vw - 2rem));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  padding: 0.55rem 0.75rem; font-size: 0.86rem; font-weight: 400; line-height: 1.7; text-align: start;
  white-space: normal;
}
.help-tip::before {
  content: ""; position: absolute; inset-block-start: -6px; inset-inline-start: 16px; width: 10px; height: 10px;
  background: var(--surface); border-inline-start: 1px solid var(--line-strong); border-block-start: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.help-tip[hidden] { display: none; }
.help-tip .help-close { display: none; }
.block-head .help, h3 .help, h4 .help { margin-inline-start: -5px; }
@media (max-width: 30rem) {
  .help-tip {
    position: fixed; z-index: 80; top: auto; inset-inline: 0.75rem; inset-block-end: calc(5rem + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; padding: 0.8rem 0.9rem 0.6rem; font-size: 0.95rem; transform: none !important;
  }
  .help-tip::before { display: none; }
  .help-tip .help-close { display: flex; margin-block-start: 0.4rem; margin-inline-start: auto; }
}

/* ---------------------------------- ADR-0022 (design §7): the home shows a few rows OF the market board */
.home-excerpt .home-all-prices { min-height: 44px; white-space: nowrap; }

/* ADR-0022 (design §5): in the live look the top bar carries no build chip; staff find the version in «بیشتر» */
body[data-look="live"] #build-chip { display: none; }

/* ---------------------------------- ADR-0022 (owner 2026-11-06, design §1, §3): customer onboarding, live look only
   The customer's own onboarding page (no menu while it holds), the staff's registrations sub-tab, the invitation and
   its one-time result, the count badge on «مشتریان» and its pop-up. Existing tokens only. */
.view-onboarding { max-width: 40rem; margin-inline: auto; }
.onboarding-body { display: grid; gap: 0.8rem; }
.ob-lead { margin: 0; }
.ob-form { max-width: none; }
.ob-form input[type="password"], .ob-form input[type="text"], .ob-form input[type="tel"], .ob-form textarea, .ob-form select {
  width: 100%; box-sizing: border-box;
}
.ob-form input[readonly] { background: transparent; }
.ob-rules-title { margin: 0; font-size: 0.85rem; }
.ob-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.85rem; }
.ob-rule { display: flex; gap: 0.5rem; align-items: baseline; color: var(--text-muted); }
.ob-rule-mark { flex: 0 0 1.2rem; text-align: center; font-weight: 700; }
.ob-rule[data-met="yes"] { color: var(--text); }
.ob-rule[data-met="yes"] .ob-rule-mark { color: var(--met-ink); }
.ob-field-error:empty { display: none; }
.ob-outcome:empty { display: none; }
.ob-note-text { white-space: pre-wrap; overflow-wrap: break-word; }
.ob-exact { font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
#ob-result-password { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em; }
.ob-secret-line { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.ob-message { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; }
.ob-actions { display: grid; gap: 0.8rem; }
.ob-confirm { display: grid; gap: 0.5rem; }
.ob-confirm[hidden] { display: none; }
.ob-plan .cfg-field { width: 100%; }
.customers-tabs { margin: 0 0 0.8rem; }
.customers-tabs[hidden] { display: none; }
#view-customers[data-sub="registrations"] > #customers-directory,
#view-customers[data-sub="registrations"] > #customers-create,
#view-customers[data-sub="registrations"] > #customers-status,
#view-customers[data-sub="matching"] > #customers-directory,
#view-customers[data-sub="matching"] > #customers-create,
#view-customers[data-sub="matching"] > #customers-status { display: none; }
.registrations { display: grid; gap: 1rem; }
.registrations[hidden] { display: none; }
.ob-chips { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.ob-chips button { min-height: 44px; white-space: nowrap; }
.ob-fields { justify-items: stretch; }
.ob-table .ob-exact, .ob-table button { white-space: nowrap; overflow-wrap: normal; }
.ob-table .dir-name { overflow-wrap: normal; font-weight: 700; }
.ob-registration .kvlist, .ob-review .ob-facts, .ob-result .ob-facts { width: 100%; }
.ob-chip-count { font-weight: 700; }
.ob-fields-title { margin: 0; display: flex; align-items: center; gap: 0.2rem; }
@media (max-width: 47.99rem) {
  .ob-secret-line { justify-content: flex-start; }
}

/* ---------------------------------- ADR-0022 (owner 2026-11-06, design §4.4 - §4.6): Tahesab matching, live look only
   A sub-tab of «مشتریان» for holders of «تطبیق با ته‌حساب»: the last comparison, its classes as filters, the Tahesab
   rows with the server's own actions, the app's customers Tahesab does not have, and the three dialogs. */
.matching { display: grid; gap: 0.8rem; }
.matching[hidden] { display: none; }
.mt-not-configured { margin: 0; }
.mt-snapshot { margin: 0; }
.mt-progress:empty { display: none; }
.mt-refresh { margin: 0; }
.mt-pager .mt-page { margin-inline-start: auto; font-size: 0.78rem; color: var(--text-muted); }
/* ADR-0022 follow-up: the registrations pager and status stay visible in the live look (not .freshness) */
.ob-pager .ob-page { margin-inline-start: auto; font-size: 0.78rem; color: var(--text-muted); }
.ob-status { font-size: 0.78rem; color: var(--text-muted); }
.mt-actions { display: flex; flex-wrap: nowrap; gap: 0.4rem; justify-content: center; align-items: center; }
.mt-actions button { min-height: 44px; white-space: nowrap; }
.mt-status { display: grid; gap: 0.25rem; justify-items: center; }
.mt-reason { margin: 0; font-size: 0.8rem; color: var(--text-muted); max-width: 18rem; }
.mt-table .ob-exact { white-space: nowrap; overflow-wrap: normal; }
/* a name, a group or a customer breaks between words, never inside one (the table scrolls sideways instead) */
.mt-table td { overflow-wrap: normal; }
.mt-table th { overflow-wrap: normal; white-space: nowrap; }
.mt-hints { font-size: 0.85rem; }
.mt-app-title { margin: 0.4rem 0 0; }
.mt-outcome:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.mt-dialog .mt-facts, .mt-dialog .kvlist { width: 100%; }
.mt-picker-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.mt-picker-form .cfg-field { flex: 1 1 14rem; }
.mt-picker-form button { min-height: 44px; }
.mt-picker-list { width: 100%; max-height: 18rem; overflow-y: auto; }
.mt-picker-list .users-perm label { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.mt-question { margin: 0; }
/* owner 2026-11-06 (items 2, 3): a linked row's ID comparison, the national-ID form, a balance answer's shape */
.mt-id { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: center; }
.mt-id .mt-id-status { white-space: nowrap; font-size: 0.78rem; }
.mt-id-note { margin: 0; }
.mt-id-form .cfg-field { width: 100%; }
.mt-id-kind { margin: 0.2rem 0 0; font-size: 0.8rem; }
/* review 2026-11-06: the national-ID dialog says the ID is lasting, and a linked row's invalid Tahesab ID */
.mt-id-lasting, .mt-id-held { margin: 0.25rem 0; }
.acct-read-state { display: grid; gap: 0.25rem; }
.acct-read-help { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.acct-shape .kv-value bdi { overflow-wrap: break-word; }
.acct-value-notes { margin: 0.2rem 0 0; }
.ob-tahesab-warning p, .ob-tahesab-warning { margin: 0; }

/* ===== UR-20261106 WP-0 foundation (spec §1, §2, §3, §5.A) =====
   The shared shell, navigation, notifications, forms, overlays, sign-in and the live-look overrides that stop words
   from breaking and numbers from wearing a monospace face. Area packages do not edit this section: an area override
   goes in that area's slot below. Presentation only -- nothing here hides an authorized action, a refusal or a
   financial qualifier. */

/* --- shell: the frame, the top bar and the sidebar --- */
body[data-look="live"] .app { min-height: 100vh; }
.topbar-brand { display: none; align-items: center; color: var(--gold); }
.topbar-brand svg { width: 24px; height: 24px; }
body[data-look="live"] .topbar-titles { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
body[data-look="live"] .topbar-session { gap: 0.4rem; }
body[data-look="live"] #btn-exit { min-width: 44px; }
body[data-look="live"][data-shell="entry"] #who { display: none; }
@media (max-width: 30rem) {
  body[data-look="live"] .topbar { flex-wrap: nowrap; padding: 0.4rem 0.75rem; gap: 0.5rem; }
  body[data-look="live"] .topbar-titles { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  body[data-look="live"]:not([data-shell="entry"]) .topbar h1 { display: none; }
  body[data-look="live"]:not([data-shell="entry"]) .topbar-brand { display: inline-flex; }
  body[data-look="live"] .topbar-session { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
  body[data-look="live"] .topbar-session .who { min-width: 0; overflow: hidden; flex: 0 1 auto; }
  body[data-look="live"] .topbar-session .who strong {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  body[data-look="live"] #btn-exit { width: 44px; padding: 0; }
  body[data-look="live"] #btn-exit > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}
/* the guard, after the real fix above: a stray wide node can never scroll the whole page sideways. Review 2026-11-06:
   on the root only, so the page still measures what overflows (a test can find it) and the body never cuts a line */
html:has(> body[data-look="live"]) { overflow-x: clip; }
@media (min-width: 48rem) {
  body[data-look="live"][data-shell="customer"] .topbar,
  body[data-look="live"][data-shell="customer"] .mainnav {
    padding-inline: max(1.5rem, calc((100% - 74rem) / 2 + 1.5rem));
  }
}
@media (min-width: 64rem) {
  body[data-look="live"][data-shell="staff"] .mainnav { top: 0; height: 100vh; height: 100dvh; }
  body[data-look="live"][data-shell="staff"] .topbar h1 { display: none; }
  body[data-look="live"][data-shell="staff"] main { max-width: 96rem; }
}
/* review 2026-11-06: on a narrower desk (64rem - 80rem: a 1024px - 1279px window) the staff menu is an icon rail, so
   a page has the room its tables need; each item keeps its word for a screen reader and in its title, the count stays
   a dot on the icon, and the brand's name moves to the top bar */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  body[data-look="live"][data-shell="staff"] .frame { grid-template-columns: 4.75rem minmax(0, 1fr); }
  body[data-look="live"][data-shell="staff"] .mainnav { padding: 0.75rem 0.5rem; align-items: center; }
  body[data-look="live"][data-shell="staff"] .mainnav .brand {
    grid-template-columns: auto; grid-template-areas: "i"; justify-content: center; width: 100%; padding-inline: 0;
  }
  body[data-look="live"][data-shell="staff"] .mainnav .brand span,
  body[data-look="live"][data-shell="staff"] .mainnav .brand small { display: none; }
  body[data-look="live"][data-shell="staff"] .navbtn {
    width: 3.25rem; min-width: 0; justify-content: center; padding: 0.55rem 0;
  }
  body[data-look="live"][data-shell="staff"] .navbtn > span:not(.nav-badge) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  body[data-look="live"][data-shell="staff"] .navbtn .nav-badge {
    position: absolute; inset-block-start: 0.1rem; inset-inline-start: calc(50% + 0.3rem); margin: 0;
  }
  body[data-look="live"][data-shell="staff"] .topbar h1 { display: block; }
}

/* --- navigation: the count badge on a menu item (spec §1.10) --- */
.navbtn { position: relative; }
.nav-badge {
  position: absolute; inset-block-start: 0.15rem; inset-inline-start: calc(50% + 0.4rem);
  min-width: 1.25rem; padding: 0 0.3rem; border-radius: var(--radius-pill);
  background: var(--sell-deep); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.25rem;
  text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-badge[hidden] { display: none; }
@media (min-width: 48rem) {
  .nav-badge { position: static; margin-inline-start: auto; }
}
.navbtn[aria-current="page"] .nav-badge { background: var(--green-950); color: var(--gold); }
body[data-look="live"] .navbtn > span:not(.nav-badge) { white-space: nowrap; }
@media (max-width: 47.99rem) {
  body[data-look="live"] #tools-title .nav-long { display: none; }
  body[data-look="live"] #tools-title .nav-short { display: inline; }
}

/* --- «بیشتر» on a phone: a list of the places the bar has no room for; hidden on a desk (spec §5.A.9) --- */
body[data-look="live"] #more-links .block-head { display: none; }
body[data-look="live"] #more-links { padding: 0.25rem 0; }
body[data-look="live"] #more-links .row { display: grid; gap: 0; margin: 0; }
body[data-look="live"] #more-links .row button {
  width: 100%; min-height: 48px; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent; color: var(--text); font-size: 1rem; font-weight: 600; padding: 0.6rem 1rem;
}
body[data-look="live"] #more-links .row button:last-child { border-bottom: 0; }
body[data-look="live"] #more-links .row button:not(#btn-more-exit)::after { content: "‹"; color: var(--text-muted); font-weight: 400; }
@media (min-width: 48rem) {
  body[data-look="live"] #more-links { display: none !important; }
}
/* final review 2026-11-07: the version is a row of the «درباره» list; its sentence sits in the «جزئیات فنی» fold */
.about-version-line { margin: 0; }
#debug .build-identity { font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
/* the request log stays recorded in the document (it never carries a customer id) but is not drawn in the live look:
   its raw server codes would put engineering words on screen whenever the version's fold is opened */
body[data-look="live"] #debug .debug-body { display: none; }
/* a technical fold says it opens: a chevron that turns when open */
body[data-look="live"] #debug > summary::after,
.refusal-tech > summary::after,
body[data-look="live"] .about-version > summary::after {
  content: "‹"; display: inline-block; margin-inline-start: 0.5rem; transition: transform 0.15s; color: var(--text-muted);
}
body[data-look="live"] #debug[open] > summary::after,
.refusal-tech[open] > summary::after,
body[data-look="live"] .about-version[open] > summary::after { transform: rotate(-90deg); }
body[data-look="live"] .tools-grid { grid-template-columns: minmax(0, 40rem); }
.about-version-line .build-label { font-weight: 700; }

/* --- notifications: the registration pop-up (built by the customers package) wears the pending pop-up's look; inside
   the notification stack it is in flow, and until it is moved there it steps to the bottom while a request pop-up
   stands (spec §1.10) --- */
.ob-popup { position: fixed; inset-block-start: 4.5rem; inset-inline-end: 1rem; z-index: 75;
  width: min(26rem, calc(100vw - 2rem)); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-inline-start: 4px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 0.8rem 0.9rem 0.75rem; display: grid; gap: 0.5rem; }
.ob-popup[hidden] { display: none; }
.ob-popup h3 { margin: 0; font-size: 1.05rem; }
.ob-popup-line { margin: 0; font-size: 0.86rem; }
.ob-popup .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body:has(.notify-stack .pending-popup:not([hidden])) > .ob-popup { inset-block-start: auto; inset-block-end: 1.25rem; }
@media (max-width: 47.99rem) {
  .ob-popup { inset-block-start: 4.25rem; inset-inline: 0.75rem; width: auto; }
  body:has(.notify-stack .pending-popup:not([hidden])) > .ob-popup { inset-block-end: 5.5rem; }
}
.notify-stack > .ob-popup { position: relative; inset: auto; width: auto; z-index: auto; }

/* --- notifications: the toast under the top bar on a phone (spec §1.10) --- */
@media (max-width: 47.99rem) {
  .toast { inset-block-start: 4.25rem; inset-block-end: auto; inset-inline: 0.75rem; width: auto; margin-inline: 0; }
}

/* --- forms (spec §1.6) --- */
body[data-look="live"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-look="live"] select,
body[data-look="live"] textarea { font-size: max(16px, 1rem); font-family: inherit; }
[aria-invalid="true"] { border-color: var(--error-ink) !important; box-shadow: inset 0 0 0 1px var(--error-ink); }
input[readonly] { background: transparent; border-style: dashed; color: var(--text-muted); }
.create-error::before { content: "✕ "; font-weight: 700; }
.create-error:empty::before { content: none; }
.create-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.create-actions button { white-space: nowrap; }
body[data-look="live"] .overlay .create-actions { border-top: 1px solid var(--line); padding-top: 0.6rem; }

/* --- overlays: facts as a two-column list, a sticky decision bar, quiet heading focus (spec §1.7) --- */
body[data-look="live"] .overlay .kv:not(tr),
.acct-section .kv:not(tr) {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: 0.75rem;
  justify-content: start; text-align: start; align-items: baseline;
}
body[data-look="live"] .overlay .kv:not(tr) .kv-value,
.acct-section .kv:not(tr) .kv-value { text-align: start; }
@media (max-width: 47.99rem) {
  body[data-look="live"] .overlay .kv:not(tr),
  .acct-section .kv:not(tr) { grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); }
}
.decision-bar {
  position: sticky; bottom: 0; z-index: 2; background: var(--bg); border-top: 1px solid var(--line);
  padding: 0.6rem 0; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.decision-bar button { white-space: nowrap; }
h2:focus, h3:focus { outline: none; }
h2:focus-visible, h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* --- states: empty, a failed read beside a stale marker (spec §1.8) --- */
body[data-look="live"] .empty {
  border: 0; background: none; padding: 0.75rem 0; color: var(--text-muted); font-size: 0.95rem; text-align: start;
}
.empty-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.4rem 0 0.8rem; }
.empty-state .empty { margin: 0; }
.view:has(.read-issue[data-failed]:not([hidden])) .page-actions .freshness.stale { display: none; }
body[data-look="live"] .page-actions button.icon { color: var(--text-muted); }
body[data-look="live"] .page-actions button.icon:hover { color: var(--text); }

/* --- row actions outside a table, and the «بیشتر» popover of a row (spec §3.1.5) --- */
.row-actions { display: inline-flex; flex-wrap: nowrap; gap: 0.4rem; align-items: center; }
details.row-more { position: relative; display: inline-block; }
details.row-more > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 0.86rem; white-space: nowrap;
}
details.row-more > summary::-webkit-details-marker { display: none; }
.row-more-menu {
  position: absolute; z-index: 30; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0;
  min-width: 12rem; display: grid; gap: 0.3rem; padding: 0.4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.row-more-menu button { width: 100%; justify-content: flex-start; }

/* --- sign-in (spec §5.A.12) --- */
body[data-look="live"] .view-entry { padding-top: 8vh; }
body[data-look="live"] .entry-hero { margin-bottom: 1rem; }
.entry-hero .lead:empty { display: none; }
body[data-look="live"] .live-login {
  max-width: 24rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem;
}
body[data-look="live"] .live-login form { display: grid; gap: 0.8rem; margin: 0; }
body[data-look="live"] #entry-notice { max-width: 24rem; margin: 0 auto 0.9rem; }
/* review 2026-11-06: the notice above the card is exactly as wide as the card (24rem both), so their edges line up */
body[data-look="live"] #entry-notice, body[data-look="live"] .live-login { width: 100%; }
body[data-look="live"] #entry-notice p { margin: 0; }

/* --- the live look: no word breaks inside a table, no monospace for numbers or names (spec §3.1.1, §5.A.4-5) --- */
body[data-look="live"] .data-table th,
body[data-look="live"] .data-table td,
body[data-look="live"] .data-table td *,
body[data-look="live"] .dir-row > *,
body[data-look="live"] .mt-table td,
body[data-look="live"] .ob-table td { overflow-wrap: normal; word-break: normal; }
body[data-look="live"] .stat-value,
body[data-look="live"] .fact-value,
body[data-look="live"] .profile-fact,
body[data-look="live"] .profile-identity .idchip,
body[data-look="live"] .ob-exact,
body[data-look="live"] .acct-section .kv-value,
body[data-look="live"] .acct-shape .kv-value bdi,
body[data-look="live"] .boardbtn .num,
body[data-look="live"] .board-editline .num,
body[data-look="live"] .quote-value,
body[data-look="live"] .price-magnitude,
body[data-look="live"] .price-secondary .num-secondary,
body[data-look="live"] .quotebox .quote-number,
body[data-look="live"] .reqrow-open .r-main,
body[data-look="live"] .pending-summary,
body[data-look="live"] .build-identity,
body[data-look="live"] .ob-note-text { overflow-wrap: break-word; word-break: normal; }
body[data-look="live"] .fact-value.ltr,
body[data-look="live"] .detail-summary .asset,
body[data-look="live"] .quote-number,
body[data-look="live"] .ticket-price .quote-number,
body[data-look="live"] .quotebox .quote-number,
body[data-look="live"] .remaining,
body[data-look="live"] .ob-exact,
body[data-look="live"] .price-secondary .num-secondary,
body[data-look="live"] .mesghal-basis .mesghal-grams,
body[data-look="live"] .boardrow-price .num,
body[data-look="live"] .asset-tab,
body[data-look="live"] .opboard-gap,
body[data-look="live"] .build-chip .build-label,
body[data-look="live"] .nonbinding { font-family: inherit; font-variant-numeric: tabular-nums; }
body[data-look="live"] .boardbtn .price-secondary,
body[data-look="live"] .boardbtn .price-per { color: rgba(255, 255, 255, 0.88); }
body[data-look="live"][data-shell="customer"] .boardbtn:not(.buy):not(.sell) .price-secondary { color: var(--text-muted); }
/* --- headings (spec §2.1, §2.2; review 2026-11-06): ONE heading on the customer's «قیمت‌ها» (the board's own h3 is not
   shown; its last-update line stays), and «تنظیمات» carries no eyebrow above its tabs --- */
body[data-look="live"][data-shell="customer"] #view-trade .board-head h3 { display: none; }
body[data-look="live"] #view-config .cfg-group-head { display: none; }
/* --- final review 2026-11-07 (spec §1.1: one look per control) ---
   every fold says it opens: the same «‹» that turns as the technical folds (a flex summary has no marker of its own) */
body[data-look="live"] .fold > summary { list-style: none; }
body[data-look="live"] .fold > summary::-webkit-details-marker { display: none; }
body[data-look="live"] .fold > summary::after {
  content: "‹"; display: inline-block; margin-inline-start: 0.5rem; transition: transform 0.15s; color: var(--text-muted);
  font-weight: 400;
}
body[data-look="live"] .fold[open] > summary::after { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { body[data-look="live"] .fold > summary::after { transition: none; } }
/* radios and checkboxes in the palette, not the browser's blue; the search field's clear «×» in grey */
input[type="radio"], input[type="checkbox"] { accent-color: var(--green-800); }
body[data-shell="customer"] input[type="radio"], body[data-shell="customer"] input[type="checkbox"] { accent-color: var(--gold); }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); cursor: pointer; }
/* a highlighted phone card (a registration waiting for review, a request just decided) is painted as ONE surface */
@media (max-width: 47.99rem) {
  body .data-table:not(.keep-table) tr.just-decided,
  body .data-table.ob-table:not(.keep-table) tr[data-state="submitted"] { background: var(--warn-bg); }
  body[data-look] .data-table.req-table:not(.keep-table) tr.just-decided td,
  body .data-table:not(.keep-table) tr.just-decided td,
  body .data-table.ob-table:not(.keep-table) tr[data-state="submitted"] td { background: transparent; }
}
/* ===== UR-20261106 WP-0 foundation: end ===== */

/* ===== UR-20261106 slots (spec §7.2). Each area package puts its NEW rules only between its own two markers. ===== */
/* ===== UR-20261106 slot WP-1 customer: begin ===== */
/* --- headings (spec §5.B.3, §5.B.6): the page title with its quiet companion beside it -- «به‌روزرسانی: …» on
   «قیمت‌ها», the market chip on «خانه»; the board's own heading row is not shown in the live customer look --- */
#view-trade .page-title-line, #view-home .page-title-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
}
#view-trade .page-title-line .board-updated { white-space: nowrap; }
#view-home .home-market { display: inline-flex; align-self: center; }
body[data-look="live"][data-shell="customer"] #view-trade .board-head { display: none; }
body[data-look="live"][data-shell="customer"] #view-trade #trade-board { margin-top: 0.4rem; }

/* --- the board (spec §5.B.3, SC-30): a full-width row per product, term-only rows, whole figures --- */
.board-assetrow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.75rem; background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: center;
}
.board-assetrow .board-assetname { font-size: 1rem; font-weight: 700; }
.board-assetrow .board-assetper { font-size: 0.84rem; color: var(--text-muted); white-space: nowrap; }
#trade-board .board-title .board-term:only-child { font-size: 0.92rem; font-weight: 600; color: var(--text); }
body[data-look="live"] .boardbtn .num,
body[data-look="live"] .boardbtn .price-mesghal,
body[data-look="live"] .boardbtn .price-secondary,
body[data-look="live"] .boardbtn .num-secondary { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.boardbtn .board-action { font-size: 0.84rem; }
/* a closed market (spec §5.B.4, SC-31): the prices stay readable, the buttons go quiet and say «بسته» */
.board-closed .boardbtn { filter: saturate(0.25); opacity: 0.8; }
.board-closed .boardbtn[aria-disabled="true"] { cursor: not-allowed; }
.board-closed .boardbtn.flash { animation: none; }

/* --- the ticket (spec §5.B.5, SC-32): the action and the term under the title, the quantity right after the price
   with its unit beside it and the allowed range under it, the estimate's figures on one line --- */
#trade-ticket-context {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.6rem;
  font-size: 0.9rem; color: var(--text-muted);
}
.ticket-form .qty-wrap {
  display: flex; align-items: stretch; min-height: 48px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); overflow: hidden;
}
.ticket-form .qty-wrap:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.ticket-form .qty-wrap input[type="text"] {
  flex: 1 1 auto; min-width: 0; width: auto; border: 0; border-radius: 0; background: transparent; outline: none;
}
.ticket-form .qty-wrap input[type="text"]:focus-visible { outline: none; }
.ticket-form .qty-unit {
  display: flex; align-items: center; padding-inline: 0.85rem; white-space: nowrap; font-size: 0.92rem;
  color: var(--text-muted); background: var(--surface-2); border-inline-start: 1px solid var(--line);
}
.ticket-form .qty-limits { font-size: 0.84rem; color: var(--text-muted); }
#trade-preview .kv-value, #trade-preview .kv-value .num { white-space: nowrap; }
#trade-preview h4 { margin-bottom: 0.2rem; }
/* the ticket is an overlay: its facts are a two-column list, read from the start (spec §1.7) */
.ticket-form > .kvlist .kv { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: 0.75rem; }
.ticket-form > .kvlist .kv-value { text-align: start; }
.ticket-price .quote-meta { align-items: baseline; }
.ticket-price .quote-meta .ltr { align-self: baseline; }

/* --- the waiting screen (spec §5.B.1 - 2, W06, SC-28, SC-29): the result circle, the request in one line, one short
   paragraph with its «؟» --- */
.wait-result {
  align-self: center; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 3px solid currentColor;
}
.wait-result svg { width: 38px; height: 38px; stroke-width: 2.4; }
.wait-result.good { color: var(--ok-ink); background: var(--ok-bg); }
.wait-result.bad { color: var(--bad-ink); background: var(--danger-soft); }
.wait-result.neutral { color: var(--text-muted); background: var(--surface-2); }
.wait-summary {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.65rem;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center;
}
.wait-summary .chip { white-space: nowrap; }
.wait-summary-asset { font-weight: 700; }
.wait-summary-figure { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wait-summary-figure .num { font-weight: 700; }
.wait-card .kv-value { font-variant-numeric: tabular-nums; }
.wait-card .wait-status > p { text-align: center; }
.wait-card .wait-note { text-align: start; line-height: 1.7; }
.wait-card .wait-note .help { vertical-align: middle; }

/* --- «خانه» (spec §5.B.6, SC-33): three figures in a row on a desk; on a phone the first spans the row --- */
.home-block-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; min-width: 0; }
.home-excerpt .block-head.spread { gap: 0.4rem 0.8rem; flex-wrap: wrap; }
@media (max-width: 47.99rem) {
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statgrid > .stat-tile:first-child { grid-column: 1 / -1; }
}

/* --- «درخواست‌ها» (spec §5.B.7, SC-34): filters with their counts; a compact bar on a desk, a 2 x 2 grid on a phone
   (every rule here names this page's own bar: the other packages' .filterbar rows keep their own wrapping) --- */
#requests-filter button { white-space: nowrap; }
#requests-filter .filter-count { font-variant-numeric: tabular-nums; opacity: 0.85; }
@media (min-width: 48rem) {
  #requests-filter.filterbar { display: inline-flex; }
  #requests-filter.filterbar[hidden] { display: none; }
}
@media (max-width: 47.99rem) {
  #requests-filter.filterbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-strong);
  }
  #requests-filter.filterbar[hidden] { display: none; }
}

/* --- «دارایی‌ها» (spec §5.B.8, SC-35): tiles, the cash estimate first --- */
.holding-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 0.6rem; }
.holding-tile {
  display: grid; gap: 0.25rem; align-content: start; min-width: 0; padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.holding-name { font-size: 0.86rem; color: var(--text-muted); }
.holding-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.holding-value .num { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: baseline; }
.holding-unit { font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; }
.holding-note { margin: 0; }
@media (max-width: 47.99rem) {
  .holding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holding-cash, .holding-grid > .holding-tile:nth-child(even):last-child { grid-column: 1 / -1; }   /* no orphan */
}

/* --- «پروفایل» (spec §5.B.9, SC-36): one card, a switch for the price sound, a quiet sign-out -- every rule under
   #profile-body, so the staff profile's .profile-* family and any other switch keep their own look --- */
#profile-body .profile-card { max-width: 40rem; }
#profile-body .profile-card .kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; text-align: start; }
#profile-body .profile-card .kv-value { text-align: start; }
#profile-body .profile-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line);
}
#profile-body .profile-switch-text { display: grid; gap: 0.15rem; min-width: 0; }
#profile-body .profile-switch-label { font-weight: 700; }
#profile-body .profile-switch-hint { font-size: 0.86rem; color: var(--text-muted); }
#profile-body button.switch {
  flex: 0 0 auto; width: 56px; min-height: 44px; padding: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
#profile-body button.switch .switch-track {
  position: relative; display: block; width: 44px; height: 26px; border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background 0.15s;
}
#profile-body button.switch .switch-thumb {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: inset-inline-start 0.15s;
}
#profile-body button.switch[aria-checked="true"] .switch-track { background: var(--gold); }
#profile-body button.switch[aria-checked="true"] .switch-thumb { inset-inline-start: 21px; }
/* integration 2026-11-07: this switch draws its own thumb, so the board switch's knob (WP-3's .switch-track::after) is
   not drawn a second time here */
#profile-body button.switch .switch-track::after { content: none; }
#profile-body button.switch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-pill); }
#profile-body .profile-actions { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) { #profile-body button.switch .switch-track, #profile-body button.switch .switch-thumb { transition: none; } }
/* --- final review 2026-11-07: the waiting screen's figures take their own line under the product, the quantity and
   the amount apart by a quiet «·»; the request number the customer reads out to staff is body-size, not a small
   monospace chip; on a phone the ticket's facts put the name above the value --- */
.wait-summary-figures {
  flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem 0.5rem;
}
.wait-summary-sep { color: var(--text-muted); }
.wait-card .idchip { font-size: 0.9rem; font-family: inherit; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) {
  .ticket-form > .kvlist .kv { grid-template-columns: 1fr; gap: 0.1rem; }
  .ticket-form > .kvlist .kv-name { color: var(--text-muted); font-size: 0.86rem; }
}
/* ===== UR-20261106 slot WP-1 customer: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261106 slot WP-2 requests: begin ===== */
/* WP-2 (spec §5.C, §3.5 rows 1-4 and 6, §6 «کارتابل» / request overlays): the queue, its search and its decisions, the
   request overlay for staff and for a customer, the countdown. Presentation only: no rule here hides a decision a
   person may take, a refusal or a financial qualifier. */

/* --- «کارتابل»: the heading with «فقط مشاهده», the search row, the result banner, the section titles --- */
body[data-look="live"] #view-queue .page-head > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.queue-readonly[hidden] { display: none; }
body[data-look="live"] .queue-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; width: 100%;
  margin: 0 0 0.75rem; padding: 0;
}
body[data-look="live"] .queue-toolbar[hidden] { display: none; }
body[data-look="live"] .queue-toolbar label { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
body[data-look="live"] .queue-toolbar input { flex: 1 1 14rem; max-width: 24rem; min-height: 44px; }
/* integration 2026-11-07: a search field is not an input[type="text"], so it takes the same field look here as the
   customers' and users' search fields */
body[data-look="live"] .queue-toolbar input[type="search"] {
  font: inherit; font-size: max(16px, 1rem); padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: inherit; min-width: 0; box-sizing: border-box;
}
/* an empty search box reads right to left (its placeholder is Persian); a typed number turns it left to right */
body[data-look="live"] .queue-toolbar input:placeholder-shown { direction: rtl; }
body[data-look="live"] .queue-toolbar button { white-space: nowrap; }
.queue-outcome { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; }
.queue-outcome[hidden] { display: none; }
.queue-outcome-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--buy);
  border-radius: var(--radius-sm); background: var(--surface);
}
.queue-outcome-line.bad { border-inline-start-color: var(--sell); }
/* a rejection that was recorded (or a request that ended) is an ended fact, not a refusal: neutral, as its chip */
.queue-outcome-line.neutral { border-inline-start-color: var(--text-muted); }
.queue-outcome-line.warn { border-inline-start-color: var(--warn-line); background: var(--warn-bg); }
.queue-outcome-line:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.queue-outcome-line .queue-outcome-text { font-weight: 700; }
.queue-outcome-line .queue-outcome-why { color: var(--text-muted); font-size: 0.9rem; }
.queue-outcome-line .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
.queue-outcome-line .refusal-tech { flex-basis: 100%; }
body[data-look="live"] #view-queue .list-section { font-size: 1rem; font-weight: 700; color: var(--text); margin: 1rem 0 0.4rem; }
body[data-look="live"] #view-queue .list-section:first-child { margin-top: 0.25rem; }
body[data-look="live"] #view-queue .empty-state .fact-note { flex-basis: 100%; margin: -0.4rem 0 0; }
.queue-more { margin: 0 0 1rem; }

/* --- the request tables: the open button (side chip above the product, the number under it), figures and times --- */
body[data-look="live"] .data-table.req-table .row-open.reqrow-open { flex-direction: column; flex-wrap: nowrap; gap: 0.2rem; }
body[data-look="live"] .data-table.req-table .reqrow-open .chip { font-size: 0.78rem; }
body[data-look="live"] .data-table.req-table .reqrow-open .cell-sub { font-size: 0.8rem; }
body[data-look="live"] .data-table.req-table .req-figure { white-space: nowrap; }
@media (min-width: 48rem) { body[data-look="live"] .data-table.req-table .cell-unit { display: none; } }
body[data-look="live"] .data-table.req-table .reqcard-net { font-weight: 700; }
body[data-look="live"] .data-table.req-table .reqcard-mesghal { display: block; white-space: nowrap; color: var(--text-muted); font-size: 0.8rem; }
body[data-look="live"] .data-table.req-table .reqcard-when bdi { display: block; white-space: nowrap; }
body[data-look="live"] .data-table.req-table .reqcard-when .cell-time { color: var(--text-muted); font-size: 0.86rem; }
body[data-look="live"] .data-table.req-table .reqcard-state { max-width: none; }
/* the decided list's «تصمیم»: the date and time on one line where the column allows, who decided under them */
body[data-look="live"] .data-table.req-table .reqcard-decided .cell-time { color: var(--text-muted); }
body[data-look="live"] .data-table.req-table .reqcard-decided .reqcard-decider { margin-top: 0.15rem; font-size: 0.86rem; }
body[data-look="live"] .data-table.req-table td.col-actions > .reqrow-actions { margin: 0; flex-direction: row; }
body[data-look="live"] .data-table.req-table button.inline-accept {
  min-width: 5.5rem; background: var(--buy-deep); border-color: var(--buy-deep); color: #fff; font-weight: 600;
}
body[data-look="live"] .data-table.req-table button.inline-reject {
  min-width: 4.5rem; background: transparent; border-color: var(--sell-deep); color: var(--sell-deep); font-weight: 600;
}
body[data-look="live"][data-shell="customer"] .data-table.req-table button.inline-reject { color: #f2a396; border-color: #f2a396; }
body[data-look="live"] .data-table.req-table button[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--focus); }
/* a closed request reads quieter; the highlight of the row a decision just moved fades out */
body[data-look="live"] .data-table.req-table tr.row-quiet td.col-num { opacity: 1; }
body[data-look="live"] .data-table.req-table tr.row-quiet td.col-num > * { opacity: 0.6; }
body[data-look="live"] .data-table.req-table tr.just-decided td { background: var(--warn-bg); }

/* --- the queue's confirmation: ONE line under its request, as wide as the table, never widening a column --- */
body[data-look="live"] .data-table tr.req-inline-row td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); }
body[data-look="live"] .inline-confirm.inline-confirm-line {
  contain: inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  border: 0; border-inline-start: 4px solid var(--gold); border-radius: 0; padding: 0.2rem 0.75rem; background: transparent;
  text-align: start;
}
body[data-look="live"] .inline-confirm-line .inline-question { font-weight: 700; white-space: nowrap; }
body[data-look="live"] .inline-confirm-line .inline-summary { color: var(--text); }
/* a part of the summary (and of an overlay value: «کالا», «تحویل», a date with its time) is one run: it moves to the
   next line whole, and wraps inside itself only when it is longer than a whole line (review 2026-11-06) */
body[data-look="live"] .inline-confirm-line .inline-summary .nowrap,
body[data-look="live"] #view-detail .nowrap { display: inline-block; max-width: 100%; }
body[data-look="live"] .inline-confirm-line .inline-id { color: var(--text-muted); }
body[data-look="live"] .inline-confirm-line .inline-note { color: var(--text-muted); font-size: 0.86rem; }
body[data-look="live"] .inline-confirm-line .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; margin-inline-start: auto; }
body[data-look="live"] .inline-confirm-line .actions button { white-space: nowrap; }
body[data-look="live"] .inline-confirm-line .outcome { flex-basis: 100%; margin: 0; }

/* --- the countdown: «14:46 مانده»; the last two minutes in the warning tones --- */
body[data-look="live"] .chip.remaining-chip {
  background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-look="live"] .chip.remaining-chip[data-urgent] { background: var(--danger-soft); border-color: var(--danger); color: var(--bad-ink); }
body[data-look="live"] .chip.remaining-chip .remaining { font-family: inherit; font-weight: 700; }
.chip.expiry-chip { font-size: 0.75rem; }

/* --- the request overlay (live look): a staff overlay is a reading width, a customer's narrower (spec §1.7) --- */
body[data-look="live"] main > #view-detail.overlay { width: min(48rem, calc(100vw - 1.5rem)); }
body[data-look="live"][data-shell="customer"] main > #view-detail.overlay { width: min(40rem, calc(100vw - 1.5rem)); }
body[data-look="live"] #view-detail [data-byid],
body[data-look="live"] #view-detail #btn-load-detail,
body[data-look="live"] #view-detail .price-hero,
body[data-look="live"] #view-detail .detail-facts-block,
body[data-look="live"] #view-detail .axes-block > .block-head,
body[data-look="live"] #view-detail .decision > .block-head { display: none !important; }
body[data-look="live"] #view-detail .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
body[data-look="live"] #view-detail .detail-grid .block {
  border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0;
}
body[data-look="live"] #view-detail .block-head h3 { font-size: 1rem; margin: 0 0 0.5rem; }
body[data-look="live"] #view-detail .detail-summary { gap: 0.4rem 0.6rem; margin: -0.2rem 0 1rem; }
body[data-look="live"] #view-detail .detail-product { font-size: 1.1rem; font-weight: 700; }
body[data-look="live"] #view-detail .detail-number { color: var(--text-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
/* facts as name | value lines, without a box each */
body[data-look="live"] #view-detail .detail-kv { display: grid; gap: 0.55rem; font-size: 1rem; }
body[data-look="live"] #view-detail .detail-kv .kv,
body[data-look="live"] #view-detail .amount-parts .kv { border: 0; padding: 0; }
body[data-look="live"] #view-detail .detail-kv .kv-value { font-weight: 600; overflow-wrap: break-word; }
body[data-look="live"] #view-detail .detail-kv .kv-name { color: var(--text-muted); }
body[data-look="live"] #view-detail .kv-note { display: block; font-size: 0.84rem; font-weight: 400; color: var(--text-muted); }
body[data-look="live"] #view-detail .detail-price .num,
body[data-look="live"] #view-detail .detail-board-now .num { font-weight: 700; }
body[data-look="live"] #view-detail .detail-board-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
/* the amount: on a staff overlay one strong line of the list; on a customer's, the card the overlay leads with */
body[data-look="live"] #view-detail .detail-amount { margin-top: 0.6rem; display: grid; gap: 0.35rem; }
body[data-look="live"] #view-detail .detail-amount:empty { display: none; }
body[data-look="live"] #view-detail .amount-hero {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
  padding-top: 0.6rem; border-top: 1px solid var(--line);
}
body[data-look="live"] #view-detail .amount-hero-name { color: var(--text-muted); }
body[data-look="live"] #view-detail .amount-hero-value { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
body[data-look="live"] #view-detail .amount-parts { display: grid; gap: 0.3rem; font-size: 0.92rem; }
body[data-look="live"] #view-detail .detail-amount .fact-note { margin: 0; }
body[data-look="live"] #view-detail[data-reader="customer"] .detail-overview { display: flex; flex-direction: column; }
body[data-look="live"] #view-detail[data-reader="customer"] .detail-amount { order: -1; margin: 0 0 1rem; }
body[data-look="live"] #view-detail[data-reader="customer"] .amount-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
body[data-look="live"] #view-detail[data-reader="customer"] .amount-hero-value { font-size: 1.6rem; font-weight: 800; }
body[data-look="live"][data-shell="customer"] #view-detail .amount-hero-value { color: var(--gold-soft, var(--gold)); }
/* a request that was not carried out: its amount is quiet -- nothing is paid or received */
body[data-look="live"] #view-detail .amount-hero.closed .amount-hero-value { color: var(--text-muted); font-weight: 700; }
body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.5rem; }
body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv .kv {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.1rem; text-align: start;
}
body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv .kv-name,
body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv .kv-value { text-align: start; }
body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv .kv-name { font-size: 0.86rem; }
@media (max-width: 30rem) {
  body[data-look="live"] #view-detail[data-reader="customer"] .detail-kv { grid-template-columns: minmax(0, 1fr); }
}
/* the three facts (INV-060), each one line of the same list */
body[data-look="live"] #view-detail .axes-lines .axes {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
}
body[data-look="live"] #view-detail .axes-lines .axis {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
  border: 0; border-radius: 0; padding: 0; background: transparent;
}
body[data-look="live"] #view-detail .axes-lines .axis[hidden] { display: none; }
body[data-look="live"] #view-detail .axes-lines .axis h4 { margin: 0; font-size: inherit; font-weight: 400; color: var(--text-muted); }
body[data-look="live"] #view-detail .axes-lines .axis-state,
body[data-look="live"] #view-detail .axes-lines #axis-approval .axis-state { display: inline; font-size: 1rem; font-weight: 600; }
body[data-look="live"] #view-detail .axes-lines .axis-said { display: block; color: var(--text-muted); font-size: 0.9rem; }
body[data-look="live"] #view-detail .axes-lines .axis-line { gap: 0.3rem 0.5rem; }
@media (max-width: 47.99rem) {
  body[data-look="live"] #view-detail .axes-lines .axis { grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); }
  /* the amount keeps its whole width and the name wraps beside it («مبلغ پرداختی به مشتری (انجام نشد)» once pushed
     the figure past the overlay's edge; review 2026-11-06) */
  body[data-look="live"] #view-detail .amount-hero { grid-template-columns: minmax(0, 1fr) auto; }
}
/* the decision bar: sticky at the overlay's foot while the request waits (spec §1.7); hidden once there is nothing
   to decide and no result to show */
body[data-look="live"] #view-detail .decision.decision-bar {
  position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 0.7rem 0 0.2rem;
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, 0.25);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
body[data-look="live"] #view-detail .decision.decision-bar.is-idle { display: none !important; }
body[data-look="live"] #view-detail .decision-actions { display: flex; gap: 0.5rem; margin: 0; flex: 1 1 16rem; }
body[data-look="live"] #view-detail .decision-actions button { flex: 1 1 0; min-height: 48px; font-size: 1rem; }
body[data-look="live"] #view-detail .decision-actions button[hidden] { display: none; }
body[data-look="live"] #view-detail #btn-reject { background: transparent; border-color: var(--sell-deep); color: var(--sell-deep); }
body[data-look="live"] #view-detail #decision-outcome { flex-basis: 100%; margin: 0; }
body[data-look="live"] #view-detail #decision-outcome .detail-outcome-line { margin: 0; }
body[data-look="live"] #view-detail #decision-outcome .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* «جزئیات بیشتر»: closed by default; the number, the times, the integration and the audit */
body[data-look="live"] #view-detail .detail-more { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0.2rem 0 0; }
body[data-look="live"] #view-detail .detail-more[hidden] { display: none; }
body[data-look="live"] #view-detail .detail-more > summary { color: var(--text-muted); }
body[data-look="live"] #view-detail .detail-more[open] > summary { margin-bottom: 0.4rem; }
body[data-look="live"] #view-detail .detail-more > .block { margin-top: 1rem; }
body[data-look="live"] #view-detail .detail-more .facts { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
body[data-look="live"] #view-detail .detail-more .fact {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
  border: 0; padding: 0; background: transparent;
}
body[data-look="live"] #view-detail .detail-more .fact-name { font-size: inherit; font-weight: 400; }
body[data-look="live"] #view-detail .detail-more .messages { margin-top: 0.4rem; }
body[data-look="live"] #view-detail .audit-block h3 { display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 47.99rem) {
  body[data-look="live"] .queue-toolbar label { flex-basis: 100%; }
  body[data-look="live"] .queue-toolbar input { flex: 1 1 8rem; max-width: none; }
  /* WP-0's actions width (1% of a table cell) would squeeze a phone card's buttons: a card's actions are a full row */
  body[data-look="live"] .data-table.req-table td.col-actions { width: auto; }
  body[data-look="live"] .queue-outcome-line .actions { margin-inline-start: 0; width: 100%; }
  body[data-look="live"] .queue-outcome-line .actions button { flex: 1 1 0; min-height: 48px; }
  body[data-look="live"] .data-table.req-table .row-open.reqrow-open { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
  body[data-look="live"] .data-table.req-table .reqrow-open .cell-sub { flex-basis: 100%; }
  body[data-look="live"] .data-table.req-table .reqcard-when bdi { display: inline; }
  body[data-look="live"] .data-table.req-table .reqcard-mesghal { display: inline; margin-inline-start: 0.4rem; }
  body[data-look="live"] .inline-confirm.inline-confirm-line { padding-inline: 0.2rem; border-inline-start-width: 3px; }
  body[data-look="live"] .inline-confirm-line .actions { width: 100%; margin-inline-start: 0; }
  body[data-look="live"] .inline-confirm-line .actions button { flex: 1 1 0; min-height: 48px; }
  /* a long fact name («وضعیت هماهنگی (بدون ثبت در حسابداری)») wraps in its own 40%; the value keeps the rest, so no
     word of it is cut (review 2026-11-06) */
  body[data-look="live"] #view-detail .detail-more .fact { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); }
}
/* ===== UR-20261106 slot WP-2 requests: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261106 slot WP-3 pricing and settings: begin ===== */
/* The pricing board (قیمت‌گذاری) and the settings (تنظیمات), spec §5.D. Presentation only: no rule here hides an
   authorized control, a refusal or a financial qualifier. */

/* --- the switch (spec §1.4; DC-26, DC-28, DC-30): a small track and its words; the whole button is the target --- */
button.switch {
  min-height: 44px; padding: 0.3rem 0.75rem; gap: 0.5rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
.switch-track {
  position: relative; flex: 0 0 auto; width: 2.1rem; height: 1.2rem; border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background 0.15s;
}
.switch-track::after {
  content: ""; position: absolute; inset-block-start: 0.15rem; inset-inline-start: 0.15rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: inset-inline-start 0.15s;
}
button.switch[aria-checked="true"] .switch-track { background: var(--ok); }
button.switch[aria-checked="true"] .switch-track::after { inset-inline-start: 1.05rem; }
button.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.switch.sidegate { min-height: 40px; padding: 0.15rem 0.6rem; font-size: 0.82rem; }
button.switch.sidegate[aria-checked="false"] { background: var(--surface-2); }

/* --- the board's toolbar: the market (a chip, then its own button; closing asks inline), the step with its caption,
   and the switches (spec §5.D.1, §5.D.5, §5.D.7) --- */
#board-controls.board-controls { gap: 0.6rem 1.25rem; align-items: center; }
.board-market { display: flex; align-items: center; gap: 0.6rem; }
.board-market .chip { font-size: 0.86rem; }
.board-controls .inline-confirm.board-confirm { flex: 1 1 100%; max-width: 34rem; }
.inline-confirm.board-confirm p, .inline-confirm.cfg-confirm p { margin: 0; font-weight: 600; }
.inline-confirm.board-confirm .create-actions, .inline-confirm.cfg-confirm .create-actions { margin-top: 0.2rem; }
.board-step { flex-wrap: wrap; gap: 0.5rem; }
.board-step .board-caption { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.board-step-note { font-size: 0.84rem; color: var(--text-muted); }
.board-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.board-switches .chip { white-space: nowrap; }

/* --- the board's rows: a product group, then one row per delivery term (spec §5.D.6 - §5.D.8) --- */
.opboard-head .opboard-col { display: inline-flex; align-items: center; justify-content: center; gap: 0.15rem; }
.opboard-head { font-size: 0.85rem; font-weight: 600; }
.opboard-head .help { margin-block: -0.6rem; }
.opboard-asset-name strong { font-size: 1rem; }
.opboard-asset .board-term { font-size: 0.84rem; color: var(--text-muted); }
.opboard-asset .visstate { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.86rem; color: var(--text-muted); }
.board-termname { font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.board-titletext { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem; }
.pricecell .stepper input { font-weight: 600; padding-inline: 0.35rem; }
.opboard-gap input { font-weight: 600; padding-inline: 0.35rem; }
.opboard-gap-side { display: none; }
.switch-side { display: none; font-weight: 700; }
.side-closed { gap: 0.3rem; }
button.chipbtn {
  min-height: 36px; padding: 0.1rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
button.chipbtn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.opboard-draftbar {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  padding: 0.5rem 0.7rem; border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-bg);
}
.opboard-draftbar .opboard-draftnote { flex: 1 1 20rem; }
.opboard-guard { flex: 1 1 100%; margin: 0; font-weight: 700; color: var(--bad-ink); }
.opboard-draftacts { margin-inline-start: auto; }
.opboard-draftacts button { white-space: nowrap; }

/* a desk: the title and difference cells lay their parts out in the row -- the term in the middle column; each side's
   switch, and «ورود دستی», on a short second line under its own column */
@media (min-width: 48rem) {
  .opboard-row:not(.opboard-head) {
    grid-template-areas: "bid title gap ask" "gbid . gman gask" ". . gnote ." "bar bar bar bar"; row-gap: 0;
  }
  .opboard-row:not(.opboard-head) > .pricecell.sell { grid-area: bid; }
  .opboard-row:not(.opboard-head) > .pricecell.buy { grid-area: ask; }
  .opboard-row:not(.opboard-head) > .board-title,
  .opboard-row:not(.opboard-head) > .opboard-gap { display: contents; }
  .opboard-row:not(.opboard-head) .board-titletext { grid-area: title; justify-self: center; text-align: center; }
  .opboard-row:not(.opboard-head) .gapline { grid-area: gap; }
  .opboard-row:not(.opboard-head) .manualbtn { grid-area: gman; justify-self: center; margin-top: 0.35rem; }
  .opboard-row:not(.opboard-head) .opboard-gap > .fact-note { grid-area: gnote; margin-top: 0.2rem; text-align: center; }
  .opboard-row:not(.opboard-head) .gate-bid { grid-area: gbid; justify-self: center; margin-top: 0.35rem; }
  .opboard-row:not(.opboard-head) .gate-ask { grid-area: gask; justify-self: center; margin-top: 0.35rem; }
  .opboard-row:not(.opboard-head) > .opboard-draftbar { grid-area: bar; margin-top: 0.5rem; }
  .opboard-row:not(.opboard-head) button.switch.sidegate { min-height: 36px; }
  .opboard-row:not(.opboard-head) .manualbtn { min-height: 36px; }
}

/* a phone: one compact card per delivery term -- the term with both side switches on one line, the buy price with its
   −/+, then the difference and the sell price (side by side while each figure shows whole: fits-two, boardFitsCut) */
@media (max-width: 47.99rem) {
  .opboard-row:not(.opboard-head) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.25rem 0.45rem; padding: 0.35rem 0.5rem;
    grid-template-areas: "title title" "bid bid" "gap gap" "ask ask" "bar bar";
  }
  .opboard-row > .board-title {
    grid-area: title; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.3rem;
    text-align: start;
  }
  .opboard-row .board-titletext { flex: 1 1 auto; justify-content: flex-start; }
  .opboard-row .switch-side { display: inline; }
  .opboard-row .board-title button.switch.sidegate { min-height: 32px; padding: 0 0.3rem; gap: 0.25rem; font-size: 0.8rem; }
  .opboard-row .board-title .switch-track { width: 1.8rem; height: 1.05rem; }
  .opboard-row .board-title .switch-track::after { width: 0.75rem; height: 0.75rem; }
  .opboard-row .board-title button.switch[aria-checked="true"] .switch-track::after { inset-inline-start: 0.9rem; }
  .opboard-row > .pricecell.sell { grid-area: bid; }
  .opboard-row > .opboard-gap { grid-area: gap; }
  .opboard-row > .pricecell.buy { grid-area: ask; }
  .opboard-row > .opboard-draftbar { grid-area: bar; }
  .opboard-row > .pricecell { padding: 0.2rem 0.4rem; gap: 0.1rem; }
  .opboard-row > .pricecell > .pricecell-side { line-height: 1.25; }
  .opboard-row > .pricecell.sell > .fact-note { grid-column: 1 / -1; }
  .pricecell .stepper:not(.single) { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .pricecell .stepper:not(.single) input { grid-column: auto; order: 0; }
  .pricecell .stepper.single { grid-template-columns: minmax(0, 1fr); }
  .pricecell .stepper input { min-height: 40px; padding-block: 0.3rem; padding-inline: 0.25rem; }
  .pricecell .stepper .stepbtn { min-width: 40px; min-height: 40px; }
  .opboard-gap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "word manual" "line line";
    align-items: center; gap: 0.15rem 0.4rem;
  }
  .opboard-gap .opboard-gap-side { display: block; grid-area: word; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-align: start; }
  .opboard-gap .manualbtn { grid-area: manual; min-height: 28px; padding-block: 0; }
  /* a phone field is read at 16px at least (spec §6); the difference keeps its whole figure in view */
  .opboard-gap input { min-height: 40px; font-size: max(16px, 1rem); padding-block: 0.3rem; padding-inline: 0.25rem; }
  .opboard-gap .gapline { grid-area: line; }
  .opboard-gap .fact-note { grid-column: 1 / -1; }
  .opboard-draftacts { margin-inline-start: 0; width: 100%; }
  .opboard-draftacts button { flex: 1 1 0; min-height: 44px; }
  /* the toolbar on a phone (review): the market, the step with its «؟», the caption close under it, and both switches
     on one line */
  #board-controls.board-controls { gap: 0.4rem 0.75rem; }
  .board-step { row-gap: 0.15rem; }
  .board-step .board-step-note { flex: 1 1 100%; }
  .board-switches { gap: 0.4rem; }
  .board-switches button.switch { min-height: 40px; padding-inline: 0.5rem; gap: 0.35rem; font-size: 0.8rem; }
  .board-switches .switch-track { width: 1.8rem; height: 1.05rem; }
  .board-switches .switch-track::after { width: 0.75rem; height: 0.75rem; }
  .board-switches button.switch[aria-checked="true"] .switch-track::after { inset-inline-start: 0.9rem; }
  /* a product's header: its name with the customer-visibility switch on one line, the unit and count under the name */
  .opboard-asset { flex-wrap: nowrap; padding: 0.35rem 0.6rem; }
  .opboard-asset-name { min-width: 0; }
  .opboard-asset-name .board-term { display: block; }
  .opboard-asset-name .board-term-sep { display: none; }
  .opboard-asset button.switch.visbtn { flex: 0 0 auto; min-height: 36px; padding-inline: 0.5rem; gap: 0.35rem; font-size: 0.8rem; }
}
@media (min-width: 22.5rem) and (max-width: 47.99rem) {
  /* side by side, the difference's −/+ are 36px wide (40px high) so its figure keeps its room; the sell price's label
     may wrap at its space rather than leave its card */
  .opboard-row.fits-two:not(.opboard-head) { grid-template-areas: "title title" "bid bid" "gap ask" "bar bar"; }
  .opboard-row.fits-two .gapline { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 0.2rem; }
  .opboard-row.fits-two .gapline .gapbtn { min-width: 36px; }
  .opboard-row.fits-two > .pricecell.buy { align-content: space-between; padding-inline: 0.3rem; }
  .opboard-row.fits-two > .pricecell.buy > .pricecell-side { white-space: normal; }
}
@media (min-width: 24rem) and (max-width: 47.99rem) { .pricecell .pricecell-side { white-space: nowrap; } }

/* --- settings: the tab row is one line that scrolls sideways on a phone (spec §2.4, DC-32) --- */
body[data-look="live"] .cfg-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body[data-look="live"] .cfg-tabs::-webkit-scrollbar { display: none; }
body[data-look="live"] .cfg-tabs > button { flex: 1 0 auto; white-space: nowrap; }
@media (min-width: 48rem) { body[data-look="live"] .cfg-tabs > button { flex: 1 1 auto; } }
.cfg-hint { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.cfg-tab-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
/* only this area's folds (review: an unscoped rule restyled the «درباره» version fold); :where keeps the weight of a
   plain .fold, so a fold's own rule below (a term's «ویرایش») still wins */
:where(#view-config, .cfg-asset-sheet, #cfg-calendar-panel) .fold {
  border-style: solid; border-color: var(--line); background: var(--surface);
}

/* «بازار و مهلت» (spec §5.D.10, DC-33) */
.cfg-timeout-grid { grid-template-columns: minmax(0, 16rem) auto; justify-content: start; align-items: center; }
.cfg-timeout-help { font-size: 0.86rem; color: var(--text-muted); min-height: 1.4em; }
.cfg-market-state {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line);
}
.cfg-market-word { font-weight: 600; }
button.cfg-link { padding-inline: 0.35rem; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 30rem) { .cfg-timeout-grid { grid-template-columns: minmax(0, 1fr); } }

/* «مبلغ و کارمزد» (spec §5.D.11, DC-34): two groups of three, one column on a phone; the note in view */
.cfg-money-note { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--text-muted); }
.cfg-money-sets { display: grid; gap: 0.9rem; }
.cfg-set { margin: 0; min-width: 0; padding: 0.5rem 0.9rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cfg-set > legend { padding: 0 0.35rem; font-size: 0.95rem; font-weight: 700; }
.cfg-grid.cfg-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-money-actions { margin-top: 0.9rem; }
@media (max-width: 47.99rem) { .cfg-grid.cfg-grid3 { grid-template-columns: minmax(0, 1fr); } }
.cfg-grid > .cfg-confirm { grid-column: 1 / -1; }

/* «کالاها» (spec §3.5 row 16, DC-35) and the product sheet (spec §5.D.12, DC-36 - DC-38) */
.data-table.cfg-asset-list td.col-primary { min-width: 12rem; }
body[data-look="live"] .cfg-version { display: none; }
@media (min-width: 48rem) {
  body[data-look="live"] .cfg-asset-sheet.overlay { width: min(62rem, calc(100vw - 1.5rem)); }
}
.cfg-sheet-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0; }
.cfg-sheet-title .idchip { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); background: none; border: 0; padding: 0; }
.cfg-sheet-block { display: grid; gap: 0.6rem; }
.cfg-sheet-block > .cfg-grid { margin-bottom: 0.2rem; }
.cfg-sheet-section { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 1rem; }
.cfg-sheet-block > .cfg-sheet-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cfg-switches { margin: 0; gap: 0.5rem; }
.cfg-missing { margin: 0; font-size: 0.88rem; color: var(--warn-ink); }
.cfg-sheet-block .cfg-term { margin-top: 0.2rem; padding-top: 0.6rem; }
.cfg-term-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: 0; font-size: 0.95rem; }
.cfg-term-name .idchip { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: none; border: 0; padding: 0; }
.cfg-term-rule { margin: 0.15rem 0 0.2rem; font-size: 0.86rem; color: var(--text-muted); }
.data-table.cfg-term-table td.col-primary { min-width: 0; }
.data-table.cfg-term-table td.cfg-limit input { width: 7.5rem; max-width: 100%; text-align: center; }
/* a delivery term's editor: room for a whole name in each field; its buttons on their own line (review) */
.cfg-grid.cfg-term-form { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cfg-grid.cfg-term-form > .cfg-term-acts { grid-column: 1 / -1; margin: 0; }
.data-table.cfg-term-table .row-actions { justify-content: center; }
.cfg-danger { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--danger-soft); border-radius: var(--radius-sm); display: grid; gap: 0.5rem; justify-items: start; }
.cfg-danger .inline-confirm { justify-self: stretch; }
.cfg-new-asset { display: grid; gap: 0.6rem; }
.cfg-new-asset .create-actions { margin-top: 0.2rem; }
.cfg-new-asset .block-head { margin: 0; }
/* inside an overlay the sections sit on the overlay itself -- no card inside the card (spec §1.7) */
.cfg-asset-sheet .cfg-sheet-block,
#cfg-calendar-panel .cfg-calendar-editor { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }
.data-table tr.cfg-scope { background: none; border: 0; }
.cfg-term > .fold { border: 0; background: none; padding: 0; margin-top: 0.3rem; }
.cfg-term > .fold > summary {
  display: inline-flex; width: fit-content; min-height: 40px; padding: 0.2rem 0.85rem; list-style: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.86rem;
}
.cfg-term > .fold > summary::-webkit-details-marker { display: none; }
.cfg-term > .fold[open] > summary { margin-bottom: 0.5rem; }
@media (max-width: 47.99rem) {
  .data-table.cfg-term-table td.cfg-limit input { width: 100%; }
  /* a dense table's 40px row height is for the desk table; a phone card grows with its content */
  .data-table.cfg-term-table tbody td, .data-table.cfg-asset-list tbody td,
  .data-table.cfg-calendar-list tbody td { height: auto; padding: 0.1rem 0; }
  /* a product's card starts its name and code at the line's start (spec §3.1.10) */
  .data-table.cfg-asset-list .row-open.has-sub { align-items: flex-start; text-align: start; }
  /* the shared ".data-table td.col-actions:has(> .row-actions) { width: 1% }" (a desk rule) outranks the card's width:auto */
  .data-table.cfg-term-table td.col-actions:has(> .row-actions) { width: auto; }
  .data-table.cfg-term-table td.col-actions .row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .data-table.cfg-term-table td.col-actions button { width: 100%; min-height: 44px; }
  .cfg-sheet-block > .cfg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cfg-sheet-block > .cfg-grid > .cfg-field:first-child,
  .cfg-sheet-block > .cfg-grid > button { grid-column: 1 / -1; }
}

/* «تقویم» (spec §3.5 row 17, §5.D.13, DC-39, DC-40) */
.cfg-calendar-card { display: grid; gap: 0.5rem; justify-items: start; max-width: 32rem; }
.cfg-calendar-card h3 { margin: 0; }
.cfg-calendar-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0; }
.cfg-calendar-facts dt { color: var(--text-muted); }
.cfg-calendar-facts dd { margin: 0; font-weight: 600; }
.cfg-calendar-editor { display: grid; gap: 0.5rem; }
.cfg-calendar-editor h4 { margin: 0.4rem 0 0; }
.cfg-weekdays { margin: 0; }
.cfg-weekdays button.flag[aria-pressed="true"] { background: var(--danger-soft); border-color: var(--sell-deep); color: var(--bad-ink); }
.cfg-weekdays button.flag[aria-pressed="false"] { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.cfg-legend { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.cfg-holidays { margin: 0; }
button.cfg-holiday { gap: 0.4rem; }
.cfg-holiday-x { font-size: 0.8rem; color: var(--text-muted); }
.cfg-holiday-add { grid-template-columns: minmax(0, 16rem) auto; justify-content: start; }
@media (max-width: 30rem) { .cfg-holiday-add { grid-template-columns: minmax(0, 1fr); } }
/* ===== UR-20261106 slot WP-3 pricing and settings: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261106 slot WP-4 customers: begin ===== */
/* --- the page head: its actions follow the tab -- «افزودن مشتری» on the list, «دعوت مشتری» on «ثبت‌نام‌ها», neither on the
   comparison (spec §5.E.4); the count of registrations waiting sits on their tab (spec §2.4) --- */
#view-customers[data-sub] #customers-add { display: none; }
#view-customers:not([data-sub="registrations"]) #btn-ob-regs-invite { display: none; }
#view-customers > .page-head .page-actions { position: relative; }
.customers-tabs .tab-count {
  display: inline-block; min-width: 1.35rem; margin-inline-start: 0.4rem; padding: 0 0.35rem;
  border-radius: var(--radius-pill); background: var(--sell-deep); color: #fff;
  font-size: 0.78rem; font-weight: 700; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums;
}
.customers-tabs button[aria-pressed="true"] .tab-count { background: var(--green-950); color: var(--gold); }
.customers-tabs .tab-count[hidden] { display: none; }
.customers-tabs button { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .customers-tabs, .ob-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .customers-tabs::-webkit-scrollbar, .ob-chips::-webkit-scrollbar { display: none; }
  .customers-tabs button { flex: 1 0 auto; }
  .ob-chips { width: auto; }
  .ob-chips button { flex: 0 0 auto; }
}
/* a row of chips that scrolls on a phone never widens the page: the panels' grid items may shrink */
.registrations > *, #customers-directory > * { min-width: 0; }

/* --- «افزودن مشتری»: each way with the line that says what it does (spec §5.E.3) --- */
button.add-menu-item {
  display: grid; gap: 0.1rem; justify-items: start; justify-content: stretch; align-content: center; width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text);
  text-align: start; white-space: normal; font: inherit;
}
button.add-menu-item:hover, button.add-menu-item:focus-visible { background: var(--surface-2); }
button.add-menu-item[hidden] { display: none; }
.add-menu-title { font-weight: 700; }
.add-menu-note { font-size: 0.84rem; font-weight: 400; color: var(--text-muted); }

/* --- the customer list: the search and the Tahesab filter in one row; the pager row with «تعداد در صفحه»
   (spec §5.E.2) --- */
#customers-form.dir-controls { grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr); max-width: 48rem; }
.dir-counts { font-variant-numeric: tabular-nums; }
.dir-pager-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.7rem;
}
.dir-pager-row[hidden], .dir-pager[hidden], .dir-page-size[hidden] { display: none; }
.dir-pager-row .dir-pager { margin-top: 0; }
.dir-pager .dir-page { font-size: 0.84rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dir-page-size { display: inline-grid; grid-template-columns: auto minmax(5.5rem, auto); align-items: center; gap: 0.5rem; }
.dir-page-size label { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.dir-page-size select { min-height: 44px; }
.data-table.dir-table td.dir-requests { min-width: 0; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dir-table .muted-word { color: var(--text-muted); }
.dir-table .dir-chips { display: inline-flex; flex-wrap: nowrap; justify-content: center; }
@media (max-width: 47.99rem) {
  #customers-form.dir-controls { grid-template-columns: minmax(0, 1fr); }
  .data-table.dir-table td > .dir-chips { justify-content: flex-start; }
  /* a customer's card: the name with its company under it at the start, then three short lines (spec §3.4) */
  .data-table.dir-table:not(.keep-table) tr { gap: 0.2rem 0.75rem; padding: 0.5rem 0.85rem; }   /* final review: room per line */
  .data-table.dir-table .row-open.has-sub, .data-table.ob-table .row-open.has-sub { align-items: flex-start; }
  .data-table.dir-table:not(.keep-table) td { line-height: 1.35; }
  .data-table.dir-table:not(.keep-table) td .chip { line-height: 1.5; }                        /* final review 2026-11-07 */
  /* a chip in a card's value column keeps its own width */
  .data-table.dir-table:not(.keep-table) td > .chip, .data-table.ob-table:not(.keep-table) td > .chip {
    justify-self: start; width: fit-content;
  }
  /* the row's buttons fill the card (the desk's 1% actions column must not hold on a phone) */
  .data-table.ob-table:not(.keep-table) td.col-actions { width: auto; }
  /* a registration that waits for nobody: «جزئیات» sits beside its deadline, not on a line of its own */
  .data-table.ob-table:not(.keep-table) tr:not([data-state="submitted"]) td[data-label="مهلت"] {
    grid-column: 1; grid-row: 2; align-self: center;            /* final review 2026-11-07: level with «جزئیات» */
  }
  .data-table.ob-table:not(.keep-table) tr:not([data-state="submitted"]) td.col-actions {
    grid-column: 2; grid-row: 2; margin-top: 0; align-self: center;
  }
  .data-table.ob-table:not(.keep-table) tr:not([data-state="submitted"]) td.col-actions button { flex: 0 0 auto; }
}

/* --- the profile overlay: the name, its chips and at most two actions; one list of facts (spec §5.E.5) --- */
#customer-profile > .profile-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.75rem; margin: 0 0 0.4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 0.6rem;
}
#customer-profile .profile-titles { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.4rem; }
#customer-profile .profile-titles h3 { margin: 0; font-size: 1.15rem; }
.profile-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.profile-actions { flex-wrap: wrap; align-self: center; }
.profile-actions[hidden] { display: none; }
#customer-profile > .profile-head #btn-customers-back { margin-inline-start: auto; }
.profile-approval { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.profile-balance-link .notconfirmed { font-size: 0.84rem; color: var(--warn-ink); font-weight: 600; }
.profile-identity-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.profile-identity-head .list-section { margin: 0.6rem 0 0.3rem; }
.identity-edit-form[hidden] { display: none; }
#customer-profile .create-form { max-width: 40rem; border: 0; padding: 0; background: transparent; }
#customer-profile .cfg-clear { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-size: 0.85rem; }
/* the identity form: two fields a row on a desk, each with its «پاک شود» beside the box */
#customer-profile .identity-edit-form:not([hidden]) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.6rem 1.25rem; max-width: none;
}
#customer-profile .identity-edit-form > :not(.cfg-field) { grid-column: 1 / -1; }
#customer-profile .identity-edit-form .cfg-field:has(> .cfg-clear) {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem;
}
#customer-profile .identity-edit-form .cfg-field:has(> .cfg-clear) > label:first-child { grid-column: 1 / -1; }
#customer-profile .identity-edit-form .dir-edit-more .cfg-field { max-width: 24rem; }
.dir-edit-more > summary { font-size: 0.9rem; }

/* --- the add, invitation and result overlays: a form's width, no frame inside an overlay (spec §5.E.6, §5.E.7) --- */
body[data-look="live"] .overlay.dir-create-panel,
body[data-look="live"] .overlay.ob-invite { width: min(40rem, calc(100vw - 1.5rem)); }
body[data-look="live"] .overlay.ob-result { width: min(46rem, calc(100vw - 1.5rem)); }
body[data-look="live"] .overlay.ob-invite .create-form,
body[data-look="live"] .overlay.dir-create-panel .create-form { border: 0; padding: 0; background: transparent; max-width: none; }
#ob-invite-form .cfg-field input[type="text"], .dir-create-form .cfg-field input[type="text"] { max-width: 28rem; }
#create-national-id, #ob-invite-identifier, #ob-plan-code { max-width: 16rem; }
.ob-days-line input[type="text"] { width: 6rem; flex: 0 0 6rem; }
.ob-review textarea, .ob-message, #customer-profile textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 0.5rem 0.7rem; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
body[data-look="live"] .overlay .ob-confirm .create-actions { border-top: 0; padding-top: 0.2rem; }
.ob-decision-bar[hidden] { display: none; }
.ob-regs-checked { margin: 0; }
.ob-intro { margin: 0; }
label.is-required::after { content: " *"; color: var(--error-ink); font-weight: 700; }
.dir-create-group { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.dir-create-group[hidden] { display: none; }
.dir-contact { padding-block: 0.2rem 0.6rem; }
.dir-contact > .dir-create-group { margin-top: 0.4rem; }
.dir-match-result:empty { display: none; }
.dir-match-result { margin: 0.15rem 0 0; }
.ob-kind-field select, .dir-kind-field select { max-width: 14rem; }
.ob-days-line { display: inline-flex; align-items: center; gap: 0.5rem; }
.ob-days-line input { width: 6rem; text-align: center; }
.ob-days-unit { color: var(--text-muted); }
.ob-hint { margin: 0; }

/* --- the one-time result: the warning first, the password on its own line on a phone, the whole message shown --- */
.ob-result-warning { margin: 0; }
.ob-result-warning p { margin: 0; font-weight: 600; }
#ob-result-password { font-family: inherit; letter-spacing: 0.08em; }
.ob-message { resize: none; line-height: 1.7; field-sizing: content; }
.ob-result-tahesab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.ob-copy-status:empty { display: none; }
@media (max-width: 47.99rem) {
  .ob-secret-line { display: grid; gap: 0.4rem; width: 100%; }
  .ob-secret-line button { width: 100%; min-height: 48px; }
}

/* --- «ثبت‌نام‌ها»: count pills, the desk's turn in a strong pill and a tinted row (spec §5.E.9) --- */
.ob-chips .ob-chip-count {
  display: inline-block; min-width: 1.35rem; padding: 0 0.35rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 0.78rem; line-height: 1.25rem;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ob-chips #ob-chip-submitted .ob-chip-count { background: var(--sell-deep); color: #fff; }
.ob-chips button[aria-pressed="true"] .ob-chip-count { background: var(--green-950); color: var(--gold); }
.ob-status:empty { display: none; }
.ob-status { margin: 0; }
.ob-table tr[data-state="submitted"] td { background: var(--warn-bg); }
.ob-table .ob-who { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.ob-table .ob-tahesab-cell { display: grid; justify-items: center; gap: 0.1rem; }
.ob-table .ob-tahesab-cell .cell-sub { white-space: normal; max-width: 14rem; }
.ob-table .dir-company { color: var(--text-muted); font-size: 0.8rem; }
@media (max-width: 47.99rem) {
  .ob-table .ob-who { justify-content: flex-start; }
  .ob-table .ob-tahesab-cell { justify-items: start; }
}
.ob-card.ob-fields { display: grid; gap: 0.6rem; justify-items: start; padding: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); }
.ob-check-list { border: 0; margin: 0; padding: 0; display: grid; gap: 0.1rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); width: 100%; }
.ob-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.ob-check input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; flex: 0 0 auto; }
.ob-check label { cursor: pointer; }
button.ob-fields-save { width: auto; }

/* --- the review overlay: sections without frames, the state's chip beside the name, the choice as one column, and
   only the state's actions in the sticky bar (spec §1.7, §5.E.10) --- */
.ob-review-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 auto; }
.ob-section { display: grid; gap: 0.45rem; }
.ob-section h4 { margin: 0; font-size: 1rem; }
.ob-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ob-tahesab-line { margin: 0; }
.ob-tahesab-checked, .ob-tahesab-plan { margin: 0; }
.ob-registration-empty { margin: 0; }
.ob-plan { border: 0; margin: 0; padding: 0; display: grid; gap: 0.1rem; width: 100%; }
.ob-plan legend { font-weight: 700; font-size: 0.95rem; padding: 0; margin-bottom: 0.25rem; }
.ob-plan-choice { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.ob-plan-choice input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; }
.ob-plan-choice label { cursor: pointer; }
.ob-plan-code { max-width: 16rem; }
.ob-plan-code[hidden] { display: none; }
.ob-days-lead { margin: 0; font-weight: 600; }
.ob-days-hints { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.15rem; font-size: 0.86rem; color: var(--text-muted); }
.ob-confirm { border-inline-start: 4px solid var(--gold); background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem; }
.ob-confirm-line { margin: 0; font-weight: 600; }
.ob-reject-box { border-inline-start-color: var(--sell-deep); }
.ob-decision-bar { margin-top: 0.2rem; }
@media (min-width: 48rem) {
  .ob-review .ob-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
}

/* --- the registration pop-up in the notification stack: its title and its ✕ (spec §1.10) --- */
.ob-popup .ob-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ob-popup .ob-popup-head h3 { margin: 0; }
/* --- WP-4 review: the review's approval note steps aside while the return note or the reject question is open; the
   refusal box can hold focus; the profile's way to a customer's row of the comparison highlights the row it found --- */
.ob-section[hidden] { display: none; }
#ob-review-outcome:focus { outline: none; }
#ob-review-outcome:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#customers-matching .data-table tr.dir-found td { background: var(--warn-bg); }
#customers-matching .data-table tr.dir-found:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 47.99rem) {
  #customers-matching .data-table:not(.keep-table) tr.dir-found { background: var(--warn-bg); }
  #customers-matching .data-table:not(.keep-table) tr.dir-found td { background: transparent; }
}
/* a registration's phone card: the state chip sits level with the name's 44px line beside it */
@media (max-width: 47.99rem) {
  .data-table.ob-table:not(.keep-table) td.col-badge { align-self: center; }
}
/* the review's sticky bar sits on the overlay's own bottom edge (its padding is under the bar, not the form showing
   through below it) */
body[data-look="live"] .overlay.ob-review .ob-decision-bar { bottom: -1.2rem; margin-bottom: -1.2rem; padding-bottom: 1.8rem; }
@media (max-width: 47.99rem) {
  body[data-look="live"] .overlay.ob-review .ob-decision-bar { bottom: -1rem; margin-bottom: -1rem; padding-bottom: 1.6rem; }
}
/* ===== UR-20261106 slot WP-4 customers: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261106 slot WP-5 onboarding and users: begin ===== */
/* --- customer onboarding (spec §5.F): the three steps of the way, «۱ رمز عبور · ۲ فرم ثبت‌نام · ۳ بررسی» --- */
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem;
  font-size: 0.86rem; color: var(--text-muted); }
.ob-step { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; min-width: 0; }
.ob-step + .ob-step::before { content: ""; display: block; flex: 0 0 auto; width: clamp(0.75rem, 4vw, 2.5rem); height: 2px;
  border-radius: 1px; background: var(--line-strong); }
.ob-step-mark { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-pill); display: inline-grid;
  place-items: center; border: 1.5px solid var(--line-strong); font-size: 0.8rem; font-weight: 700; line-height: 1; }
.ob-step[data-step="current"] { color: var(--text); font-weight: 700; }
body[data-shell="customer"] .ob-step[data-step="current"] { color: var(--gold); }
.ob-step[data-step="current"] .ob-step-mark { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.ob-step[data-step="done"] { color: var(--text); }
.ob-step[data-step="done"] .ob-step-mark { border-color: var(--met-ink); color: var(--met-ink); }

/* --- the forms: one look for every field, errors in the error ink with a ✕, the read-only value plainly read-only --- */
.onboarding-body > .outcome { margin-top: 0; }
.ob-form input[type="tel"],
.ob-form textarea,
.ob-form .secret-wrap input,
.users-secret .secret-wrap input,
.users-tools input[type="search"] {
  font: inherit; font-size: max(16px, 1rem); padding: 0.5rem 0.7rem; min-height: 44px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: inherit; min-width: 0; box-sizing: border-box;
}
.ob-form .secret-wrap input,
.users-secret .secret-wrap input { width: 100%; padding: 0.5rem 3rem 0.5rem 0.7rem; text-align: left; }
.ob-form textarea { resize: vertical; line-height: 1.6; }
.ob-form input[type="tel"]::placeholder { color: var(--text-muted); opacity: 0.55; }
.ob-form .secret-eye, .users-secret .secret-eye { color: var(--text-muted); }
.ob-form .secret-eye:hover, .users-secret .secret-eye:hover { color: var(--text); text-decoration: none; }
.ob-required { color: var(--gold); font-weight: 700; }
body[data-shell="staff"] .ob-required, body[data-shell="entry"] .ob-required { color: var(--gold-ink); }
.ob-optional { color: var(--text-muted); font-size: 0.8rem; }
.ob-pair { display: grid; gap: 0.6rem; }
@media (min-width: 48rem) { .ob-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ob-form .create-hint { margin: 0; }
.ob-form .create-actions { margin-top: 0.2rem; }
body[data-shell="customer"] .view-onboarding .outcome.bad p,
body[data-shell="customer"] .ob-outcome.bad p { color: var(--error-ink); }
.view-onboarding .outcome.bad p::before { content: "✕ "; font-weight: 700; }
.ob-form[data-tried="yes"] .ob-rule[data-met="no"],
.ob-form[data-tried="yes"] .ob-rule[data-met="no"] .ob-rule-mark { color: var(--error-ink); }
.ob-rules { gap: 0.15rem; }

/* --- the returned registration: the desk's note, then the deadline --- */
.ob-note h4 { margin: 0; }
.ob-note-label { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--text-muted); }
.ob-note .ob-note-text { margin: 0; }
.ob-note-until { margin: 0; font-size: 0.86rem; color: var(--text-muted); }

/* --- the waiting page: one card with the way so far and two separate buttons --- */
.view-onboarding .ob-card { display: grid; gap: 0.9rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.view-onboarding .ob-card .ob-lead { margin: 0; }
.ob-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ob-track-step { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.65rem;
  align-items: start; padding: 0.3rem 0 0.55rem; color: var(--text-muted); }
.ob-track-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(0.8rem - 1px);
  inset-block-start: 2.05rem; inset-block-end: 0; width: 2px; background: var(--line-strong); }
.ob-track-mark { width: 1.6rem; height: 1.6rem; border-radius: var(--radius-pill); display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); font-size: 0.8rem; font-weight: 700; line-height: 1; }
.ob-track-text { padding-top: 0.1rem; }
.ob-track-step[data-step="done"] { color: var(--text); }
.ob-track-step[data-step="done"] .ob-track-mark { color: var(--met-ink); border-color: var(--met-ink); }
.ob-track-step[data-step="current"] { color: var(--text); font-weight: 700; }
.ob-track-step[data-step="current"] .ob-track-mark { color: var(--gold); border-color: var(--gold); }
.ob-track-sub { display: block; margin-top: 0.1rem; font-size: 0.84rem; font-weight: 400; color: var(--text-muted); }
.ob-check-status { margin: 0; }
.ob-check-status:empty { display: none; }
.view-onboarding .ob-card .create-actions { padding-top: 0.75rem; border-top: 1px solid var(--line); }
@media (max-width: 30rem) {
  .view-onboarding .ob-card .create-actions button { flex: 1 1 auto; min-height: 48px; }
  .ob-steps { gap: 0.3rem; }
  .ob-step { gap: 0.3rem; }
}

/* --- «کاربران»: the toolbar, the filter and the search over the listing (spec §5.F.7) --- */
.users-room { font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; }
.users-room[hidden] { display: none; }
.users-room[data-none] { color: var(--warn-ink); }
.users-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.6rem; }
.users-tools .users-filter { flex: 0 0 auto; margin: 0; }
.users-tools .users-filter button { flex: 0 0 auto; min-height: 44px; padding-inline: 0.9rem; white-space: nowrap; }
.users-filter-count { font-size: 0.8rem; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
.users-tools input[type="search"] { flex: 1 1 14rem; max-width: 24rem; }
@media (max-width: 47.99rem) {
  .users-tools .users-filter { flex: 1 1 100%; }
  .users-tools .users-filter button { flex: 1 1 0; padding-inline: 0.4rem; }
  .users-tools input[type="search"] { flex-basis: 100%; max-width: none; }
}
.users-table .users-name { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 0.45rem; }
.users-table .users-you { font-weight: 600; }
.users-role-customer { color: var(--text-muted); }
@media (max-width: 47.99rem) { .users-table .users-name { justify-content: flex-start; } }

/* --- the editor: one form and one main button, the password apart; the permissions as a table --- */
body[data-look="live"] #users-panel.overlay { width: min(46rem, calc(100vw - 1.5rem)); }
@media (max-width: 47.99rem) { body[data-look="live"] #users-panel.overlay { width: calc(100vw - 1rem); } }
.users-kind { margin: 0; }
.users-form { width: 100%; box-sizing: border-box; }
.users-section-title { margin: 0; font-size: 1rem; }
.users-form .create-hint { margin: 0; }
.users-form .create-actions, .users-add .create-actions { width: 100%; }
.users-perm-title { display: flex; align-items: center; gap: 0.15rem; margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 600; }
.users-access .data-table-wrap { margin: 0.1rem 0 0.2rem; }
.users-perm-table th, .users-perm-table td { padding: 0.3rem 0.6rem; }
.users-perm-table th[data-col="دیدن"], .users-perm-table th[data-col="انجام کار"] { width: 6.5rem; }
.data-table.users-perm-table td.col-primary { min-width: 0; font-weight: 600; }
.data-table.users-perm-table tbody td { height: 44px; }
.users-perm-table label.cell-sub { cursor: pointer; }
.users-checks { display: inline-flex; }
.users-perm-hit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  cursor: pointer; }
.users-perm-hit input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; cursor: pointer; }
@media (max-width: 30rem) {
  .users-perm-table th, .users-perm-table td { padding: 0.25rem 0.35rem; }
  .users-perm-table th[data-col="دیدن"], .users-perm-table th[data-col="انجام کار"] { width: 4.5rem; }
}
/* final review 2026-11-07: the sign-in lead (the register variant's two-line hint) is as wide as the card under it */
body[data-look="live"] .entry-hero .lead { max-width: 24rem; margin-inline: auto; }
/* ===== UR-20261106 slot WP-5 onboarding and users: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261106 slot WP-6 accounting and matching: begin ===== */
/* --- matching «مشتریان › تطبیق با ته‌حساب» (spec §5.G): the comparison bar, the chips, the two tables, the dialogs --- */
.mt-snapshot-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.mt-snapshot-bar.mt-snapshot-old, .mt-snapshot-bar.mt-snapshot-partial { background: var(--warn-bg); border-color: var(--warn-line); }
.mt-snapshot-facts { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 16rem; }
.mt-snapshot-bar .mt-snapshot { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mt-snapshot-old-note { margin: 0; color: var(--warn-ink); font-weight: 600; font-size: 0.9rem; }
.mt-snapshot-hint { margin: 0; }
.mt-snapshot-bar #btn-mt-refresh { flex: 0 0 auto; white-space: nowrap; }
/* final review 2026-11-07: not set up -- the same card as «حسابداری» (a title, then the muted next step) */
.mt-off { display: grid; gap: 0.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow); }
.mt-off .mt-not-configured { font-weight: 700; font-size: 1.05rem; margin: 0; }
.mt-off .fact-note { margin: 0; }
.mt-chip-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.mt-chip-row .mt-chips { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; margin: 0; }
.mt-chip-divider { align-self: stretch; width: 1px; min-height: 1.75rem; background: var(--line-strong); margin-inline: 0.2rem; }
/* review 2026-11-06: tighter chips, and the divider with the settled classes as one group that wraps together */
.mt-chip-row .mt-chips > button, .mt-chips-done > button { padding-inline: 0.55rem; }
.mt-chips-done { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; min-width: 0; }
.mt-chips-done > button { flex: 1 1 auto; }
.mt-legend .help-tip { white-space: pre-line; }
.mt-name { display: grid; gap: 0.15rem; justify-items: center; }
.mt-name .cell-sub { font-weight: 400; }
.mt-table td.col-badge { white-space: normal; min-width: 8rem; }
.mt-linked { display: grid; gap: 0.2rem; justify-items: center; }
.mt-table .mt-status { justify-items: center; }
.mt-table .mt-reason { max-width: 13rem; margin: 0; font-size: 0.8rem; line-height: 1.5; white-space: normal; }
/* a narrower desk: the mobile is in the row's dialogs, so its column steps aside (spec §3.5 row 10, kind detail) */
@media (max-width: 90rem) { .mt-table th.col-detail, .mt-table td.col-detail { display: none; } }
.mt-id { display: inline-grid; gap: 0.2rem; justify-items: center; }
.mt-id-line { display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
.mt-id-none { color: var(--text-muted); }
.mt-fix-note { font-size: 0.84rem; color: var(--text-muted); white-space: nowrap; align-self: center; }
.mt-app-actions { display: grid; gap: 0.35rem; justify-items: center; }
.mt-row-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.mt-create-state { display: inline-grid; gap: 0.15rem; justify-items: center; }
.mt-app-head { display: flex; align-items: center; gap: 0.2rem; margin-top: 0.4rem; }
.mt-app-head .mt-app-title { margin: 0; }
.mt-app-hint, .mt-incomplete-note { margin: 0; }
.mt-outcome { position: relative; }
.mt-outcome:has(.mt-outcome-close) { padding-inline-end: 3.2rem; }
.mt-outcome-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.mt-outcome-actions:not(:has(button:not(.mt-outcome-close))) { margin: 0; }
.mt-outcome-close { position: absolute; inset-block-start: 0.3rem; inset-inline-end: 0.3rem; min-width: 44px; }
.mt-outcome-close::before { content: "✕"; font-weight: 700; }
.mt-question { display: grid; gap: 0.5rem; }
.mt-question-line { margin: 0; font-weight: 600; }
.mt-question-note { margin: 0; }
/* review 2026-11-06: each row as tall as its label (an auto row squeezed to the 44px minimum let a two-line label
   spill over its neighbours and above the list's top, out of reach of the scroll) */
.mt-picker-list {
  border: 0; padding: 0; margin: 0; display: grid; gap: 0.2rem; max-height: 18rem; overflow-y: auto;
  grid-auto-rows: max-content; align-content: start;
}
.mt-pick { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); }
.mt-pick:hover { background: var(--surface-2); }
.mt-pick input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; }
.mt-pick label { display: grid; gap: 0.05rem; flex: 1 1 auto; cursor: pointer; justify-items: start; }
.mt-pick-name { font-weight: 600; }
.mt-pick-sub { font-size: 0.82rem; color: var(--text-muted); }
.mt-pick-taken label { cursor: default; color: var(--text-muted); }
@media (max-width: 47.99rem) {
  .mt-chip-row { align-items: flex-start; }
  .mt-chip-row .mt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mt-chip-row .mt-chips > * { flex: 0 0 auto; }
  .mt-table.data-table:not(.keep-table) td.col-badge { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  .mt-table .mt-status, .mt-name, .mt-id, .mt-app-actions, .mt-create-state { justify-items: start; }
  .mt-table .mt-reason { max-width: none; }
  .mt-row-chips { justify-content: flex-start; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions.row-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%;
  }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions button { min-width: 0; white-space: normal; flex: none; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions > :only-child { grid-column: 1 / -1; }
  .mt-linked { justify-items: start; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions > button.primary:first-child { grid-column: 1 / -1; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions details.row-more,
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions details.row-more > summary { width: 100%; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions .mt-fix-note { grid-column: 1 / -1; }
}
/* --- «حسابداری» (spec §5.H): tabs, the strip, the connection card, balances, lookup, create history, cases --- */
.acct-strip { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.acct-strip .chip { font-size: 0.86rem; }
.acct-strip-check { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.acct-strip button { margin-inline-start: auto; }
.acct-tabs .acct-count {
  display: inline-block; min-width: 1.35rem; padding: 0 0.4rem; border: 0; border-radius: var(--radius-pill);
  background: var(--sell-deep); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}
.acct-tabs .acct-count[hidden] { display: none; }
.acct-tabs [aria-selected="true"] .acct-count { background: var(--green-950, #10261c); color: var(--gold); }
.acct-health-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.2rem 0 0.4rem; }
.acct-health-result:empty { display: none; }
.acct-health-result p { margin: 0; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-weight: 600; line-height: 1.7; }
.acct-health-result.acct-health-ok p { background: var(--ok-bg); color: var(--ok-ink); }
.acct-health-result.acct-health-ok p::before { content: "✓ "; font-weight: 700; }
.acct-health-result.acct-health-bad p {
  background: var(--warn-bg); color: var(--text); border: 1px solid var(--warn-line); border-inline-start-width: 5px;
}
.acct-conn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.acct-conn-line .acct-conn-chip { font-size: 1.05rem; padding: 0.15rem 0.7rem; }
.acct-conn-check { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.acct-capabilities { list-style: none; margin: 0.2rem 0; padding: 0; display: grid; gap: 0.2rem; }
.acct-capabilities li { display: flex; gap: 0.45rem; align-items: baseline; }
.acct-cap-mark { font-weight: 700; min-width: 1rem; text-align: center; }
.acct-cap-on .acct-cap-mark { color: var(--ok-ink); }
.acct-cap-off { color: var(--text-muted); }
.acct-cap-off .acct-cap-mark { color: var(--bad-ink); }
.acct-qualifier, .acct-durability-once { margin: 0.2rem 0 0; }
.acct-connection-tech .acct-pilot-block { margin-top: 0.6rem; box-shadow: none; }
.acct-banner {
  margin: 0 0 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--warn-line); border-inline-start-width: 5px;
  border-radius: var(--radius-sm); background: var(--warn-bg); font-weight: 600; line-height: 1.7;
}
.acct-create-line { margin: 0 0 0.4rem; font-weight: 600; }
.acct-create-line.acct-create-on::before { content: "✓ "; color: var(--ok-ink); }
.acct-create-line.acct-create-off { color: var(--text-muted); }
.acct-create-pointer { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.acct-lookup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
.acct-lookup-field input { max-width: 14rem; width: 100%; }
.acct-lookup-row > button { min-height: 44px; }
.acct-preview-card h4 { margin: 0 0 0.4rem; }
.acct-link-box { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.acct-link-head { display: flex; align-items: center; gap: 0.2rem; }
.acct-link-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.acct-link-row .cfg-field { flex: 1 1 16rem; min-width: 0; }
.acct-link-row select { width: 100%; }
.acct-picker input[type="search"] { margin-bottom: 0.3rem; }
.acct-link-confirm { display: grid; gap: 0.4rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.acct-link-confirm[hidden] { display: none; }
.acct-link-question { margin: 0; font-weight: 600; }
.acct-create-local { margin-top: 0.4rem; }
.acct-balance-figures { display: grid; gap: 0.15rem; justify-items: center; }
/* review 2026-11-06: the figure itself never breaks; its name may wrap at a space on a narrow card */
.acct-figure { white-space: normal; }
.acct-figure .num, .acct-figure .notconfirmed { white-space: nowrap; }
.acct-figure .acct-balance-field { font-size: 0.82rem; color: var(--text-muted); }
.acct-figure .notconfirmed, .acct-figure-value .notconfirmed { font-size: 0.78rem; font-weight: 600; color: var(--warn-ink); }
.data-table .acct-read-state { justify-items: center; }
.acct-read-state .acct-read-text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; max-width: 16rem; }
.data-table td.col-badge .acct-read-state { white-space: normal; }
.acct-read-text { margin: 0.2rem 0; }
.acct-shape-lead { margin: 0.3rem 0 0; }
.data-table .transfer-chip { white-space: nowrap; margin: 0; }
.acct-summary-line { display: flex; align-items: center; gap: 0.2rem; margin: 0; }
.acct-case-reason { margin: 0.2rem 0; }
.acct-case-go { justify-self: start; margin: 0.3rem 0; }
.acct-file-head { display: flex; align-items: center; gap: 0.2rem; }
.acct-detail-open { color: var(--text-muted); }
.acct-maintenance-fold { margin-top: 0.8rem; }
@media (max-width: 47.99rem) {
  .acct-tabs { display: grid; grid-template-columns: repeat(var(--acct-tab-count, 4), minmax(0, 1fr)); overflow: visible; }
  .acct-tabs button { white-space: normal; line-height: 1.3; min-height: 48px; padding-inline: 0.25rem; }
  .acct-strip button { margin-inline-start: 0; }
  .acct-balance-figures, .data-table .acct-read-state { justify-items: start; }
  .acct-read-state .acct-read-text { max-width: none; }
  .acct-lookup-row > button { flex: 1 1 auto; }
}
.acct-digest-fold > summary { cursor: pointer; font-size: 0.86rem; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.acct-section .outcome:empty, .acct-section .ob-outcome:empty { display: none; }
#acct-item-panel .cfg-scope { border: 0; background: none; padding: 0; box-shadow: none; }
.data-table td.col-badge .acct-read-state { min-width: 9rem; }
.acct-section .block-head h3 .help, .matching .block-head h3 .help { vertical-align: middle; }
@media (max-width: 47.99rem) {
  .acct-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; }
  .acct-balance-table.data-table:not(.keep-table) td.col-badge { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  .acct-table.data-table:not(.keep-table) td.col-actions,
  .mt-table.data-table:not(.keep-table) td.col-actions { display: block; }
  .acct-table.data-table:not(.keep-table) td.col-actions .acct-row-actions.row-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%;
  }
  .acct-table.data-table:not(.keep-table) td.col-actions .acct-row-actions > button {
    min-width: 0; width: 100%; white-space: normal; flex: none;
  }
  .acct-table.data-table:not(.keep-table) td.col-actions .acct-row-actions > :only-child { grid-column: 1 / -1; }
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions button,
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions details.row-more { width: 100%; }
}
@media (max-width: 47.99rem) {
  /* the desk's «width: 1%» of an actions cell (WP-0, `td.col-actions:has(> .row-actions)`) must not narrow a phone card */
  .acct-table.data-table:not(.keep-table) td.col-actions:has(> .row-actions),
  .mt-table.data-table:not(.keep-table) td.col-actions:has(> .row-actions) { width: auto; }
}
.mt-create-off { margin: 0; color: var(--warn-ink); }
/* review 2026-11-06: an accounting fold says it opens -- a chevron that turns, as WP-0's technical folds do; «بستن این
   مورد» (the only way to close a case) looks like a secondary button */
.acct-tech > summary::-webkit-details-marker, .acct-resolve > summary::-webkit-details-marker { display: none; }
.acct-tech > summary::after, .acct-resolve > summary::after {
  content: "‹"; display: inline-block; margin-inline-start: 0.5rem; transition: transform 0.15s; color: var(--text-muted);
}
.acct-tech[open] > summary::after, .acct-resolve[open] > summary::after { transform: rotate(-90deg); }
.acct-tech > summary { width: fit-content; }
.acct-resolve > summary {
  width: fit-content; min-height: 44px; padding: 0.4rem 0.9rem; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-weight: 600; list-style: none;
}
.acct-resolve > summary:hover { background: var(--surface-2); }
.acct-resolve[open] > summary { margin-bottom: 0.5rem; }
.acct-queue-head { display: flex; align-items: center; gap: 0.2rem; }
.acct-queue-head h4 { margin: 0; }
.acct-durability-raw { margin: 0.4rem 0 0; }
.acct-durability-raw[hidden] { display: none; }
/* review 2026-11-06: a long matching dialog title wraps and its ✕ stays at the end of the first line */
.mt-dialog > .panel-head { flex-wrap: nowrap; align-items: flex-start; }
.mt-dialog > .panel-head .panel-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.mt-dialog > .panel-head > button { flex: 0 0 auto; }
@media (max-width: 47.99rem) {
  /* review 2026-11-06: a registration chip on a phone card is a pill at the start of its value, never a bar */
  .mt-app-table.data-table:not(.keep-table) td.col-status > .chip,
  .mt-app-table.data-table:not(.keep-table) td.col-status > .mt-login { justify-self: start; width: auto; }
  /* a full-width primary and one more control: that one is full width too, not half a line beside an empty cell */
  .mt-table.data-table:not(.keep-table) td.col-actions .mt-actions > button.primary:first-child + :last-child { grid-column: 1 / -1; }
}
/* integration 2026-11-07: in the live look the matching panel's heading is for a screen reader only (the tab names the
   panel), so its otherwise empty head row is taken out of the grid as well -- no blank gap under the tab row */
body[data-look="live"] .matching > .block-head:has(> h3.sr-only):has(> #mt-status:empty) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* --- final review 2026-11-07 --- */
/* a notice that takes the keyboard after an action shows its ring only for a keyboard user (spec §1.7) */
.mt-outcome:focus:not(:focus-visible) { outline: none; }
.mt-outcome:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the comparison's status cell has room for its reason line, so it does not wrap to four lines beside a roomy action cell */
@media (min-width: 48rem) {
  .mt-table.data-table td[data-label="وضعیت"] { width: 12rem; min-width: 12rem; }   /* a cell's width is its floor here */
}
/* the case card's ONE action row: the moved «دیدم», its «؟», the one way there */
.acct-case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.acct-case-actions > .acct-panel-actions { display: contents; }
.acct-case-actions .acct-case-go { margin: 0; }
/* one tab alone is a quiet label, not a full-width bar that looks like a button */
.acct-tabs[data-single="yes"] { display: inline-flex; width: fit-content; border: 0; background: transparent; overflow: visible; }
.acct-tabs[data-single="yes"] button[role="tab"] {
  flex: 0 0 auto; background: transparent; color: var(--text); font-weight: 700; border-radius: 0;
  border-bottom: 2px solid var(--gold); padding-inline: 0.2rem;
}
@media (max-width: 47.99rem) {
  .acct-tabs[data-single="yes"] { display: inline-flex; grid-template-columns: none; }
  .acct-tabs[data-single="yes"] button[role="tab"] { flex-direction: row; gap: 0.35rem; padding-inline: 0.2rem; }
}
/* «پیوند حساب»: no blank band between the create line and its fold; the way to matching reads as a link */
#accounting-intents-body > .acct-create-line { margin: 0; }
#accounting-intents-body > .acct-create-line + .acct-tech { margin-top: -0.6rem; }
.acct-create-pointer #btn-acct-to-matching {
  color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding-inline: 0.3rem;
}
/* ===== UR-20261106 slot WP-6 accounting and matching: end ===== */
/* ---- separator ---- */
/* ---- separator ---- */
/* ===== UR-20261107 slot U0 foundation: begin ===== */
/* Owner items 1, 2 and 4 (2026-11-07): a row's details stand in ONE overlay above the page (rowDetails / detailsOpen,
   app.js "UR-20261107 (U0 ..."), a retrieval is one compact button, an acknowledgement is a quiet check, and a page's
   «؟» sits right after its heading. Presentation only. */

/* the details overlay: the shared overlay (ADR-0022) at a reading width, wider when it holds a table */
body[data-look="live"] .overlay.row-details { width: min(44rem, calc(100vw - 1.5rem)); }
body[data-look="live"] .overlay.row-details:has(.data-table-wrap) { width: min(72rem, calc(100vw - 1.5rem)); }
.row-details > .panel-head { flex-wrap: nowrap; align-items: flex-start; }
.row-details > .panel-head .panel-title { flex: 1 1 auto; min-width: 0; }
.row-details > .panel-head > button { flex: 0 0 auto; }
/* a row without a .row-open of its own takes the keyboard itself */
.data-table tr.row-opens[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* the retrieve-then-view action: four compact states (data-state). Review 2026-11-07: its four words share ONE grid
   cell and only the current one is visible, so the button is as wide as the widest word in every state */
button.row-fetch {
  display: inline-grid; grid-template-areas: "word"; align-items: center; justify-items: center; white-space: nowrap;
}
button.row-fetch > .row-fetch-word {
  grid-area: word; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; visibility: hidden;
}
button.row-fetch > .row-fetch-word.current { visibility: visible; }
button.row-fetch[data-state="busy"] { cursor: progress; color: var(--text-muted); }
button.row-fetch > .row-fetch-word[data-word="busy"]::before {
  content: ""; width: 0.9em; height: 0.9em; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: row-fetch-turn 0.8s linear infinite;
}
button.row-fetch[data-state="failed"] { color: var(--bad-ink); border-color: var(--bad-ink); }
@keyframes row-fetch-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.row-fetch > .row-fetch-word[data-word="busy"]::before { animation: none; }
}
/* a failed retrieval's overlay: the reason in words, then «تلاش دوباره» */
.row-details .row-fetch-reason { margin: 0 0 0.8rem; color: var(--text); }
.row-details .row-fetch-wait { margin: 0; color: var(--text-muted); }

/* the acknowledgement («ثبت مشاهده»): a quiet button, a check in the ok ink, two words; once recorded a neutral chip */
button.ack-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; color: var(--text); justify-self: start;
}
button.ack-btn svg { width: 1.1rem; height: 1.1rem; stroke: var(--ok-ink); stroke-width: 2.2; }
.chip.ack-chip { white-space: nowrap; justify-self: start; }

/* the page's one «؟», on the heading's line */
body[data-look="live"] .page-head h2:has(~ .page-help) { display: inline-block; vertical-align: middle; }
body[data-look="live"] .page-head .page-help { vertical-align: middle; margin-inline-start: 0.1rem; }

/* the bell's list: each item is ONE button -- its summary and a quiet «‹» (no «بررسی» repeated on every item) */
body[data-look="live"] .pending-item { grid-template-columns: minmax(0, 1fr); padding-block: 0.1rem; }
body[data-look="live"] .pending-item > .pending-open {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; width: 100%;
  min-height: 44px; padding: 0.5rem 0.45rem; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
body[data-look="live"] .pending-item > .pending-open:hover,
body[data-look="live"] .pending-item > .pending-open:focus-visible { background: var(--surface-2); }
body[data-look="live"] .pending-open-go { color: var(--text-muted); font-size: 1.2rem; line-height: 1; }
/* ===== UR-20261107 slot U0 foundation: end ===== */

/* ===== UR-20261107 slot UC customers, requests and users: begin ===== */
/* owner item 7 (posting design §8.3, §8.4): a trade's accounting document is a quiet chip in its «حسابداری» column (the
 * accounting package's chip; the posting-chip-line / posting-number pair only where that package is absent), with the
 * document's number once posted; in the request overlay the chip comes first, then the reason in muted words and the
 * way to its fix */
.chip.posting-chip { white-space: nowrap; justify-self: start; }
.posting-chip-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.posting-number { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 47.99rem) {
  /* on a phone card the chip is a pill at the start of its value, never a bar */
  .data-table:not(.keep-table) td.col-status > .chip.posting-chip,
  .data-table:not(.keep-table) td.col-status > .posting-chip-line,
  .req-table.data-table:not(.keep-table) td.col-status > .pst-chip-line { justify-self: start; width: auto; }
}
body[data-look="live"] #view-detail .posting-line { align-items: baseline; }
body[data-look="live"] #view-detail .posting-line .posting-said { color: var(--text-muted); font-size: 0.9rem; }
body[data-look="live"] #view-detail .posting-line .posting-next { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
/* ===== UR-20261107 slot UC customers, requests and users: end ===== */

/* ===== UR-20261107 slot UB settings and pricing: begin ===== */
/* Owner items 5 and 6 (2026-11-07), app.js "UR-20261107 (UB ...": a product's controls show the server's effective
   state as a standing state (a switch that cannot take effect is disabled with its reason and ONE resolving action; one
   that is on without effect is "held"), and Settings › «اتصال‌ها» lists the outside connections as cards. Presentation
   only: nothing here hides an authorized control, a refusal or a qualifier. */

/* --- a control on without effect: an amber switch; one an inactive product cannot take: plainly unavailable --- */
button.switch.held[aria-checked="true"] .switch-track { background: var(--warn-line); }
button.switch.held { border-color: var(--warn-line); }
button.switch.locked { border-style: dashed; }
.chip.held { white-space: nowrap; }

/* --- the standing line: why the customer does not see a product, or why an open side does not take effect --- */
.eff-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.45rem 0.7rem;
  border-inline-start: 4px solid var(--warn-line); background: var(--warn-bg); color: var(--text);
}
.eff-line .eff-text { flex: 1 1 18rem; margin: 0; font-size: 0.88rem; line-height: 1.6; }
.eff-line .eff-text strong { color: var(--warn-ink); font-weight: 700; }
.eff-line button.eff-resolve { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.eff-line.ok { border-inline-start-color: var(--ok); background: var(--ok-bg); }
.eff-line.ok .eff-text { color: var(--ok-ink); font-weight: 600; }
.opboard-held { border-bottom: 1px solid var(--line); }
.cfg-effect { border-radius: var(--radius-sm); }
.cfg-scope-state { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.data-table .cfg-scope-state .cell-sub { white-space: normal; text-align: center; }
.cfg-visible-cell { display: inline-flex; flex-direction: column; gap: 0.05rem; }
.cfg-state-cell { align-items: center; }
#board-deadline-state { white-space: nowrap; }
@media (max-width: 47.99rem) {
  /* UR-20261107 (UB review): on a phone the side switches stay on the term's line on every row -- a long term name
     wraps inside its own space before a switch («باز · بی‌اثر») is pushed to a line of its own */
  .opboard-row > .board-title > .board-titletext { flex: 1 1 0; min-width: 4.5rem; }
  .opboard-row > .board-title > .board-titletext .board-termname { white-space: normal; }
  .opboard-row > .board-title > .sidegate, .opboard-row > .board-title > .side-held { flex: 0 0 auto; }
  /* both sides held: the term takes the first line and the two switches the next, on every such row alike */
  .opboard-row > .board-title:has(> .held + .held) > .board-titletext { flex-basis: 100%; }
  .eff-line { padding: 0.4rem 0.55rem; }
  .eff-line button.eff-resolve { flex: 1 1 100%; min-height: 44px; }
  .cfg-scope-state { align-items: flex-start; }
  .data-table .cfg-scope-state .cell-sub { text-align: start; }
}

/* --- Settings › «اتصال‌ها»: the set-up cards, then the ones awaiting set-up --- */
.integ-list { display: grid; gap: 1.1rem; }
.integ-group { display: grid; gap: 0.6rem; }
.integ-group-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); }
.integ-card {
  display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); min-width: 0;
}
.integ-card.integ-pending { border-style: dashed; box-shadow: none; background: transparent; }
.integ-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; }
.integ-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; min-width: 0; }
.integ-name h4 { margin: 0; font-size: 1.05rem; }
.integ-purpose { font-size: 0.86rem; color: var(--text-muted); }
.chip.integ-status { white-space: nowrap; }
.integ-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; font-size: 0.86rem; color: var(--text-muted); }
.integ-line, .integ-note { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.integ-outcome:empty { display: none; }
.integ-caps { list-style: none; margin: 0; padding: 0; display: grid; }
.integ-cap {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.15rem 0.6rem;
  padding: 0.45rem 0; border-top: 1px solid var(--line); min-height: 44px;
}
.integ-cap:first-child { border-top: 0; }
.integ-cap-mark { grid-column: 1; font-weight: 700; text-align: center; }
.integ-cap-ready .integ-cap-mark { color: var(--ok-ink); }
.integ-cap-held .integ-cap-mark { color: var(--warn-ink); }
.integ-cap-pending .integ-cap-mark, .integ-cap-pending .integ-cap-name, .integ-cap-pending .integ-cap-state { color: var(--text-muted); }
.integ-cap-name { grid-column: 2; display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 600; min-width: 0; }
.integ-cap-name .help { margin-block: -0.5rem; }
.integ-cap-state { grid-column: 3; font-size: 0.86rem; white-space: nowrap; }
.integ-cap-ready .integ-cap-state { color: var(--ok-ink); }
.integ-cap-held .integ-cap-state { color: var(--warn-ink); }
.integ-control { grid-column: 4; display: inline-flex; align-items: center; gap: 0.4rem; }
.integ-select { min-height: 40px; max-width: 12rem; }
.integ-cap-sub { grid-column: 2 / -1; font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.integ-cap-sub.integ-interim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; color: var(--warn-ink); }
/* UR-20261107 (UB review): a reason several capabilities share, said once under the card's head; the way to «سندها» */
.integ-shared { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--warn-ink); }
.integ-cap-sub.integ-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.integ-confirm p.integ-ask-text { font-weight: 400; }
.integ-confirm p.integ-ask-text strong { font-weight: 700; }
.integ-cap > .integ-confirm { grid-column: 1 / -1; }
.integ-summary .integ-interim-head {
  margin: 0 0 0.8rem; padding: 0.4rem 0.6rem; border-inline-start: 4px solid var(--warn-line); background: var(--warn-bg);
  font-size: 0.88rem; color: var(--warn-ink);
}
.integ-summary .integ-summary-facts { margin-bottom: 0.9rem; }
@media (max-width: 47.99rem) {
  .integ-card { padding: 0.75rem 0.8rem; }
  .integ-cap { grid-template-columns: 1.4rem minmax(0, 1fr) auto; }
  .integ-cap-state { white-space: normal; text-align: end; }
  .integ-control { grid-column: 2 / -1; }
  .integ-select { max-width: none; flex: 1 1 auto; }
}
/* ===== UR-20261107 slot UB settings and pricing: end ===== */

/* ===== UR-20261107 slot UA accounting and matching: begin ===== */
/* Owner items 1, 3, 4 and 7 (2026-11-07), package UA: the accounting rows open their card in U0's overlay (no «جزئیات»
   button), a balance is one compact retrieve-then-view action, the matching rows open their details, the periodic
   comparison's quiet line and «جدید», and «سندها» -- the accounting documents of trades. Presentation only. */

/* an accounting row's first cell is its open button: the row's own words, not a muted link */
.data-table .row-open.acct-detail-open { color: var(--text); }
#acct-item-panel .acct-panel-actions { margin: 0.4rem 0; }

/* balances: one compact action per row; the card's figures under one heading with its «؟», then «دریافت دوباره» */
.data-table .acct-balance-actions { display: inline-flex; justify-content: center; }
.acct-figures-head { display: flex; align-items: center; gap: 0.2rem; margin-top: 0.6rem; }
.acct-figures-head h4 { margin: 0; }
.acct-balance-detail > .cfg-scope-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.acct-balance-detail .acct-balance-again { margin: 0.6rem 0 0.4rem; }
.acct-balance-detail .acct-balance-again[aria-busy="true"] { cursor: progress; color: var(--text-muted); }
.acct-balance-detail .row-fetch-wait { margin: 0.5rem 0; color: var(--text-muted); }

/* matching: the periodic comparison's line, the quiet «جدید», «ثبت مشاهدهٔ همه» beside the chips, a row's details */
.mt-snapshot-bar .mt-auto {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.3rem; font-variant-numeric: tabular-nums;
}
.mt-snapshot-bar .mt-auto-fail { color: var(--warn-ink); font-weight: 600; }
.chip.mt-new-chip {
  background: transparent; border-color: var(--gold); color: var(--text); font-size: 0.74rem; padding-block: 0;
  white-space: nowrap;
}
.mt-chip-row #btn-mt-reviewed { flex: 0 0 auto; }
.mt-chips .mt-chip-new { border-color: var(--gold); }
.mt-name .row-open { max-width: 100%; }
.mt-name .row-open .row-open-text, .mt-name .row-open .mt-text { white-space: normal; overflow-wrap: anywhere; }
.mt-details-head .mt-status { display: grid; gap: 0.25rem; justify-items: start; }
.mt-details-head .mt-reason { margin: 0; }
.mt-details .mt-facts { margin-top: 0.6rem; }
@media (max-width: 47.99rem) {
  .mt-chip-row { flex-wrap: wrap; }
  .mt-chip-row .mt-chips { flex: 1 1 100%; }
}

/* «سندها»: the status card, the sample's guided card, the overdue documents, the filters and the table */
.pst-status {
  display: grid; gap: 0.4rem; margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.pst-status.pst-off { background: var(--surface); }
.pst-status p { margin: 0; }
.pst-off-title { font-weight: 700; }
.pst-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.pst-auto { color: var(--text-muted); }
.pst-status-line .pst-config-open { margin-inline-start: auto; }
.pst-halted, .pst-run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.pst-halted p, .pst-run p { font-weight: 600; }
.pst-halted p { color: var(--bad-ink); }
.pst-status .acct-banner { margin: 0; }
.pst-canary {
  display: grid; gap: 0.5rem; margin-bottom: 0.6rem; padding: 0.75rem 0.9rem; border: 1px solid var(--warn-line);
  border-inline-start-width: 5px; border-radius: var(--radius-sm); background: var(--warn-bg);
}
.pst-canary-head { display: flex; align-items: center; gap: 0.2rem; }
.pst-canary-head h4 { margin: 0; }
.pst-canary p { margin: 0; }
.pst-steps { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: 0.2rem; line-height: 1.7; }
.pst-step[data-done="yes"] { color: var(--text-muted); }
.pst-step[data-done="yes"]::after { content: " ✓"; color: var(--ok-ink); font-weight: 700; }
.pst-step[aria-current="step"] { font-weight: 700; }
.pst-canary-trade { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.pst-canary-trade .row-open {
  display: inline-flex; flex-direction: column; align-items: flex-start; min-height: 44px; padding: 0.2rem 0;
  border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--text); cursor: pointer;
}
.pst-canary-trade .row-open:hover { text-decoration: underline; }
.pst-canary-trade .row-open .cell-sub { font-weight: 400; font-size: 0.82rem; color: var(--text-muted); }
.pst-checks {
  border: 0; padding: 0; margin: 0; display: grid; gap: 0 0.8rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.pst-checks legend, .pst-exclude-reasons legend { padding: 0; margin-bottom: 0.2rem; font-weight: 600; }
.pst-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.pst-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; }
.pst-canary-actions, .pst-trade-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pst-confirm {
  display: grid; gap: 0.45rem; margin-top: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.pst-confirm p { margin: 0; }
.pst-confirm-line { font-weight: 600; }
.pst-exclude-reasons { border: 0; padding: 0; margin: 0; display: grid; }
.pst-exclude .cfg-field input { max-width: 12rem; }
.pst-exclude .pst-exclude-field[hidden] { display: none; }
.pst-next .pst-to-matching { text-decoration: underline; text-underline-offset: 3px; padding-inline: 0.3rem; }
.pst-backlog { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-bottom: 0.6rem; }
.pst-backlog-line { margin: 0; font-weight: 600; }
.pst-filters { margin: 0.2rem 0 0.5rem; }
.data-table .pst-asset { display: inline-grid; justify-items: center; }
.data-table .pst-reason { display: inline-block; max-width: 16rem; font-size: 0.85rem; color: var(--text-muted); white-space: normal; }
.pst-chip-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.pst-number { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pst-more { margin: 0.4rem 0 0; }
.pst-trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.pst-trade-reason { font-weight: 600; }
.pst-next { margin: 0.3rem 0 0; }
.pst-trade-outcome { margin: 0.5rem 0; }
.pst-trade-actions { margin: 0.6rem 0; }
.pst-facts { margin-top: 0.4rem; }
.pst-preview { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.pst-preview h4 { display: inline-block; margin: 0 0 0.3rem; }
.pst-interim {
  margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  background: var(--warn-bg); font-weight: 600;
}
.pst-history { margin: 0.5rem 0 0; padding-inline-start: 1.3rem; display: grid; gap: 0.2rem; font-size: 0.88rem; }
.pst-history .cell-sub { color: var(--text-muted); font-size: 0.8rem; }
.pst-preview-lead { margin: 0 0 0.5rem; }
.pst-preview-blocked { margin: 0.3rem 0; padding-inline-start: 1.2rem; color: var(--text-muted); }
.pst-config .kvlist { margin-bottom: 0.6rem; }
body[data-look="live"] .overlay.row-details.pst-trade-overlay { width: min(44rem, calc(100vw - 1.5rem)); }
.data-table .pst-quantity, .data-table .pst-money { white-space: nowrap; }
.pst-preview-head { display: flex; align-items: center; gap: 0.2rem; }
.pst-preview-head h4 { margin: 0; }
.pst-outcome { position: relative; }
.pst-outcome:has(.pst-outcome-close) { padding-inline-end: 3.2rem; }
.pst-outcome .pst-outcome-close { position: absolute; inset-block-start: 0.2rem; inset-inline-end: 0.2rem; min-width: 44px; min-height: 44px; }
@media (max-width: 47.99rem) {
  .pst-status-line .pst-config-open { margin-inline-start: 0; }
  /* review 2026-11-07: the six filters wrap on a phone (as the matching chips do) -- none is cut or off screen */
  .ob-chips.pst-filters { flex-wrap: wrap; overflow-x: visible; width: fit-content; }
  .ob-chips.pst-filters button { flex: 1 1 auto; }
  .data-table .pst-asset { justify-items: start; }
  .data-table .pst-reason { max-width: none; }
  /* five accounting tabs on a phone: the words wrap inside each cell, a little smaller */
  .acct-tabs button { font-size: 0.86rem; }
}
/* ===== UR-20261107 slot UA accounting and matching: end ===== */

/* ===== UR-20261107 slot F4 final fixes: begin ===== */
/* final review 2026-11-07 (owner item 7): the document preview's figure, the trade's own figure and the factor under it */
.pst-converted { display: inline-grid; justify-items: start; gap: 0.1rem; }
.pst-from { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
.pst-preview-basis { margin: 0 0 0.3rem; }
/* «تغییر در تنظیمات ›» beside «ثبت خودکار: …» */
.pst-status-line .pst-auto-settings { margin-inline-start: -0.4rem; }
/* owner item 4: a notice's X «بستن» (closeIconInto) beside its verb -- never stretched across a phone's row */
.queue-outcome-line .actions button.icon-close,
#decision-outcome .actions button.icon-close { flex: 0 0 auto; min-width: 44px; }
/* owner item 5: a not-set-up card's quiet way to «تنظیمات › اتصال‌ها» */
.integ-setup-way { justify-self: start; align-self: flex-start; margin-top: 0.2rem; }
/* owner item 4: «تطبیق با ته‌حساب» is the link inside its own sentence -- it sits between its «» with no gap */
.pst-next .pst-to-matching { padding-inline: 0.05rem; }
#accounting-not-configured .acct-not-configured { margin: 0; font-weight: 700; font-size: 1.05rem; }
/* Settings › «اتصال‌ها» on a phone: a capability's name keeps its line and its state reads under it -- a long state
 * («خاموش — …») no longer squeezes the name word by word or runs under its «؟» */
@media (max-width: 47.99rem) {
  .integ-cap { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .integ-cap-state { grid-column: 2; text-align: start; }
}
/* owner item 4: «درباره» on a desk -- the page heading already says it; the card's own title is not repeated */
@media (min-width: 48rem) {
  body[data-look="live"][data-shell="staff"] #view-tools section.block:has(> #about-facts) > .block-head { display: none; }
}
/* ===== UR-20261107 slot F4 final fixes: end ===== */

/* ===== 2026-11-09 R5 slot: the accounting connection in Settings: begin ===== */
/* Owner item 1 (2026-11-09): «حسابداری» shows the connection's state only -- the chip, when it was last checked and,
   while it is not connected, ONE sentence whose «تنظیمات › اتصال‌ها» is the link (a viewer who cannot check it there
   is asked to tell the manager or the accountant); the check, its answer and its technical details are in the Tahesab
   card of Settings › «اتصال‌ها». Presentation only. */
.acct-strip .acct-settings-way { flex: 1 1 100%; margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--text); }
.acct-settings-way .acct-settings-place { white-space: nowrap; }
/* the link keeps its 44px target without opening the sentence's lines */
.acct-settings-way button.acct-to-settings { margin-inline-start: 0; margin-block: -0.7rem; padding-inline: 0.05rem; vertical-align: baseline; }
.integ-tech .acct-durability-once { margin: 0.2rem 0 0.4rem; }
.integ-tech .acct-durability-once p { margin: 0 0 0.2rem; }
/* a server's long word (e.g. the store's evidence) wraps inside the card on a phone */
.integ-tech bdi.ltr { max-width: 100%; overflow-wrap: anywhere; }
.outcome .acct-settings-way, .acct-read-help.acct-settings-way { margin: 0.2rem 0 0; }
/* review of R5: a balance read refused for the connection -- the sentence in the row's overlay and in the card */
.row-fetch-reason.acct-settings-way, .acct-balance-detail > .acct-settings-way { line-height: 1.7; }
.acct-balance-detail > .acct-settings-way { margin: 0.2rem 0 0.4rem; }
.integ-tech .acct-recovery-host:empty { display: none; }
.integ-tech .acct-recovery-host { margin-top: 0.6rem; }
/* the Tahesab card: «بررسی سلامت اتصال» and its answer under the head; one closed «جزئیات فنی» at the foot */
.integ-check { display: grid; gap: 0.4rem; min-width: 0; }
.integ-check .acct-health-bar { margin: 0; }
.integ-check .acct-health-bar button { min-height: 44px; }
.integ-tech { border-top: 1px solid var(--line); padding-top: 0.4rem; min-width: 0; }
.integ-tech > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 0.9rem; color: var(--text-muted); }
.integ-tech .kv { flex-wrap: wrap; }
.integ-tech .kv-value { min-width: 0; overflow-wrap: anywhere; }
.integ-tech .acct-pilot-block { margin-top: 0.6rem; padding: 0.6rem 0.7rem; box-shadow: none; }
.integ-tech .acct-pilot-block .fieldrow { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.integ-tech .outcome:empty { display: none; }
@media (max-width: 47.99rem) {
  .integ-check .acct-health-bar button { flex: 1 1 100%; }
}
/* ===== 2026-11-09 R5 slot: the accounting connection in Settings: end ===== */

/* ===== 2026-11-09 R6 slot: products mapped to Tahesab's: begin ===== */
/* Owner item 2 (2026-11-09; design docs/product/PRODUCT-TAHESAB-MAPPING-20261109.md section 4): «کالای متناظر در ته‌حساب»
   in «کالای تازه» and in a product's sheet, the list's «ته‌حساب» cell, the lock line and the counts question.
   Presentation only. */
.prd-section { display: grid; gap: 0.5rem; min-width: 0; }
.prd-fields { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.prd-fields .cfg-field[hidden] { display: none; }
.prd-list { grid-column: 1 / -1; min-width: 0; }
.prd-list-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.prd-list-row select { flex: 1 1 16rem; min-width: 0; max-width: 100%; }
.prd-list-state { margin: 0.2rem 0 0; }
.prd-list-state.warn { color: var(--warn-ink); }
.prd-facts .kv-value bdi { overflow-wrap: anywhere; }
.prd-none { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.prd-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.prd-fold-body { display: grid; gap: 0.6rem; padding-top: 0.4rem; }
.prd-fold-body > button.primary { justify-self: start; }
.prd-history { margin: 0.3rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.prd-cell { display: inline-flex; flex-direction: column; gap: 0.15rem; }
.prd-mapping bdi { overflow-wrap: anywhere; }
.chip.prd-chip { white-space: nowrap; }
.opboard-asset-name .chip.prd-chip { margin-inline-start: 0.4rem; }
.prd-lock { display: grid; gap: 0.4rem; }
.prd-lock .eff-text { margin: 0; }
.prd-lock button.prd-resolve, .outcome button.prd-resolve { justify-self: start; min-height: 44px; }
.prd-unmapped { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.prd-unmapped button.prd-unmapped-go { padding-inline: 0.2rem; }
.prd-ask .actions button { min-height: 44px; }
@media (max-width: 47.99rem) {
  .prd-fields { grid-template-columns: 1fr; }
  .prd-list-row button.prd-refresh { flex: 1 1 100%; }
}
/* ===== 2026-11-09 R6 slot: products mapped to Tahesab's: end ===== */
/* ===== 2026-11-09 R6 slot: Zaryar prices: begin ===== */
/* Owner item 3 (2026-11-09; docs/integrations/ZARYAR-TRADING-WORKFLOW-DESIGN-20261109.md §10, worker A): the «قیمت زریار»
   card of Settings › «اتصال‌ها» (its chip, the last price's age, «دریافت قیمت», «بررسی اتصال», its closed «جزئیات فنی»
   with the dealer's items) and «قیمت‌گذاری»'s quiet reference line under each price cell of a mapped row, the row's
   «خودکار از زریار» with «خودکار» and its margins. Presentation only. */
.zr-card .zr-why { margin: 0.1rem 0 0; color: var(--text); }
.zr-card .zr-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.zr-card .zr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.zr-card .zr-controls button { min-height: 44px; }
.zr-card .zr-check-answer:empty { display: none; }
.zr-card .zr-check-answer p { margin: 0; }
.zr-tech .zr-interim { margin: 0.2rem 0 0.4rem; color: var(--text-muted); font-size: 0.86rem; }
.zr-tech .zr-items-wrap { max-width: 100%; overflow-x: auto; }
.zr-tech .zr-items { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.zr-tech .zr-items th, .zr-tech .zr-items td { padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--line); text-align: start;
  vertical-align: top; }
.zr-tech .zr-items .zr-num { white-space: nowrap; }
.zr-tech .zr-items .zr-units { text-align: center; }
.zr-tech .zr-items .zr-item-id { color: var(--text-muted); }
.zr-tech .zr-items .zr-per-unit-line { display: block; }
/* the board: one quiet line under a price cell; a loss in the bad style */
.pricecell .zr-ref { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.pricecell .zr-ref.zr-ref-loss { color: var(--bad-ink); font-weight: 600; }
.pricecell .zr-ref .zr-below { margin-inline-start: 0.35rem; font-size: 0.74rem; padding-block: 0; }
.zr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.3rem; }
.zr-row .zr-margins { font-size: 0.8rem; color: var(--text-muted); }
.zr-row .zr-withdrawn { flex: 1 1 100%; font-size: 0.8rem; color: var(--bad-ink); }
.opboard-row[data-computed="yes"] .pricecell input { border-style: dotted; }
#zr-board-chip { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .zr-card .zr-controls > * { flex: 1 1 100%; }
}
/* ===== 2026-11-09 R6 slot: Zaryar prices: end ===== */
/* ===== 2026-11-09 R6 slot: Zaryar hedging: begin ===== */
/* Owner item 3 (2026-11-09; docs/integrations/ZARYAR-TRADING-WORKFLOW-DESIGN-20261109.md §10.1, §10.3, §10.4, worker B):
   «معاملات زریار» (its modes, the stops, today's counts, the last orders, the rules), the request overlay's «پوشش در
   زریار» and the queue's alert filter and row badges. Presentation only. */
.zr-trade-card .zr-modes-box { margin-top: 0.45rem; }
.zr-trade-card .zr-modes { flex-wrap: wrap; }
.zr-trade-card .zr-modes button { flex: 1 1 auto; min-height: 44px; border: 0; border-radius: 0; }
.zr-trade-card .zr-modes button[aria-pressed="true"] { background: var(--gold); color: var(--green-950); }
.zr-trade-card .zr-auto-locked { margin: 0.25rem 0 0; }
.zr-trade-card .zr-today { margin-top: 0.45rem; align-items: center; }
.zr-trade-card .zr-trade-answer:empty { display: none; }
.zr-trade-card .zr-trade-answer p { margin: 0; }
.zr-recent { margin-top: 0.5rem; }
.zr-recent-title { margin: 0 0 0.25rem; font-size: 0.9rem; }
.zr-recent-list { list-style: none; margin: 0; padding: 0; }
.zr-recent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.2rem 0;
  border-bottom: 1px solid var(--line); }
.zr-rules .zr-rules-list { margin: 0.3rem 0; }
.zr-rules .zr-rule-item { margin: 0.2rem 0; overflow-wrap: anywhere; }
.detail-zaryar .block-head.spread { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.detail-zaryar .block-head.spread h3 { margin-bottom: 0; }
.detail-zaryar .zr-hedge-why { margin: 0.2rem 0 0.4rem; }
.detail-zaryar .zr-hedge-profit-line { display: block; }
.detail-zaryar .zr-hedge-alerts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0; }
.detail-zaryar .zr-hedge-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
.detail-zaryar .zr-hedge-actions button { min-height: 44px; }
.detail-zaryar .zr-hedge-actions #btn-zr-hedge-stop { margin-inline-start: auto; }
.detail-zaryar .zr-hedge-ask { margin-top: 0.5rem; }
.detail-zaryar .zr-risk { margin: 0 0 0.4rem; font-weight: 600; }
.detail-zaryar .zr-canary-check { display: block; margin: 0.2rem 0; }
.detail-zaryar .zr-resolution { min-height: 44px; margin-inline-start: 0.4rem; }
.detail-zaryar .zr-hedge-answer:empty { display: none; }
.zr-queue-filter { display: flex; margin: 0.3rem 0 0.5rem; }
.zr-queue-filter button { min-height: 44px; border-color: var(--bad-ink); color: var(--bad-ink); }
.zr-queue-filter button[aria-pressed="true"] { background: var(--bad-ink); color: #fff; }
.reqcard-state .zr-row-badge { margin-inline-start: 0.3rem; font-size: 0.74rem; padding-block: 0; }
.zr-inline-wait { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .detail-zaryar .zr-hedge-actions > * { flex: 1 1 100%; }
  .zr-trade-card .zr-modes button { flex: 1 1 45%; }
}
/* ===== 2026-11-09 R6 slot: Zaryar hedging: end ===== */