/* zeneon-market — the drops' additions to qcc-ds (WP13). Loaded after pos.css and qcc.css, before qcc-local.css.
   Everything a drop draws that qcc-ds v0.12 lacks lives here, under .qcc- names, in tokens only, with logical
   properties only (ENGINEER_GUIDE §4; plan Global Constraints). One block per addition; each block's first line
   names its A-number (A1-A17: drops/README; A19+: the board asks filed in WP13 Task 10). No --pos-* or --qcc-*
   token is redefined here, and no hex is typed.

   Light-theme hexes in the drop sheets → the nearest pos.css token (plan ruling 6; filed with the Task 10 asks):
     #8a5f1c (flag and draft pill text)        → var(--pos-warn)
     #6b4a12 (warn chip text)                  → var(--pos-warn)
     #7a5f28 (sealed pill text)                → var(--pos-accent)
     #1a1206 (text on a warn or accent fill)   → var(--pos-text-on-accent)
     #fff    (text on a fill)                  → var(--pos-text-on-accent)
     #fff    (a white surface: knob, QR tile)  → var(--pos-surface)
*/

/* ===== A1 · phone mode: the page skeleton (map §5 items 1-4, 6; plan rulings 1-3) =====
   Two frames stay in every page (ruling 1): the phone frame (.frame.qcc-page) and the laptop frame (.frame.lap;
   never .ph, pos.css's image placeholder). A page drawn at 1280 too (body.screens-both) shows its laptop frame
   from 1280 px, its phone frame below (ruling 2; qcc-ds has nothing under 1280, guide §2). */
.qcc-app { margin: 0; min-height: 100vh; }
.frame.lap {
  display: none; flex-direction: column; position: relative;
  width: 100%; min-height: 100vh; min-height: 100dvh;
}
@media (min-width: 1280px) {
  .qcc-app.screens-both > .frame.qcc-page { display: none; }
  .qcc-app.screens-both > .frame.lap { display: flex; max-width: none; }
}
.qcc-page {
  display: flex; flex-direction: column; position: relative;
  width: 100%; max-width: 480px; min-height: 100vh; min-height: 100dvh; margin-inline: auto;
}
.qcc-page-head {  /* a detail page's head: back + title (the brand's place) */
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding-inline: 16px;
  background: var(--pos-bg-2); border-block-end: 1px solid var(--pos-line);
}
.qcc-page-title {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qcc-page-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.qcc-page-foot {  /* the sticky action bar above the doors */
  position: sticky; inset-block-end: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 16px;
  background: var(--pos-bg); border-block-start: 1px solid var(--pos-line);
}

/* ===== A1 · the document under the skeleton (WP13 Task 9: what the deleted office.css gave every page) =====
   pos.css draws <body> as qcc's app shell: a fixed height that never scrolls, no text selection. An office page is
   a document, so it scrolls and its codes can be copied. Links take their text's colour. [hidden] wins over a part's
   own display: the lock, its warning, the step-up pad and their forms start hidden (qcc's .qcc-lock is flex, and
   only .qcc-lock[hidden] is qcc's own), and office.js opens them by the attribute. */
html { background: var(--pos-bg); }
.qcc-app { height: auto; overflow: visible; user-select: text; }
a { color: inherit; }
[hidden] { display: none !important; }
#panel { min-width: 0; }

/* ===== A1 · phone mode: the phone measure over qcc parts, below 1280 only (map §5 items 2-4, 6) ===== */
@media (max-width: 1279px) {
  .qcc-app { font-size: 16px; }
  .qcc-btn { height: 48px; font-size: 16px; }
  .qcc-btn.qcc-btn--sm { height: 38px; font-size: 14px; }
  .qcc-page-foot .qcc-btn { width: 100%; }
  .qcc-input, .qcc-select { height: 48px; font-size: 16px; }  /* 16 px stops iOS zooming into a field */
  .qcc-textarea { font-size: 16px; }
  .qcc-label { font-size: 14px; line-height: 20px; }  /* the sheet's .qlabel: 14 px bold (WP13 fix wave 2) */
  .qcc-tabs { display: flex; width: 100%; }
  .qcc-tab { flex: 1; justify-content: center; height: 44px; font-size: 14px; }
  .qcc-pill { height: 26px; font-size: 12.5px; }
  .qcc-pin-cell { height: 56px; }
  .qcc-panel { border-radius: 0; box-shadow: none; border-inline: 0; }  /* the panel becomes the page */
  .qcc-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }  /* the filter row scrolls */
  .qcc-toolbar > * { flex: none; }
  .qcc-toast {  /* lifted above the doors bar and the sticky foot */
    inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 32px);
  }
}

/* ===== A1 · the table's frame (plan ruling 3): every .qcc-table sits in .qcc-card.qcc-card--table (map F4) ===== */
.qcc-card--table { padding: 0; overflow-x: auto; }  /* a table wider than its card scrolls; the end column (the action, in Kurdish) is never cut, and the corners still clip */
.qcc-card--table .qcc-table tbody tr:last-child td { border-block-end: 0; }

/* ===== A1 · the office icons inside qcc parts, and the phone page head's back (WP13 Task 2) =====
   The office icons (office/_icon.html) carry no size; the library sizes its own inline. The back arrow mirrors in
   right-to-left pages, as the sheets draw it (4.2). */
.qcc-btn > svg { width: 18px; height: 18px; flex: none; }
.qcc-actioncard-icon > svg { width: 17px; height: 17px; }
.qcc-page-head > .qcc-btn { padding-inline: 8px; margin-inline-start: -8px; }
.qcc-page-head > .qcc-btn > svg { width: 24px; height: 24px; }
[dir="rtl"] .qcc-page-head > .qcc-btn > svg { transform: scaleX(-1); }

/* ===== A2 · the doors bar: the phone's four doors (frames 4.12, 5.12) ===== */
.qcc-doorbar {
  position: sticky; inset-block-end: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--pos-bg-2); border-block-start: 1px solid var(--pos-line);
}
.qcc-doorbar-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-block: 6px; border-radius: 8px;
  color: var(--pos-text-2); font-size: 12px; font-weight: 700; text-decoration: none;
}
.qcc-doorbar-item svg { width: 24px; height: 24px; }
.qcc-doorbar-item--active { color: var(--pos-text); }
.qcc-doorbar-item--active::after {  /* the lit door's champagne rule on top */
  content: ""; position: absolute; inset-block-start: -6px; inset-inline: 22%; height: 3px;
  background: var(--pos-accent); border-end-start-radius: 2px; border-end-end-radius: 2px;
}
.qcc-doorbar-count {
  position: absolute; inset-block-start: 2px; inset-inline-end: 14%;
  min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px;
  background: var(--pos-warn); color: var(--pos-text-on-accent);
  font: 700 11px/18px var(--pos-mono); text-align: center;
}

