/* 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 {
  --font: "Vazirmatn", "Vazir", "IRANSansX", "IRANSans", "Segoe UI", Tahoma,
          "Noto Sans Arabic", "Noto Naskh Arabic", "DejaVu Sans", 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;
}

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);
}

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; }
.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.72rem;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}
.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.25rem; }
.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: 0.98rem; }
.block h4 { font-size: 0.86rem; color: var(--text-muted); font-weight: 600; }

.hint { color: var(--text-muted); font-size: 0.84rem; }
.hint.tiny { font-size: 0.76rem; }
.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; }
.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.74rem; 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); }
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 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-inline-end: 3rem; }
.secret-eye { position: absolute; inset-inline-end: 0.2rem; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0.3rem 0.5rem; border: 0; background: transparent; }

/* ---------------------------------------------------- request cards */
body[data-look="live"] .reqhead { display: none; }
.reqcard { 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 > 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.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.buy  { background: var(--buy);  border-color: var(--buy-deep);  color: #fff; }
button.sell { background: var(--sell); border-color: var(--sell-deep); color: #fff; }
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: var(--mono); font-size: 0.9rem; }

.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);  color: #fff; }
.seg.sell[aria-pressed="true"] { background: var(--sell); 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: 999px; padding: 0.05rem 0.6rem;
  font-size: 0.76rem; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
}
.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); }
.chip.ok { background: rgba(47, 122, 85, 0.14); border-color: var(--ok); }
.chip.bad { background: var(--danger-soft); border-color: var(--danger); }
.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; }
.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: var(--mono); font-size: 0.92rem; }
.fact-note { color: var(--text-muted); font-size: 0.76rem; }
.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.78rem; 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); }
.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;
}

.toast {
  position: fixed;
  inset-block-end: 4.5rem;
  inset-inline-start: 1rem;
  z-index: 70;
  background: var(--charcoal);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  max-width: min(32rem, calc(100vw - 2rem));
  box-shadow: var(--shadow);
}

/* ================================================================ 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.68rem; opacity: 0.85; }
  .toast { inset-block-end: 1rem; }

  /* 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; }
}

/* ---------------------------------------------------------------- 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; }
}