:root {
  /* «رافد» (approved 3 October, «نهر»): its navy and its teal; the teal is the interface's accent */
  --rafid-ink: #0D1A23;
  --rafid-teal: #047C94;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --line: #e2e1dc;
  --ink: #1b1b19;
  --muted: #6b6a65;
  --accent: #047C94;
  --red: #b3261e;
  --red-bg: #fdeceb;
  --yellow: #8a6a12;
  --yellow-bg: #fdf5e2;
  --green: #1f6b3a;
  --green-bg: #e9f4ec;
  --grey: #63625d; /* 5.3:1 on its own grey ground (إ٦ ب) */
  --grey-bg: #f0f0ee;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a;
    --surface: #1f2124;
    --line: #32353a;
    --ink: #ececeb;
    --muted: #9a9a96;
    --accent: #1C98AE;
    --rafid-ink: #FFFFFF;
    --rafid-teal: #1C98AE;
    --red: #ff8a80;
    --red-bg: #3a2220;
    --yellow: #e8c46a;
    --yellow-bg: #35301f;
    --green: #86d6a1;
    --green-bg: #1e3227;
    --grey: #9a9a96;
    --grey-bg: #26282b;
  }
}

:root[data-theme="dark"] {
  --bg: #17181a; --surface: #1f2124; --line: #32353a; --ink: #ececeb; --muted: #9a9a96;
  --accent: #1C98AE; --rafid-ink: #FFFFFF; --rafid-teal: #1C98AE; --red: #ff8a80; --red-bg: #3a2220; --yellow: #e8c46a;
  --yellow-bg: #35301f; --green: #86d6a1; --green-bg: #1e3227; --grey: #9a9a96; --grey-bg: #26282b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 "Segoe UI", Tahoma, system-ui, sans-serif;
  display: grid;
  /* the table is the work; the agent sits beside it only when there is room for
     both, and the table never has to be scrolled sideways to be read */
  grid-template-columns: minmax(0, 1fr) 6px var(--agent-width, 320px);
  grid-template-rows: auto minmax(0, 1fr);
  /* a fixed shell: the page itself does not scroll, so a long conversation
     moves its own panel and leaves the table where it was */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  min-width: 0;
}

.brand { font-weight: 700; font-size: 18px; color: var(--accent); }

/* min-width:0 or this flex item refuses to shrink below its content and pushes
   the whole page wider than the phone it is being read on */
.places { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }

.place {
  background: none; border: 1px solid transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit;
}
.place:hover:not(:disabled) { border-color: var(--line); color: var(--ink); }
.place.is-on { background: var(--accent); color: var(--surface); }
.place:disabled { opacity: .4; cursor: not-allowed; }

.wallet {
  font-variant-numeric: tabular-nums; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}

/* Both columns are placed explicitly. Left implicit, the agent panel claims the
   wide column and the table - which is the work - gets the narrow one. */
main {
  grid-column: 1; grid-row: 2; padding: 18px 16px;
  min-width: 0; min-height: 0; overflow-y: auto;
}

.screen-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 20px; margin: 0 0 12px; }
.controls { display: flex; gap: 12px; align-items: center; margin-inline-start: auto; flex-wrap: wrap; }
.sort, .check { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; }
select, input[type="text"], input:not([type]) {
  font: inherit; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--ink);
}

button.primary {
  background: var(--accent); color: var(--surface); border: 0;
  padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit;
}
button.ghost {
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font: inherit;
}
button.follow {
  background: var(--surface); border: 1px solid var(--accent); color: var(--accent);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
}