/* ===== A2 · the toast that stays (WP13 final fix pass): a refusal keeps its toast until this close mark ===== */
.qcc-toast-close {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-inline-start: 4px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.qcc-toast-close svg { width: 14px; height: 14px; }

/* ===== A19 · the top bar's mark and doors (plan ruling 4; R4 forbids navigation in qcc's shell, so asked) =====
   The brand carries the mark; the laptop doors are .qcc-tabs inside .qcc-topbar; the chips are links or icons. */
.qcc-topbar-brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.qcc-topbar-mark { border-radius: 5px; }
.qcc-topbar-mark--dark { display: none; }
:root:not([data-theme="light"]) .qcc-topbar-mark--dark { display: inline; }
:root:not([data-theme="light"]) .qcc-topbar-mark--light { display: none; }
.qcc-topbar .qcc-tabs { flex-wrap: nowrap; }
a.qcc-tab, a.qcc-chip { text-decoration: none; }
.qcc-topbar .qcc-chip { white-space: nowrap; }
.qcc-topbar .qcc-chip svg { width: 16px; height: 16px; }
.qcc-chip[aria-disabled="true"] { opacity: 0.45; }  /* the ops gear, greyed until design ask 11 */

/* ===== A4 · sign-in and enrolment (frames 4.1-4.3, 5.1): the sign-in block and the ops card, the +964 prefix,
   the code's visible digits, the enrolment QR. The lock and the step-up are qcc's own (.qcc-lock, §68-70). ===== */
.qcc-signin-form { flex: 1; display: flex; flex-direction: column; margin: 0; }  /* the phone page's form: body, then the sticky foot */
.qcc-signin { display: flex; flex-direction: column; gap: 14px; }
.qcc-signin-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--pos-text); }
.qcc-signin-lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pos-text-2); }
.qcc-signin-note { margin: 0; text-align: center; }  /* the reset line, under a card's button */
.qcc-signin .qcc-help, .qcc-lock-card .qcc-signin-note { font-size: 13px; line-height: 1.6; }  /* the sheets' meta size */
.qcc-signin--card {  /* 5.1: the ops sign-in, one card on the bare page (the lock card's geometry) */
  width: min(420px, 100%); margin: 32px auto; padding: 26px 24px 20px;
  background: var(--pos-elevated); border: 1px solid var(--pos-line-strong); border-radius: var(--qcc-r-xl);
  box-shadow: var(--qcc-panel-elev);
}
.qcc-signin--card .qcc-signin-title { text-align: center; }
.qcc-signin--card > .qcc-btn { width: 100%; }
.qcc-signin-brand { display: flex; justify-content: center; }
.qcc-signin-brand .qcc-topbar-brand { font-size: 20px; font-weight: 800; }
.qcc-signin-brand .qcc-topbar-mark { width: 32px; height: 32px; border-radius: 7px; }
/* the country code before the phone number: the field reads left to right in every language */
.qcc-input-prefix { position: relative; display: flex; align-items: center; direction: ltr; }
.qcc-input-prefix-text {
  position: absolute; inset-inline-start: 1px; padding-inline: 12px 10px; pointer-events: none;
  border-inline-end: 1px solid var(--pos-line); color: var(--pos-text-2);
  font-family: var(--pos-mono); font-size: 14px; line-height: 22px;
}
.qcc-input-prefix .qcc-input { padding-inline-start: 66px; text-align: start; }
/* the six code cells with their digits shown (4.2, 4.3, 5.1); a wrong code keeps its digits, in the danger tone */
.qcc-pin--digits .qcc-pin-cell { font-family: var(--pos-mono); font-size: 22px; font-weight: 600; color: var(--pos-text); }
.qcc-pin--digits .qcc-pin-cell::after { content: none; }
.qcc-pin--digits.qcc-pin--error .qcc-pin-cell { color: var(--pos-danger-hi); }
/* no script: the one input shows itself in place of the cells (the cells are painted by office.js) */
.no-js .qcc-pin-input {
  position: static; grid-column: 1 / -1; height: 52px; opacity: 1; color: var(--pos-text); caret-color: auto;
  border: 1px solid var(--pos-line-strong); border-radius: var(--qcc-r-md); background: var(--pos-bg-2);
  font: 600 22px var(--pos-mono); letter-spacing: .3em; text-align: center;
}
.no-js .qcc-pin-cell { display: none; }
.qcc-signin-key {  /* the whole enrolment key in fours, Copy inside the field (4.3); it wraps, never clips */
  display: flex; align-items: center; gap: 8px; height: auto; min-height: 48px; padding-block: 6px;
  padding-inline-end: 4px;
}
.qcc-signin-key > .qcc-mono { flex: 1; min-width: 0; overflow-wrap: anywhere; letter-spacing: .06em; line-height: 1.6; text-align: start; }
.qcc-signin-key > .qcc-btn { flex: none; }
.qcc-qr {  /* the enrolment QR on a light tile (4.3) */
  align-self: center; padding: 12px; border: 1px solid var(--pos-line); border-radius: var(--qcc-r-lg);
  background: var(--pos-surface);
}
.qcc-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }

/* ===== A4 · the office lock as the sheet draws it (4.4, 4.4b; WP13 fix wave: the drop wins over qcc's hidden page) =====
   Locked: the scrim over the page with the top bar and the phone's doors clear, the card just under the top bar, its
   mark, title and line at the start side. The 60-second warning: no scrim, the page stays usable; a start-aligned note
   in the warn line near the bottom, no mark, I'm here small at its start (the pre-WP13 build Darya OK'd). ===== */
.qcc-lock--office:not(.qcc-lock--warn) { inset-block-start: 55px; align-items: flex-start; padding: 60px 16px 16px; background: var(--pos-scrim); }
.qcc-app:has(> .qcc-lock--office:not([hidden]):not(.qcc-lock--warn)) .qcc-doorbar { z-index: 1001; }
.qcc-app:has(> .qcc-lock--office:not([hidden]):not(.qcc-lock--warn)) :is(.qcc-doorbar, .qcc-topbar) { pointer-events: none; }  /* in sight, never in use (walk 27 Oct) */
.qcc-lock--office .qcc-lock-card { width: min(420px, 100%); margin-block: 0; }
.qcc-lock--office .qcc-lock-top { align-items: flex-start; text-align: start; }
.qcc-lock--office.qcc-lock--warn { background: transparent; pointer-events: none; align-items: flex-end; padding-block-end: 96px; }
.qcc-lock-card--note { pointer-events: auto; gap: 8px; margin-block: 0; padding: 14px 16px; border: 1px solid var(--pos-warn); border-radius: var(--qcc-r-lg); box-shadow: none; }
.qcc-lock-card--note .qcc-lock-title { font-size: 16px; }
.qcc-lock-card--note .qcc-lock-lede { max-width: none; font-size: 14px; }
.qcc-lock-card--note .qcc-lock-acts { justify-content: flex-start; margin-block-start: 0; }
.qcc-lock-card--note .qcc-lock-acts .qcc-btn { flex: none; }

/* ===== A1 · the laptop page's glue (WP13 Task 3): the grid of the main column and its rail or #panel, the
   pulse row, the laptop frame's body (the ops body one step tighter: qcc's registry measure). The classes keep the
   names they had in the sheets' office.css, which Task 9 deleted. ===== */
.frame.lap > .fbody { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 24px; }
body.ops .frame.lap > .fbody { gap: 12px; padding: 14px 20px 24px; }
.lapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.lapgrid.wide { grid-template-columns: minmax(0, 1fr) 420px; }
.lapmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.laprail { display: flex; flex-direction: column; gap: 12px; }
.laprail > .qcc-card-title { margin-block-end: 0; }
.laprail > .qcc-btn { align-self: stretch; }
.qcc-pulses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.laprail .qcc-pulses { grid-template-columns: 1fr 1fr; }
.qcc-pulses .qcc-pulse { min-width: 0; padding-inline: 12px; }
.qcc-pulses .qcc-pulse-value { margin-block-start: auto; }  /* a long Kurdish label may take two lines; the values stay level */
.qcc-table a.qcc-mono { color: var(--pos-accent); text-decoration: none; }  /* codes in a table are the accent mono, as 4.30 and 5.5-5.7 draw them */
.qcc-mono.qcc-code { font-size: inherit; }  /* qcc's accent code at the row's own size: shop domains (5.2, 5.3), vouchers (5.11) */
.qcc-table td:has(> .qcc-money) { font-weight: 600; }  /* a table's amounts are bold, the currency word with them (4.29, 4.32, 5.2, 5.4, 5.6) */
.qcc-table tbody tr.qcc-tr--selected { background: var(--pos-accent-soft); }  /* A19+ ask: the summoned row stays marked (office.js adds .qcc-tr--selected) */
a.qcc-filter { text-decoration: none; }
.qcc-filter > svg { width: 16px; height: 16px; flex: none; }
.qcc-empty .qcc-btn svg { width: 18px; height: 18px; margin: 0; opacity: 1; color: inherit; }  /* the library's glyph rule would grey the button's icon */
a.qcc-btn { text-decoration: none; }
.qcc-card-title--split { justify-content: space-between; align-items: center; }  /* the title, and its count pill at the far end (4.12, 4.29) */
.qcc-card-title--split .qcc-pill { font-family: var(--pos-mono); }
.qcc-page-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; }  /* the phone page's own title (4.14) */
@media (max-width: 1279px) {  /* four tabs with counts fit 360 px on one row (4.14) */
  .qcc-tabs { flex-wrap: nowrap; }
  .qcc-page-body > .qcc-card-title b { font-size: 18px; line-height: 24px; }  /* the phone's section heads at the drawn title size (4.12, 4.23) */
  .qcc-tab { min-width: 0; gap: 5px; padding-inline: 6px; }
}

/* ===== A5 · list card: a phone row that opens a record (4.12-4.22, 5.12-5.13) =====
   .qcc-listcard is the whole row (an <a> or <div>); -main holds -top (code and time), -pills and the meta line;
   -chev points to the record, -ico leads, -act is a trailing icon button; --muted greys a row not yet drawn. */
.qcc-listcard {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  background: var(--pos-surface); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-lg);
  color: inherit; text-decoration: none;
}
.qcc-listcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qcc-listcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qcc-listcard-top .qcc-mono { font-size: 14px; color: var(--pos-text-2); }
.qcc-listcard-top .qcc-code { font-size: 14px; color: var(--pos-accent); }  /* the order code in accent mono (4.12-4.15, 5.12, 5.13) */
.qcc-listcard-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 2px; }
.qcc-listcard-main > .qcc-help { font-size: 13px; color: var(--pos-text-2); }  /* the sheet's meta line (4.12, 5.12) */
.qcc-listcard-chev { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--pos-text-3); }
.qcc-listcard-chev svg { width: 24px; height: 24px; transform: rotate(-90deg); }  /* the down chevron turned onward: right, or left in RTL */
[dir="rtl"] .qcc-listcard-chev svg { transform: rotate(90deg); }
.qcc-listcard-ico {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--qcc-r-md); background: var(--pos-accent-soft); color: var(--pos-accent);
}
.qcc-listcard-ico svg { width: 20px; height: 20px; }
.qcc-listcard-act { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--pos-text-2); }
.qcc-listcard-act svg { width: 22px; height: 22px; }
.qcc-listcard--muted { opacity: .65; }

/* ===== A7 · flag pill: the two flags on an order, Under review and Waiting for the courier (4.14, 4.17-4.18, 5.5, 5.12)
   The sheet's light-theme text hex becomes --pos-warn (plan ruling 6). ===== */
.qcc-pill--flag { background: var(--pos-warn-soft); color: var(--pos-warn); border-color: var(--pos-warn); white-space: nowrap; }
.qcc-pill > svg { width: 13px; height: 13px; flex: none; }  /* every pill's icon (the verified tick, 5.2-5.3) shows, not only the flag's */
.qcc-pill + .qcc-pill { margin-inline-start: 6px; }
.qcc-listcard-pills > .qcc-pill + .qcc-pill { margin-inline-start: 0; }

/* ===== A1 · rows that wrap, and a panel head and foot that never cut a button (WP13 Task 4; Gate 2 look item 3) =====
   The panel's foot is .qcc-row.qcc-row--wrap: a long Kurdish Cancel and Mark as packed wrap to a second line at the
   420 px panel instead of running off its edge. A press's own form dissolves into the foot's row. */
.qcc-row--wrap { flex-wrap: wrap; }
.qcc-row--end { justify-content: flex-end; }
.qcc-panel-head { flex-wrap: wrap; }
.qcc-panel-head .qcc-panel-close { margin-inline-start: auto; }
.qcc-panel-foot { justify-content: flex-end; }
.qcc-panel-foot form, .qcc-page-foot form { display: contents; }
.qcc-order-back { align-self: flex-start; }
/* Cancel's confirm (C2) keeps the ?cancel=1 page; its sentence is qcc's bold .qcc-modal-warn on a line of its own */
.qcc-panel-foot > .qcc-modal-body, .qcc-page-foot > .qcc-modal-body { flex: 1 1 100%; margin: 0; padding: 0; }

/* ===== A19+ ask · the no-buyer block (4.16-4.18, 4.30): the locked note, boxed; the buyer stays with Zeneon (D85) ===== */
.qcc-nobuyer {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px dashed var(--pos-line-strong); border-radius: var(--qcc-r-lg); background: var(--pos-surface-2);
  font-size: 13.5px; color: var(--pos-text);
}
.qcc-nobuyer > svg { width: 20px; height: 20px; margin-block-start: 2px; color: var(--pos-text-2); }
.qcc-nobuyer b { display: block; font-size: 15px; line-height: 22px; }
.qcc-nobuyer .qcc-help { font-size: 13px; }

/* ===== A19+ ask · the order line with its photo (4.16-4.18, 4.30): photo, name, quantity, line total ===== */
.qcc-orderlines { display: flex; flex-direction: column; gap: 8px; }
.qcc-orderline {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--pos-surface); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-md);
}
.qcc-orderline img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; flex: none; }
.qcc-orderline-name { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.qcc-orderline-qty { flex: none; color: var(--pos-text-2); font-size: 13.5px; }
.qcc-orderline-total { flex: none; font-size: 14px; font-weight: 700; }  /* the line amount, bold as drawn (4.16) */
.qcc-panel .qcc-orderline img { width: 40px; height: 40px; }

/* ===== A19+ ask · the totals across the whole card (the library's .qcc-totals hugs the end), in the sheet's type: the
   labels in the text colour, the amounts bold, the grand amount large (20 px; 17 px in the denser ops panel). Both
   grand cells stretch to the row and share one line height, so their two top rules meet on one line (4.16-4.18, 4.23,
   4.30; the baseline alignment set them apart) ===== */
.qcc-totals--full { grid-template-columns: 1fr max-content; column-gap: 0; row-gap: 10px; justify-content: stretch; margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--pos-line); font-size: 15px; }
.qcc-totals--full dt { padding-inline-end: 22px; color: var(--pos-text); font-weight: 400; }
.qcc-totals--full dd { font-family: inherit; font-size: 14px; font-weight: 600; }  /* only the number is mono (D75) */
.qcc-totals--full .qcc-totals-grand { align-self: stretch; line-height: 28px; font-weight: 700; }
.qcc-totals--full dd.qcc-totals-grand { font-size: 20px; }
body.ops .qcc-totals--full dd.qcc-totals-grand { font-size: 17px; }