.legend { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; margin: 8px 0 12px; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.red { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green { background: var(--green); }
.dot.grey { background: var(--grey); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--bg); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }
td.empty, tr.empty td { text-align: center; color: var(--muted); padding: 28px; }

.turn { border-inline-start: 4px solid transparent; }
.turn-red { border-inline-start-color: var(--red); background: var(--red-bg); }
.turn-yellow { border-inline-start-color: var(--yellow); background: var(--yellow-bg); }
.turn-green { border-inline-start-color: var(--green); background: var(--green-bg); }
.turn-grey { border-inline-start-color: var(--grey); background: var(--grey-bg); }

.since { color: var(--muted); font-size: 12px; display: block; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; background: var(--bg); border: 1px solid var(--line);
}
.note { color: var(--muted); font-size: 12.5px; }

.settings { display: grid; gap: 10px; }
.setting {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: grid; gap: 4px;
}
.setting .key { font-weight: 600; }
.setting .meta { color: var(--muted); font-size: 12.5px; }
.risk-4 { border-inline-start: 4px solid var(--red); }
.risk-3 { border-inline-start: 4px solid var(--yellow); }

.agent {
  grid-column: 3; grid-row: 2;
  background: var(--surface); border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.agent-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.agent-head button { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
/* the conversation's own scrollbar: min-height:0 is what lets a flex child
   actually scroll instead of growing and pushing the page */
.agent-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
/* no scroll-behavior: smooth here - the animation does not always run, and a
   conversation that sometimes fails to reach its newest message is worse than
   one that never animates */
.agent-log .hint { color: var(--muted); font-size: 13px; margin: 0; }
.bubble { padding: 8px 12px; border-radius: 12px; max-width: 95%; white-space: pre-wrap; font-size: 14px; }
.bubble.me { background: var(--accent); color: var(--surface); align-self: flex-start; }
.bubble.them { background: var(--bg); border: 1px solid var(--line); align-self: flex-end; }
.bubble.refused { background: var(--red-bg); border: 1px solid var(--red); color: var(--ink); align-self: flex-end; }
.bubble .cost { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.agent-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.agent-form textarea { flex: 1; resize: none; font: inherit; line-height: 1.5; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
  max-height: 9em; overflow-y: auto; }
.agent-form { align-items: flex-end; }
.agent-form button { background: var(--accent); color: var(--surface); border: 0; padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit; }
.agent-form #agent-attach {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  padding: 6px 10px; font-size: 15px;
}
.agent-form #agent-attach:hover { border-color: var(--accent); }

dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); max-width: min(680px, 92vw); padding: 18px;
}
dialog::backdrop { background: #0008; }
dialog h2 { margin: 0 0 10px; font-size: 17px; }
dialog table { min-width: 0; }
/* «مخفيّ» يُخفي أيًّا كان العنصر: no layout rule written after it may win */
.hidden { display: none !important; }

/* the door: it covers everything until there is a session, so nothing behind it
   is ever drawn for somebody who has not come through */
.gate {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gate[hidden] { display: none; }
.gate-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; width: min(360px, 100%); display: grid; gap: 10px;
}
.gate-card .brand { font-size: 22px; margin-bottom: 6px; }
.gate-card .brand small {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .1em; color: var(--muted);
}
.gate-card label { font-size: 13px; color: var(--muted); }
.gate-card input { font-size: 16px; padding: 9px 10px; }
.gate-error { color: var(--red); font-size: 13px; margin: 2px 0 0; min-height: 18px; }

.agent.collapsed .agent-log,
.agent.collapsed .agent-form { display: none; }
.agent.collapsed { max-height: none; }

@media (max-width: 1150px) {
  /* minmax(0, 1fr) and not 1fr: a plain 1fr track is sized by its content, so
     the header would stretch the page wider than the phone */
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  main { grid-column: 1; grid-row: 2; padding: 14px 16px; }
  .agent {
    grid-column: 1; grid-row: 3;
    border-inline-start: 0; border-top: 1px solid var(--line);
    max-height: 44vh; min-height: 0;
  }
}

@media (max-width: 560px) {
  .top { gap: 10px; padding: 10px 12px; }
  /* the places scroll sideways rather than wrapping into three rows that push
     the table off the screen */
  .places {
    order: 3; width: 100%; min-width: 0; flex: 0 0 100%;
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .places::-webkit-scrollbar { display: none; }
  .place { white-space: nowrap; }
  th, td { padding: 9px 10px; }
  .screen-head { gap: 8px; }
  .controls { width: 100%; }
}

/* ---------------------------------------------------------------- the band
   The owner's letterhead with the band our body may use drawn on it. He said
   it plainly: when he changes his paper he should not have to come back to
   have a number moved. So the paper is measured, and this is where he sees
   what was found and overrules it. */
.band { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.band-figure {
  position: relative; max-width: 260px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: #fff;
}
.band-figure img { display: block; width: 100%; height: auto; }
.band-top, .band-bottom {
  position: absolute; inset-inline: 0;
  background: repeating-linear-gradient(
    45deg, rgba(180, 83, 9, .16) 0 5px, rgba(180, 83, 9, .05) 5px 10px);
  border-color: rgba(180, 83, 9, .55);
  border-style: solid; border-width: 0;
  pointer-events: none;
}
.band-top { top: 0; border-bottom-width: 1px; }
.band-bottom { bottom: 0; border-top-width: 1px; }
.band-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.band-fields label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--muted);
}
.band-fields input { width: 88px; }

/* what the platform found out, and what it paid to find it out */
.finding { padding: 8px 0; border-bottom: 1px solid var(--line); }
.finding:last-child { border-bottom: none; }
.finding .key { font-weight: 600; margin: 2px 0; }
.finding .answer { white-space: pre-wrap; line-height: 1.7; margin: 3px 0; }
.sources { font-size: 12px; margin-top: 4px; }
.sources a { color: var(--muted); }

/* the people at a customer - stored from the first day, drawn by nothing
   until the owner went looking for the word "contacts" and found it in
   neither the module nor this front end */
.people { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.person {
  flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
}
.person .key { font-weight: 600; }
.person .meta { margin-top: 2px; }
.person .code { direction: ltr; unicode-bidi: isolate; }

/* a customer's mailboxes and the rules that govern writing to him */
.mailbox-group { margin: 6px 0; }
.mailbox { padding: 6px 0; border-bottom: 1px solid var(--line); }
.mailbox:last-child { border-bottom: none; }
.mailbox .code { direction: ltr; unicode-bidi: isolate; }
.pill.warn { background: rgba(180, 83, 9, .12); color: #9a4508; }
.rule { padding: 8px 0; border-bottom: 1px solid var(--line); }
.rule:last-child { border-bottom: none; }
.rule .key { font-weight: 600; }

/* every price found for an item, with how far it can be trusted.
   The number is out of ten and it means the price is REAL - not that it is
   the cheapest. The cheap suspicious one is what loses money. */
.price-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.price-item:last-child { border-bottom: none; }
.price { padding: 5px 0; }
.price.chosen { background: rgba(22, 163, 74, .07); border-radius: 5px; padding: 5px 8px; }
.price-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.price .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.price .num { unicode-bidi: isolate; direction: ltr; }
.conf {
  font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 10px; cursor: help;
  unicode-bidi: isolate; direction: ltr;
}
.conf.high { background: rgba(22, 163, 74, .14); color: #15803d; }
.conf.fair { background: rgba(180, 83, 9, .12); color: #9a4508; }
.conf.low { background: rgba(190, 18, 60, .10); color: #be123c; }

/* what is worth saying about a letter before it is opened. It shows and never
   blocks: a letter he cannot see is worse than one with a warning on it. And
   green says "no remarks", never "safe" - a clean letter can still be fraud. */
.safety { margin-top: 4px; }
.safety-band {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; cursor: help;
}
.safety-band.ok { background: rgba(22, 163, 74, .12); color: #166534; }
.safety-band.warn { background: rgba(180, 83, 9, .14); color: #8f4007; }
.safety-band.bad { background: rgba(190, 18, 60, .14); color: #be123c; }

/* Settings whose control is a value, not a switch. The field sits on the line
   with its name and its unit, because a number with no unit beside it is a
   number somebody will read wrong. */
.setting-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.setting .field-row { display: flex; gap: 8px; align-items: center; margin: 3px 0; }
.setting .field-row > span:first-child { min-width: 190px; }
.setting .field-row input[type="number"] { width: 90px; }
.setting .field-row input[type="time"] { width: 110px; }
.setting .field-group { width: 100%; margin: 6px 0; }
.setting .channel { margin: 6px 0; padding-inline-start: 4px; }
.setting .channel label { display: inline-flex; gap: 6px; align-items: center; }
.setting .channel .note { margin-inline-start: 22px; }
/* a channel whose transport does not exist is shown, dimmed, and says so -
   hiding it would hide the plan, enabling it would promise a delivery */
.setting .channel.unbuilt label { opacity: 0.55; }
.setting .channel-address { margin-inline-start: 8px; min-width: 220px; }

/* ───────────────────────────── the pricing screen ─────────────────────
 *
 * His design, in his colours: «فيه ألوان ومريح للعين وواضح». The values
 * below are the ones he drew with. They are written as tokens rather
 * than typed into each rule so the dark theme can answer them - the app
 * has a theme switch, and a screen that is only readable by day is half
 * a screen.
 *
 * The four chip colours are the four things a chip can be saying: this
 * is good, this is cheap, look at this, do not miss this. Every chip
 * carries the WORD too - «ولا يكون اللون وحده هو الإشارة أبدًا».
 */

:root {
  --p-panel: #f1efe8;      /* the quiet band behind a head or an empty group */
  --p-card: #ffffff;
  --p-edge: rgba(0, 0, 0, .12);
  --p-edge-firm: rgba(0, 0, 0, .28);
  --p-rule: rgba(0, 0, 0, .1);
  --p-soft: #5f5e5a;       /* second-rank text */
  --p-faint: #6b6a65;      /* the labels above a fact, and the footnote line - 5.4:1 on white (إ٦ ب; it was 3.85) */
  --p-blue: #185fa5;       /* ours: the tick, the link, the agent's rating */
  --p-blue-edge: #378add;  /* the border that says «الخيار الأساسي» */
  --p-blue-bg: #e6f1fb;
  --p-good: #3b6d11;
  --p-good-bg: #eaf3de;
  --p-warn: #854f0b;
  --p-warn-bg: #faeeda;
  --p-danger: #a32d2d;
  --p-danger-bg: #fcebeb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-panel: #24262a;
    --p-card: #1f2124;
    --p-edge: rgba(255, 255, 255, .14);
    --p-edge-firm: rgba(255, 255, 255, .34);
    --p-rule: rgba(255, 255, 255, .12);
    --p-soft: #b3b2ad;
    --p-faint: #93928d;
    --p-blue: #7fbaf0;
    --p-blue-edge: #4b94dd;
    --p-blue-bg: #1b2a3a;
    --p-good: #9fd478;
    --p-good-bg: #23301a;
    --p-warn: #e2ad63;
    --p-warn-bg: #352a18;
    --p-danger: #f08f8f;
    --p-danger-bg: #3a2020;
  }
}

:root[data-theme="dark"] {
  --p-panel: #24262a; --p-card: #1f2124; --p-edge: rgba(255, 255, 255, .14);
  --p-edge-firm: rgba(255, 255, 255, .34); --p-rule: rgba(255, 255, 255, .12);
  --p-soft: #b3b2ad; --p-faint: #93928d; --p-blue: #7fbaf0; --p-blue-edge: #4b94dd;
  --p-blue-bg: #1b2a3a; --p-good: #9fd478; --p-good-bg: #23301a; --p-warn: #e2ad63;
  --p-warn-bg: #352a18; --p-danger: #f08f8f; --p-danger-bg: #3a2020;
}

#screen-pricing { line-height: 1.7; }
/* no max-width: inside the app the content reaches the conversation panel (§13) */

/* the list: one request to a row, pressed to open its pricing */
.req-row, .req-head {
  background: var(--p-card);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
:root[data-theme="dark"] .req-row,
:root[data-theme="dark"] .req-head { border-color: var(--p-edge); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .req-row,
  :root:not([data-theme="light"]) .req-head { border-color: var(--p-edge); }
}
.req-row { cursor: pointer; }
.req-row:hover { border-color: var(--p-blue-edge); }
.req-row.is-paused, .req-head.is-paused { opacity: .72; }
.req-head { margin-bottom: 22px; }

.req-row-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}
.req-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.req-no { font-size: 16px; font-weight: 600; }
.req-row .who, .req-head .who { font-size: 13px; color: var(--p-soft); margin-top: 3px; }
.paused-why { font-size: 13px; color: var(--p-warn); margin: 10px 0 0; }

.facts {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--p-rule);
}
.fact { font-size: 13px; }
.fact span { display: block; font-size: 11px; color: var(--p-faint); margin-bottom: 2px; }
.fact b { font-weight: 600; }
.fact .urgent, .urgent { color: var(--p-danger); }

button.stop {
  background: var(--p-card); color: var(--ink);
  border: 1px solid var(--p-edge-firm); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; cursor: pointer; white-space: nowrap;
}

/* the item, and its three groups */
#screen-pricing .item { margin-bottom: 26px; }
.item-head {
  background: var(--p-panel); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.item-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.item-head p { margin: 2px 0 0; font-size: 13px; color: var(--p-soft); }
#screen-pricing .group { font-size: 13px; color: var(--p-soft); margin: 18px 2px 8px; }

/* one price */
.price-card {
  background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; gap: 14px; align-items: flex-start;
}
.price-card.primary { border: 2px solid var(--p-blue-edge); }
.price-card input[type="checkbox"] {
  width: 19px; height: 19px; margin-top: 3px; accent-color: var(--p-blue); flex: none;
}
.price-card .card-body { flex: 1; min-width: 0; }
.price-card .title {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; align-items: baseline;
}
.price-card .name { font-size: 15px; font-weight: 600; }
.price-card .price { font-size: 16px; font-weight: 600; white-space: nowrap; }
.price-card .price small { font-size: 12px; font-weight: 400; color: var(--p-soft); }
.price-card .spec { font-size: 13px; color: var(--p-soft); margin: 4px 0 8px; }

.match { font-size: 13px; padding: 6px 10px; border-radius: 8px; margin-bottom: 9px; }
.m-ok { background: var(--p-good-bg); color: var(--p-good); }
.m-warn { background: var(--p-warn-bg); color: var(--p-warn); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.chip {
  background: var(--p-panel); color: var(--p-soft);
  padding: 4px 9px; border-radius: 8px; font-size: 12px;
}
.chip.good { background: var(--p-good-bg); color: var(--p-good); }
.chip.cheap { background: var(--p-blue-bg); color: var(--p-blue); }
.chip.warn { background: var(--p-warn-bg); color: var(--p-warn); }
.chip.danger { background: var(--p-danger-bg); color: var(--p-danger); }

.badge {
  font-size: 12px; background: var(--p-blue-bg); color: var(--p-blue);
  padding: 4px 10px; border-radius: 8px; margin-inline-start: 8px; font-weight: 400;
}
.badge.grey { background: var(--p-panel); color: var(--p-soft); }

.sell {
  font-size: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--p-rule);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.sell .basis { color: var(--p-soft); }
.sell b { font-size: 17px; }

.price-card .foot {
  font-size: 12px; color: var(--p-faint); margin-top: 10px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.price-card .foot a { color: var(--p-blue); }
.price-card .rating { color: var(--p-blue); }

/* a group with nothing in it says so, and offers the way to fill it */
#screen-pricing .empty {
  background: var(--p-panel); border-radius: 12px; padding: 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--p-soft);
}
#screen-pricing .empty button, #pricing-actions button {
  font-family: inherit; font-size: 13px; background: var(--p-card); color: var(--ink);
  border: 1px solid var(--p-edge-firm); border-radius: 8px; padding: 7px 14px; cursor: pointer;
}
#pricing-actions .actions {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--p-rule); margin-top: 18px; padding-top: 16px;
}
#pricing-actions .coverage { font-size: 12px; color: var(--p-faint); margin-inline-start: auto; }

/* what the customer would see */
.preview { background: var(--p-panel); border-radius: 12px; padding: 16px 18px; margin-top: 22px; }
.preview h3 { margin: 0 0 10px; font-size: 13px; font-weight: 400; color: var(--p-soft); }
.letter {
  background: var(--p-card); border-radius: 8px; padding: 14px 16px;
  font-size: 13px; line-height: 2;
}
.letter .opt { margin-inline-start: 16px; }
.letter .sum { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--p-rule); }
.letter .sum b { font-size: 15px; }

/* the two choices on a customer's name, and the chooser they open */
.row-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.mailbox-pick { display: grid; gap: 6px; padding: 6px 2px; }
.mailbox-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 13px;
}

/* a decision carries its answer: the facts, then the buttons */
.card.decision { display: grid; gap: 6px; }
.decision-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.decision-line { font-size: 13px; color: var(--muted); }
.decision-label { display: inline-block; min-width: 64px; color: var(--ink); font-weight: 600; }
.decision-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.decision-actions .follow.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* an hour nobody said: shown, never silent */
.deadline-assumed { display: block; font-size: 11px; color: var(--p-warn, #854f0b); font-weight: 400; }

/* after a press: what was done, and a way back */
.undo-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--p-panel, #f1efe8); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.recent-answer { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }

/* the splitter between the work and the conversation (§13) */
.splitter { grid-column: 2; grid-row: 2; cursor: col-resize; background: transparent;
  border-inline-start: 1px solid var(--line); touch-action: none; }
.splitter:hover, .splitter:focus-visible, .splitter.dragging { background: var(--accent); opacity: .35; outline: none; }
@media (max-width: 1150px) { .splitter { display: none; } }

/* «المكتب»: two columns, decisions on the right (first in RTL), and one
   under the other on a narrow screen with the decisions first */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .desk { grid-template-columns: minmax(0, 1fr); } }
.desk-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.desk-head h2 { margin: 0; font-size: 15px; }
.desk-tools { display: flex; align-items: center; gap: 8px; }
.count { font-size: 12px; padding: 2px 9px; border-radius: 8px; }
.count:empty { display: none; }
.count.urgent { background: var(--red-bg); color: var(--red); }
.count.calm { background: var(--grey-bg); color: var(--grey); }
/* the two numbers on the tab: red stops the work, grey is read and forgotten */
.desk-count .count-red { color: var(--red); }
.desk-count .count-grey { color: var(--grey); font-weight: 400; }
.place.is-on .desk-count .count-red, .place.is-on .desk-count .count-grey { color: inherit; }
.card.decision.is-new { border-inline-start: 3px solid var(--accent); }
.arrived-line { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.arrived-line:last-child { border-bottom: 0; }
.arrived-line.is-read { opacity: .55; }
.arrived-line.is-new { border-inline-start: 3px solid var(--accent); padding-inline-start: 8px; }
.arrived-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex: none; }
.arrived-line .dot.off { background: transparent; }
.arrived-body { flex: 1; min-width: 0; }
.arrived-who { font-size: 13px; font-weight: 600; }
.arrived-what { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.desk-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--green-bg); color: var(--green); font-size: 13px; padding: 7px 12px;
  border-radius: 8px; margin-bottom: 10px; }
.desk-more { display: block; width: 100%; margin-top: 6px; background: none; border: 0;
  border-top: 1px solid var(--line); color: var(--accent); padding-top: 8px; cursor: pointer; font: inherit; font-size: 12px; }

/* the mailbox: a dot, not a button; one status line, not a panel */
.sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grey); display: inline-block; }
.sync-dot.ok { background: var(--green); }
.sync-dot.bad { background: var(--red); }
.status-line { font-size: 13px; padding: 6px 10px; border-radius: 8px; margin-bottom: 8px;
  background: var(--grey-bg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-line.ok { background: var(--green-bg); color: var(--green); }
.status-line.bad { background: var(--red-bg); color: var(--red); }
.ops-tools { margin-bottom: 10px; }
.ops-tools > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.letter-text { white-space: pre-wrap; max-height: 55vh; overflow: auto; font: inherit; font-size: 13px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.letter-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

/* «إعداد العرض»: the seven sections in the document's order, and the way
   forward and back at the foot of both screens */
.next-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--grey-bg); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.next-bar > span { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quick-look { margin: 8px 0; }
.quick-look > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.setup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.setup-head h2 { margin: 0; font-size: 17px; }
.fld { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.fld h4 { margin: 0 0 8px; font-size: 14px; }
.setup-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 5px 0; font-size: 13px; }
.setup-row input[type="number"] { width: 110px; }
.hint { font-size: 12px; color: var(--muted); }
.setup-out { font-size: 13px; margin-top: 6px; display: grid; gap: 4px; }
/* the terms (الإصلاحات ٤، ٣٣): each a field of several lines, as wide as its section, growing with its words */
.setup-terms { display: grid; grid-template-columns: 1fr; gap: 8px; }
.setup-term { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; font-size: 13px; }
.setup-term span { min-width: 96px; color: var(--muted); padding-top: 6px; }
.setup-term textarea { flex: 1 1 320px; }
.setup-free { width: 100%; font: inherit; font-size: 13px; }
.setup-ask { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--yellow-bg);
  color: var(--yellow); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.freight-item { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.freight-unit { padding-inline-start: 8px; }
.chosen-item { font-size: 13px; margin-bottom: 6px; }
.pill.amber, .note.amber { background: var(--yellow-bg); color: var(--yellow); }
.setup-problems { display: grid; gap: 4px; }
.sheet-preview { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
/* «محاكاة العرض» as wide as the sheet (الإصلاحات ٤، ٢٨): the window grows to A4 for it alone; on a screen narrower than the
   sheet it is scrolled sideways, never squeezed */
dialog.wide-sheet { max-width: min(calc(210mm + 40px), 96vw); width: calc(210mm + 40px); }
dialog.wide-sheet .sheet-scroll { overflow-x: auto; }
dialog.wide-sheet .sheet-preview { width: 210mm; min-width: 210mm; display: block; }
/* the file's own pages as pictures (الإصلاحات ٤، ٦١): whole, as wide as the window, never taller than they are */
dialog.wide-sheet img.paper-page { width: 100%; min-width: 0; max-width: 210mm; height: auto; margin: 0 auto 10px; box-shadow: 0 1px 6px rgb(0 0 0 / 12%); }
/* a page not asked for yet keeps its place, the sheet's own shape (الإصلاحات ٤، ٦١ ب) */
dialog.wide-sheet img.paper-page.is-waiting { aspect-ratio: 210 / 297; background: var(--line); opacity: .35; box-shadow: none; }
.paper-says { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.field-paragraph textarea { width: 100%; font: inherit; font-size: 13px; }

/* «الموردون والمنتجات» - the owner's design (شاشة-الموردون-والمنتجات.html),
   its own colours and shapes, scoped to this screen. Dark mode keeps the same
   roles in darker tones. */
:root, #screen-suppliers {
  /* on :root too (إ٦ ب، ش٥٢): the mail's boxes wear .sp-tab, and outside this screen its colours were nothing - white on white */
  --sp-blue: #185FA5; --sp-blue-bg: #E6F1FB;
  --sp-green: #3B6D11; --sp-green-bg: #EAF3DE;
  --sp-amber: #854F0B; --sp-amber-bg: #FAEEDA;
  --sp-grey: #5F5E5A; --sp-grey-bg: #F1EFE8; --sp-hint: #6b6a65;
  --sp-surface: #fff; --sp-ink: #1b1b19;
  --sp-line: rgba(0, 0, 0, .13); --sp-line-soft: rgba(0, 0, 0, .08); --sp-edge: rgba(0, 0, 0, .26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) #screen-suppliers {
    --sp-blue: #7fb3e6; --sp-blue-bg: #1d2b3a; --sp-green: #9fd07a; --sp-green-bg: #1f2d1a;
    --sp-amber: #e8b26a; --sp-amber-bg: #33281a; --sp-grey: #b8b6b0; --sp-grey-bg: #2a2c2f; --sp-hint: #9a9a96;
    --sp-surface: #1f2124; --sp-ink: #ececeb;
    --sp-line: rgba(255, 255, 255, .14); --sp-line-soft: rgba(255, 255, 255, .08); --sp-edge: rgba(255, 255, 255, .28);
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] #screen-suppliers {
  --sp-blue: #7fb3e6; --sp-blue-bg: #1d2b3a; --sp-green: #9fd07a; --sp-green-bg: #1f2d1a;
  --sp-amber: #e8b26a; --sp-amber-bg: #33281a; --sp-grey: #b8b6b0; --sp-grey-bg: #2a2c2f; --sp-hint: #9a9a96;
  --sp-surface: #1f2124; --sp-ink: #ececeb;
  --sp-line: rgba(255, 255, 255, .14); --sp-line-soft: rgba(255, 255, 255, .08); --sp-edge: rgba(255, 255, 255, .28);
}
.sp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.sp-tab { font: inherit; font-size: 13px; padding: 8px 15px; border-radius: 8px; cursor: pointer;
  background: var(--sp-surface); border: 1px solid var(--sp-line); color: var(--sp-grey); }
.sp-tab.is-on { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.sp-box { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; color: var(--sp-ink); }
.sp-ask { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.sp-ask input { flex: 1; min-width: 200px; font: inherit; font-size: 14px; border: 1px solid var(--sp-edge);
  border-radius: 22px; padding: 11px 18px; background: var(--sp-surface); color: var(--sp-ink); }
.sp-lbl { font-size: 14px; font-weight: 600; }
.sp-answer { font-size: 13px; background: var(--sp-green-bg); color: var(--sp-green); border-radius: 8px; padding: 10px 13px; }
.sp-search { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-proposed { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--sp-line); }
.sp-proposed:empty { display: none; }
.sp-proposed-head { font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.sp-dismissed > summary { cursor: pointer; font-size: 12px; color: var(--sp-hint); margin-top: 8px; }
.sp-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--sp-line-soft); }
.sp-line:last-child { border-bottom: 0; }
.sp-line.sp-faded { opacity: .4; }
.sp-nm { font-size: 13px; font-weight: 600; }
.sp-sub { font-size: 12px; color: var(--sp-hint); }
.sp-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-atoms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sp-a { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 7px; cursor: pointer;
  background: var(--sp-grey-bg); color: var(--sp-grey); border: 1px solid transparent; }
.sp-a.proved { background: var(--sp-green-bg); color: var(--sp-green); }
.sp-a.claim { background: var(--sp-amber-bg); color: var(--sp-amber); }
.sp-a.on { border-color: var(--sp-blue); background: var(--sp-blue-bg); color: var(--sp-blue); }
.sp-b { font: inherit; font-size: 12px; background: var(--sp-surface); color: var(--sp-ink);
  border: 1px solid var(--sp-edge); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
/* one colour for the pressing button on every screen - the platform's (إ٦ ج، ش١٦), not blue here and teal there */
.sp-b.go { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.sp-b.faint { opacity: .45; }
.sp-view { font: inherit; font-size: 12px; color: var(--sp-blue); background: none; border: 0; padding: 0; cursor: pointer; }
.sp-view.quiet { color: var(--sp-hint); }
.sp-filter { background: var(--sp-blue-bg); color: var(--sp-blue); border-radius: 8px; padding: 8px 13px; font-size: 12px;
  margin-bottom: 11px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sp-why { font-size: 13px; color: var(--sp-grey); margin: 6px 0 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sp-hint { font-size: 12px; color: var(--sp-hint); }
.sp-pill { font-size: 11px; padding: 2px 8px; border-radius: 7px; background: var(--sp-grey-bg); color: var(--sp-grey); font-weight: 400; }
.sp-pill.amber { background: var(--sp-amber-bg); color: var(--sp-amber); }
.sp-section { font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--sp-grey); }
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table td, .sp-table th { padding: 8px 6px; text-align: start; border-bottom: 1px solid var(--sp-line-soft); vertical-align: top; }
.sp-table th { font-size: 12px; color: var(--sp-hint); font-weight: 400; }
.sp-card { border: 1px solid var(--sp-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.sp-card-t { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sp-facts { font-size: 12px; border-inline-start: 2px solid var(--sp-line); padding-inline-start: 10px; margin-bottom: 9px; }
.sp-k { display: inline-block; min-width: 56px; color: var(--sp-hint); }
.sp-lean { font-size: 12px; background: var(--sp-blue-bg); color: var(--sp-blue); padding: 6px 10px; border-radius: 7px; margin-bottom: 9px; }
.sp-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-n { font-size: 12px; font-weight: 400; color: var(--sp-hint); }
.sp-empty { background: var(--sp-grey-bg); border-radius: 10px; padding: 13px 15px; font-size: 13px; }
#screen-suppliers code { font-family: Consolas, monospace; font-size: 12px; }

.section-head { font-size: 14px; margin: 14px 0 6px; display: flex; gap: 8px; align-items: center; }
.lean { font-size: 12px; background: var(--grey-bg); border-radius: 7px; padding: 5px 9px; }
.follow.faint { opacity: .45; }
.known-alternative { font-size: 12px; background: var(--green-bg); color: var(--green); border-radius: 7px; padding: 5px 10px; margin: 4px 0; }
/* the add form and the name that opens a supplier's page */
.sp-add { margin: 6px 0 10px; }
.sp-form .sp-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font-size: 13px; }
.sp-form input:not([type="radio"]) { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--sp-edge); border-radius: 7px;
  background: var(--sp-surface); color: var(--sp-ink); }
.sp-form .sp-wide, .sp-form .sp-wide input { flex: 1; min-width: 240px; }
.sp-name { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; color: var(--sp-ink); cursor: pointer; text-align: start; }
.sp-name:hover { color: var(--sp-blue); text-decoration: underline; }

/* one order for every item on the pricing screen */
.pricing-sort { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.pricing-sort select { font: inherit; }

.item-head-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* proposals under the item they were found for */
#screen-suppliers .sp-item-group { margin: 10px 0; padding-top: 6px; border-top: 1px solid var(--sp-line, #e5e5e5); }
#screen-suppliers .sp-item-head { font-weight: 600; font-size: 13px; margin-bottom: 4px; }

/* «متطلبات العميل»: named, nothing to fill */
#pricing-setup ul.requirements { margin: 4px 0 0; padding-inline-start: 20px; line-height: 1.8; }

/* the muted mail: one folded line */
.muted-fold > summary { cursor: pointer; list-style: none; }
.muted-fold > summary h3 { display: inline; }
.muted-fold > summary::after { content: ' ▸'; }
.muted-fold[open] > summary::after { content: ' ▾'; }
/* ✕ at the top of the one shared dialog */
#detail .dialog-x-form { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: -6px -6px 0; z-index: 2; }
#detail .dialog-x { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted, #666); padding: 4px 8px; }

/* «ابحث من جديد» - one window (المالك، 2026-09-28) */
.search-form fieldset { border: 1px solid var(--line, #ddd); border-radius: 8px; margin: 0 0 12px; padding: 10px 12px; }
.search-form legend { font-weight: 600; padding: 0 6px; }
.search-form fieldset > label { display: block; margin: 4px 0; }
.search-form .search-items { max-height: 240px; overflow-y: auto; margin: 6px 18px 0 0; }
.search-form .search-items label { display: block; margin: 3px 0; }
.search-form .dialog-actions { display: flex; gap: 8px; }

/* our letter as it will arrive (2026-09-28) */
.letter-preview { width: 100%; min-height: 460px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* The request's state, in seven colours defined once (المالك، الخطوة 3):
   رماديّ مسودة · أزرق في التسعير · أصفر أُرسل عرضًا · برتقاليّ تعديل العرض ·
   أخضر فاز · أحمر خسر · داكن مغلق */
:root {
  --st-grey: #5f5f5a; --st-grey-bg: #eeeeec; --st-blue: #1d5fa8; --st-blue-bg: #e6eefa;
  --st-yellow: #8a6a12; --st-yellow-bg: #fdf3d8; --st-orange: #b4540f; --st-orange-bg: #fdebdc;
  --st-green: #1f6b3a; --st-green-bg: #e3f3e8; --st-red: #b3261e; --st-red-bg: #fde5e3;
  --st-dark: #3b3b38; --st-dark-bg: #dcdcd8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-grey: #b9b9b4; --st-grey-bg: #2a2c2f; --st-blue: #8ab8ee; --st-blue-bg: #1c2836;
    --st-yellow: #e8c46a; --st-yellow-bg: #35301f; --st-orange: #f2a36b; --st-orange-bg: #3a2a1d;
    --st-green: #86d6a1; --st-green-bg: #1e3227; --st-red: #ff8a80; --st-red-bg: #3a2220;
    --st-dark: #d4d4cf; --st-dark-bg: #3a3c40;
  }
}
:root[data-theme="dark"] {
  --st-grey: #b9b9b4; --st-grey-bg: #2a2c2f; --st-blue: #8ab8ee; --st-blue-bg: #1c2836;
  --st-yellow: #e8c46a; --st-yellow-bg: #35301f; --st-orange: #f2a36b; --st-orange-bg: #3a2a1d;
  --st-green: #86d6a1; --st-green-bg: #1e3227; --st-red: #ff8a80; --st-red-bg: #3a2220;
  --st-dark: #d4d4cf; --st-dark-bg: #3a3c40;
}
.st-chip { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 1px 10px; border: 1px solid; white-space: nowrap; }
.st-chip.grey { background: var(--st-grey-bg); color: var(--st-grey); border-color: var(--st-grey); }
.st-chip.blue { background: var(--st-blue-bg); color: var(--st-blue); border-color: var(--st-blue); }
.st-chip.yellow { background: var(--st-yellow-bg); color: var(--st-yellow); border-color: var(--st-yellow); }
.st-chip.orange { background: var(--st-orange-bg); color: var(--st-orange); border-color: var(--st-orange); }
.st-chip.green { background: var(--st-green-bg); color: var(--st-green); border-color: var(--st-green); }
.st-chip.red { background: var(--st-red-bg); color: var(--st-red); border-color: var(--st-red); }
.st-chip.dark { background: var(--st-dark-bg); color: var(--st-dark); border-color: var(--st-dark); }
.st-badge { display: inline-block; font-size: 11px; border-radius: 99px; padding: 0 7px; margin-inline-start: 4px; border: 1px solid var(--line); color: var(--muted); }
.st-badge.warn { border-color: var(--st-yellow); color: var(--st-yellow); background: var(--st-yellow-bg); }
.st-sub { display: block; font-size: 11.5px; color: var(--muted); }
.st-late { color: var(--st-red); font-weight: 600; }
.st-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.st-no { font-size: 11.5px; color: var(--muted); }

/* a notice on the desk: said, with what reverses it (المالك، الخطوة 3) */
.card.decision.notice { border-inline-start: 4px solid var(--st-blue); }
.card.decision:not(.notice) { border-inline-start: 4px solid var(--st-red); }
.decision-choice { font: inherit; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

/* the list (الجزء أ، إصلاحٌ بعد التحقّق): a closed request faded at the end;
   the state chips above it filter, the pressed one marked */
#requests tr.closed-row td { opacity: .55; }
#state-filter button.st-chip { cursor: pointer; font-family: inherit; }
#state-filter button.st-chip.on { outline: 2px solid currentColor; outline-offset: 2px; }
#state-filter.filtering button.st-chip:not(.on) { opacity: .45; }
.best-line { margin: 4px 0; font-weight: 600; }

/* «توصيات البحث» and «بحث بفلتر» (البحث ٢) */
.tips-holder { margin: 8px 0; }
.tips-bar .tips-toggle { font-size: 13px; }
.tips-box { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 8px 12px; margin-top: 6px; }
.tips-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.tip-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line, #ddd); font-size: 13px; }
.tip-row.off .tip-text { opacity: .6; }
.tip-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line, #ddd); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 2px 9px; font-size: 12px; }
.seg button.on { font-weight: 700; background: var(--accent-soft, #e6eefa); }
.filter-places .sub-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 18px 2px 0; }
.pick-chip { font-size: 12.5px; border: 1px solid var(--line, #ddd); border-radius: 99px; padding: 0 8px; }
button.pick-chip { background: none; cursor: pointer; }
.pick-chip .chip-x { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 13px; }
.tip-said { font-size: 12.5px; }
@media (max-width: 600px) { .tip-row { grid-template-columns: 1fr; } }

/* «تعديل العرض» and «إعداد المراجعة» (الجزء ب، ٣) */
.line-choice { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed var(--line, #ddd); }
.line-choice .seg label { padding: 2px 8px; font-size: 12px; }
.revision-box { border: 1px solid var(--st-orange, #b4540f); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.revision-box .setup-row.locked { opacity: .85; }
.st-chip.orange { background: var(--st-orange-bg); color: var(--st-orange); border-color: var(--st-orange); }

/* «الاستفسارات والمفاوضات» (الجزء ج، ١) */
.inq-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.inq-filters button.st-chip { cursor: pointer; font-family: inherit; }
.inq-filters button.st-chip.on { outline: 2px solid currentColor; outline-offset: 2px; }
.inq-filters button.st-chip:not(.on) { opacity: .6; }
pre.letter { background: var(--bg, #f7f7f5); border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 12px; font-size: 12.5px;
  white-space: pre-wrap; direction: ltr; text-align: left; max-height: 260px; overflow: auto; }
.held-box { border-color: var(--st-yellow, #8a6a12); }
.held-line { margin: 2px 0; }

/* «أوامر الشراء» (الجزء د، ١) */
.st-sub.late { color: var(--st-red, #b3261e); font-weight: 600; }

/* إعادة التسعير بالأزرق، و«تمّ الشراء» بالأخضر (الجزء د، ٢) */
#screen-pricing.is-repricing, .req-row.is-repricing { background: var(--st-blue-bg, #e6eefa); }
#screen-pricing.is-bought { background: var(--st-green-bg, #e3f3e8); }
.order-panel { border: 1px solid var(--st-blue, #1d5fa8); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--surface, #fff); }
.order-panel.is-bought { border-color: var(--st-green, #1f6b3a); }
.rise-box { border: 1px solid var(--st-orange, #b4540f); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }

/* «السداد» (الجزء هـ، ١): شريط المجاميع */
.totals-bar { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; }
.totals-bar span { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 4px 10px; background: var(--surface, #fff); }

/* «افتح الرسالة» from another screen: the letter marked in its place (الإصلاحات ٢، ٧) */
#mail-body tr.is-found { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

/* «عروض الموردين»: a reply whose price was not recorded (الإصلاحات ٣، ١٠) */
.sp-table tr.row-missed td { background: color-mix(in srgb, #dc2626 8%, transparent); }

/* «افتح المكان»: the setting a refusal named, marked (الإصلاحات ٣، ١) */
.setting.is-found { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* «+ أضِف»: the two sides of what is kept, side by side (الإصلاحات ٣، ٤) */
.known-sides { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.known-sides > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }

/* «وجدها البحث ولم تُعتمد» (الإصلاحات ٣، ٨) */
.dropped-fold summary { cursor: pointer; }
.dropped-fold ul { margin: 4px 0; padding-inline-start: 18px; }
.dropped-fold li { margin: 3px 0; }

/* «الكلّ · عروض الموردين · من الإنترنت · أضفتُها أنا» (الإصلاحات ٣، ٧) */
.price-views { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.price-views button.is-on { background: var(--accent); color: var(--surface); border-color: transparent; }

/* the head of every list screen: a request's number and the order (الإصلاحات ٣، ٣) */
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.list-head input[type="search"] { flex: 1 1 220px; }
.list-head .list-order { display: flex; align-items: center; gap: 4px; }
.list-head .list-says, .list-head .list-filtered-box { flex-basis: 100%; }
.list-head .list-says:empty, .list-head .list-filtered-box:empty { display: none; }
.list-filtered { margin: 0; }

/* تلميحات العميل: ما ينتظر «صحيح» (الإصلاحات ٣، ١٣) */
.hint-row { margin: 4px 0; }
.hint-row.waiting { border-inline-start: 3px solid var(--yellow); padding-inline-start: 6px; }

/* «طلب مستندات» (الإصلاحات ٣، ١٥): each file small, its source under it */
.docs-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.doc-thumb { margin: 0; width: 150px; display: flex; flex-direction: column; gap: 4px; }
.doc-thumb img { width: 150px; height: 110px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.doc-pdf { display: flex; align-items: center; justify-content: center; width: 150px; height: 110px; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; color: var(--red); }
.doc-thumb figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }

/* ───────────── the pricing screen, thinner (الإصلاحات ٣، ١٨): the approved sketch's rules */
:root {
  --p-panel: #f1efe8; --p-card: #ffffff; --p-edge: rgba(0,0,0,.12); --p-edge-firm: rgba(0,0,0,.28); --p-rule: rgba(0,0,0,.1);
  --p-soft: #5f5e5a; --p-faint: #6b6a65; --p-blue: #185fa5; --p-blue-edge: #378add; --p-blue-bg: #e6f1fb;
  --p-good: #3b6d11; --p-good-bg: #eaf3de; --p-warn: #854f0b; --p-warn-bg: #faeeda; --p-danger: #a32d2d; --p-danger-bg: #fcebeb;
  --n-hover: rgba(0,0,0,.025);
  --n-grid: 22px minmax(0,1fr) 112px 70px 54px 150px 100px 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-panel: #24262a; --p-card: #1f2124; --p-edge: rgba(255,255,255,.14); --p-edge-firm: rgba(255,255,255,.34); --p-rule: rgba(255,255,255,.12);
    --p-soft: #b3b2ad; --p-faint: #93928d; --p-blue: #7fbaf0; --p-blue-edge: #4b94dd; --p-blue-bg: #1b2a3a;
    --p-good: #9fd478; --p-good-bg: #23301a; --p-warn: #e2ad63; --p-warn-bg: #352a18; --p-danger: #f08f8f; --p-danger-bg: #3a2020;
    --n-hover: rgba(255,255,255,.035);
  }
}
:root[data-theme="dark"] {
  --p-panel: #24262a; --p-card: #1f2124; --p-edge: rgba(255,255,255,.14); --p-edge-firm: rgba(255,255,255,.34); --p-rule: rgba(255,255,255,.12);
  --p-soft: #b3b2ad; --p-faint: #93928d; --p-blue: #7fbaf0; --p-blue-edge: #4b94dd; --p-blue-bg: #1b2a3a;
  --p-good: #9fd478; --p-good-bg: #23301a; --p-warn: #e2ad63; --p-warn-bg: #352a18; --p-danger: #f08f8f; --p-danger-bg: #3a2020;
  --n-hover: rgba(255,255,255,.035);
}
.n-screen { max-width: 1060px; margin-inline-end: auto; font-size: 13.5px; line-height: 1.55; }
.n-btn { font: inherit; font-size: 12.5px; background: var(--p-card); color: var(--ink); border: 1px solid var(--p-edge-firm); border-radius: 7px; padding: 3px 10px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.n-btn.pri { background: var(--accent); color: var(--surface); border-color: transparent; }
.n-btn.link { background: none; border-color: transparent; color: var(--p-blue); padding: 0 3px; }
.n-btn:disabled { opacity: .5; cursor: not-allowed; }
.n-rq { background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 12px; padding: 9px 14px; }
.n-rq-top { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.n-rq-top h2 { font-size: 15px; margin: 0; font-weight: 650; }
.n-rq-top .means { font-size: 12px; color: var(--p-faint); }
.n-rq-top .n-btn.stop { margin-inline-start: auto; }
.n-facts { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12.5px; color: var(--p-soft); margin-top: 3px; }
.n-facts b { color: var(--ink); font-weight: 600; }
.n-notices { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.n-notice { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--p-soft); background: var(--p-panel); border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.n-notice .i, .n-al .i { flex: none; width: 18px; text-align: center; }
.n-notice .t, .n-al .t { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.n-notice.open .t, .n-al.open .t { display: block; }
/* «المصدر» on the item is read whole, never cut to one line (الإصلاحات ٤، ٦٥ و) */
.n-al.source-line .t { display: block; }
#pricing-actions { position: sticky; top: 0; z-index: 6; background: var(--bg); }
.n-bar { padding: 8px 0 0; margin-top: 4px; border-bottom: 1px solid var(--p-edge); }
.n-bar-1 { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding-bottom: 6px; }
.n-views { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.n-views button { font: inherit; font-size: 12.5px; border: 1px solid var(--p-edge); background: var(--p-card); color: var(--ink); border-radius: 99px; padding: 1px 10px; cursor: pointer; }
.n-views button.is-on { background: var(--accent); color: var(--surface); border-color: transparent; }
.n-views button.has { border-color: var(--p-warn); color: var(--p-warn); }
.n-views button.has.is-on { background: var(--p-warn); color: #ffffff; }
.n-sort { font-size: 12.5px; color: var(--p-faint); display: flex; gap: 6px; align-items: center; }
.n-sort select { font: inherit; font-size: 12.5px; padding: 1px 6px; border: 1px solid var(--p-edge); border-radius: 6px; }
.n-cov { margin-inline-start: auto; font-size: 12px; color: var(--p-faint); }
.n-cols { display: grid; grid-template-columns: var(--n-grid); gap: 0 10px; padding: 3px 10px 4px; font-size: 11px; color: var(--p-faint); border-top: 1px solid var(--p-rule); }
.n-item { margin: 12px 0 16px; }
.n-ih { display: flex; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; padding: 6px 10px; background: var(--p-panel); border-radius: 10px; }
.n-ih .no { font-weight: 650; }
.n-ih .pn { font-family: Consolas, "Courier New", monospace; font-size: 13px; font-weight: 600; }
.n-ih .qty { color: var(--p-soft); font-size: 12.5px; }
.n-ih .cov { margin-inline-start: auto; font-size: 11.5px; padding: 0 8px; border-radius: 99px; background: var(--p-good-bg); color: var(--p-good); white-space: nowrap; }
.n-ih .cov.warn { background: var(--p-warn-bg); color: var(--p-warn); }
.n-ih .best { flex-basis: 100%; font-size: 12.5px; color: var(--p-soft); }
.n-al { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; padding: 2px 10px; cursor: pointer; color: var(--p-soft); }
.n-al.amber { color: var(--p-warn); }
.n-al.green { color: var(--p-good); }
.n-folds { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 2px 10px; font-size: 12.5px; align-items: flex-start; }
.n-folds details { flex-basis: 100%; }
.n-fold-btn { color: var(--p-blue); cursor: pointer; }
.n-foldbox { margin: 2px 0 4px; padding: 6px 12px; background: var(--p-panel); border-radius: 8px; font-size: 12.5px; color: var(--p-soft); }
.n-foldbox p { margin: 2px 0; }
.n-foldbox .amber { color: var(--p-warn); }
.n-grp { font-size: 11.5px; color: var(--p-faint); padding: 8px 10px 2px; }
.n-grp b { font-weight: 600; color: var(--p-soft); }
.n-row { display: grid; grid-template-columns: var(--n-grid); gap: 0 10px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--p-rule); cursor: pointer; }
.n-row:hover { background: var(--n-hover); }
.n-row.primary { border-inline-start: 3px solid var(--p-blue-edge); padding-inline-start: 7px; }
.n-row.misfit { opacity: .7; }
.n-row input { width: 16px; height: 16px; accent-color: var(--p-blue); margin: 0; cursor: pointer; }
.n-src { min-width: 0; }
.n-src .l1 { display: flex; gap: 2px 6px; align-items: baseline; flex-wrap: wrap; }
.n-src .nm { font-weight: 600; }
.n-src .host { font-size: 11.5px; color: var(--p-faint); }
.agent-prepared .prep-q { border: 1px solid var(--line, #d0d5dd); border-radius: 8px; padding: 8px; margin: 6px 0; }
.agent-prepared .prep-q summary { cursor: pointer; }
.agent-prepared .prep-items { margin: 6px 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.mem-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.mem-line { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; padding: 8px; border: 1px solid var(--line, #d0d5dd); border-radius: 8px; }
.mem-line .mem-text { grid-column: 2; }
.mem-line small, .mem-line .mem-acts { grid-column: 1 / -1; }
.mem-line .mem-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mem-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.agent-talks { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.agent-talks button { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line, #d0d5dd); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.agent-past { max-height: 40vh; overflow: auto; border-bottom: 1px solid var(--line, #d0d5dd); padding: 6px; display: grid; gap: 4px; }
.agent-past-row { display: grid; text-align: start; gap: 2px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.agent-past-row:hover, .agent-past-row.is-on { border-color: var(--line, #d0d5dd); }
.agent-past-row .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-past-row small { opacity: .7; }
.n-src .prod-ar { font-size: 12px; color: var(--p-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.n-src .prod { font-size: 12px; color: var(--p-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.n-src .said { font-size: 12px; color: var(--p-warn); }
.n-tag { font-size: 11px; border-radius: 5px; padding: 0 5px; background: var(--p-good-bg); color: var(--p-good); white-space: nowrap; }
.n-tag.warn { background: var(--p-warn-bg); color: var(--p-warn); }
.n-tag.danger { background: var(--p-danger-bg); color: var(--p-danger); }
.n-badge { font-size: 11px; border-radius: 5px; padding: 0 6px; background: var(--p-blue-bg); color: var(--p-blue); white-space: nowrap; }
.n-pr { line-height: 1.3; }
.n-pr b { font-size: 14px; font-weight: 650; white-space: nowrap; }
.n-pr small { display: block; font-size: 11px; color: var(--p-faint); white-space: nowrap; }
/* a metre item (الإصلاحات ٣، ١٩): what one price buys, and its whole rolls - said in words, wrapped */
.n-pr small.pk { white-space: normal; }
.n-pack { font-size: 11px; color: var(--p-soft); white-space: normal; margin-top: 1px; }
.n-pack.q { color: var(--p-warn); }
.n-pack .n-btn { font-size: 11px; margin-inline-start: 4px; }
.n-deg { display: inline-block; font-size: 11.5px; border-radius: 99px; padding: 0 7px; white-space: nowrap; background: var(--p-warn-bg); color: var(--p-warn); }
.n-deg.ok { background: var(--p-good-bg); color: var(--p-good); }
.n-deg.none { background: var(--p-panel); color: var(--p-faint); }
.n-rt { line-height: 1.2; }
.n-rt b { font-weight: 650; }
.n-rt small { color: var(--p-faint); font-size: 10.5px; }
.n-rt .bar { height: 3px; background: var(--p-rule); border-radius: 3px; margin-top: 3px; }
.n-rt .bar i { display: block; height: 3px; border-radius: 3px; background: var(--p-blue); }
.n-ship, .n-af { font-size: 12px; line-height: 1.35; min-width: 0; }
.n-ship .ring, .n-af small { color: var(--p-faint); }
.n-screen .q { color: var(--p-warn); }
.n-tg { background: none; border: 0; cursor: pointer; color: var(--p-faint); font-size: 12px; padding: 0; width: 22px; height: 22px; border-radius: 5px; }
.n-tg:hover { background: var(--p-panel); }
.n-det { grid-column: 1 / -1; margin: 6px 0 3px; padding: 7px 12px; background: var(--p-panel); border-radius: 8px; font-size: 12.5px; color: var(--p-soft); line-height: 1.7; cursor: default; }
.n-det[hidden] { display: none; }
.n-det .title { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.n-det .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.n-det .foot { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.n-det .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.n-more { padding: 3px 10px; border-bottom: 1px solid var(--p-rule); }
.n-slim { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 5px 10px; font-size: 12.5px; color: var(--p-faint); }
#pricing-next { position: sticky; bottom: 0; z-index: 6; }
.n-next { margin-top: 12px; background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; box-shadow: 0 -4px 14px rgba(0,0,0,.07); font-size: 13px; }
.n-next .say { flex: 1; min-width: 200px; }
.n-none { padding: 26px; text-align: center; color: var(--p-faint); }
@media (max-width: 760px) {
  .n-cols { display: none; }
  .n-row { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: flex-start; }
  .n-row > .c-chk { order: 0; padding-top: 3px; }
  .n-row > .c-src { order: 1; flex: 1 1 60%; }
  .n-row > .c-tg { order: 2; }
  .n-row > .c-pr { order: 3; flex-basis: 100%; padding-inline-start: 26px; }
  .n-row > .c-deg { order: 4; padding-inline-start: 26px; }
  .n-row > .c-rt { order: 5; width: 60px; }
  .n-row > .c-af { order: 6; }
  .n-row > .c-ship { order: 7; flex-basis: 100%; padding-inline-start: 26px; }
  .n-row > .n-det { order: 9; flex-basis: 100%; }
  .n-cov { margin-inline-start: 0; }
  .n-rq-top .n-btn.stop { margin-inline-start: 0; }
}
/* the new line wears none of the old card (الإصلاحات ٣، ١٨) - the class stays for what reads it */
.n-row.price-card { display: grid; background: none; border: 0; border-bottom: 1px solid var(--p-rule); border-radius: 0; padding: 5px 10px; margin: 0; gap: 0 10px; align-items: center; }
.n-row.price-card.primary { border: 0; border-bottom: 1px solid var(--p-rule); border-inline-start: 3px solid var(--p-blue-edge); padding-inline-start: 7px; }
.n-row.price-card input[type="checkbox"] { margin: 0; width: 16px; height: 16px; }
.n-row.price-card .n-det .title .name { font-size: 13px; }
.n-row.price-card .n-det .title .price { font-size: 13.5px; }
@media (max-width: 760px) { .n-row.price-card { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: flex-start; } }

/* ───────── the new style's shared parts (إعادة التصميم أ): one line, its ▾, «أظهر المزيد», the slim line, the bars ───────── */
.n-row.nl { --n-grid: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto 28px; grid-template-columns: var(--n-grid); background: none; border: 0; border-bottom: 1px solid var(--p-rule); border-radius: 0; margin: 0; }
.nl-cols { --n-grid: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto 28px; }
.nl-c { min-width: 0; font-size: 13px; }
.nl-c .sub { display: block; font-size: 11.5px; color: var(--p-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-c .sub.urgent { color: var(--p-danger); }
.nl-c0 b { font-weight: 650; }
.nl-c .st-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nl-det p { margin: 2px 0; }
.chosen-item.nl { --n-grid: minmax(0, 3fr) minmax(0, .8fr) minmax(0, 1fr) auto 28px; }
.n-screen .n-more { display: block; }
/* the bar above every list (rule 5): search by number · order · count - fixed as the list scrolls */
[data-list-head] { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 4px; }
#pricing-setup .next-bar { position: sticky; bottom: 0; z-index: 6; background: var(--p-card); border-top: 1px solid var(--p-edge); padding: 6px 10px; }
@media (max-width: 760px) {
  .n-row.nl { display: flex; flex-wrap: wrap; gap: 2px 10px; }
  .n-row.nl > .nl-c0 { flex: 1 1 70%; }
  .n-row.nl > .c-tg { order: 1; }
  .n-row.nl > .nl-c:not(.nl-c0) { order: 2; flex: 0 1 auto; padding-inline-start: 4px; }
  .n-row.nl > .nl-det { order: 9; flex-basis: 100%; }
  .nl-cols { display: none; }
  .nl-c .st-acts { justify-content: flex-start; }
}

/* ───────── the desk (إعادة التصميم ب) ───────── */
#screen-desk .desk { max-width: 1060px; }
.n-row.nl.decision { --n-grid: minmax(0, 1fr) auto auto 28px; border-inline-start: 3px solid var(--p-danger); padding-inline-start: 7px; }
.n-row.nl.decision.notice { border-inline-start-color: var(--p-blue-edge); }
.n-row.nl.decision.is-new { background: var(--p-warn-bg); }
.n-row.nl.decision .nl-det .decision-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.n-row.nl.decision .decision-lean .follow { white-space: nowrap; }
.n-row.nl.arrived-line { --n-grid: minmax(0, 1fr) auto auto 0; cursor: pointer; }
.n-row.nl.arrived-line .dot { display: inline-block; margin-inline-end: 6px; }
.n-row.nl.arrived-line .safety:empty { display: none; }
.n-row.nl.arrived-line.is-new { background: var(--p-warn-bg); }
@media (max-width: 760px) {
  .n-row.nl.decision > .nl-c1, .n-row.nl.decision > .nl-c2 { padding-inline-start: 4px; }
}

/* ───────── every list table in the new style (إعادة التصميم ج): compact lines, the head fixed, on the phone each row a
   short block of its cells - no sideways scroll. One rule, for each screen that takes the class ───────── */
.n-table { font-size: 13px; width: 100%; border-collapse: collapse; }
.n-table td { padding: 6px 10px; border-bottom: 1px solid var(--p-rule); vertical-align: top; }
.n-table tbody tr:hover { background: var(--n-hover, rgba(0,0,0,.025)); }
.n-table tr.n-more-row td { border: 0; padding: 4px 10px; }
#screen-requests .table-wrap { max-width: 1060px; }
#detail .n-notice { margin: 2px 0; }
@media (max-width: 760px) {
  .n-table, .n-table tbody { display: block; width: 100%; min-width: 0; }
  .n-table thead { display: none; }
  .n-table tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 7px 6px; border-bottom: 1px solid var(--p-rule); }
  .n-table td { border: 0; padding: 0; flex: 0 1 auto; max-width: 100%; min-width: 0; display: inline-flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
  .n-table td .st-sub, .n-table td .note { white-space: normal; }
  .n-table td:first-child { flex-basis: 100%; font-weight: 600; }
  .n-table td:empty { display: none; }
}

/* ───────── suppliers and products (إعادة التصميم د) ───────── */
#screen-suppliers > * { max-width: 1060px; }
.n-row.nl.sp-row { --n-grid: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr) 28px; }
.n-row.nl.sp-row.sp-faded { opacity: .6; }
.n-row.nl.priced-row { --n-grid: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) 28px; }
.nl-det .sp-line, .nl-det .sp-box { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.sp-table { font-size: 13px; }
.sp-table td { padding: 6px 10px; border-bottom: 1px solid var(--p-rule); vertical-align: top; }
@media (max-width: 760px) {
  .sp-table, .sp-table tbody { display: block; width: 100%; min-width: 0; }
  .sp-table tr:first-child:has(th) { display: none; }
  .sp-table tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 7px 6px; border-bottom: 1px solid var(--p-rule); }
  .sp-table td { border: 0; padding: 0; flex: 0 1 auto; max-width: 100%; min-width: 0; }
  .sp-table td:first-child { flex-basis: 100%; }
  .sp-tabs { flex-wrap: wrap; }
}

/* ───────── our quotations (إعادة التصميم هـ): a table row's details in the row under it ───────── */
#screen-quotations > * { max-width: 1060px; }
.n-table tr.nl-det-row > td { padding: 0 10px 8px; border-bottom: 1px solid var(--p-rule); }
.n-table tr.nl-det-row[hidden] { display: none; }
.n-table tr[data-nl] > td { border-bottom-color: transparent; }
.n-table .q-lead { white-space: nowrap; }
.n-det.q-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scheduled-row { border-bottom: 1px solid var(--p-rule); }
@media (max-width: 760px) {
  .n-table tr.nl-det-row { display: block; }
  .n-table tr.nl-det-row[hidden] { display: none; }
  .n-table .q-lead { white-space: normal; }
}

/* purchase orders (إعادة التصميم و) */
#screen-orders > * { max-width: 1060px; }

/* collections (إعادة التصميم ز) */
#screen-collections > * { max-width: 1060px; }
#collections-totals { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* inquiries and negotiations (إعادة التصميم ح) */
#screen-inquiries > * { max-width: 1060px; }

/* customers (إعادة التصميم ط) */
#screen-customers > * { max-width: 1060px; }
.n-people .n-row.nl.person { --n-grid: minmax(0, 1fr) minmax(0, 2fr) 28px; border: 0; border-bottom: 1px solid var(--p-rule); border-radius: 0; background: none; padding: 5px 4px; }
.n-people { display: block; }

/* mail (إعادة التصميم ي) */
#screen-mail > * { max-width: 1060px; }
#mail-body .safety { margin-top: 2px; }
#mail-body .safety .band { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
#mail-body td:nth-child(2) { max-width: 240px; }
#mail-body td:nth-child(3) { max-width: 300px; }
#mail-body .safety { font-size: 11.5px; line-height: 1.6; max-height: 1.9em; overflow: hidden; cursor: pointer; }
#mail-body .safety.open { max-height: none; }

/* ───────── the settings screen (الإعدادات): five sections, blocks in the new style ───────── */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0; }
.set-tabs button { font: inherit; font-size: 13px; border: 1px solid var(--p-edge); background: var(--p-card); color: var(--ink); border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.set-tabs button.is-on { background: var(--accent); color: var(--surface); border-color: transparent; }
.set-tabs button i { font-style: normal; opacity: .7; margin-inline-end: 4px; }
.set-block { background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.set-block h3 { font-size: 14px; margin: 0 0 6px; }
.set-block .lock { font-size: 11px; color: var(--p-faint); font-weight: 400; margin-inline-start: 6px; }
.set-fold { border-top: 1px solid var(--p-rule); padding: 6px 0; }
.set-fold > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.n-row.nl.mb-row { --n-grid: minmax(0, 2fr) minmax(0, 1fr) auto 28px; }
.mb-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.mb-grid .lab { color: var(--p-faint); font-size: 12px; }
.mb-grid input[data-mb-name] { width: 100%; max-width: 280px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font: inherit; font-size: 12px; border: 1px solid var(--p-edge); background: var(--p-card); color: var(--ink); border-radius: 99px; padding: 1px 9px; cursor: pointer; }
.chip.on { background: var(--p-blue-bg); border-color: var(--p-blue-edge); color: var(--p-blue); }
.chip.na { opacity: .5; cursor: not-allowed; }
.cc-row { display: flex; gap: 8px; align-items: center; margin: 2px 0; }
.cc-row .cc-p { font-size: 12px; min-width: 150px; color: var(--p-soft); }
.cc-row input { flex: 1 1 200px; }
.purpose-map { margin-top: 8px; }
@media (max-width: 760px) { .mb-grid { grid-template-columns: 1fr; } .cc-row { flex-wrap: wrap; } }

/* «حسابي» والمستخدمون (الإعدادات ٢) */
.my-grid .pair { display: flex; gap: 6px; flex-wrap: wrap; }
.my-grid .pair input { flex: 1; min-width: 140px; }
.my-grid .lab .sub { display: block; font-size: 11px; }
.my-grid textarea { width: 100%; max-width: 420px; }
.my-code { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.my-code input { max-width: 220px; }
.perm-screen { border-top: 1px solid var(--p-rule); padding: 4px 0; }
.perm-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; padding: 2px 18px 4px 0; font-size: 12.5px; }
.gate-card input[type=email] { direction: ltr; }

/* «الوكيل» (الإعدادات ٣) */
.ag-search input { width: 100%; max-width: 520px; }
.ag-results { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ag-hit { text-align: start; font: inherit; background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 8px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
.ag-journey h3 small { display: block; font-weight: 400; margin-top: 2px; }
.ag-trip { margin: 4px 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-trip-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ag-list { margin: 0; padding-inline-start: 18px; }
.ag-list li { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-top: 1px solid var(--p-rule); padding: 6px 0; }
.ag-all-on { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--p-red-bg, #fde8e8); color: var(--p-red, #a11); border: 1px solid var(--p-red-edge, #f3b4b4); font-weight: 600; }
.ag-tree-h { font-size: 14px; margin: 14px 0 6px; }
.ag-screen { background: var(--p-card); border: 1px solid var(--p-edge); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.ag-head { display: flex; gap: 8px; align-items: center; }
.ag-head .n-tg { margin-inline-start: auto; }
.ag-acts { margin-top: 6px; }
.ag-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; border-top: 1px solid var(--p-rule); padding: 6px 0; }
.ag-act .note { display: block; }
.ag-act .ag-advice { grid-column: 2; }
.ag-advice textarea { width: 100%; max-width: 560px; }
.ag-advice label { font-size: 12px; display: block; }
.is-found { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.sw { display: inline-flex; align-items: center; gap: 4px; min-width: 52px; border-radius: 99px; border: 1px solid var(--p-edge); background: var(--p-card); padding: 1px 3px; cursor: pointer; font: inherit; font-size: 11px; color: var(--p-faint); flex-direction: row-reverse; justify-content: space-between; }
.sw .knob { width: 14px; height: 14px; border-radius: 50%; background: var(--p-faint); }
.sw.on { background: var(--accent); border-color: transparent; color: var(--surface); flex-direction: row; }
.sw.on .knob { background: var(--surface); }
.sw[disabled] { opacity: .45; cursor: not-allowed; }
.ag-locked ol { margin: 4px 0; padding-inline-start: 20px; }
.ag-locked li { margin: 3px 0; }
.ag-free { font-weight: 600; margin: 6px 0 2px; }
.ag-trip-form[hidden], .ag-results[hidden] { display: none; }
.perm-acts[hidden] { display: none; }
.ag-advice textarea, .my-grid textarea { font: inherit; }

/* «الرصيد» (الإعدادات ٥) */
.bal-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bal-big { font-size: 26px; font-weight: 700; margin: 2px 0 4px; }
.bal-period { margin: 4px 0 8px; }
.bal-table td:nth-child(n+2), .bal-table th:nth-child(n+2) { white-space: nowrap; }
.bal-table tr.bal-area td { background: var(--p-panel); }
.bal-table tr.bal-op td:first-child { padding-inline-start: 22px; }
.bal-table tr.bal-orphan td { color: var(--p-red); background: var(--p-red-bg); }
.sw.part { background: var(--p-warn-bg); }
dialog.route-off { max-width: 460px; border: 1px solid var(--p-edge); border-radius: 12px; padding: 14px 18px; background: var(--p-card); color: var(--ink); }
dialog.route-off::backdrop { background: rgba(0, 0, 0, .35); }
dialog.route-off button[hidden] { display: none; }

/* «المتابعة» (الإعدادات ٦) */
.fu-table td .sub { display: block; font-size: 11.5px; color: var(--p-faint); }
.fu-table .chips { white-space: nowrap; }

/* what he added on a price (الإصلاحات ٤، ٣٢): a thumbnail, and the chooser of a page's photos */
.pm-thumb { height: 44px; width: auto; border: 1px solid var(--line); border-radius: 6px; vertical-align: middle; }
.pm-doc { display: inline-flex; align-items: center; gap: 6px; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pm-pick { padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.pm-pick img { width: 100%; height: 120px; object-fit: contain; display: block; }
.pm-pick.picked { outline: 2px solid var(--brand-base, #8a1f1f); }

/* Writing fields are never too small to write in (الإصلاحات ٤، ٣٣ — المالك: «احيانا يظهر صغير جدا لا تستطيع كتابة اي شيء داخله»):
   no text field under 160px, whatever squeezes it; a field of several lines never under two, growing with its words;
   on a narrow screen a field takes the line. */
input[type="text"], input:not([type]), input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"], textarea {
  min-width: 160px; box-sizing: border-box;
}
textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
  min-height: 52px; width: 100%; resize: vertical; }
textarea.grow { field-sizing: content; overflow: hidden; resize: none; }
/* «من أين يُشحن؟»: wide enough for a country's name, though it leave its narrow column */
.ship-from-pick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; min-width: 300px;
  background: var(--surface); padding: 4px; border: 1px solid var(--line); border-radius: 8px; }
.ship-from-pick input { min-width: 180px; flex: 1 1 180px; }
@media (max-width: 640px) {
  input[type="text"], input:not([type]), input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"], textarea { width: 100%; }
  .ship-from-pick { min-width: 0; width: 100%; }
}

/* سعر الشحن ثلاثة أسطر وعلامة (الإصلاحات ٤، ٣٤) */
.freight-rows { display: grid; gap: 4px; margin: 6px 0; }
.freight-row { align-items: center; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; }
.freight-row.marked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.freight-row .fr-name { min-width: 64px; font-weight: 600; }
.freight-row input[type="number"] { width: 130px; }

/* «عروضنا المرسلة» (الإصلاحات ٤، ٣٥): a date never broken, one form; the customer's column wide enough for a name, the
   state's as wide as its words; the search and its order one readable line; the open row's links apart; the scheduled
   line its words then its buttons */
.q-date { white-space: nowrap; unicode-bidi: isolate; }
#screen-quotations .n-table { table-layout: auto; width: 100%; }
#screen-quotations .n-table td, #screen-quotations .n-table th { vertical-align: top; padding-inline: 6px; }
#screen-quotations .q-customer { min-width: 150px; width: 22%; overflow-wrap: anywhere; }
#screen-quotations .q-value { white-space: nowrap; }
#screen-quotations .q-state { width: 1%; min-width: 120px; }
#screen-quotations .q-state .st-chip { white-space: nowrap; }
#screen-quotations .q-lead { white-space: nowrap; width: 1%; }
#screen-quotations .q-acts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#screen-quotations .q-acts .q-record { flex-basis: 100%; }
.list-head input[type="search"] { font: inherit; font-size: 13px; padding: 6px 10px; }
.list-head input[type="search"]::placeholder { font-size: 13px; opacity: .75; }
.list-head .list-order, .list-head select, .list-head button { font-size: 13px; flex: 0 0 auto; }
.scheduled-row { white-space: normal; overflow: visible; align-items: center; }
.scheduled-row .sched-says { flex: 1 1 340px; min-width: 0; }
.caution-here { outline: 2px solid var(--yellow, #c9a227); outline-offset: 4px; border-radius: 8px; }
/* المورّد بهاتفه وواتسابه وأشخاصه (الإصلاحات ٤، ٣٧): the channel's badge, his numbers, his people, the words to copy */
/* «عابر» (الإصلاحات ٤، ٦٠): a customer kept by his name and number */
.pill.walk-in { background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); white-space: nowrap; }
.pill.channel, .sp-pill.channel { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.reach-form, .person-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.reach-form label, .person-form label { display: grid; gap: 2px; font-size: 12px; }
.person-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 3px 0; }
.copy-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12.5px; margin: 4px 0 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-height: 260px; overflow: auto; }
.supplier-file { padding: 5px 0; border-bottom: 1px solid var(--line); } .supplier-file:last-of-type { border-bottom: 0; }
.part-doc-file { padding-inline-start: 18px; font-size: 13px; } .part-doc-file.off a { opacity: .6; }
.freight-three, .freight-calc { padding-inline-start: 26px; } .freight-calc .note { overflow-wrap: anywhere; }

/* the kind of the source of a price, and what its own API says it has (list 4, item 45) */
.pill.src-type { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pill.src-type.src-manufacturer, .pill.src-type.src-authorized_distributor { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; }
.pill.stock.none { opacity: .7; }
.brand-chain { opacity: .9; }

/* ───────── the phone (تطبيق الهاتف، هاتف ١): one column, a slim top bar, the five places under the thumb, the agent a balloon.
   The desk above 760px is untouched: everything here is under the one media query, and .phone-only is nothing above it ───────── */
.phone-only { display: none; }
@media (max-width: 760px) {
  /* (no !important here: each part below says its own display - grid, flex, block - and [hidden] still hides) */
  .phone-only { display: revert; }
  .phone-only[hidden] { display: none !important; }
  /* the muted grey one shade darker: 4.5:1 on the phone's small text (the desk's 3.85:1 stands there) */
  /* the same greys one shade darker, and the green a shade deeper, so the phone's small text reads at 4.5:1 (the dark theme's own stand) */
  :root { --muted: #605f5a; --grey: #5f5f5a; --p-faint: #66655f; --green: #1a5f33; --tap: 48px; }
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior-y: contain; }
  .top { order: 0; flex: none; flex-wrap: nowrap; gap: 6px; min-height: 56px; padding-block: calc(6px + env(safe-area-inset-top, 0px)) 6px; padding-inline: 16px 10px; }
  .top .brand, .top .places, .top #language-toggle, .top #theme-toggle, .top #sign-out { display: none; }
  .phone-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
  .phone-title.is-ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 16px; direction: ltr; text-align: end; unicode-bidi: isolate; }
  .top #wallet { display: none; }
  .phone-wallet { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 11px; border: 0; background: var(--grey-bg); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .phone-wallet .i { width: 17px; height: 17px; }
  .icon-btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; padding: 0; }
  .icon-btn:active { background: var(--grey-bg); }
  .i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* the bottom of the column keeps clear of the balloon */
  main { order: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 150px; }
  body.has-dock main { padding-bottom: 24px; }
  .safety-band.ok { color: var(--green); }
  .safety-band.warn { color: var(--yellow); }
  .safety-band.bad { color: var(--red); }
  .screen-head h1 { display: none; }
  .splitter { display: none; }

  /* the dock: one main action, under the thumb, above the bar */
  .phone-dock { order: 2; flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface); border-top: 1px solid var(--line); }
  .phone-dock[hidden] { display: none !important; }
  .phone-dock span { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; }
  .phone-dock .primary { min-height: var(--tap); padding-inline: 18px; border-radius: 12px; font-weight: 600; font-size: 15px; }

  /* the five places */
  .phone-nav { order: 3; flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .phone-nav button { position: relative; min-height: 56px; display: grid; justify-items: center; align-content: center; gap: 0; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; font-family: inherit; padding: 2px 0; cursor: pointer; }
  .phone-nav .ico { width: 56px; height: 30px; display: grid; place-items: center; border-radius: 15px; }
  .phone-nav button[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .phone-nav button[aria-current="page"] .ico { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .phone-nav .badge { position: absolute; top: 4px; inset-inline-start: calc(50% + 6px); min-width: 18px; padding-inline: 5px; border-radius: 999px; background: var(--red); color: var(--surface); font: 600 11px/1.65 inherit; font-family: inherit; font-variant-numeric: tabular-nums; }
  .phone-nav .badge[hidden] { display: none; }

  /* «المزيد»: rows */
  #screen-more .rows, .rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
  .rows .row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: start; font: inherit; cursor: pointer; }
  .rows .row:first-child { border-top: 0; }
  .rows button.row:active { background: var(--grey-bg); }
  .rows .row .i { color: var(--muted); }
  .rows .row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rows .row-main b { font-weight: 600; }
  .rows .row-main small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
  .rows .count { min-width: 24px; padding-inline: 7px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); font-size: 12px; font-weight: 600; line-height: 2; text-align: center; font-variant-numeric: tabular-nums; }
  .rows .count.hot { background: var(--red-bg); color: var(--red); }
  .rows .count:empty { display: none; }
  .section-label { margin: 14px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }

  /* the agent: a balloon over any screen; a press raises the conversation over the lower two thirds */
  #phone-bubble { position: fixed; z-index: 32; inset-inline-end: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--surface); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); touch-action: none; cursor: pointer; }
  #phone-bubble .i { width: 26px; height: 26px; }
  body.has-dock #phone-bubble { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
  body.agent-open #phone-bubble, body.has-dock.agent-open #phone-bubble { inset-inline-end: calc(50% - 28px); inset-inline-start: auto; top: auto; bottom: calc(68% - 28px); }
  body:has(dialog[open]) #phone-bubble, body:has(.gate:not([hidden])) #phone-bubble { display: none !important; }
  .agent { position: fixed; inset-inline: 0; bottom: 0; top: auto; height: 68%; max-height: none; z-index: 30; display: none; flex-direction: column; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); border-inline-start: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 40px rgba(0, 0, 0, .25); }
  body.agent-open .agent { display: flex; }
  .agent.collapsed .agent-log, .agent.collapsed .agent-form { display: flex; }
  .agent-head { padding: 22px 14px 8px; flex-wrap: wrap; row-gap: 6px; }
  .agent-head > span:first-child { display: flex; flex-direction: column; }
  .agent-head #agent-about { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
  .agent-talks { flex-basis: 100%; margin-inline-start: 0; gap: 8px; }
  .agent-form { gap: 8px; }
  .agent-talks button { min-height: var(--tap); font-size: 14px; padding: 6px 12px; }
  .agent-past { border-bottom: 0; }
  .agent-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 2px; }
  .agent-quick .chip { min-height: var(--tap); padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; }
  .agent-form #agent-attach { color: var(--ink); border-color: var(--muted); }
  #agent-toggle { display: none; }
  .agent-form { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .agent-form textarea { font-size: 16px; min-height: var(--tap); border-radius: 24px; padding: 11px 14px; }
  .agent-form button { min-height: var(--tap); min-width: var(--tap); }

  /* a window is a sheet from the bottom */
  dialog#detail, dialog.route-off { position: fixed; inset-inline: 0; bottom: 0; top: auto; margin: 0; width: 100%; max-width: 100%; max-height: 88dvh; border: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -14px 40px rgba(0, 0, 0, .25); }
  dialog#detail::before, dialog.route-off::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 6px; }
  dialog::backdrop { background: rgba(27, 27, 25, .46); }
  dialog.wide-sheet { width: 100%; max-width: 100%; }
  #detail .dialog-x-form { margin: 0 0 -32px; }
  #detail .dialog-x { min-width: var(--tap); min-height: var(--tap); }

  /* pressed things, and what is typed in (the floor: 48 both ways for every thing pressed; 16px in a field) */
  button.primary, .n-btn.pri { min-height: var(--tap); padding-block: 8px; border-radius: 12px; font-size: 15px; }
  button.ghost, button.follow, .n-btn, .st-chip, .sp-tab, .place, .seg button, .chip, .set-tabs button, [data-set-tab] { min-height: var(--tap); min-width: var(--tap); padding-block: 7px; font-size: 14px; }
  .pill { line-height: 1.5; }
  button.ghost, button.follow, a.follow { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
  a.follow { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding-inline: 12px; }
  button.follow.primary, a.follow.primary { border-color: var(--accent); background: var(--accent); color: var(--surface); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; min-height: var(--tap); }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .sub, .nl-c .sub, .deadline-assumed, .bubble .cost { font-size: 12px; }
  .nl-c, .n-table, .sp-table, .decision-line, .note, .meta { font-size: 14px; }
  /* the door: the card at the top, so the keyboard does not cover «ادخل» */
  .gate { align-items: flex-start; padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
  .gate-card { width: 100%; }
  .gate-card input { min-height: 48px; }
  .gate-card .primary { min-height: 48px; }
}

/* ───────── the phone (تطبيق الهاتف، هاتف ٢ وتصحيحه): the desk's two segments and its cards, a card for each request, the
   request a page of its own with its sections as tabs - each as the approved mockup has it. What the stages taught
   (ashaher-phone-screens): no card inside a card; a card's buttons share its width and a label never breaks; a state
   is said once; what is missing shows nothing; a page carries no frame; what the desk repeats in every row is not
   repeated in every card ───────── */
@media (max-width: 760px) {
  /* what is missing shows nothing: the desk's tables keep their dash, the phone's rows do not */
  .is-absent { display: none !important; }

  /* the desk: two segments, one in sight at a time, each with its number */
  .desk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 13px; background: var(--grey-bg); }
  .desk-seg button { min-height: 48px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; }
  .desk-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, .16); }
  .desk-seg b { display: inline-block; min-width: 22px; margin-inline-start: 4px; padding-inline: 6px; border-radius: 999px; background: var(--grey-bg); font-size: 12px; font-weight: 600; line-height: 1.8; font-variant-numeric: tabular-nums; }
  .desk-seg b:empty { display: none; }
  .desk-seg button[aria-selected="true"] b.hot { background: var(--red-bg); color: var(--red); }
  #screen-desk[data-seg="wait"] #desk-arrived, #screen-desk[data-seg="new"] #desk-decisions { display: none; }

  /* a section is its records on the page's own ground - no frame around them; the segment says its name and its number */
  #screen-desk .desk { display: block; }
  .desk-pane { padding: 0; border: 0; border-radius: 0; background: none; }
  #desk-decisions { display: flex; flex-direction: column; }
  #desk-decisions > .desk-head { order: 5; margin: 4px 0 0; }
  #desk-decisions > #decisions-recent-list { order: 6; }
  .desk-tools { flex: 1; }
  #decisions-recent { flex: 1; min-height: var(--tap); border-radius: 12px; color: var(--muted); }
  .desk-head h2, .desk-head .count, #desk-arrived .desk-head { display: none; }
  #desk-fresh { margin: 0 2px 8px; }

  /* each decision a card: what it is and when; its title; whom it is about; its buttons; «التفاصيل» - no table */
  #decisions-list .n-row.nl.decision { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 14px 14px 4px; margin: 0 0 12px; border: 1px solid var(--line); border-inline-start: 4px solid var(--p-danger); border-radius: 14px; background: var(--surface); }
  #decisions-list .n-row.nl.decision.notice { border-inline-start-color: var(--p-blue-edge); }
  #decisions-list .n-row.nl.decision > .nl-c { flex: none; order: 0; padding: 0; }
  #decisions-list .n-row.nl.decision > .nl-c1 { order: -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
  .card-kind { padding: 1px 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.9; white-space: nowrap; }
  .card-kind.is-decision { background: var(--red-bg); color: var(--red); }
  .card-kind.is-notice { background: var(--st-blue-bg); color: var(--st-blue); }
  #decisions-list .n-row.nl.decision > .nl-c1 .pill:not(.card-kind) { padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; }
  #decisions-list .n-row.nl.decision > .nl-c1 .pill.urgent { color: var(--red); font-weight: 600; }
  #decisions-list .n-row.nl.decision > .nl-c0 strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; text-wrap: balance; overflow-wrap: anywhere; }
  #decisions-list .n-row.nl.decision > .nl-c0 .sub { margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.5; }
  #decisions-list .decision-line { font-size: 14px; line-height: 1.6; }
  #decisions-list .n-row.nl.decision.is-new { background: var(--p-warn-bg); }
  /* a card's buttons share its width equally; a label never breaks inside its button; they stack, each the full
     width, when they do not fit side by side (a label longer than the whole card alone is let to wrap: fitCardButtons) */
  #decisions-list .n-row.nl.decision .decision-lean, #decisions-list .n-row.nl.decision .decision-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 4px 0 0; }
  #decisions-list .n-row.nl.decision .decision-lean .follow, #decisions-list .n-row.nl.decision .decision-actions .follow { flex: 1 1 calc(50% - 4px); max-width: 100%; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none; }
  #decisions-list .n-row.nl.decision .decision-lean .follow, #decisions-list .n-row.nl.decision .decision-actions .follow { border-color: var(--line); background: var(--surface); color: var(--ink); }
  #decisions-list .n-row.nl.decision .decision-lean .follow.primary, #decisions-list .n-row.nl.decision .decision-actions .follow.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
  #decisions-list .n-row.nl.decision .follow.is-long { white-space: normal; text-align: center; text-wrap: balance; }
  #decisions-list .n-row.nl.decision .decision-actions .follow[data-action$=":discard"] { order: 9; border-color: var(--red); color: var(--red); }
  /* «التفاصيل ▾»: every line it said, its files and all its buttons - a quiet row at the card's foot, the width of the card */
  #decisions-list .n-row.nl.decision > .nl-det { order: 4; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: 14px; color: var(--ink); }
  #decisions-list .n-row.nl.decision .decision-label { min-width: 0; margin-inline-end: 6px; color: var(--muted); font-weight: 600; }
  #decisions-list .n-row.nl.decision .copy-text { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* when one label does not fit half the card, all of them stack - each the full width (fitCardButtons says so) */
  .is-stacked > button, .is-stacked > a.follow { flex-basis: 100% !important; }
  button.is-long, a.follow.is-long { white-space: normal !important; text-align: center; text-wrap: balance; }
  #decisions-list .n-row.nl.decision > .c-tg { order: 5; position: static; }
  #decisions-list .n-row.nl.decision > .c-tg:empty { display: none; }
  #decisions-list .n-row.nl.decision > .c-tg .n-tg { width: 100%; height: auto; min-height: var(--tap); border-radius: 10px; color: var(--muted); font-size: 0; }
  #decisions-list .n-row.nl.decision > .c-tg .n-tg::after { content: attr(title) " ▾"; font-size: 14px; }
  #decisions-list .n-row.nl.decision > .c-tg .n-tg[aria-expanded="true"]::after { content: attr(title) " ▴"; }
  /* opened, the card shows every button under its lines: the two quick ones are not drawn a second time */
  #decisions-list .n-row.nl.decision:has(> .nl-det:not([hidden])) > .nl-c2 { display: none; }

  /* what arrived: rows of one list - who, what it said (two lines, never cut), its word of safety, when */
  #arrived-list { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
  #arrived-list .n-row.nl.arrived-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main when" "main safety"; gap: 4px 12px; align-items: center; min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  #arrived-list .n-row.nl.arrived-line:last-child { border-bottom: 0; }
  #arrived-list .n-row.nl.arrived-line > .nl-c0 { grid-area: main; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico who" "ico what"; column-gap: 12px; align-items: center; }
  #arrived-list .n-row.nl.arrived-line > .nl-c1 { grid-area: safety; justify-self: end; align-self: start; }
  #arrived-list .n-row.nl.arrived-line > .nl-c2 { grid-area: when; justify-self: end; align-self: end; }
  #arrived-list #arrived-read { border-top: 1px solid var(--line); margin: 0; color: var(--muted); }
  #arrived-list .n-row.nl.arrived-line:last-of-type { border-bottom: 0; }
  #arrived-list .arrived-ico { grid-area: ico; color: var(--muted); }
  #arrived-list .arrived-line:not(.is-read) .arrived-ico { color: var(--accent); }
  /* unread is the name in its full weight and the icon in the accent: the dot of the desk's line is not drawn a second way */
  #arrived-list .n-row.nl.arrived-line .dot { display: none; }
  #arrived-list .arrived-who { grid-area: who; overflow-wrap: anywhere; }
  #arrived-list .sub.arrived-what { grid-area: what; }
  #arrived-list .arrived-who { font-size: 15px; }
  #arrived-list .sub.arrived-what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.5; }
  #arrived-list .n-row.nl.arrived-line > .nl-c1, #arrived-list .n-row.nl.arrived-line > .nl-c2 { padding: 0; font-size: 13px; }
  #arrived-list .n-row.nl.arrived-line > .c-tg { display: none; }
  /* a read row is read by its colour, not by fading everything in it */
  .arrived-line.is-read { opacity: 1; }
  .arrived-line.is-read .arrived-who, .arrived-line.is-read .arrived-what { color: var(--muted); font-weight: 400; }
  .desk-more, #arrived-more { min-height: var(--tap); }
  /* the day so far, as the mockup's last line of the desk */
  .desk-today { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 12px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
  .desk-today b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* the requests: a card for each - its reference and its state on one line, the customer, «N بنود · موعده …», where
     it stands of the four steps; then what the desk shows in further columns, small. The follow-up is a line here and
     its switch is on the request's own page */
  #screen-requests .table-wrap { border: 0; background: none; overflow: visible; }
  #screen-requests .n-table tr { display: block; padding: 6px 2px; border: 0; }
  #screen-requests .n-table tr[data-id] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref state" "name name" "meta meta" "says says" "steps steps" "came came" "last last" "follow follow"; gap: 0 8px; align-items: center; padding: 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
  #screen-requests .n-table tr[data-id] > td { display: block; min-width: 0; padding: 0; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); opacity: 1; }
  #screen-requests .n-table tr[data-id] > td:nth-child(1), #screen-requests .n-table tr[data-id] > td:nth-child(5) { display: contents; }
  #screen-requests .n-table tr[data-id] > td:nth-child(1) > .st-sub { grid-area: ref; justify-self: start; max-width: 100%; font-size: 13px; color: var(--muted); unicode-bidi: plaintext; overflow-wrap: anywhere; }
  #screen-requests .n-table tr[data-id] > td:nth-child(1) > .st-sub.rq-ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; color: var(--ink); direction: ltr; unicode-bidi: isolate; white-space: normal; overflow-wrap: anywhere; text-align: end; }
  #screen-requests .n-table tr[data-id] .st-chip { grid-area: state; justify-self: end; }
  #screen-requests .n-table tr[data-id] .rq-name { grid-area: name; margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
  #screen-requests .n-table tr[data-id] > td:nth-child(3) { grid-area: meta; font-size: 14px; }
  #screen-requests .n-table tr[data-id] > td.st-late { color: var(--st-red); font-weight: 600; }
  #screen-requests .n-table tr[data-id] > td:nth-child(3) > .st-sub::before { content: "· "; }
  #screen-requests .n-table tr[data-id] .rq-says { grid-area: says; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
  #screen-requests .n-table tr[data-id] .rq-says .st-badge { margin: 0; }
  #screen-requests .n-table tr[data-id] > td.rq-journey { grid-area: steps; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
  .rq-journey i { height: 4px; border-radius: 2px; background: var(--grey-bg); }
  .rq-journey i.on { background: var(--accent); }
  #screen-requests .n-table tr[data-id] > td:nth-child(2) { grid-area: came; margin-top: 8px; }
  #screen-requests .n-table tr[data-id] > td:nth-child(4) { grid-area: last; }
  #screen-requests .n-table tr[data-id] > td.follow-cell { grid-area: follow; }
  #screen-requests .n-table tr[data-id] > td.follow-cell .follow { display: none; }
  #screen-requests .n-table tr[data-id] .since { display: inline; font-size: 13px; }
  #screen-requests .n-table td .st-sub, #screen-requests .n-table td .note { display: inline; font-size: inherit; }
  #screen-requests .n-table td:empty { display: none; }
  #screen-requests .controls { display: none; }
  #screen-requests .legend { gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
  #screen-requests .legend .st-chip { flex: none; min-height: var(--tap); min-width: 56px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5; opacity: 1; }
  #screen-requests .legend .st-chip.on { border-color: transparent; background: var(--ink); color: var(--bg); }
  #screen-requests .legend .note { flex: none; }

  /* the request: a page of its own, not a sheet and with no frame - its reference in the top bar, back in the bar, the
     balloon in sight, its main action in the dock; its customer's name, its state once with its deadline, its sections
     as tabs with one in sight at a time */
  dialog#detail.is-page { inset: var(--bar-top, 61px) 0 var(--bar-bottom, 66px) 0; top: var(--bar-top, 61px); bottom: var(--bar-bottom, 66px); height: auto; max-height: none; z-index: 25; border: 0; outline: 0; border-radius: 0; box-shadow: none; padding: 12px 16px 120px; background: var(--bg); }
  dialog#detail.is-page:focus, dialog#detail.is-page:focus-visible { outline: 0; }
  body.has-dock dialog#detail.is-page { padding-bottom: 100px; }
  dialog#detail.is-page::before { display: none; }
  dialog#detail.is-page .dialog-x-form { display: none; }
  dialog#detail.is-page > form:last-child { display: none; }
  body:has(dialog#detail.is-page[open]) #phone-bubble { display: grid !important; }
  dialog#detail.is-page > #detail-body > h2:first-child { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  dialog#detail.is-page > #detail-body > h2:first-child .pill.channel { display: none; }
  .page-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 10px; }
  .page-state .st-sub { display: inline; font-size: 13px; }
  .page-state .page-deadline.late { color: var(--st-red); font-weight: 600; }
  .page-tabs { position: sticky; top: -12px; z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
  .page-tabs button { min-height: var(--tap); padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: pointer; }
  .page-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
  .page-panel[hidden] { display: none; }
  #page-panel-0:not([hidden]) { display: flex; flex-direction: column; }
  #page-panel-0 > .setting { order: -3; }
  #page-panel-0 > .request-items { order: -2; margin-bottom: 12px; }
  #page-panel-0 > .papers { order: -1; }
  #page-panel-0 > .papers h3 { margin-top: 4px; }
  /* the tab says the section's name: its heading is not said a second time */
  .page-panel > h2:first-child { display: none; }
  .page-panel h2, .page-panel h3 { font-size: 16px; margin: 16px 0 8px; }
  /* its buttons share the width as a card's do; the main one is in the dock alone */
  dialog#detail.is-page .st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  dialog#detail.is-page .st-acts button { flex: 1 1 calc(50% - 4px); max-width: 100%; min-height: var(--tap); border-radius: 12px; white-space: nowrap; }
  body.has-dock dialog#detail.is-page .st-acts button.primary { display: none; }
  .st-no-fold { margin: 8px 0; color: var(--muted); font-size: 14px; }
  .st-no-fold > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
  .st-no-fold .n-notice .t { white-space: normal; overflow: visible; }
  /* the suppliers' follow-up: how it stands, and its switch - here, not in every card of the list */
  .page-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .page-follow .since, .page-follow .note { flex: 1 1 140px; min-width: 0; display: block; font-size: 13.5px; }
  .page-follow .follow { order: 2; flex: none; min-height: var(--tap); padding-inline: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  /* its items: rows as the mockup has them - the number, the description, its part number and quantity small under
     it, its state as a pill; no dash where a part number is not written */
  dialog#detail.is-page .n-table thead { display: none; }
  dialog#detail.is-page .n-table tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  dialog#detail.is-page .n-table td { border: 0; padding: 0; }
  dialog#detail.is-page .request-items tbody { display: block; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
  dialog#detail.is-page .request-items tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "n desc desc state" "n part qty state"; column-gap: 8px; align-items: center; min-height: 56px; padding: 10px 14px; }
  dialog#detail.is-page .request-items tr:last-child { border-bottom: 0; }
  dialog#detail.is-page .request-items td { display: block; min-width: 0; }
  dialog#detail.is-page .request-items td[colspan] { grid-column: 1 / -1; }
  dialog#detail.is-page .request-items td:nth-child(1):not([colspan]) { grid-area: n; align-self: start; min-width: 26px; padding-inline: 7px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); font-size: 12px; font-weight: 600; line-height: 2; text-align: center; font-variant-numeric: tabular-nums; }
  dialog#detail.is-page .request-items td:nth-child(2) { grid-area: desc; font-weight: 600; overflow-wrap: anywhere; }
  dialog#detail.is-page .request-items td:nth-child(3) { grid-area: part; font-size: 13px; color: var(--muted); }
  dialog#detail.is-page .request-items td:nth-child(3):not(:has(+ .is-absent))::after { content: " ·"; }
  dialog#detail.is-page .request-items td:nth-child(4) { grid-area: qty; font-size: 13px; color: var(--muted); }
  dialog#detail.is-page .request-items td.is-absent + td:nth-child(4) { grid-column: part-start / qty-end; }
  dialog#detail.is-page .request-items td:nth-child(5) { grid-area: state; max-width: 132px; text-align: end; }
  .item-state { border: 0; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  .item-state.is-chosen { background: var(--green-bg); color: var(--green); }
  .item-state.is-waiting { background: var(--yellow-bg); color: var(--yellow); }
  .item-state.is-none { background: var(--red-bg); color: var(--red); }

  /* the page's sections: a table drawn in one is rows on the phone - each cell under its column's name (phoneTables) */
  dialog#detail.is-page .table-wrap { border: 0; background: none; overflow: visible; }
  dialog#detail table.as-rows, dialog#detail table.as-rows tbody { display: block; width: 100%; min-width: 0; }
  dialog#detail table.as-rows thead { display: none; }
  dialog#detail table.as-rows tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  dialog#detail table.as-rows td { position: relative; display: block; max-width: none; min-height: 26px; padding: 2px 0; padding-inline-start: 104px; border: 0; overflow-wrap: anywhere; }
  dialog#detail table.as-rows td[data-label]::before { content: attr(data-label); position: absolute; inset-inline-start: 0; top: 3px; width: 96px; color: var(--muted); font-size: 13px; }
  dialog#detail table.as-rows td > .st-sub { display: block; }
  dialog#detail table.as-rows td.q-lead { display: flex; flex-wrap: wrap; gap: 8px; padding-inline-start: 0; padding-top: 8px; }
  dialog#detail table.as-rows td.q-lead::before { display: none; }
  dialog#detail table.as-rows td.q-lead > .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  dialog#detail table.as-rows tr.nl-det-row { border-bottom: 0; padding-top: 0; }
  dialog#detail table.as-rows td:empty { display: none; }
  dialog#detail.is-page .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  dialog#detail.is-page .dialog-actions .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; border-radius: 12px; }
  /* a link in the page is pressed by a thumb: the line it stands on is as tall as a thing pressed */
  dialog#detail.is-page .page-panel a:not(.follow):not(.row) { display: inline-block; min-width: var(--tap); padding-block: 13px; overflow-wrap: anywhere; }
  dialog#detail.is-page .page-panel summary { min-height: var(--tap); padding-block: 12px; cursor: pointer; }
  dialog#detail.is-page .page-panel [data-more], dialog#detail.is-page .page-panel .n-more { margin-top: 8px; }
  dialog#detail.is-page .page-panel ul { padding-inline-start: 20px; }
  /* nothing in the page is wider than the page: a list of choices takes the line it has, and a line of a list wraps */
  dialog#detail.is-page select { max-width: 100%; }
  dialog#detail.is-page .page-panel li { overflow-wrap: anywhere; }
  dialog#detail.is-page .page-panel li > select, dialog#detail.is-page .page-panel li > button { margin-top: 6px; }
  dialog#detail.is-page p.note { font-size: 15px; line-height: 1.6; }
  /* the letters of the request: rows as the mockup has them */
  dialog#detail .rows a.row, .rows a.row { color: var(--ink); text-decoration: none; }
  .rows a.row time { flex: none; font-size: 13px; }
  /* what the letter is about, in two lines: the whole of it is one press away, in the letter */
  .rows a.row .row-main small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* how sure a price is: the platform's own tokens, read in both themes */
  .conf.high { background: var(--green-bg); color: var(--green); }
  .conf.fair { background: var(--yellow-bg); color: var(--yellow); }
  .conf.low { background: var(--red-bg); color: var(--red); }
  /* a state chip in a row is a word, not a thing pressed; the filter chips (buttons) keep their 40px */
  .st-chip:not(button) { min-height: auto; min-width: 0; padding-block: 1px; font-size: 12.5px; }
  .st-sub { font-size: 12.5px; }
  .st-badge { font-size: 12px; }
  .list-head select, select[data-list-order], .list-order select { font-size: 16px; }
  :root { --st-grey: #5d5d58; }
  /* the bar above a list: the search box as the mockup has it, its button and its order pressed by a thumb */
  .list-head { gap: 8px; margin: 0 0 10px; }
  .list-head input[type="search"][data-list-q] { flex: 1 1 200px; min-height: var(--tap); padding-inline: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; }
  .list-head input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
  .list-head button, .list-head select { min-height: var(--tap); border-radius: 12px; font-size: 15px; }
  .list-head .list-order { flex: 1 1 100%; gap: 8px; }
  .list-head .list-order select { flex: 1; font-size: 16px; }
  /* the search box and the links in both themes */
  input[type="search"] { background: var(--surface); color: var(--ink); }
  dialog#detail a, #decisions-list a:not(.follow), #arrived-list a { color: var(--accent); }
  /* the papers' buttons, pressed by a thumb */
  .paper-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; }
  .paper-row bdi { min-width: 0; overflow-wrap: anywhere; }
  .paper-row .note { flex-basis: 100%; }
  .paper-row .follow, .paper-row a.follow { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding-inline: 12px; }
  /* references and part numbers in their own direction, never split */
  .n-table td bdi, .st-sub bdi, .ref { unicode-bidi: isolate; white-space: nowrap; }
  .num { white-space: nowrap; }
  #quotes-address .ref { color: var(--ink); font-weight: 600; }
  dialog#detail.is-page .request-items td:nth-child(2) bdi, dialog#detail table.as-rows td > bdi:not(.ref):not(.num) { white-space: normal; }
  .price-head .src-name { color: var(--ink); font-weight: 600; }
  .price-item .key { font-weight: 600; }
}

/* ───────── the phone (تطبيق الهاتف، هاتف ٣): the bell says how notifications stand on this device ───────── */
@media (max-width: 760px) {
  #phone-bell { position: relative; color: var(--muted); }
  #phone-bell[data-push="on"] { color: var(--accent); }
  #phone-bell[data-push="on"]::after { content: ""; position: absolute; top: 11px; inset-inline-end: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
}

/* ───────── the phone (تطبيق الهاتف، هاتف ٤): one request's pricing as the approved mockup has it - its customer and
   its state once, one item at a time under a stepper, each price a row pressed to choose it (the delivered cost large,
   the price as quoted small under it), and «إعداد العرض» in the dock. The desk's own rows drawn narrow: what the desk
   shows beside a price is under its ▾, and the bar's views and order are a press away ───────── */
@media (max-width: 760px) {
  #screen-pricing > .screen-head { display: none; }
  .p-head h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  .p-theirs { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
  /* the prices first: who and how it stands, the searches, then the item and its prices; what the request says besides -
     its facts and papers, what the last search said, the tips - follows them. A line that carries a button he needs for
     the prices («قدّرها») stays above. */
  #pricing-detail:not(.hidden) { display: flex; flex-direction: column; }
  #pricing-head, #pricing-head .n-notices { display: contents; }
  #pricing-detail .p-head { order: 0; }
  #pricing-detail .n-notice.freight-gaps { order: 1; margin: 0 0 8px; }
  #pricing-actions { order: 2; }
  #pricing-detail .p-stepper { order: 3; }
  #pricing-detail .p-hint { order: 4; }
  #pricing-items { order: 5; }
  #pricing-detail .n-notice:not(.freight-gaps) { order: 6; margin: 0 0 6px; }
  #pricing-tips { order: 7; }
  #pricing-detail .p-more { order: 8; }
  #pricing-detail details.quick-look { order: 9; }
  #pricing-head > .order-panel, #pricing-head > :not(.p-head):not(.p-more):not(.n-notices) { order: 1; }
  .p-more { margin: 0 0 4px; }
  .p-more > summary { min-height: var(--tap); display: flex; align-items: center; color: var(--muted); font-size: 14px; cursor: pointer; }
  .p-more .n-rq { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  /* the reference is in the bar and the state above: neither is said a second time in the fold */
  .p-more .n-rq-top h2, .p-more .n-rq-top > .st-chip { display: none; }
  .p-more .n-rq-top { gap: 8px; }
  .p-more .n-rq-top .n-btn { flex: 1 1 calc(50% - 4px); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .p-more .n-facts { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 14px; }
  .p-more .n-facts .n-btn.link { min-height: var(--tap); padding-inline: 12px; }
  #pricing-head .n-notice { flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
  #pricing-head .n-notice .t { display: block; flex: 1 1 180px; overflow: visible; }
  #pricing-head .n-notice .n-btn { flex: 1 1 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; }

  /* the bar: the two searches in sight, sharing the width; the views and the order behind one press */
  #pricing-actions { position: static; background: none; }
  #pricing-actions .n-bar { padding: 0; margin: 0 0 10px; border: 0; }
  #pricing-actions .n-bar-1 { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 8px; padding: 0; }
  #pricing-actions .n-bar-1 > .n-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  #pricing-actions .n-bar-1 > .n-btn.pri { border-color: var(--line); background: var(--surface); color: var(--ink); }
  #pricing-actions .n-bar-1 > .p-tools { padding: 0; font-size: 18px; }
  #pricing-actions .n-bar-1 > .n-btn { padding-inline: 6px; }
  #pricing-actions .n-bar-1 > .n-views, #pricing-actions .n-bar-1 > .n-sort, #pricing-actions .n-bar-1 > .n-cov { display: none; grid-column: 1 / -1; }
  #pricing-actions .n-bar-1.is-open > .n-views { display: flex; flex-wrap: wrap; gap: 8px; }
  #pricing-actions .n-bar-1.is-open > .n-views button { flex: 1 1 auto; min-height: var(--tap); padding: 4px 14px; font-size: 14px; white-space: nowrap; }
  #pricing-actions .n-bar-1.is-open > .n-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
  #pricing-actions .n-bar-1.is-open > .n-sort select { flex: 1; min-width: 0; }
  #pricing-actions .n-cols { display: none; }
  /* the dock says how many are chosen and leads to the setup: the desk's own bar for that is not drawn a second time */
  #pricing-next { display: none; }
  #pricing-detail details.quick-look > summary { min-height: var(--tap); display: flex; align-items: center; color: var(--accent); font-size: 14px; cursor: pointer; }

  /* one item at a time */
  .p-stepper { display: flex; align-items: center; gap: 6px; padding: 6px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .p-stepper-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
  .p-stepper-mid b { font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
  .p-stepper-mid span { color: var(--muted); font-size: 13px; line-height: 1.5; }
  .p-stepper .p-next .i { transform: scaleX(-1); }
  .p-stepper .icon-btn:disabled { opacity: .35; }
  .p-hint { margin: 0 2px 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
  #pricing-items .n-item.is-off { display: none; }
  #pricing-items .n-item { margin: 0 0 12px; }
  #pricing-items .n-ih { padding: 0 2px 4px; background: none; gap: 4px 8px; }
  #pricing-items .n-ih .no, #pricing-items .n-ih .pn, #pricing-items .n-ih .desc, #pricing-items .n-ih .qty { display: none; }
  #pricing-items .n-ih .cov { margin-inline-start: 0; padding: 1px 10px; font-size: 12px; font-weight: 600; line-height: 1.8; white-space: normal; }
  #pricing-items .n-ih .best { font-size: 13px; line-height: 1.5; }
  #pricing-items .n-al { flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 2px; font-size: 14px; line-height: 1.5; }
  #pricing-items .n-al .t { display: block; flex: 1 1 200px; overflow: visible; }
  #pricing-items .n-al .n-btn { flex: 1 1 calc(50% - 4px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; }
  #pricing-items .n-folds { padding: 0 2px; font-size: 14px; }
  #pricing-items .n-folds summary, #pricing-items .dropped-fold > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
  #pricing-items .n-foldbox p { margin: 0 0 8px; line-height: 1.6; overflow-wrap: anywhere; }
  #pricing-items .n-foldbox a, #pricing-items .dropped-fold a { display: inline-block; padding-block: 13px; }
  #pricing-items .n-grp { padding: 10px 2px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
  #pricing-items .n-grp b { color: var(--muted); }

  /* each price a row: its tick, who it is from and what kind of source, how it matches, where it ships from and when
     it arrives - and at the row's end the delivered cost large, the price as quoted small. Pressed, it is chosen. */
  #pricing-items .n-row.price-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "chk src af" "chk deg pr" "chk ship tg" "det det det"; gap: 2px 10px; align-items: start; padding: 12px 14px 4px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
  #pricing-items .n-row.price-card.primary { border: 1px solid var(--line); padding-inline-start: 14px; }
  #pricing-items .n-row.price-card:has([data-offer]:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  #pricing-items .n-row.price-card > .c-chk { grid-area: chk; align-self: center; padding: 0; }
  #pricing-items .n-row.price-card > .c-chk input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 48px; height: 48px; margin: -6px; border: 0; background: none; cursor: pointer; }
  #pricing-items .n-row.price-card > .c-chk input::before { content: ""; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--surface); color: var(--surface); font-size: 16px; font-weight: 700; line-height: 1; }
  #pricing-items .n-row.price-card > .c-chk input:checked::before { content: "✓"; border-color: var(--accent); background: var(--accent); }
  #pricing-items .n-row.price-card > .c-chk input:disabled::before { opacity: .45; }
  #pricing-items .n-row.price-card > .c-src { grid-area: src; min-width: 0; }
  #pricing-items .n-row.price-card .n-src .l1 { gap: 4px 6px; align-items: center; }
  #pricing-items .n-row.price-card .n-src .nm { font-size: 15px; overflow-wrap: anywhere; }
  #pricing-items .n-row.price-card .n-src .host { font-size: 12px; overflow-wrap: anywhere; }
  #pricing-items .n-row.price-card .n-src .pill, #pricing-items .n-row.price-card .n-src .n-badge, #pricing-items .n-row.price-card .n-src .n-tag { font-size: 12px; line-height: 1.6; }
  #pricing-items .n-row.price-card .n-src .prod, #pricing-items .n-row.price-card .n-src .prod-ar { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #pricing-items .n-row.price-card .n-src .said { font-size: 13px; }
  #pricing-items .n-row.price-card > .c-af { grid-area: af; justify-self: end; max-width: 132px; text-align: end; font-size: 17px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #pricing-items .n-row.price-card > .c-af small { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; white-space: normal; }
  #pricing-items .n-row.price-card > .c-pr { grid-area: pr; justify-self: end; max-width: 150px; text-align: end; line-height: 1.5; }
  #pricing-items .n-row.price-card > .c-pr b { font-size: 13px; font-weight: 500; color: var(--muted); }
  #pricing-items .n-row.price-card > .c-pr small { font-size: 12px; color: var(--muted); white-space: normal; }
  #pricing-items .n-row.price-card > .c-pr .n-pack { font-size: 12px; white-space: normal; }
  #pricing-items .n-row.price-card > .c-deg { grid-area: deg; }
  #pricing-items .n-row.price-card .n-deg { font-size: 12px; line-height: 1.7; padding: 0 9px; }
  #pricing-items .n-row.price-card > .c-rt { display: none; }
  #pricing-items .n-row.price-card > .c-ship { grid-area: ship; align-self: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
  #pricing-items .n-row.price-card > .c-ship .n-btn.link { min-height: var(--tap); }
  #pricing-items .n-row.price-card > .c-tg { grid-area: tg; justify-self: end; align-self: end; }
  #pricing-items .n-row.price-card > .c-tg .n-tg { width: 48px; height: 48px; margin-inline-end: -10px; border-radius: 50%; color: var(--muted); font-size: 16px; }
  #pricing-items .n-row.price-card > .n-det { grid-area: det; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--ink); cursor: default; }
  #pricing-items .n-det .title .name, #pricing-items .n-det .title .price { font-size: 14px; overflow-wrap: anywhere; }
  #pricing-items .n-det .chips { gap: 6px; margin: 8px 0; }
  #pricing-items .n-det .chip { min-height: 0; min-width: 0; padding: 1px 9px; font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
  #pricing-items .n-det .spec, #pricing-items .n-det .match, #pricing-items .n-det .foot { font-size: 13.5px; overflow-wrap: anywhere; }
  #pricing-items .n-det .acts, #pricing-items .n-det .price-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
  #pricing-items .n-det .acts > *, #pricing-items .n-det .price-media > .n-btn { flex: 1 1 calc(50% - 4px); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  #pricing-items .n-det .acts > [data-price-remove] { border-color: var(--red); color: var(--red); }
  #pricing-items .n-det .foot a, #pricing-items .n-det .pm-doc a { display: inline-block; padding-block: 13px; overflow-wrap: anywhere; }
  #pricing-items .n-det .n-btn.link:not(.acts > *):not(.price-media > *) { min-height: var(--tap); padding-inline: 10px; }
  #pricing-items .n-more { padding: 0; }
  #pricing-items .n-more .n-btn { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--muted); }
  #pricing-items .n-slim { padding: 6px 2px; font-size: 13px; color: var(--muted); }
  #pricing-items .own-add .n-btn { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; }
  #pricing-items .dropped-fold { font-size: 14px; }
  #pricing-items .dropped-fold li { margin-bottom: 8px; overflow-wrap: anywhere; }
  .p-find { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; margin: 0 0 8px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
  .p-find .n-btn { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; }
}

/* ───────── the phone (هاتف ٤): the requests in pricing - a card for each, as the approved mockup has it: its reference and
   its state on one line, the customer, how far its items are priced, and the whole card pressed to open it. What the
   desk repeats in every row («افتح تسعيره», «إيقاف», the searches) is on the request's own pricing page ───────── */
@media (max-width: 760px) {
  #pricing-list .n-cols { display: none; }
  #pricing-list > .n-slim { padding: 0 2px 8px; font-size: 13px; color: var(--muted); }
  #pricing-list .n-row.nl.req-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref state" "name name" "meta meta" "when when" "acts acts" "det det" "tg tg"; gap: 2px 8px; align-items: center; padding: 14px 14px 10px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
  #pricing-list .n-row.nl.req-row > .nl-c { padding: 0; min-width: 0; }
  #pricing-list .n-row.nl.req-row > .nl-c0 { display: contents; }
  #pricing-list .req-row .req-no { grid-area: ref; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
  #pricing-list .req-row .req-no .ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; white-space: nowrap; }
  #pricing-list .req-row .req-no .ref:first-child { color: var(--ink); font-weight: 500; }
  #pricing-list .req-row .sub.who { grid-area: name; margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  #pricing-list .n-row.nl.req-row > .nl-c1 { grid-area: state; justify-self: end; }
  #pricing-list .n-row.nl.req-row > .nl-c2 { grid-area: meta; color: var(--muted); font-size: 14px; }
  #pricing-list .n-row.nl.req-row > .nl-c3 { grid-area: when; color: var(--muted); font-size: 13px; }
  #pricing-list .req-row .nl-c2 .sub, #pricing-list .req-row .nl-c3 .sub { display: inline; font-size: inherit; white-space: normal; }
  #pricing-list .req-row .nl-c2 .sub::before, #pricing-list .req-row .nl-c3 .sub::before { content: " · "; }
  #pricing-list .req-row .nl-c3 .sub.urgent { color: var(--red); font-weight: 600; }
  .p-bar { display: block; height: 4px; margin: 8px 0 6px; border-radius: 2px; background: var(--grey-bg); overflow: hidden; }
  .p-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
  #pricing-list .n-row.nl.req-row > .nl-c4 { grid-area: acts; }
  #pricing-list .req-row .st-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  #pricing-list .req-row .st-acts:not(:has(button:not([data-pact="open_pricing"]):not([data-pact="pause"]):not([data-pact="resume"]):not([data-pact="search"]):not([data-pact="search_unpriced"]))) { display: none; }
  #pricing-list .req-row .st-acts button { flex: 1 1 calc(50% - 4px); min-height: var(--tap); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  #pricing-list .req-row .st-acts button.primary { border-color: var(--line); background: var(--surface); color: var(--ink); }
  #pricing-list .req-row .st-acts [data-pact="open_pricing"], #pricing-list .req-row .st-acts [data-pact="pause"], #pricing-list .req-row .st-acts [data-pact="resume"],
  #pricing-list .req-row .st-acts [data-pact="search"], #pricing-list .req-row .st-acts [data-pact="search_unpriced"] { display: none; }
  #pricing-list .n-row.nl.req-row > .c-tg { grid-area: tg; }
  #pricing-list .n-row.nl.req-row > .c-tg:empty { display: none; }
  #pricing-list .n-row.nl.req-row > .c-tg .n-tg { width: 100%; height: auto; min-height: var(--tap); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: 0; }
  #pricing-list .n-row.nl.req-row > .c-tg .n-tg::after { content: attr(title) " ▾"; font-size: 14px; }
  #pricing-list .n-row.nl.req-row > .c-tg .n-tg[aria-expanded="true"]::after { content: attr(title) " ▴"; }
  #pricing-list .n-row.nl.req-row > .nl-det { grid-area: det; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: 14px; }
  #pricing-list .tips-holder { margin-bottom: 8px; }
}

/* ───────── the phone (هاتف ٤): «إعداد العرض» a sheet from the bottom over the request's pricing, as the approved mockup has
   it - what the chosen prices cost and what the customer pays first, the margin by − and +, the currency, the freight
   in its three lines with its mark; what is set once is a fold; «أصدِر العرض» stays under the thumb ───────── */
@media (max-width: 760px) {
  #screen-pricing #pricing-setup:not(.hidden) { position: fixed; inset-inline: 0; bottom: 0; z-index: 28; display: flex; flex-direction: column; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 0 0 100vmax rgba(27, 27, 25, .46), 0 -14px 40px rgba(0, 0, 0, .25); }
  #screen-pricing #pricing-setup:not(.hidden)::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin-bottom: 6px; border-radius: 2px; background: var(--line); }
  body:has(#screen-pricing:not(.hidden) #pricing-setup:not(.hidden)) #phone-bubble { display: none !important; }
  #pricing-setup > * { flex: none; }
  #pricing-setup > :not(section):not(.setup-head):not(.s-sum):not(.revision-box), #pricing-setup .next-bar > span { order: 20; }
  #pricing-setup > p.note:last-child { order: 21; }
  /* what holds «أصدِر العرض» back is said at the top of the sheet, not under everything */
  #pricing-setup > #setup-problems { order: 0; }
  #pricing-setup > #setup-problems:empty { display: none; }
  #pricing-setup .setup-head { align-items: center; flex-wrap: nowrap; padding: 0; margin: 0 0 8px; border: 0; background: none; }
  #pricing-setup .setup-head h2 { font-size: 19px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  #pricing-setup .setup-head .means { display: block; font-size: 13px; color: var(--muted); }
  #pricing-setup .setup-head #setup-back { flex: none; font-size: 0; min-width: var(--tap); border: 0; background: none; color: var(--muted); }
  #pricing-setup .setup-head #setup-back::after { content: "✕"; font-size: 18px; }
  .s-sum { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
  .s-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding-block: 6px; border-bottom: 1px solid var(--line); }
  .s-field > span, .s-total > span { color: var(--muted); font-size: 14px; }
  .s-field b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .s-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 6px; }
  .s-total b { font-size: 24px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: end; }

  /* a section is its heading and its fields on the sheet's own ground: no card inside the sheet; pressed, it folds */
  #pricing-setup section.fld { padding: 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  #pricing-setup section.fld > h4 { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); margin: 0; font-size: 15px; font-weight: 600; cursor: pointer; }
  #pricing-setup section.fld > h4::after { content: "▴"; color: var(--muted); font-size: 13px; }
  #pricing-setup section.fld.is-shut > h4::after { content: "▾"; }
  #pricing-setup section.fld.is-shut > :not(h4) { display: none !important; }
  #pricing-setup section.fld:not(.is-shut) { padding-bottom: 12px; }
  #pricing-setup .setup-row { gap: 8px 12px; margin: 6px 0; font-size: 14px; line-height: 1.5; }
  #pricing-setup .setup-row > span:first-child:not(.fr-name):not(.note) { flex: 1 1 100%; color: var(--muted); }
  #pricing-setup .setup-row label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); }
  #pricing-setup .freight-row > input[type="radio"] { width: 28px; height: 28px; margin: 10px 0; }
  #pricing-setup .setup-row input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 96px; width: auto; max-width: 100% !important; }
  #pricing-setup .hint, #pricing-setup .note { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  #pricing-setup .setup-out { font-size: 14px; }
  #pricing-setup ul.requirements { margin: 0; padding-inline-start: 20px; font-size: 14px; }
  /* the margin: − the number + */
  .s-pm { display: inline-flex; align-items: center; gap: 4px; }
  .s-pm button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
  #pricing-setup .s-pm input { flex: none; width: 76px; text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* the freight's three lines: each an option with its number and its mark */
  #pricing-setup .freight-rows { gap: 8px; }
  #pricing-setup .freight-row { align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
  #pricing-setup .freight-row.marked { border-color: var(--accent); }
  #pricing-setup .freight-row input[type="radio"] { flex: none; accent-color: var(--accent); }
  #pricing-setup .freight-row .fr-name { min-width: 0; flex: 1 1 auto; font-size: 15px; }
  #pricing-setup .freight-row input[type="number"] { flex: 1 1 110px; }
  #pricing-setup .freight-row .follow { flex: 1 1 100%; white-space: nowrap; }
  #pricing-setup .freight-row .hint { flex: 1 1 100%; }
  #pricing-setup .freight-row .hint:empty { display: none; }
  #pricing-setup .freight-calc a { display: inline-block; min-width: var(--tap); padding-block: 13px; text-align: center; }
  #pricing-setup .freight-item { padding-top: 10px; margin-top: 10px; }
  /* the terms: each its name over its field */
  #pricing-setup .setup-term { flex-direction: column; gap: 4px; font-size: 14px; }
  #pricing-setup .setup-term span { min-width: 0; padding-top: 0; }
  #pricing-setup .setup-term textarea, #pricing-setup .setup-free { flex: none; width: 100%; font-size: 16px; }
  #pricing-setup .setup-term .follow { align-self: stretch; white-space: normal; }
  /* the chosen items: rows */
  #pricing-setup .n-row.nl.chosen-item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  #pricing-setup .n-row.nl.chosen-item > .nl-c0 { flex: 1 1 100%; font-size: 15px; overflow-wrap: anywhere; }
  #pricing-setup .n-row.nl.chosen-item > .nl-c { font-size: 13px; padding: 0; }
  #pricing-setup .n-row.nl.chosen-item > .c-tg { margin-inline-start: auto; }
  #pricing-setup .n-row.nl.chosen-item > .c-tg .n-tg { width: 48px; height: 48px; font-size: 16px; }
  #pricing-setup .n-row.nl.chosen-item > .nl-det { flex: 1 1 100%; font-size: 14px; }
  #pricing-setup .line-words label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  #pricing-setup .line-words input { min-width: 64px !important; width: 100%; }
  #pricing-setup #setup-change { width: 100%; margin-top: 8px; }
  /* the prices line by line: rows, not a table */
  #setup-lines { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
  #setup-lines .table-wrap { border: 0; background: none; overflow: visible; }
  #setup-lines table, #setup-lines tbody { display: block; width: 100%; min-width: 0; }
  #setup-lines thead { display: none; }
  #setup-lines tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n desc price" "n cost margin"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #setup-lines td { display: block; padding: 0; border: 0; font-size: 13px; color: var(--muted); min-width: 0; }
  #setup-lines td:nth-child(1) { grid-area: n; font-weight: 600; }
  #setup-lines td:nth-child(2) { grid-area: desc; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
  #setup-lines td:nth-child(3) { grid-area: cost; }
  #setup-lines td:nth-child(3)::before { content: "الكلفة بعد الشحن $ "; }
  #setup-lines td:nth-child(4) { grid-area: margin; text-align: end; }
  #setup-lines td:nth-child(5) { grid-area: price; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
  #setup-lines tr:last-child { display: none; }
  /* «أصدِر العرض» under the thumb; the two previews above it share the width */
  #pricing-setup .next-bar { display: contents; }
  /* the way back is the sheet's own ✕ on the phone (إ٦ أ moved it to the bar's start on the desk) */
  #pricing-setup .next-bar > span:first-child { display: none; }
  #pricing-setup .next-bar > span:nth-child(2) { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  #pricing-setup .next-bar > span:nth-child(2) .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  #pricing-setup .next-bar > span:last-child { position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; flex-direction: column; margin-inline: -16px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  #pricing-setup .setup-head .means { display: none; }
  /* the freight's lines in the mockup's order: what the agent estimated, what a forwarder answered, what he writes */
  #pricing-setup .freight-rows { display: flex; flex-direction: column; }
  #pricing-setup .freight-rows > * { order: 2; }
  #pricing-setup .freight-rows > .freight-row:has([data-freight-mark][value="estimated"]) { order: 1; }
  #pricing-setup .freight-rows > .freight-row:has([data-freight-mark][value="actual"]) { order: 3; }
  #pricing-setup .freight-rows > .freight-row:has([data-freight-mark][value="manual"]) { order: 4; }
  #pricing-setup .freight-rows > .note { order: 5; }
  #pricing-detail .p-tabs { position: static; grid-auto-columns: 1fr; margin: 4px 0 12px; padding: 0; -webkit-mask-image: none; mask-image: none; }
  #pricing-setup .next-bar > span:last-child { align-items: stretch; }
  #pricing-setup .next-bar #setup-issue { width: 100%; }
  #pricing-setup .next-bar #setup-back-2 { display: none; }
  #pricing-setup .next-bar #setup-issue { flex: none; min-height: var(--tap); border-radius: 12px; font-size: 16px; font-weight: 600; }
  #pricing-setup > p.note:last-child { margin: 8px 0 0; }
  #pricing-setup .revision-box { border-radius: 12px; font-size: 14px; }
  #pricing-setup .revision-box .follow { flex: 1 1 calc(50% - 4px); }
  #pricing-setup .status-line { font-size: 14px; }
}

@media (max-width: 760px) {
  dialog#detail.is-page .request-items tr.to-prices { cursor: pointer; }
  dialog#detail.is-page .request-items tr.to-prices:active { background: var(--grey-bg); }
}

/* ───────── the phone (هاتف ٤): what the floor measured on the pricing screens and their windows ───────── */
@media (max-width: 760px) {
  .p-hint, #pricing-items .n-foldbox p { font-size: 15px; }
  /* a choice in a window - a radio or a tick with its words - is pressed on its whole line */
  dialog#detail label:has(> input[type="radio"]), dialog#detail label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
  /* a window's own action stays in sight while its form is scrolled */
  dialog#detail:not(.is-page) .dialog-actions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px -16px 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  #pricing-setup .setup-row input:not([type="checkbox"]):not([type="radio"]) { min-width: 64px; }
  dialog#detail:not(.is-page) .dialog-actions > button { flex: 1 1 calc(50% - 4px); min-height: var(--tap); border-radius: 12px; }
  dialog#detail:not(.is-page) > form:last-child { margin-top: 8px; }
  dialog#detail:not(.is-page) > form:last-child button { width: 100%; }
  dialog#detail p.note { font-size: 15px; line-height: 1.6; }
  dialog#detail fieldset { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
  dialog#detail legend { padding-inline: 6px; color: var(--muted); font-size: 14px; }
  /* the sheet of the setup */
  #pricing-setup .setup-head h2 { line-height: 1.5; }
  .s-total b { line-height: 1.5; }
  .s-pm { gap: 8px; }
  .s-pm button { flex: none; }
  #pricing-setup .setup-row .s-pm input { flex: none; width: 76px; }
  #pricing-setup .setup-head #setup-back { font-size: 18px; }
  #pricing-setup .setup-head #setup-back::after { content: none; }
}

@media (max-width: 760px) {
  /* a field in a window: its name over it, its note under it */
  dialog#detail form label:not(:has(> input[type="radio"])):not(:has(> input[type="checkbox"])) { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
  dialog#detail form label > input:not([type="radio"]):not([type="checkbox"]), dialog#detail form label > select, dialog#detail form label > textarea { width: 100%; color: var(--ink); }
  dialog#detail form label > .note { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 760px) {
  /* هاتف ٤: what the whole set measured */
  #pricing-actions .n-bar-1.is-open > .n-sort select { font-size: 16px; }
  #pricing-items .n-folds { gap: 8px 16px; }
  #pricing-items .dropped-fold { margin-top: 8px; }
  #pricing-items .dropped-fold p.note { font-size: 15px; }
  #pricing-items a, #pricing-head a:not(.n-btn), #pricing-setup a { color: var(--accent); }
  #pricing-items .dropped-fold li > button { width: 100%; margin-top: 6px; }
  .p-head h2 { line-height: 1.5; }
  /* an item with no price says so once, with its search */
  #pricing-items .n-item:has(.p-find) > .n-slim:not(.own-add) { display: none; }
  .phone-dock .primary:disabled { border-color: var(--line); background: var(--grey-bg); color: var(--muted); }
  #pricing-items .dropped-fold li > button { white-space: normal; }
}

/* a cost said inside a button is the button's own size (the phone lets it take a second line) */
.follow small.cost { font-size: inherit; }

/* ───────── the phone (هاتف ٤): what the fresh eyes found - the price's row as the mockup has it (who and what kind of
   source, one line of how it matches and where it ships from, the cost with the price as quoted right under it), the
   prices in the first screen, a details row that is seen and pressed, fields that follow the theme ───────── */
@media (max-width: 760px) {
  /* the row: two columns and three short lines; the product's own words, its badges and its host are under «التفاصيل» */
  #pricing-items .n-row.price-card { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "chk src af" "chk deg pr" "chk ship ship" "tg tg tg" "det det det"; gap: 0 10px; padding: 12px 14px 0; }
  #pricing-items .n-row.price-card > .c-chk { grid-row: 1 / 4; }
  #pricing-items .n-row.price-card .n-src .prod, #pricing-items .n-row.price-card .n-src .prod-ar, #pricing-items .n-row.price-card .n-src .said,
  #pricing-items .n-row.price-card .n-src .host, #pricing-items .n-row.price-card .n-src .n-tag, #pricing-items .n-row.price-card .n-src .n-badge,
  #pricing-items .n-row.price-card .n-src .pill.channel { display: none; }
  /* a name reads in its own direction: «Network Technologies Inc.» keeps its full stop at its end */
  #pricing-items .n-row.price-card .n-src .nm, #pricing-items .n-det .title .name, #pricing-items .n-foldbox p, #pricing-items .dropped-fold li b { unicode-bidi: plaintext; }
  #pricing-items .n-row.price-card > .c-af { align-self: start; }
  #pricing-items .n-row.price-card > .c-pr { align-self: start; }
  #pricing-items .n-row.price-card > .c-deg { align-self: center; padding-block: 2px; }
  #pricing-items .n-row.price-card > .c-ship { padding-bottom: 6px; }
  #pricing-items .n-row.price-card > .c-ship .ring { display: none; }
  #pricing-items .n-row.price-card > .c-ship br + * , #pricing-items .n-row.price-card > .c-ship { overflow-wrap: anywhere; }
  /* «التفاصيل ▾»: a row the width of the card, seen and pressed - not a triangle in a corner */
  #pricing-items .n-row.price-card > .c-tg { grid-area: tg; justify-self: stretch; align-self: stretch; margin-inline: -14px; border-top: 1px solid var(--line); }
  #pricing-items .n-row.price-card > .c-tg .n-tg { width: 100%; height: auto; min-height: var(--tap); margin: 0; border-radius: 0 0 14px 14px; color: var(--muted); font-size: 0; }
  #pricing-items .n-row.price-card > .c-tg .n-tg::after { content: attr(title) " ▾"; font-size: 14px; }
  #pricing-items .n-row.price-card > .c-tg .n-tg[aria-expanded="true"]::after { content: attr(title) " ▴"; }
  #pricing-items .n-row.price-card > .n-det { margin: 0 0 12px; }

  /* the prices in the first screen: the item's own lines - how it is covered, what the customer asked, «عن البند» - and
     the sentence that explains the numbers follow its prices; what needs his answer (an amber line with its buttons)
     stays above them */
  #pricing-items .n-item:not(.is-off) { display: flex; flex-direction: column; }
  #pricing-items .n-item > .n-ih, #pricing-items .n-item > .n-al:not(.amber), #pricing-items .n-item > .n-folds { order: 5; }
  #pricing-items .n-item > .dropped-fold { order: 6; }
  #pricing-detail .p-hint { order: 6; margin-top: 4px; }
  #pricing-detail .n-notice:not(.freight-gaps) { order: 7; }
  #pricing-tips { order: 8; }
  #pricing-detail .p-more { order: 9; }
  #pricing-detail details.quick-look { order: 10; }
  #pricing-detail { padding-bottom: 72px; }
  /* the freight's line: its words in one line (a press opens them), its button beside them */
  #pricing-head .n-notice.freight-gaps { flex-wrap: nowrap; align-items: center; padding: 6px 6px 6px 12px; padding-inline: 12px 6px; }
  #pricing-head .n-notice.freight-gaps .t { flex: 1 1 0; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  #pricing-head .n-notice.freight-gaps.open { flex-wrap: wrap; }
  #pricing-head .n-notice.freight-gaps.open .t { display: block; flex: 1 1 100%; }
  #pricing-head .n-notice.freight-gaps .n-btn { flex: none; white-space: nowrap; }
  /* what is missing shows nothing: the sources that have no price are not listed, and the last search is said once */
  #pricing-items .n-item > .n-slim:not(.own-add) { display: none; }
  #pricing-tips .tips-last { display: none; }
  #pricing-list > .n-slim { display: none; }
  #pricing-items .dropped-fold > summary { background: none; padding-inline: 2px; }
  /* which view is on */
  #pricing-actions .n-views button.is-on { border-color: transparent; background: var(--ink); color: var(--bg); }

  /* a window's ✕ is a quiet button, the same on every sheet; and one way out besides it, not two */
  #detail .dialog-x { border: 0; background: none; color: var(--muted); }
  #detail .dialog-x:focus:not(:focus-visible) { outline: 0; }
  dialog#detail:not(.is-page):has(.dialog-actions) > form:last-child { display: none; }
  /* a tick and its words in a window: the tick keeps its size, a note under the words takes the line */
  dialog#detail label > input[type="radio"], dialog#detail label > input[type="checkbox"] { flex: none; width: 22px; height: 22px; }
  dialog#detail label:has(> input[type="checkbox"]), dialog#detail label:has(> input[type="radio"]) { flex-wrap: wrap; }
  dialog#detail label:has(> input) > .note { flex: 1 1 100%; padding-inline-start: 32px; }
  /* the platform's own green on every tick and mark */
  input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }

  /* the setup's fields follow the theme: no white box in the dark */
  #pricing-setup input:not([type="checkbox"]):not([type="radio"]), #pricing-setup select, #pricing-setup textarea,
  dialog#detail input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), dialog#detail select, dialog#detail textarea { padding-inline: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
  #pricing-setup input::placeholder, dialog#detail input::placeholder, dialog#detail textarea::placeholder { color: var(--muted); opacity: 1; }
  #pricing-setup .setup-head h2 { font-weight: 700; }
  #pricing-setup #setup-issue:disabled { border-color: var(--line); background: var(--grey-bg); color: var(--muted); }
  #pricing-setup #setup-problems .status-line { cursor: pointer; }
  /* the stepper's name on its own line, in its own direction */
  .p-stepper-mid .p-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
  .p-stepper-mid b { font-size: 13px; font-weight: 500; color: var(--muted); }
  /* an item's state on the request's page: a long source's name wraps inside its pill */
  dialog#detail.is-page .item-state bdi { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  #pricing-items .n-grp { padding-top: 2px; }
}

@media (max-width: 760px) {
  #pricing-items .ship-from-pick { gap: 8px; min-width: 0; }
  #pricing-items .n-more { margin-bottom: 8px; }
  #pricing-items .n-foldbox a, #pricing-items .dropped-fold a { display: inline-flex; align-items: center; min-height: 48px; padding-block: 0; }
}

/* ───────── the phone (تطبيق الهاتف، هاتف ٥): our quotations - a card for each, as the approved mockup has it (its number
   and its state on one line, the customer, how long it is valid and its total), pressed whole; the press raises the
   quotation's sheet with its lines, its cautions and every button of the desk's row ───────── */
@media (max-width: 760px) {
  #screen-quotations .table-wrap { border: 0; background: none; overflow: visible; }
  #screen-quotations .n-table, #screen-quotations .n-table tbody { display: block; width: 100%; min-width: 0; }
  #screen-quotations .n-table thead { display: none; }
  #screen-quotations .n-table tr { display: block; padding: 0; border: 0; }
  #screen-quotations .n-table tr[data-nl] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref state" "name name" "until total"; gap: 2px 8px; align-items: center; padding: 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
  #screen-quotations .n-table tr[data-nl]:active { background: var(--grey-bg); }
  #screen-quotations .n-table tr[data-nl] > td { display: none; min-width: 0; padding: 0; border: 0; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(1) { display: block; grid-area: ref; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; font-weight: 500; direction: ltr; text-align: end; overflow-wrap: anywhere; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(1) .st-sub { display: none; }
  #screen-quotations .n-table tr[data-nl] > td.q-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; grid-area: state; }
  #screen-quotations .n-table tr[data-nl] > td.q-state .st-sub { display: none; }
  #screen-quotations .n-table tr[data-nl] > td.q-customer { display: block; grid-area: name; margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(5) { display: block; grid-area: until; align-self: end; color: var(--muted); font-size: 13px; line-height: 1.5; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(5)::before { content: "صالحٌ حتى "; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(5) .st-sub { display: inline; font-size: inherit; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(5) .st-sub::before { content: " · "; }
  #screen-quotations .n-table tr[data-nl] > td.q-value { display: block; grid-area: total; margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
  /* the row under a card holds the desk's buttons: on the phone they are pressed from the sheet */
  #screen-quotations .n-table tr.nl-det-row { display: none !important; }
  #screen-quotations .n-table tr.empty td, #screen-quotations .n-table tr.n-more-row td { display: block; padding: 0; border: 0; }
  #screen-quotations .n-more-row .n-btn { width: 100%; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }

  /* «مجدول»: each waiting quotation a card - what it is and when, and its three buttons sharing the width */
  #scheduled-sends h2 { margin: 0 2px 8px !important; color: var(--muted); font-size: 12px !important; font-weight: 600; }
  #scheduled-sends .scheduled-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; margin: 0 0 12px; border: 1px solid var(--line); border-inline-start: 4px solid var(--p-blue-edge); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.6; }
  #scheduled-sends .scheduled-row .sched-says { flex: 1 1 100%; overflow-wrap: anywhere; }
  #scheduled-sends .scheduled-row .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  #scheduled-sends .scheduled-row .follow.primary { flex-basis: 100%; }
  /* «عروضٌ جهّزها الوكيل»: a heading and its drafts on the page's ground, each a fold */
  #agent-prepared .agent-prepared { padding: 0; margin: 0 0 12px; border: 0; background: none; }
  #agent-prepared .agent-prepared h3 { margin: 0 2px 6px; font-size: 15px; }
  #agent-prepared .prep-q { padding: 4px 14px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  #agent-prepared .prep-q > summary { min-height: var(--tap); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-block: 8px; font-size: 14px; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
  #agent-prepared .prep-q .n-btn { width: 100%; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; color: var(--ink); }
  #agent-prepared .prep-items { padding-inline-start: 18px; font-size: 14px; overflow-wrap: anywhere; }

  /* the quotation's sheet */
  .q-sheet-total { align-items: baseline; padding: 0; margin: 4px 0 6px; }
  .q-sheet-total .ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
  .q-lines { display: grid; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .q-lines:has(> .note), .q-lines:has(> .n-slim) { border: 0; }
  .q-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
  .q-line:first-child { border-top: 0; }
  .q-line-what { min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .q-line-what small, .q-line-sum small { color: var(--muted); font-size: 13px; font-weight: 400; }
  .q-line-sum { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
  .q-line-sum b { font-size: 15px; font-weight: 600; }
  .q-caution { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--yellow-bg); color: var(--yellow); }
  .q-facts { display: grid; margin: 8px 0; }
  .q-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
  .q-facts dt { flex: none; color: var(--muted); }
  .q-facts dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
  .q-sheet-follow { width: 100%; margin: 4px 0 8px; }
  dialog#detail .q-record { margin: 8px 0; font-size: 14px; }
  dialog#detail .q-record > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
  dialog#detail .q-record li { margin-bottom: 8px; overflow-wrap: anywhere; }
  dialog#detail .q-sheet-acts > button.primary { flex-basis: 100%; order: -1; }
}

@media (max-width: 760px) {
  #screen-quotations .n-table tr[data-nl] { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ref state" "name name" "until total"; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(1) { white-space: nowrap; }
  #screen-quotations .n-table tr[data-nl] > td.q-state .st-chip { flex: none; }
  #screen-quotations .n-table tr[data-nl] > td.q-customer { width: auto; max-width: none; white-space: normal; }
  #screen-quotations .n-table tr[data-nl] > td.q-value { grid-column: 1 / -1; grid-row: 4; justify-self: end; margin-top: 0; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}

@media (max-width: 760px) {
  #screen-quotations .n-table tr[data-nl] > td { width: auto; max-width: none; }
  #screen-quotations .n-table tr[data-nl] > td:nth-child(1) { overflow-wrap: normal; }
  #screen-quotations .n-table tr[data-nl] > td.q-state { justify-self: stretch; }
}

@media (max-width: 760px) {
  #screen-quotations .n-table tr[data-nl] > td.q-customer { text-align: match-parent; }
}

/* ───────── the phone (هاتف ٥): purchase orders, what customers owe, the inquiries - not in the mockup, built in its
   pattern: a card for each record (what it is and its state, whom it is with, a line or two of what matters, its amount),
   pressed whole to its sheet ───────── */
@media (max-width: 760px) {
  #screen-orders .table-wrap, #screen-collections .table-wrap, #screen-inquiries .table-wrap { border: 0; background: none; overflow: visible; }
  #screen-orders .n-table, #screen-orders .n-table tbody, #screen-collections .n-table, #screen-collections .n-table tbody,
  #screen-inquiries .n-table, #screen-inquiries .n-table tbody { display: block; width: 100%; min-width: 0; }
  #screen-orders .n-table thead, #screen-collections .n-table thead, #screen-inquiries .n-table thead { display: none; }
  .n-table tr.pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
  .n-table tr.pc:active { background: var(--grey-bg); }
  .n-table tr.pc > td { display: none; width: auto; max-width: none; min-width: 0; padding: 0; border: 0; }
  .n-table tr.pc > td.pc-top { display: block; grid-column: 1; grid-row: 1; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .n-table tr.pc > td.pc-top .st-sub { display: inline; font-size: 13px; }
  .n-table tr.pc > td.pc-top .st-sub::before { content: " · "; }
  .n-table tr.pc > td.pc-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; grid-column: 2; grid-row: 1; }
  .n-table tr.pc > td.pc-state .st-chip { flex: none; }
  .n-table tr.pc > td.pc-state .st-sub { display: none; }
  .n-table tr.pc > td.pc-main { display: block; grid-column: 1 / -1; margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; text-align: match-parent; }
  .n-table tr.pc > td.pc-main .st-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
  .n-table tr.pc > td.pc-line { display: block; grid-column: 1 / -1; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .n-table tr.pc > td.pc-line::before { content: attr(data-label) ": "; }
  .n-table tr.pc > td.pc-line .st-sub { display: inline; font-size: inherit; }
  .n-table tr.pc > td.pc-line .st-sub::before { content: " · "; }
  .n-table tr.pc > td.pc-line .st-sub.late { color: var(--red); font-weight: 600; }
  .n-table tr.pc > td.pc-line a { color: var(--accent); }
  .n-table tr.pc > td.pc-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; grid-column: 1 / -1; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .n-table tr.pc > td.pc-sum::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 400; }
  .n-table tr.pc > td.is-absent { display: none; }
  #screen-orders .n-table tr.nl-det-row, #screen-collections .n-table tr.nl-det-row, #screen-inquiries .n-table tr.nl-det-row { display: none !important; }
  #screen-orders .n-table tr.empty, #screen-collections .n-table tr.empty, #screen-inquiries .n-table tr.empty, #screen-quotations .n-table tr.empty,
  #screen-orders .n-table tr.n-more-row, #screen-collections .n-table tr.n-more-row, #screen-inquiries .n-table tr.n-more-row { display: block; }
  #screen-orders .n-table tr.empty td, #screen-collections .n-table tr.empty td, #screen-inquiries .n-table tr.empty td,
  #screen-orders .n-table tr.n-more-row td, #screen-collections .n-table tr.n-more-row td, #screen-inquiries .n-table tr.n-more-row td { display: block; padding: 0; border: 0; }
  .n-table tr.empty .n-slim { padding: 24px 2px; justify-content: center; font-size: 14px; color: var(--muted); }
  .n-more-row .n-btn { width: 100%; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }

  /* the filters above a list: quiet chips in one row that slides, the chosen one filled - as the requests have them */
  .inq-filters { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -16px 10px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .inq-filters .st-chip { flex: none; min-height: var(--tap); min-width: 56px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5; opacity: 1; box-shadow: none; outline: 0; white-space: nowrap; }
  .inq-filters .st-chip.on { border-color: transparent; background: var(--ink); color: var(--bg); }
  .inq-filters .st-chip b:empty { display: none; }
  /* what customers owe, summed: rows of a small list */
  #screen-collections > p.note { margin: 0 2px 8px; font-size: 13px; line-height: 1.5; }
  .totals-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
  .totals-bar > span { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .totals-bar > span b { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  /* a record's sheet */
  .pc-sheet-title { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
  .pc-sheet-title .st-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
  dialog#detail .q-facts dd .st-sub { display: block; font-size: 13px; color: var(--muted); }
  dialog#detail .q-facts dd a { display: inline-block; padding-block: 6px; }
}

@media (max-width: 760px) {
  /* a window's title keeps clear of its ✕; the ✕ is quiet, its focus seen and not framed in black */
  dialog#detail:not(.is-page) #detail-body > h2:first-child { padding-inline-end: 52px; }
  #detail .dialog-x:focus-visible { outline: 2px solid var(--line); outline-offset: -4px; }
  #collections-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .n-table tr.pc > td.pc-nohead .st-sub::before { content: none; }
  .n-table tr.pc .pc-unit { font-size: 15px; font-weight: 600; }
  dialog#detail .table-wrap { border: 0; background: none; overflow: visible; }
}

/* ───────── the phone (هاتف ٥): an order after the win, in the pricing place - what to buy, line by line. The panel is on
   the page's ground with its colour at its edge (blue to buy, green once bought); each line a card; what a line warns of
   is its words and its buttons, not a box inside the card ───────── */
@media (max-width: 760px) {
  #screen-pricing.is-repricing, #screen-pricing.is-bought { background: none; }
  .order-panel { padding: 0 12px 0 0; padding-inline: 12px 0; margin: 0 0 12px; border: 0; border-inline-start: 4px solid var(--st-blue, #1d5fa8); border-radius: 0; background: none; }
  .order-panel.is-bought { border-inline-start-color: var(--st-green, #1f6b3a); }
  .order-panel h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
  .order-panel > p.note { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
  .order-panel .revision-box { padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
  .order-panel .revision-box > .note { font-size: 13.5px; }
  .order-panel .rise-box { padding: 0; margin: 8px 0; border: 0; border-radius: 0; background: none; color: var(--yellow); font-size: 14px; line-height: 1.6; }
  .order-panel > .rise-box { padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 15px; }
  .order-panel .rise-box > div, .order-panel .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .order-panel .rise-box .follow, .order-panel .dialog-actions .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  .order-panel .dialog-actions .follow.primary { flex-basis: 100%; order: -1; }
  .order-panel .dialog-actions .note { flex: 1 1 100%; font-size: 13px; }
  .order-panel .setup-row { font-size: 14px; }
  .order-panel .setup-row .follow { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  /* هاتف ٥: what the floor measured */
  .inq-filters .st-chip:not(.on), .inq-filters .st-chip:not(.on) span, .inq-filters .st-chip:not(.on) b { color: var(--muted); opacity: 1; }
  .inq-filters .st-chip.on span, .inq-filters .st-chip.on b { color: inherit; }
  #screen-collections > p.note { font-size: 15px; }
  /* a card is pressed whole: what its lines name (a request, an invoice) is opened from its sheet */
  .n-table tr.pc > td.pc-line a, .n-table tr.pc > td.pc-top a, .n-table tr.pc > td.pc-main a { pointer-events: none; color: inherit; text-decoration: none; }
  dialog#detail input[type="file"] { min-height: var(--tap); padding-block: 10px; }
  dialog#detail .q-facts dd a.follow, dialog#detail .q-record a.follow { margin: 4px 0; }
  dialog#detail .q-record + .dialog-actions, dialog#detail .q-sheet-follow + .q-record { margin-top: 12px; }
  /* two buttons side by side in a window keep a thumb's gap */
  dialog#detail .n-det, dialog#detail .line-choice, dialog#detail .setup-row { gap: 8px; }
  dialog#detail .line-choice { display: flex; flex-wrap: wrap; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
  dialog#detail button + button, dialog#detail a.follow + button, dialog#detail input + button { margin-inline-start: 8px; }
  dialog#detail .dialog-actions > button + button, dialog#detail .q-sheet-acts > button + button { margin-inline-start: 0; }
}

@media (max-width: 760px) {
  .inq-filters button.st-chip:not(.on) { opacity: 1; }
  .inq-filters button.st-chip.on { outline: 0; }
  dialog#detail .q-facts dd a:not(.follow) { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0; }
}

@media (max-width: 760px) {
  dialog#detail form label > input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), dialog#detail form label > select { width: 100% !important; max-width: 100% !important; }
  dialog#detail p.note.amber:not(:empty), #pricing-setup .note.amber:not(:empty) { padding: 10px 12px; border-radius: 12px; }
}

/* ───────── the phone (هاتف ٥): what the fresh eyes found ───────── */
@media (max-width: 760px) {
  /* a quotation that waits for its time says so on its own card (its pill); what is done with it is in its sheet -
     no second card for it above the list, no button on a card */
  #scheduled-sends { display: none; }
  #screen-quotations .n-table tr[data-nl] > td.q-value { font-size: 24px; font-weight: 700; }
  /* a name reads from the start of its line whatever its letters */
  #screen-quotations .n-table tr[data-nl] > td.q-customer, .n-table tr.pc > td.pc-main, .q-line-what > bdi, .pc-sheet-title { text-align: -webkit-match-parent; text-align: match-parent; }
  .n-table tr.pc > td.pc-sum .pc-amount { font-variant-numeric: tabular-nums; }
  /* a window's ✕: a quiet round button, 48 both ways, the same on every sheet */
  #detail .dialog-x { width: var(--tap); height: var(--tap); min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: 50%; background: none; color: var(--muted); outline: 0; }
  #detail .dialog-x:focus-visible { outline: 0; background: var(--grey-bg); }
  dialog#detail .dialog-actions .primary { font-weight: 600; }
  dialog#detail .q-sheet-acts:empty { display: none; }
  dialog#detail .q-record > summary::after { content: " ▾"; color: var(--muted); }
  dialog#detail .q-record[open] > summary::after { content: " ▴"; }
  /* a line of a purchase order being recorded: its name with its tick, then its quantity and its price each beside its
     own word - at any width */
  dialog#detail .line-choice > span:first-child { flex: 1 1 100%; }
  dialog#detail .line-choice > span:last-child { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
  dialog#detail .line-choice > span:last-child input { width: 100%; }
  /* the matching: a line that matches is not a warning; each difference's two buttons share the width */
  dialog#detail .revision-box { padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; }
  dialog#detail .setup-row { display: flex; flex-wrap: wrap; align-items: center; }
  dialog#detail .setup-row > span:first-child { flex: 1 1 100%; }
  dialog#detail .setup-row .follow { flex: 1 1 calc(50% - 4px); white-space: nowrap; margin-inline-start: 0; }
  /* a file is chosen by a button a thumb can press, in the platform's own look */
  dialog#detail input[type="file"] { width: 100%; padding: 0; border: 0; background: none; font-size: 14px; color: var(--muted); }
  dialog#detail input[type="file"]::file-selector-button { min-height: var(--tap); margin-inline-end: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
  dialog#detail form { padding-bottom: 4px; }
  /* the order's buy panel: a line's other ways are a press away, and what is said twice on the desk is said once */
  .order-panel .revision-box:not(.is-open) .rise-box > div, .order-panel .revision-box:not(.is-open) .dialog-actions .follow:not(.primary), .order-panel .revision-box:not(.is-open) .dialog-actions .note { display: none; }
  .order-panel .revision-box:has(.rise-box [data-order-decision="other_supplier"]) .dialog-actions [data-order-decision="other_supplier"] { display: none; }
  .order-panel .p-order-more { width: 100%; margin-top: 8px; border: 0; background: none; color: var(--muted); font-weight: 500; }
  .order-panel .q-date, .q-date { white-space: nowrap; }
  /* the freight's line: two lines of its words, so the number that matters is in sight */
  #pricing-head .n-notice.freight-gaps .t { -webkit-line-clamp: 2; }
  /* the bar's name stays on one line */
  .phone-title.is-long { font-size: 15px; }
}
/* a date field's own controls follow the theme */
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select { color-scheme: dark; } }
@media (max-width: 760px) { :root[data-theme="dark"] input, :root[data-theme="dark"] select { color-scheme: dark; } }

@media (max-width: 760px) {
  dialog#detail .setup-row > span:has(> .follow) { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  dialog#detail .setup-row > span:has(> .follow) > .follow { flex: 1 1 calc(50% - 4px); margin-inline-start: 0; }
}

@media (max-width: 760px) {
  dialog#detail label:has(> input[type="radio"]), dialog#detail label:has(> input[type="checkbox"]) { min-width: var(--tap); }
}

/* ───────── the phone (تطبيق الهاتف، هاتف ٦): suppliers, customers, the mail, the settings and the agent's memory - not
   in the mockup, built in its pattern: a record a card or a row (its name, a line of what matters, its state as a
   pill), what the desk shows beside it under «التفاصيل ▾», every pressed thing 48 both ways, a field 16px, nothing wider
   than the screen ───────── */
@media (max-width: 760px) {
  /* what every screen of the stage shares */
  .screen p.note, #screen-settings p.note { font-size: 15px; line-height: 1.6; }
  .sub, .lock, .sw .lbl, .set-block .sub, .nl-c .sub { font-size: 12px; }
  textarea { font-size: 16px !important; }
  .screen summary, #screen-settings summary { min-height: var(--tap); display: flex; align-items: center; gap: 6px; cursor: pointer; }
  label.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding-inline: 2px; font-size: 14px; }
  .pill.warn { background: var(--yellow-bg); color: var(--yellow); }
  .sp-hint, .sp-k, .sp-view.quiet, .sp-why { color: var(--muted); }
  /* one record's line: «التفاصيل ▾» is a row at its foot, the width of the card, seen and pressed */
  .n-row.nl { padding: 12px 14px 0; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .n-row.nl > .nl-c { flex: 1 1 100%; padding: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .n-row.nl > .nl-c0 { font-size: 15px; }
  .n-row.nl > .nl-c:empty { display: none; }
  .n-row.nl > .nl-c .sub { display: block; white-space: normal; color: var(--muted); }
  .n-row.nl > .c-tg { flex: 1 1 100%; margin: 8px -14px 0; border-top: 1px solid var(--line); }
  .n-row.nl > .c-tg:empty { border: 0; margin: 0; padding-bottom: 12px; }
  .n-row.nl > .c-tg .n-tg { width: 100%; height: auto; min-height: var(--tap); border-radius: 0 0 14px 14px; color: var(--muted); font-size: 0; }
  .n-row.nl > .c-tg .n-tg::after { content: attr(title) " ▾"; font-size: 14px; }
  .n-row.nl > .c-tg .n-tg[aria-expanded="true"]::after { content: attr(title) " ▴"; }
  .n-row.nl > .nl-det { flex: 1 1 100%; margin: 0 0 12px; padding: 10px 0 0; border-radius: 0; background: none; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
  .n-row.nl > .nl-det .follow, .n-row.nl > .nl-det .sp-b, .n-row.nl > .nl-det .sp-view { margin: 4px 0; }
  /* the decisions' cards and the pricing list's cards have their own shape (stages 2 and 4): the rule above is not theirs */
  #pricing-list .n-row.nl.req-row > .c-tg { margin: 4px 0 0; border: 0; }
  #pricing-setup .n-row.nl.chosen-item { padding: 8px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  #pricing-setup .n-row.nl.chosen-item > .c-tg { flex: none; margin: 0; margin-inline-start: auto; border: 0; }
  #pricing-setup .n-row.nl.chosen-item > .c-tg .n-tg::after { content: none; }
  #arrived-list .n-row.nl.arrived-line { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }

  /* the suppliers' place: its branches a row of chips that slides; its buttons and its question pressed by a thumb */
  .sp-tabs { flex-wrap: nowrap; gap: 8px; margin: 0 -16px 12px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .sp-tab { flex: none; min-height: var(--tap); padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .sp-tab.is-on { border-color: transparent; background: var(--ink); color: var(--bg); }
  .sp-tab b { font-weight: 600; }
  .sp-box { padding: 0; margin: 0 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sp-ask { gap: 8px; margin-bottom: 10px; }
  .sp-ask .sp-lbl { flex: 1 1 100%; color: var(--muted); font-size: 14px; }
  .sp-ask input:not([type="checkbox"]):not([type="date"]), .sp-ask select { flex: 1 1 160px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding-inline: 12px; }
  .sp-ask label:not(.check) { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 13px; }
  .sp-ask input[type="date"] { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding-inline: 12px; }
  .sp-b, .sp-view { min-height: var(--tap); min-width: var(--tap); padding: 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
  .sp-b.go { border-color: var(--accent); background: var(--accent); color: var(--surface); }
  .sp-view.quiet { font-weight: 500; }
  .sp-add .sp-b { width: 100%; }
  .sp-name { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: start; overflow-wrap: anywhere; }
  .sp-line { display: flex; flex-direction: column; gap: 6px; }
  .sp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .sp-acts > * { flex: 1 1 calc(50% - 4px); }
  .sp-sub, .sp-atoms { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .sp-pill { font-size: 12px; line-height: 1.7; }
  .sp-card { padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow-wrap: anywhere; }
  .sp-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
  /* a table of the stage is rows: each record a card, each cell a line */
  .sp-table tr { padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); gap: 4px 10px; }
  .sp-table td { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .sp-table td:first-child { font-size: 15px; font-weight: 600; }
  .sp-table td a:not(.follow) { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); text-decoration: underline; }
  .sp-atoms { gap: 8px; }
  .sp-a { min-height: var(--tap); padding: 4px 12px; font-size: 13px; }

  /* the settings: its tabs a row that slides; a setting is its name, its value and its buttons on the page's ground */
  .set-tabs { flex-wrap: nowrap; gap: 8px; margin: 0 -16px 12px; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
  .set-tabs button, [data-set-tab] { flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding-inline: 14px; white-space: nowrap; }
  .set-tabs button.is-on, [data-set-tab].is-on, .set-tabs button.on, [data-set-tab].on { border-color: transparent; background: var(--ink); color: var(--bg); }
  #screen-settings { overflow-wrap: anywhere; }
  #screen-settings table, #screen-settings tbody { display: block; width: 100%; min-width: 0; }
  #screen-settings thead { display: none; }
  #screen-settings tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #screen-settings td { display: block; min-width: 0; padding: 0; border: 0; }
  #screen-settings td:first-child { flex: 1 1 100%; font-weight: 600; }
  #screen-settings .set-block { padding: 12px 0; margin: 0 0 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  #screen-settings .set-block .setting { padding: 10px 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  #screen-settings input:not([type="checkbox"]):not([type="radio"]), #screen-settings select, #screen-settings textarea { max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding-inline: 12px; }
  #screen-settings textarea { width: 100%; }
  #screen-settings .follow, #screen-settings .chip { margin: 2px 0; }
  #screen-settings .chip { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); padding-inline: 14px; }
  #screen-settings .chip.on { border-color: transparent; background: var(--ink); color: var(--bg); }
  #screen-settings .chip + .chip, #screen-settings .follow + .follow, #screen-settings input + .follow, #screen-settings input + input { margin-inline-start: 8px; }
  /* a switch: its own small shape, pressed on a thumb's square */
  /* the agent's switches: each screen a fold, each key a row with its switch at its start */
  #agent-q { width: 100%; }
  .ag-head { flex-wrap: wrap; min-height: var(--tap); gap: 8px 10px; }
  .ag-head .n-tg { width: var(--tap); height: var(--tap); font-size: 16px; }
  .ag-act { gap: 4px 12px; padding: 10px 0; font-size: 14px; line-height: 1.6; }
  .ag-list li { flex-wrap: nowrap; font-size: 14px; }
  .ag-list li > :not(.sw) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .ag-list li > .sw { flex: none; }

  /* the mail: its boxes a row of chips that slides; a letter a card - who, what it is about, its outcome, when */
  #screen-mail .sp-tabs { margin-bottom: 8px; }
  #screen-mail select { width: 100%; max-width: 100%; }
  #screen-mail .n-row.nl .pill, #screen-mail .n-row.nl .st-chip { font-size: 12px; }
}

@media (max-width: 760px) {
  /* هاتف ٦: the mail's letters and the customers are cards (as the orders are) */
  #screen-mail .table-wrap, #screen-customers .table-wrap { border: 0; background: none; overflow: visible; }
  #screen-mail .n-table, #screen-mail .n-table tbody, #screen-customers .n-table, #screen-customers .n-table tbody { display: block; width: 100%; min-width: 0; }
  #screen-mail .n-table thead, #screen-customers .n-table thead { display: none; }
  #screen-mail .n-table tr.nl-det-row, #screen-customers .n-table tr.nl-det-row { display: none !important; }
  #screen-mail .n-table tr.empty, #screen-customers .n-table tr.empty, #screen-mail .n-table tr.n-more-row, #screen-customers .n-table tr.n-more-row { display: block; }
  #screen-mail .n-table tr.empty td, #screen-customers .n-table tr.empty td, #screen-mail .n-table tr.n-more-row td, #screen-customers .n-table tr.n-more-row td { display: block; padding: 0; border: 0; }
  .n-table tr.pc > td.pc-more { display: block; grid-column: 2; grid-row: 2 / span 3; align-self: end; justify-self: end; margin: 0 -8px -8px 0; margin-inline: 0 -8px; }
  .n-table tr.pc > td.pc-more .icon-btn { color: var(--muted); font-size: 20px; }
  .n-table tr.pc:has(> .pc-more) > td.pc-main, .n-table tr.pc:has(> .pc-more) > td.pc-line { grid-column: 1; }
  .n-table tr.pc > td.pc-main .safety { margin-top: 2px; font-size: 13px; font-weight: 400; }
  .n-table tr.pc > td.pc-top .since { display: inline; font-size: 13px; color: var(--muted); }
  .n-table tr.pc > td.pc-top .since::before { content: " · "; }
  .safety-band.warn { color: var(--yellow); }
  .pc-rest { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
  .pc-rest .since { display: block; }
  /* a switch: a small pill drawn inside a thumb's square */
  .sw { box-sizing: border-box; min-width: 68px; min-height: var(--tap); padding: 10px 4px; border: 0; background-clip: content-box; font-size: 12px; }
  .sw:not(.on):not(.part) { background-color: var(--grey-bg); color: var(--muted); }
  .sw .knob { width: 18px; height: 18px; margin: 4px; }
  .sw .lbl { padding-inline: 4px; }
  .my-grid .lab .sub, .fu-table td .sub, .set-block .lock { font-size: 12px; }
  #mail-boxes label.note { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; }
  #mail-to { min-width: 160px; }
  /* in a window, an address or a site is pressed on a thumb's line */
  dialog#detail a[href^="mailto:"], dialog#detail a[href^="http"]:not(.follow):not(.n-btn), dialog#detail a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--tap); overflow-wrap: anywhere; }
  dialog#detail td.q-lead .n-tg, dialog#detail .n-tg { min-width: var(--tap); min-height: var(--tap); font-size: 16px; }
  dialog#detail .follow + .follow { margin-inline-start: 8px; }
  .sp-card .sp-b + .sp-b, .sp-line a.sp-view + select, .sp-table a + a.follow { margin-inline-start: 8px; }
  .sp-name { min-width: var(--tap); }
}

@media (max-width: 760px) {
  /* nothing in a setting is wider than the screen */
  #screen-settings .setting, #screen-settings .setting > *, #screen-settings .field-row, #screen-settings .field-row > * { min-width: 0; max-width: 100%; }
  #screen-settings .field-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  #screen-settings .setting-controls { display: flex; flex-wrap: wrap; gap: 8px; }
  .ops-tools #operations { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  .ops-tools #operations .follow { flex: 1 1 calc(50% - 4px); }
  .safety-band.warn { color: #7a5a08; }
  :root[data-theme="dark"] .safety-band.warn { color: var(--yellow); }
  dialog#detail td a[href^="mailto:"] { margin-inline-end: 8px; }
  dialog#detail [data-person-edit] { margin: 4px 0; }
  dialog#detail [data-person-edit] + [data-person-edit] { margin-inline-start: 8px; }
  .sp-line a.sp-view { display: inline-flex; align-items: center; margin-inline-end: 8px; text-decoration: none; }
  .sp-table td a + a, .sp-table td a + .follow { margin-inline-start: 8px; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .safety-band.warn { color: var(--yellow); } }

@media (max-width: 760px) {
  .ops-tools .follow { margin: 4px; }
  .ops-tools { margin-bottom: 8px; }
  .ops-tools > summary::after { content: "▾"; }
  .ops-tools[open] > summary::after { content: "▴"; }
  .sp-table td > a, .sp-table td > select, .sp-table td > .follow { margin: 4px 0; margin-inline-end: 8px; }
  dialog#detail .n-tg { margin: 6px; }
  dialog#detail td > a { margin-block: 4px; margin-inline-end: 8px; }
}

@media (max-width: 760px) {
  .n-row.nl > .c-tg { order: 8; }
  .n-row.nl > .nl-det { order: 9; }
  dialog#detail .n-row.nl { padding: 10px 0 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  dialog#detail .n-row.nl > .c-tg { margin: 4px 0 0; border: 0; }
  dialog#detail .n-row.nl > .c-tg .n-tg { margin: 0; border-radius: 10px; }
}

@media (max-width: 760px) {
  dialog#detail .n-row.nl > .c-tg { margin-top: 8px; }
  dialog#detail .n-row.nl > .nl-c a { margin-bottom: 4px; }
}

@media (max-width: 760px) {
  .sp-sub, .sp-sub span, .sp-line span[dir="ltr"] { color: var(--muted); }
  /* what the search of the agent's switches finds: rows of one list - the key, then what it does */
  .ag-hit { display: block; width: 100%; min-height: var(--tap); margin: 0; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: 14px; line-height: 1.6; }
  .ag-hit b { display: block; font-size: 15px; }
  .ag-hit .note { display: block; }
  #agent-q { margin-bottom: 8px; }
}

@media (max-width: 760px) {
  :has(> .ag-hit) { display: block; gap: 0; }
  .ag-hit + .ag-hit { margin-top: 0; }
}

/* ───────── the phone (هاتف ٦), what the fresh eyes found: the list comes first - the chips at the head of the place, its
   tools after them and small; the chosen chip in sight; a customer's card as the mockup's card; a switch always at the
   line's end; a table's row says what each number is ───────── */
@media (max-width: 760px) {
  /* the places of the stage: the chips first, then the search, then the list; what is rarely pressed comes after it */
  #screen-suppliers:not(.hidden), #screen-mail:not(.hidden), #screen-customers:not(.hidden) { display: flex; flex-direction: column; }
  #screen-suppliers > .sp-tabs, #screen-mail > .sp-tabs { order: -3; flex: none; align-items: center; }
  #screen-suppliers > .screen-head, #screen-mail > .screen-head { order: -2; }
  #screen-mail > #mail-status, #screen-mail > #mail-new { order: -4; }
  #screen-mail > .ops-tools, #screen-mail > #muted-list { order: 5; }
  #screen-customers > p.note { order: 9; margin-top: 12px; }
  .sp-tabs > .sp-tab { height: var(--tap); }
  /* the suppliers' place: «+ أضِف…» is the dock's; the question on one line; the list's tools on one line */
  #screen-suppliers .sp-add { display: none; }
  #who-supplies-form { flex-wrap: nowrap; align-items: center; }
  #who-supplies-form .sp-lbl { flex: none; }
  #who-supplies-form .sp-b { flex: none; }
  #screen-suppliers .sp-why { gap: 8px; margin: 0 0 8px; }
  #screen-suppliers .sp-why > span { flex: 1 1 100%; }
  #screen-suppliers .sp-why > .sp-view { flex: 1 1 0; }
  #supplier-filter .sort { display: flex; align-items: center; gap: 8px; }
  #supplier-filter .sort select { flex: 1; }
  #supplier-filter { margin-bottom: 10px; }
  /* an open card says each thing once: its details say what its line said, and more */
  #suppliers-list .sp-row:has(> .nl-det:not([hidden])) > .nl-c:not(.nl-c0), #suppliers-list .sp-row:has(> .nl-det:not([hidden])) > .nl-c0 .sub { display: none; }
  /* a column's name before a number is apart from it, so a date keeps its order beside Arabic */
  .n-table tr.pc > td.pc-line::before, .n-table tr.pc > td.pc-sum::before, .sp-table td::before, .bal-table td::before, .bal-table td::after { unicode-bidi: isolate; }
  /* a supplier's card: pressed, it opens him; its details open above their own row, and do not say his name twice */
  #suppliers-list .sp-row > .nl-c { cursor: pointer; }
  .n-row.nl > .nl-det { order: 1; padding-top: 4px; }
  .n-row.nl > .c-tg { order: 2; }
  #suppliers-list .sp-row > .nl-det .sp-name { display: none; }
  .sp-deal { padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.6; overflow-wrap: anywhere; }
  .sp-deal .note { display: block; }
  /* a table's row says what each number is */
  .sp-table td[data-label]:not([data-label=""]):not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; font-weight: 400; }
  /* a customer: his name and his rating on one line, then what matters on one */
  #customers-body tr.pc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  #customers-body tr.pc > td.pc-main { order: -2; flex: 1 1 calc(100% - 130px); margin-top: 0; }
  #customers-body tr.pc > td.pc-state { order: -1; flex: none; }
  #customers-body tr.pc > td.pc-line { flex: none; }
  .pc-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
  .pc-rate > span { flex: 1 1 100%; color: var(--muted); font-size: 14px; }
  .pc-rate > button { flex: 1 1 0; }
  dialog#detail .n-row.nl > .c-tg .n-tg { font-size: 0 !important; }
  .pill:empty { display: none; }
  /* a letter's «⋯» is seen */
  .n-table tr.pc > td.pc-more .icon-btn { color: var(--ink); font-size: 22px; font-weight: 700; }
  /* the agent's switches: the switch always at the line's end, the words beside it */
  .ag-act { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-act > * { grid-column: 1; }
  .ag-act > .sw { grid-column: 2; grid-row: 1; align-self: start; }
  .ag-act > .ag-advice { grid-column: 1 / -1; }
  /* where the spending goes: an area is a band, an operation a row - what was spent, its share, how many times */
  .bal-table tr.bal-area { background: var(--grey-bg); padding-inline: 10px !important; border-radius: 10px; border-bottom: 0 !important; margin-top: 8px; }
  .bal-table tr.bal-area td, .bal-table tr.bal-op td { background: none; }
  .bal-table tr.bal-op td:first-child { padding-inline-start: 0; }
  .bal-table td:nth-child(2):not(:empty)::before { content: "صُرف "; color: var(--muted); font-size: 12px; }
  .bal-table td:nth-child(4):not(:empty)::after { content: " مرّة"; color: var(--muted); font-size: 12px; }
  .bal-table td:last-child { margin-inline-start: auto; }
  /* a paragraph is written across the screen; a time's «−» is a square; a setting's foot is one line */
  #screen-settings .field-paragraph textarea { width: 100% !important; box-sizing: border-box; min-height: 120px; }
  #screen-settings [data-time-remove] { flex: none; align-self: flex-start; width: var(--tap); }
  #screen-settings .setting > .meta:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
}

/* the phone (هاتف ٨، the last review): the gate's Latin name is not under the floor of 12px */
@media (max-width: 760px) {
  .gate-card .brand small { font-size: 12px; }
}

/* «اقترح لي الملفّ من بياناتي» (الإصلاحات ٤، ٦٦): each draft apart, its button not against the next heading */
.profile-draft { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.profile-draft:last-of-type { border-bottom: 0; }

/* the top of the screens: the company's logo and name, «رافد» small beside them (قائمة ما قبل الإطلاق، إ١ ب) */
.company-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.company-brand img { height: 28px; width: auto; max-width: 96px; object-fit: contain; border-radius: 4px; }
.company-brand #company-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.company-brand small { font-size: 11px; font-weight: 500; color: var(--accent); letter-spacing: .2px; }
/* «هويّة الشركة» in its settings */
.identity-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; margin-top: 8px; }
.identity-form label { display: grid; gap: 4px; }
.identity-form input[type="color"] { width: 64px; height: 34px; padding: 2px; }
.identity-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.identity-logo img { height: 48px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }

/* «أجهزتك» (قائمة ما قبل الإطلاق، إ٣ أ) */
.session-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gate-forgot { justify-self: center; }

/* «وضع عوْن» (قائمة ما قبل الإطلاق، إ٥ أ) */
.ag-mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0; }
.ag-mode { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: var(--surface); }
.ag-mode.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ag-mode p { margin: 4px 0; }
.ag-advanced > summary { cursor: pointer; font-weight: 600; margin: 12px 0 6px; }

/* what each screen is, and the next step (قائمة ما قبل الإطلاق، إ٥ ج) */
.screen-lead { margin: -4px 0 12px; color: var(--muted); font-size: 13.5px; max-width: 900px; }

/* «رافد»'s marks (قائمة ما قبل الإطلاق، إ١ ج) */
.gate-logo { display: flex; justify-content: center; margin-bottom: 2px; }
.gate-logo svg { height: 72px; width: auto; }
.gate-platform { display: block; text-align: center; font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.rafid-word { display: inline-flex; align-items: center; }
.rafid-word svg { height: 15px; width: auto; }

/* the door has three faces and shows one: a face hidden stays hidden whatever its own display (قائمة ما قبل الإطلاق، إ٣ أ) */
.gate-card[hidden] { display: none; }

/* مسار الخطوات والزرّ الخطير (قائمة ما قبل الإطلاق، إ٦ أ): الرجوع بجانب العنوان، والإيقاف في الطرف الآخر بلونه */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; margin: 0 0 10px; flex-basis: 100%; }
.crumbs .crumb { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.crumbs .crumb.is-here { color: var(--ink); text-decoration: none; cursor: default; font-weight: 600; }
.crumbs .crumb-sep { color: var(--muted); }
.req-stop { display: flex; justify-content: flex-end; margin-top: 8px; }
button.stop.danger, .n-btn.stop.danger { color: var(--red); border-color: var(--red); }
@media (max-width: 760px) { .p-more .req-stop .n-btn { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; } }
.next-bar { justify-content: space-between; }

/* حدّ اللمس (قائمة ما قبل الإطلاق، إ٦ ب): لا زرّ ولا خانة ولا قائمة أصغر من 36 بكسل في أيّ اتّجاه، على كلّ عرض.
   min- لا يغيّر طريقة عرض شيء: الزرّ يبقى كما رُسم، ويطول إن قصُر. */
:root { --tap-floor: 36px; }
button, [role=button], select, summary, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) { min-height: var(--tap-floor); }
button, [role=button] { min-width: var(--tap-floor); }

/* المرجع والعنوان لا ينقسمان عند الشرطة (إ٦ ب، ش١٤): «ASH-2026-0001» في سطرٍ واحد على كلّ عرض */
.ref, bdi.ref, .nobr, .pill { white-space: nowrap; }
.ref, bdi.ref { unicode-bidi: isolate; }
/* شكلٌ واحد لكلّ خانة (إ٦ ج، ش١١، ش٢٣): البريد وكلمة السرّ والأرقام والتاريخ والوقت كالخانة النصّيّة، لا بشكل المتصفّح؛
   ومربّعات التأشير والاختيار بلون المنصّة. :where() يجعلها أضعف من كلّ قاعدةٍ أخصّ كتبتها شاشة. */
:where(input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="search"], input[type="url"], input[type="tel"]) {
  font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); width: 18px; height: 18px; vertical-align: middle; }

/* الروابط بلون المنصّة، لا أزرق المتصفّح وبنفسجيّه بعد الزيارة (إ٦ ج، ش١٥) */
:where(a:link, a:visited) { color: var(--accent); }
/* الشريط العلويّ على سطح المكتب (إ٦ ج، ش٧): الأماكن في سطرها كاملًا تحت الاسم والرصيد، فلا ينزل «الإعدادات» وحده إلى سطرٍ ثانٍ؛
   على 1280 وأعرض تسعها كلّها سطرًا واحدًا */
@media (min-width: 761px) {
  header.top { row-gap: 6px; }
  header.top .places { order: 3; flex: 0 0 100%; gap: 2px; }
  header.top .places .place { padding: 6px 11px; font-size: 14.5px; }
  header.top .wallet { margin-inline-start: auto; }
}
/* سطر «ما وصل» باتّجاه نصّه (إ٦ ج، ش٢٥): «Re: ASH-2026-0006 — …» يُقطع من آخره لا من أوّله، ويبقى محاذيًا لعمود الصفحة */
html[dir="rtl"] .arrived-what[dir="auto"] { text-align: right; }
html[dir="ltr"] .arrived-what[dir="auto"] { text-align: left; }
/* رأس العمود والزرّ في الجدول سطرًا واحدًا (إ٦ ج، ش٣٢): «تاريخ الطلب»، «شغّل المتابعة»، «باقٍ 11 يومًا» لا تنكسر */
th, td button.follow, td button.ghost, td .pill, td .st-chip { white-space: nowrap; }
/* السؤال داخل الصفحة (إ٦ ج): نافذةٌ بشكل المنصّة بدل مربّعات المتصفّح، وزرّ ما يُزيل أو يوقف أو يرسل بلون الخطر (إ٦ أ) */
dialog.ask-box { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
dialog.ask-box::backdrop { background: rgba(0, 0, 0, .35); }
.ask-box .ask-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; margin: 0; }
.ask-box h3 { margin: 0; font-size: 17px; }
.ask-box .ask-note { margin: 0; line-height: 1.7; white-space: pre-line; }
.ask-box .ask-field { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.ask-box .ask-field > span { color: var(--muted); }
.ask-box .ask-field input, .ask-box .ask-field select, .ask-box .ask-field textarea { width: 100%; box-sizing: border-box; font-size: 15px; }
.ask-box .ask-say { margin: 0; color: var(--red); font-size: 13.5px; min-height: 0; }
.ask-box .ask-say:empty { display: none; }
.ask-box .ask-acts { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ask-box .ask-acts > :only-child { margin-inline-start: auto; }
button.primary.danger { background: var(--red); color: var(--surface); }
.say-line { position: fixed; inset-inline: 16px; bottom: 18px; margin: 0 auto; max-width: 520px; padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 14px; line-height: 1.6; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); z-index: 1000; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.say-line.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .say-line { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* رؤوس أعمدة الأسعار على عرض صفوفها (إ٦ ج، ش٤٤): القاعدة القديمة جعلت حاويتها صفًّا مرنًا، فانكمشت الرؤوس إلى ثلثي العرض
   وانزاح كلّ رأسٍ عن عموده */
#pricing-actions .n-bar.actions > .n-cols, #pricing-actions .n-bar.actions > .n-bar-1 { flex: 0 0 100%; width: 100%; box-sizing: border-box; }
/* «نظرة سريعة على ما سيراه العميل» مرّةً واحدة (إ٦ ج، ش٤٦): على سطح المكتب الطيّة تحت البنود هي هي، فزرّ الشريط للهاتف وحده */
@media (min-width: 761px) { #quick-look-toggle { display: none; } }
/* داخل النوافذ (إ٦ ج، ش٢٠، ش٤٢): عنوان القسم منفصلٌ عمّا قبله، و«إغلاق» في آخر النافذة بعيدٌ عن أزرارها بخطٍّ فاصل */
#detail-body h2, #detail-body h3, #detail-body h4 { margin-top: 20px; margin-bottom: 8px; }
#detail-body > :first-child, #detail-body > div > h2:first-child { margin-top: 0; }
dialog#detail > form[method="dialog"]:not(.dialog-x-form) { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.long-run { word-break: break-all; }
.danger-text { color: var(--red); border-color: var(--red); }
/* في القوائم يُرى التحذير وحده (إ٦ ج، ش٥٤): «لا ملاحظات» على كلّ صفٍّ ضجيج، وتبقى في نافذة الرسالة */
#arrived-list .safety-band.ok, #screen-mail tbody .safety-band.ok { display: none; }