/* ===== A19+ ask · the dispute thread and its message card (4.18; the box is not drawn, built from 5.8's look) ===== */
.qcc-thread { display: flex; flex-direction: column; gap: 8px; }
.qcc-msg {
  padding: 8px 12px; border-radius: var(--qcc-r-md); background: var(--pos-surface);
  border: 1px solid var(--pos-line); border-inline-start: 3px solid var(--pos-info);
}
.qcc-msg--merchant { border-inline-start-color: var(--pos-accent); }
.qcc-msg--to_merchant { border-inline-start-color: var(--pos-line-strong); }
.qcc-msg-who { display: block; margin-block-end: 2px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--pos-text-2); }
.qcc-msg p { margin: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }

/* ===== A19+ ask · the in-order disputed note (4.18): qcc's readiness note in the warn box the sheet draws, "!" leading ===== */
.qcc-readiness--warn { align-items: center; border: 1px solid var(--pos-warn); border-radius: var(--qcc-r-md); background: var(--pos-warn-soft); }
.qcc-readiness--warn > svg { width: 18px; height: 18px; margin-block-start: 0; stroke-width: 3; stroke-linecap: round; }
.qcc-readiness--warn .qcc-readiness-title { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; font-weight: 400; line-height: 1.5; }
.qcc-readiness--warn .qcc-readiness-title > b { flex: 0 1 auto; max-width: 40%; font-weight: 700; }  /* the title in its own column, as drawn */
.qcc-readiness--warn .qcc-readiness-title > span { flex: 1; min-width: 0; }

/* ===== A1 · the phone page's title row (4.16-4.18): the order code at the start side, its pills at the far end ===== */
.qcc-page-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ===== A1 · the phone form page (WP13 Task 5): the form is the page's column, its body then the sticky foot ===== */
.qcc-page-form { flex: 1; display: flex; flex-direction: column; margin: 0; }
.qcc-page-foot .qcc-row > .qcc-btn { flex: 1; }
.qcc-vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }  /* a real input kept for the keyboard and the post, drawn by its label */

/* ===== A5 · list card with a photo (4.19): the thumbnail, the link over the main block, the share mark ===== */
.qcc-listcard-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.qcc-listcard-name { font-size: 16px; line-height: 22px; font-weight: 800; overflow-wrap: anywhere; }
.qcc-thumb { flex: none; width: 56px; height: 56px; border-radius: 7px; object-fit: cover; border: 1px solid var(--pos-line); background: var(--pos-surface-2); }
.qcc-thumb--none { display: block; }
.qcc-table .qcc-thumb { width: 40px; height: 40px; border-radius: 6px; display: block; }
.qcc-table a.qcc-table-link { color: inherit; font-weight: 400; text-decoration: none; }  /* the product name in the row's weight (4.31) */
.qcc-table a.qcc-table-link:hover { color: var(--pos-accent); }
.qcc-listcard--muted .qcc-soon { margin-inline-start: auto; }

/* ===== A12 · photo gallery (4.20-4.21): square cells, the first is the main photo, drag or move to reorder,
   a cross takes one out on Save, an add cell, and a refused cell. The grip and the cross sit on a veil of the page colour ===== */
.qcc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qcc-gallery-cell {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--pos-line); border-radius: var(--qcc-r-md); background: var(--pos-surface-2);
}
.qcc-gallery-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qcc-gallery-cell--main { border: 2px solid var(--pos-accent); }
.qcc-gallery-cell[draggable="true"] { cursor: grab; }
.qcc-gallery-cell .qcc-pill { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; height: 20px; font-size: 11px; padding-inline: 6px; }
.qcc-gallery-cell:not(.qcc-gallery-cell--main) .qcc-gallery-mainpill { display: none; }
.qcc-gallery-grip, .qcc-gallery-del {
  position: absolute; inset-block-start: 4px; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pos-bg) 70%, transparent); color: var(--pos-text);
}
.qcc-gallery-grip { inset-inline-end: 4px; }
.qcc-gallery-del { inset-inline-start: 4px; cursor: pointer; }
.qcc-gallery-grip svg { width: 16px; height: 16px; }
.qcc-gallery-del svg { width: 14px; height: 14px; }
.qcc-gallery-cell:has(.qcc-gallery-del input:checked) { display: none; }  /* no script: a ticked cross hides the cell until Save */
.qcc-gallery-move { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.qcc-gallery-move:focus {  /* keyboard reorder: the two buttons show only when focused */
  clip: auto; width: auto; height: auto; inset-inline: 4px; inset-block-end: 4px; padding: 4px 6px; border-radius: 6px; z-index: 1;
  background: var(--pos-surface); color: var(--pos-text); font-size: 12px; font-weight: 700;
}
.qcc-gallery-cell--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  border-style: dashed; color: var(--pos-text-2); font-size: 12px; font-weight: 700; text-align: center;
}
.qcc-gallery-cell--add svg { width: 24px; height: 24px; }
.qcc-gallery-cell--add:hover, .qcc-gallery-cell--add:focus-within { border-color: var(--pos-accent-line); background: var(--pos-accent-soft); }
.qcc-gallery-cell--refused { display: grid; place-items: center; border-color: var(--pos-danger); color: var(--pos-danger-hi); }
.qcc-gallery-cell--refused svg { width: 28px; height: 28px; }

/* ===== A13 · switch row (4.20-4.21 on the phone, 4.31's free delivery and 5.3's card payments in the laptop panels: each
   drop draws a switch, qcc has none): a label, a real checkbox, a track ===== */
.qcc-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-inline: 2px; font-size: 16px; font-weight: 700; cursor: pointer; }
.qcc-switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 15px; background: var(--pos-line-strong); transition: background .15s; }
.qcc-switch i {
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pos-surface); box-shadow: 0 0 0 1px var(--pos-line);
}
.qcc-switchrow input:checked + .qcc-switch { background: var(--pos-pay); }
.qcc-switchrow input:checked + .qcc-switch i { inset-inline-start: auto; inset-inline-end: 3px; }
.qcc-switchrow input:focus-visible + .qcc-switch { outline: 2px solid var(--pos-text); outline-offset: 3px; }
.qcc-switchrow:has(input:disabled) { cursor: default; }
.qcc-panel .qcc-switchrow { min-height: 40px; font-size: 14px; }

/* ===== A19+ ask · the variant row (4.20): grip, label, price, stock, remove; a head row names the three columns ===== */
.qcc-variants { gap: 6px; }
.qcc-variantrow, .qcc-variantrow-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 64px 24px; gap: 6px; align-items: center; }
.qcc-variantrow-head { font-size: 12px; font-weight: 700; color: var(--pos-text-2); padding-inline: 2px; }
.qcc-variantrow-head span:first-child { grid-column: 2; }
.qcc-variantrow-grip, .qcc-variantrow-del { color: var(--pos-text-3); display: grid; place-items: center; }
.qcc-variantrow-grip svg, .qcc-variantrow-del svg { width: 18px; height: 18px; }
.qcc-variantrow-del { position: relative; cursor: pointer; }
.qcc-variantrow-del:hover, .qcc-variantrow-del:focus-within { color: var(--pos-danger-hi); }
.qcc-variantrow:has(.qcc-variantrow-del input:checked) { display: none; }  /* no script: a ticked cross hides the row until Save */
.qcc-variantrow .qcc-input { padding-inline: 8px; min-width: 0; }
.qcc-variants-add { align-self: flex-start; margin-block-start: 4px; }

/* ===== A19+ ask · a typed select (4.20): the category is an input with a datalist, drawn with the select's chevron ===== */
.qcc-selectbox { position: relative; display: block; }
.qcc-selectbox > .qcc-select { padding-inline-end: 36px; }
.qcc-selectbox > svg { position: absolute; inset-block-start: 50%; inset-inline-end: 12px; width: 18px; height: 18px; margin-block-start: -9px; color: var(--pos-text-2); pointer-events: none; }
.qcc-selectbox > .qcc-select::-webkit-calendar-picker-indicator { opacity: 0; }  /* the browser's own arrow gives way to the drawn one */

/* ===== A5 · the product rows and the products toolbar (WP13 Task 5): the greyed Import chip, the row money, Add a variant as the drawn dashed bar (A19+ ask) ===== */
.qcc-toolbar .qcc-chip { white-space: nowrap; gap: 6px; }
.qcc-toolbar .qcc-chip svg { width: 16px; height: 16px; flex: none; }
.qcc-listcard-pills .qcc-money { font-size: 14px; font-weight: 700; }
.qcc-page-foot .qcc-row > .qcc-btn--primary { flex: 1.4; }
@media (max-width: 1279px) {
  .qcc-field > .qcc-variants-add { align-self: stretch; border-style: dashed; background: transparent; color: var(--pos-text-2); justify-content: flex-start; font-weight: 400; }  /* the drawn full-width dashed row (4.20) */
}

/* ===== A6 · batch confirm (4.23-4.25, 4.32): the owed block (warn), the tick list, one label-wrapping total button ===== */
.qcc-owed {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--pos-warn-soft); border: 1px solid var(--pos-warn); border-radius: var(--qcc-r-lg);
}
.qcc-owed-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }  /* the pill beside the title (4.23) */
.qcc-owed-top > .qcc-pill { flex: none; }
.qcc-owed-amount { font-size: 34px; line-height: 1.2; font-weight: 700; }
.qcc-owed-amount .qcc-money { font-size: inherit; }
.qcc-owed-amount { font-family: inherit; }  /* only the number is mono (D75), the currency word in the text face (4.23) */
.qcc-owed-top .qcc-label { font-size: 14px; color: var(--pos-text); }  /* the phone owed card's drawn bold title (4.23) */
.qcc-owed > .qcc-pill { align-self: flex-start; }
.qcc-btn--wrap { height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; line-height: 1.3; }
.qcc-batch { display: flex; flex-direction: column; gap: 6px; }
.qcc-batch-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; cursor: pointer;
  background: var(--pos-surface); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-md);
}
.qcc-batch-row.is-on { background: var(--pos-accent-soft); border-color: var(--pos-accent-line); }
.qcc-batch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.qcc-batch-main .qcc-mono { font-size: 14px; color: var(--pos-accent); }
.qcc-batch-amount { flex: none; font-size: 14px; font-weight: 700; }  /* the amount and its currency word, bold together (4.24, 4.32) */
.qcc-batch-tick {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  border: 2px solid var(--pos-line-strong); color: var(--pos-text-on-accent);
}
.qcc-batch-tick svg { width: 16px; height: 16px; visibility: hidden; }
.qcc-batch-row.is-on .qcc-batch-tick { background: var(--pos-accent); border-color: var(--pos-accent); }
.qcc-batch-row.is-on .qcc-batch-tick svg { visibility: visible; }
.qcc-batch-row:has(input:focus-visible) { outline: 2px solid var(--pos-text); outline-offset: 2px; }
.qcc-batch-all, .qcc-batch-some { display: contents; }  /* the double check while every row is ticked, the single one else */
.qcc-batch-all svg, .qcc-batch-some svg { width: 18px; height: 18px; flex: none; }
.qcc-batch-some, [data-confirm-cash].some .qcc-batch-all { display: none; }
[data-confirm-cash].some .qcc-batch-some { display: contents; }

/* ===== A5 · action cards as settings and statement rows (4.26, 4.28): the icon's size, a static or greyed card, links ===== */
.qcc-actioncard-icon svg { width: 18px; height: 18px; }
a.qcc-actioncard { text-decoration: none; }
.qcc-actioncard-label .qcc-help { font-size: 12.5px; }
.qcc-actioncard--static, .qcc-actioncard.qcc-listcard--muted { cursor: default; }
.qcc-actioncard--static:hover, .qcc-actioncard.qcc-listcard--muted:hover { border-color: var(--pos-line); background: var(--pos-surface); }
.qcc-actioncard > .qcc-btn { flex: none; }
.qcc-actioncard--static { padding-block: 12px; }
.qcc-stack--tight { gap: 8px; }

/* ===== A1 · the laptop's one measured column for the screens never drawn at 1280 (agreement, settings; plan ruling 7),
   and the agreement's stacked rate lines ===== */
.lapgrid--one { grid-template-columns: minmax(0, 640px); }
.qcc-fact { padding: 14px; font-size: 15px; }  /* one agreement sentence as its own card (4.27) */
.qcc-card.qcc-row { padding: 14px; }
.qcc-card.qcc-row > .qcc-actioncard-label { flex: 1; min-width: 0; }

/* ===== A19+ ask · a section title that sits close to what it names (4.23, 4.28) ===== */
.qcc-card-title--sec { margin-block-end: 0; }

/* ===== A14 · the wizard's progress line (4.5-4.10): six bars, the finished ones in accent, the current one dark ===== */
.qcc-steps { display: flex; flex-direction: column; gap: 6px; }
.qcc-steps-bar { display: flex; gap: 4px; }
.qcc-steps-step { flex: 1; height: 4px; border-radius: 2px; background: var(--pos-line-strong); }
.qcc-steps-step.is-done { background: var(--pos-accent); }
.qcc-steps-step.is-on { background: var(--pos-text); }

/* ===== A19+ ask · the theme card (4.6): a preview drawn in the theme's own colours, its name, a tick or Coming ===== */
.qcc-themegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qcc-themecard {
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: var(--pos-surface); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-lg);
}
.qcc-themecard--on { border: 2px solid var(--pos-accent); padding: 7px; }
.qcc-themecard--coming { opacity: .55; }
.qcc-themecard-preview { height: 88px; padding: 10px; display: flex; flex-direction: column; gap: 6px; border: 1px solid; border-radius: 8px; }
.qcc-themecard-preview i { display: block; height: 6px; width: 40%; border-radius: 3px; }
.qcc-themecard-preview b { display: block; height: 22px; width: 56%; margin-block-start: auto; border-radius: 5px; }
.qcc-themecard-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 15px; font-weight: 700; }
.qcc-themecard-name svg { width: 18px; height: 18px; color: var(--pos-accent); }

/* ===== A19+ ask · the look step (4.7): the logo tile beside its add cell, the 16:9 cover, the accent swatches ===== */
.qcc-uprow { display: flex; align-items: center; gap: 12px; }
.qcc-logotile {
  flex: none; width: 72px; height: 72px; border-radius: var(--qcc-r-md); object-fit: cover;
  display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--pos-text-on-accent);
}
.qcc-uprow-add {  /* the drawn small dashed button beside the logo (4.7) */
  flex: none; flex-direction: row; aspect-ratio: auto; height: 44px; padding-inline: 14px; gap: 8px; font-size: 13px;
}
.qcc-uprow-add svg { width: 20px; height: 20px; }
.qcc-cover {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 10px; cursor: pointer;
  background-size: cover; background-position: center; border: 1px solid var(--pos-line); border-radius: var(--qcc-r-lg);
}
.qcc-cover--empty { border-style: dashed; border-color: var(--pos-line-strong); background: transparent; }
.qcc-cover-add {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--pos-text-2); font-weight: 600; font-size: 15px;
}
.qcc-cover-add svg { width: 22px; height: 22px; }
.qcc-cover > .qcc-pill { position: relative; }
.qcc-swatchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qcc-swatchrow > .qcc-swatches { display: contents; }
.qcc-swatchrow > img { margin-inline-start: auto; }  /* the badge at the end side of the swatches (4.7) */
.qcc-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.qcc-swatches label { display: inline-flex; cursor: pointer; }
.qcc-swatch { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px var(--pos-line-strong); }
.qcc-swatches input:checked + .qcc-swatch { box-shadow: 0 0 0 2px var(--pos-surface), 0 0 0 4px var(--pos-text); }
.qcc-swatches input:focus-visible + .qcc-swatch { outline: 2px solid var(--pos-text); outline-offset: 4px; }

/* ===== A19+ ask · the return-window stepper (4.8): minus, the number, plus, together at the start of the field ===== */
.qcc-stepper {
  align-self: stretch; display: flex; align-items: center; height: 52px; overflow: hidden;
  background: var(--pos-bg-2); border: 1px solid var(--pos-line-strong); border-radius: var(--qcc-r-md);
}
.qcc-stepper button { width: 52px; height: 52px; display: grid; place-items: center; border: 0; background: transparent; color: var(--pos-text); cursor: pointer; }
.qcc-stepper button svg { width: 20px; height: 20px; }
.qcc-stepper input {
  flex: none; width: 56px; border: 0; outline: 0; background: transparent; text-align: center; color: var(--pos-text);
  font: 800 22px var(--pos-mono); -moz-appearance: textfield;
}
.qcc-stepper input::-webkit-outer-spin-button, .qcc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== A19+ ask · the radio list (4.10): one courier company per row, a ring that fills when chosen ===== */
.qcc-radiolist { display: flex; flex-direction: column; }
.qcc-radiorow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; border-block-end: 1px solid var(--pos-line); cursor: pointer; }
.qcc-radiorow-dot {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--pos-line-strong);
}
.qcc-radiorow-dot svg { width: 24px; height: 24px; visibility: hidden; }
.qcc-radiorow:has(input:checked) { font-weight: 700; }
.qcc-radiorow:has(input:checked) .qcc-radiorow-dot { border-color: var(--pos-accent); color: var(--pos-accent); }
.qcc-radiorow:has(input:checked) .qcc-radiorow-dot svg { visibility: visible; }
.qcc-radiorow:has(input:focus-visible) .qcc-radiorow-dot { outline: 2px solid var(--pos-text); outline-offset: 3px; }

/* ===== A19+ ask · an input with a suffix (4.5): the shop domain beside the typed name; a help line with a lead icon;
   the copy field and the Buy now snippet box (4.11, 4.20) ===== */
.qcc-inputgroup {
  display: flex; align-items: center; gap: 8px; padding-inline-end: 12px;
  background: var(--pos-bg-2); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-md);
}
.qcc-inputgroup:focus-within { border-color: var(--pos-accent-line); box-shadow: 0 0 0 3px var(--pos-accent-soft); }
.qcc-inputgroup > .qcc-input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; }
.qcc-inputgroup-suffix { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pos-text-2); font-size: 13px; white-space: nowrap; }
.qcc-help--icon {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px;
  background: var(--pos-surface); border: 1px solid var(--pos-line); border-radius: var(--qcc-r-lg); font-size: 13px;
}
.qcc-help--icon > span { flex: 1; min-width: 0; }
.qcc-help--icon svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .qcc-inputgroup > .qcc-input--ltr, [dir="rtl"] .qcc-snippet { text-align: start; }  /* the address reads from its left edge (4.5, 4.11) */
.qcc-inputgroup--copy { padding-inline-end: 6px; }  /* a copy field: the value, Copy inside at its end (4.11, 4.20) */
.qcc-inputgroup--copy > .qcc-btn { flex: none; }
.qcc-snippet { min-height: 0; overflow: hidden; resize: none; white-space: pre; font-size: 13px; line-height: 1.6; }  /* the drawn fixed two-line box (4.11) */
.qcc-field > .qcc-btn[data-copy] { align-self: flex-start; }  /* Copy under the snippet, at the start side (4.11) */

/* ===== A19+ ask · the owing filter (5.2): qcc's filter in the warn tone, the chip that opens the owing list ===== */
.qcc-filter--warn { color: var(--pos-warn); border-color: var(--pos-warn); background: var(--pos-warn-soft); }
.qcc-filter--warn:hover { color: var(--pos-warn); border-color: var(--pos-warn); }

/* ===== A19+ ask · a quiet row link (5.2, 5.4): the merchant's name is a link for no script and a new tab, drawn as text ===== */
.qcc-table a.qcc-rowlink { color: inherit; font-weight: 400; text-decoration: none; }  /* the name in the row's weight (5.2-5.4) */
.qcc-card--cash .qcc-table a.qcc-rowlink { font-weight: 600; }  /* 5.6 draws its courier companies bold */

/* ===== A1 · the merchant panel's foot (5.3): the help line on the start side of Suspend, wrapping in its own width ===== */
.qcc-panel-foot > .qcc-help { flex: 1 1 12em; }

/* ===== A1 · the ops registry's grid (5.3): with the panel summoned the grid is table and panel (.lapgrid.wide's
   420 px column), and the toolbar steps aside, as 5.3 draws it ===== */
body.ops .lapgrid:has(#panel .qcc-panel) .qcc-toolbar { display: none; }
.lapgrid:has(#panel .qcc-panel) .qcc-col-wide { display: none; }  /* 5.3: beside the panel the table drops Unconfirmed and Since, also when htmx summons it */

/* ===== A16 · stuck tone (5.5, 5.6, 5.13): the Telegram sentence on the brick soft line, the stuck table's rows barred at
   the start edge (the bar mirrors in Kurdish by border-inline-start), the hours in brick ===== */
.qcc-stuckline {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--qcc-r-md); background: var(--pos-danger-soft); border: 1px solid var(--pos-danger);
  font-size: 13.5px; line-height: 1.5;
}
.qcc-stuckline > svg { width: 20px; height: 20px; flex: none; color: var(--pos-danger-hi); }
[data-theme="light"] .qcc-stuckline > svg { color: var(--pos-danger); }
.qcc-stuckline b { font-weight: 600; }
.qcc-table tr.qcc-tr--stuck td:first-child { border-inline-start: 3px solid var(--pos-danger); }
.qcc-stuckhours { white-space: nowrap; }  /* the unit word plain, the number bold in brick (5.5) */
.qcc-stuckhours-n { color: var(--pos-danger-hi); font-family: var(--pos-mono); font-weight: 700; }
[data-theme="light"] .qcc-stuckhours-n { color: var(--pos-danger); }
.qcc-empty--stuck { padding-block: 20px 8px; }
.qcc-empty--stuck svg { color: var(--pos-pay-hi); opacity: 1; }
[data-theme="light"] .qcc-empty--stuck svg { color: var(--pos-pay); }
@media (max-width: 1279px) {
  .qcc-stuckline { align-items: flex-start; }
  .qcc-stuckline > svg { margin-block-start: 3px; }
}

/* ===== A15 · audited notice (5.7, 5.8): the accent line, the lock, one sentence; it sits above the buyer block ===== */
.qcc-audited {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: var(--qcc-r-md); background: var(--pos-accent-soft); border: 1px solid var(--pos-accent-line);
}
.qcc-audited > svg { width: 20px; height: 20px; flex: none; color: var(--pos-accent); margin-block-start: 1px; }
.qcc-audited b { display: block; font-size: 14px; line-height: 20px; }
.qcc-audited .qcc-help { display: block; font-size: 13px; line-height: 18px; margin-block-start: 2px; }

/* ===== A19+ ask · the all-orders toolbar (5.5): its title at the start, and a plain <select> drawn as qcc's filter
   (the courier company, merchant and period chips; design ask 10) ===== */
.qcc-toolbar > h2 { margin: 0; font-size: 16px; font-weight: 800; }
.qcc-filter--select { cursor: pointer; height: 30px; padding-inline: 12px; border-radius: 999px; font-size: 12px; }  /* the drop's compact chip */
.qcc-filter--select:focus-within { outline: 2px solid var(--pos-text); outline-offset: 2px; }
.qcc-filter--select select {
  appearance: none; -webkit-appearance: none; field-sizing: content; width: auto; min-width: 0; max-width: 200px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0;
  font: inherit; color: inherit; cursor: pointer; text-overflow: ellipsis;
}
.qcc-filter--select select option { color: var(--pos-text); background: var(--pos-surface); }
.qcc-cashlink { align-self: flex-start; }  /* Courier cash (5.6), reached from here: design ask 11 */

/* ===== A1 · the all-orders grid (5.7): with an order panel summoned the stuck block and the courier-cash link step aside
   and the table drops Courier company and City (.qcc-col-wide), as 5.7 draws it ===== */
body.ops .lapgrid.wide:not(:has(#panel .qcc-panel)) { grid-template-columns: minmax(0, 1fr); }  /* no panel summoned: the table runs the whole width */
body.ops .lapgrid.wide:not(:has(#panel .qcc-panel)) #panel { display: none; }
.lapgrid.allorders:has(#panel .qcc-panel) :is(.qcc-stuckline, .qcc-card--stuck, .qcc-empty--stuck, .qcc-cashlink) { display: none; }

/* ===== A1 · the pager's two buttons are links with words, not glyphs (design ask 10) ===== */
a.qcc-pager-btn { text-decoration: none; }

/* ===== A19+ ask · courier cash, one company opened under the table (5.6): the nested card steps in ===== */
.qcc-cashsub { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 28px; }
.qcc-cashsub > .qcc-help { padding-inline: 12px; }  /* the caption in the text face: letter-spacing would unjoin Kurdish */

/* ===== A19+ ask · a record's value with a button after it (5.7's buyer phone and Call) ===== */
.qcc-deflist dd > .qcc-btn { margin-inline-start: 12px; vertical-align: middle; }

/* ===== A5 · list card with a call button (5.13): the drawn outlined round button, and the code as a link drawn as text ===== */
.qcc-listcard-act--call { border: 1px solid var(--pos-line-strong); border-radius: 999px; color: var(--pos-text); }
.qcc-listcard-top a.qcc-mono { text-decoration: none; }  /* 5.13's linked code, drawn as text (accent by .qcc-code, as 5.12-5.13 draw it) */
.qcc-listcard-main .qcc-listcard-amount { font-size: 14px; font-weight: 700; color: var(--pos-text); }  /* the card's amount, bold in the text colour (4.12-4.15, 5.12, 5.13) */
.qcc-card > .qcc-deflist dd { font-weight: 700; }  /* 5.7's buyer values are bold */

/* ===== A1 · one dispute on the laptop (5.8-5.10): the head's code · merchant · courier company line, then three
   columns (the thread a little wider), each a stack under its small label ===== */
.qcc-dispute-title { gap: 8px; font-size: 15px; }
.qcc-dispute-title > .qcc-mono { font-size: 17px; font-weight: 600; }
.qcc-dispute { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; align-items: start; }
.qcc-dispute-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qcc-dispute-col > .qcc-label:not(:first-child) { margin-block-start: 4px; }

/* ===== A19+ ask · the dispute thread's internal note (5.8): ops's own card, dashed, on the second surface; and the
   composer under the thread: qcc's segmented control as two radios that fill the row beside Reply ===== */
.qcc-msg--ops { border-style: dashed; border-inline-start-style: solid; border-inline-start-color: var(--pos-line-strong); background: var(--pos-surface-2); }
.qcc-seg--fill { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; }
.qcc-seg--fill .qcc-seg-opt { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; padding-inline: 6px; }
.qcc-seg-opt:has(input:checked) { background: var(--pos-surface); color: var(--pos-text); }  /* the lit option follows the radio */
.qcc-seg-opt:has(input:focus-visible) { outline: 2px solid var(--pos-text); outline-offset: 1px; }
.qcc-dispute-col > .qcc-stack > .qcc-textarea { min-height: 56px; }  /* the composer's box, smaller than the outcome's */

/* ===== A12 · the photo grid read only, four across (5.8's evidence: the door photos, each labelled by its party) ===== */
.qcc-gallery--four { grid-template-columns: repeat(4, 1fr); }

/* ===== A19+ ask · a note card (5.8's return request): a lead mark, the reason in bold, one line under it ===== */
.qcc-notecard {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: var(--qcc-r-md); background: var(--pos-surface-2); border: 1px solid var(--pos-line);
  font-size: 13px; line-height: 18px;
}
.qcc-notecard > svg { width: 18px; height: 18px; flex: none; margin-block-start: 1px; }
.qcc-notecard b { display: block; font-size: 14px; line-height: 20px; }

/* ===== A17 · the decision form (5.8-5.10): who pays what against the disputed amount on three money inputs, the boxed
   balance meter (the sheet's bordered .qcc-balance, its off state in the brick tone as drawn; office.js swaps --ok
   and --off), the outcome, then Decide or the sealed Decided line (accent soft) and Reopen, across the column ===== */
.qcc-decision { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.qcc-decision-amount { font-size: 13px; font-weight: 700; color: var(--pos-text-2); }
.qcc-decision-amount .qcc-money { color: var(--pos-text); }
.qcc-decision > .qcc-help { font-size: 13px; color: var(--pos-text-2); }
.qcc-decision-shares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qcc-decision-shares .qcc-input { width: 100%; min-width: 0; }
.qcc-balance--box { display: flex; gap: 8px; padding: 8px 12px; border: 1px solid; border-radius: var(--qcc-r-md); font-size: 13px; }
.qcc-balance--box svg { width: 16px; height: 16px; flex: none; }
.qcc-balance--box.qcc-balance--ok svg + svg, .qcc-balance--box.qcc-balance--off svg:first-child { display: none; }
.qcc-balance--box.qcc-balance--ok { background: var(--pos-pay-soft); border-color: var(--pos-pay); }
.qcc-balance--box.qcc-balance--off { background: var(--pos-danger-soft); border-color: var(--pos-danger); color: var(--pos-danger-hi); }
[data-theme="light"] .qcc-balance--box.qcc-balance--ok { color: var(--pos-pay); }
[data-theme="light"] .qcc-balance--box.qcc-balance--off { color: var(--pos-danger); }
.qcc-decision .qcc-textarea.qcc-input--ro { min-height: 72px; white-space: pre-line; }
.qcc-decided {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px;
  border-radius: var(--qcc-r-md); background: var(--pos-accent-soft); border: 1px solid var(--pos-accent-line);
  font-size: 13px; line-height: 18px;
}
.qcc-decided > svg { width: 16px; height: 16px; flex: none; margin-block-start: 1px; color: var(--pos-accent); }
.qcc-dispute-col > .qcc-btn { width: 100%; margin-block-start: 4px; }

/* ===== A19+ ask · WP17, the builder wizard (CP9 9.1-9.15): the address line's ok state, the theme cards as radios, the
   accents the checked theme allows (ruling 8), the style cards with the shop in a preview frame, the home section
   rows with a drag handle (ruling 9) ===== */
.qcc-help--ok { color: var(--pos-pay-hi); }
.qcc-themecard { cursor: pointer; }
.qcc-themecard .qcc-themecard-name svg { visibility: hidden; }
.qcc-themecard:has(input:checked) { border: 2px solid var(--pos-accent); padding: 7px; }
.qcc-themecard:has(input:checked) .qcc-themecard-name svg { visibility: visible; }
.qcc-themecard:has(input:focus-visible) { outline: 2px solid var(--pos-text); outline-offset: 2px; }
.qcc-themepick:has(input[name="theme"][value="paper"]:checked) .qcc-swatches label:not([data-themes~="paper"]),
.qcc-themepick:has(input[name="theme"][value="linen"]:checked) .qcc-swatches label:not([data-themes~="linen"]),
.qcc-themepick:has(input[name="theme"][value="slate"]:checked) .qcc-swatches label:not([data-themes~="slate"]),
.qcc-themepick:has(input[name="theme"][value="poster"]:checked) .qcc-swatches label:not([data-themes~="poster"]) { display: none; }
.qcc-stylepick { display: flex; flex-direction: column; gap: 16px; }
.qcc-stylecard { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--pos-line); border-radius: 12px; cursor: pointer; }
.qcc-stylecard:has(input:checked) { border: 2px solid var(--pos-accent); padding: 7px; }
.qcc-stylecard:has(input:focus-visible) { outline: 2px solid var(--pos-text); outline-offset: 2px; }
.qcc-preview { direction: ltr; position: relative; display: block; overflow: hidden; margin-inline: auto; border: 1px solid var(--pos-line); border-radius: 8px; background: var(--pos-surface); pointer-events: none; }
.qcc-preview iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0;  /* ltr box: the scale's origin is its start */ border: 0; transform-origin: 0 0; }
.qcc-preview--phone { width: 240px; height: 480px; }
.qcc-preview--phone iframe { width: 360px; height: 720px; transform: scale(.6667); }
.qcc-preview--laptop { width: 320px; height: 200px; }
.qcc-preview--laptop iframe { width: 1280px; height: 800px; transform: scale(.25); }
@media (min-width: 1024px) {
  .qcc-stylepick { flex-direction: row; }
  .qcc-stylecard { flex: 1; }
  .qcc-preview--laptop { width: 640px; height: 400px; }
  .qcc-preview--laptop iframe { transform: scale(.5); }
}
.qcc-sectionrow { display: flex; align-items: center; gap: 10px; min-height: 52px; border-block-end: 1px solid var(--pos-line); background: var(--pos-surface); }
.qcc-sectionrow .qcc-switchrow { flex: 1; }
.qcc-sectionrow--fixed .qcc-sectionrow-name { flex: 1; font-size: 16px; font-weight: 700; }
.qcc-sectionrow-grip { display: inline-flex; width: 24px; flex: none; cursor: grab; touch-action: none; }
.qcc-sectionrow-grip svg { width: 20px; height: 20px; }
.qcc-sectionrow.is-dragging { opacity: .6; }
.qcc-previewswitch { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qcc-previewswitch .qcc-seg { width: 100%; }
.qcc-previewswitch:has(input[value="phone"]:checked) .qcc-preview--laptop,
.qcc-previewswitch:has(input[value="laptop"]:checked) .qcc-preview--phone { display: none; }
.qcc-pasteguide { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
/* ===== A19+ ask · WP17, the Unpublished changes bar (9.15): the warn pair, the words, then Preview, Discard and the
   one emerald Publish changes; a changed look row carries the warn pill ===== */
.qcc-draftbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--qcc-r-md); background: var(--pos-warn-soft); border: 1px solid var(--pos-warn); }
.qcc-draftbar-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; }
.qcc-draftbar .qcc-row { flex-wrap: wrap; }
.qcc-lookrow--changed { border-color: var(--pos-warn); }

/* ===== A20+ ask · WP19, the domain page (9.16-9.18, 9.26; redone 30 Oct after Darya's walk: every part framed).
   A DNS line: one framed row, the small column names over the mono values, Copy at the row's end (under it on the
   phone); a card's parts split by a line; the state with its icon ===== */
.qcc-dnstable { text-align: start; }
.qcc-dnstable td, .qcc-dnstable th { padding: 10px 14px; vertical-align: middle; }
.qcc-dnstable code { font-family: var(--pos-mono); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
/* the whole width shared out (Darya, 30 Oct: "let them breathe"): Name a third, Type a slice, Value the rest */
.qcc-dnstable { table-layout: fixed; width: 100%; }
.qcc-dnstable th:nth-child(1) { width: 34%; } .qcc-dnstable th:nth-child(2) { width: 14%; } .qcc-dnstable th:nth-child(3) { width: 52%; }
.qcc-dnstable code[data-dns="name"], .qcc-dnstable code[data-dns="value"] { white-space: normal; overflow-wrap: anywhere; }
.qcc-dnstable-value { display: inline-flex; align-items: center; gap: 8px; }  /* Copy right beside its value, never at the far end */
@media (max-width: 1279px) {  /* the phone: a tighter table; a long TXT name or value wraps inside its cell */
  .qcc-dnstable { table-layout: auto; }
  .qcc-dnstable th:nth-child(n) { width: auto; }
  .qcc-dnstable td, .qcc-dnstable th { padding: 8px 5px; }
  .qcc-dnstable code { font-size: 12px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
  .qcc-dnstable td:nth-child(1) { min-width: 7ch; }
  .qcc-dnstable code[data-dns="value"] { min-width: 18ch; }  /* shops.zeneonix.com on one line; a long TXT name wraps instead */
  .qcc-dnstable-value { flex-wrap: wrap; justify-content: flex-start; gap: 2px; }  /* Copy drops under the value when the row is tight */
  .qcc-dnstable code[data-dns="type"] { white-space: nowrap; overflow-wrap: normal; }
  .qcc-dnstable-value { display: flex; }
}
.qcc-domain-note { display: flex; flex-direction: column; gap: 4px; }
.qcc-domain-note > .qcc-help { margin: 0; }
.qcc-domain-part { display: flex; flex-direction: column; gap: 8px; }
.qcc-domain-part + .qcc-domain-part { border-block-start: 1px solid var(--pos-line); padding-block-start: 14px; margin-block-start: 6px; }
.qcc-domain-part > .qcc-help { margin: 0; }
.qcc-domain-host { font-family: var(--pos-mono); font-weight: 600; }
.qcc-domain-state { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.qcc-domain-state > svg { width: 18px; height: 18px; flex: none; }
.qcc-domain-state--live { color: var(--pos-pay-hi); }
.qcc-domain-state--wrong { color: var(--pos-danger-hi); }
.qcc-domain-wide { width: 100%; }
.qcc-domain-rail { display: flex; flex-direction: column; gap: 14px; }