/**
 * Naqla (نقلة) Merchant Admin — v5 "Ink & Brass".
 * Hairlines instead of cards, ledger instead of widgets.
 * One accent (brass), one depth color (emerald), warm paper work surface.
 * All text pairs meet WCAG AA (≥4.5:1); minimum text size 12px.
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Reem+Kufi:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Default theme: Sapphire (navy, full dark). Light "paper" theme: [data-theme="paper"]. */
:root {
  /* Ink — masthead, statement band */
  --tgr-ink: #070c16;
  --tgr-ink-3: #18233a;
  --tgr-ink-line: #24314a;
  --tgr-ink-text: #e9edf4;
  --tgr-ink-soft: #bcc7d8;   /* labels over the band glow */
  --tgr-ink-mute: #98a5bb;
  --tgr-mast-bg: rgba(7, 12, 22, 0.84);

  /* Accents */
  --tgr-brass: #c4a466;
  --tgr-brass-soft: #e6d6b0;
  --tgr-brass-ink: #cfb173;  /* brass as text on the work surface */
  --tgr-up: #7fd1b0;
  --tgr-down: #e0948c;

  /* Work surface */
  --tgr-paper: #0b1220;
  --tgr-paper-2: #121c2f;
  --tgr-field: #0e1728;
  --tgr-surface: #0f182a;       /* framed tables */
  --tgr-surface-head: #121d33;
  --tgr-surface-hover: #16223a;
  --tgr-rule: #2a3953;
  --tgr-rule-soft: #1b2740;
  --tgr-rule-strong: #2a3953; /* top rule of sections */
  --tgr-text: #e9edf4;
  --tgr-text-2: #bcc6d6;
  --tgr-text-3: #93a0b6;
  --tgr-link: #8dc1f6;
  /* Background life (owner, 18 Oct): the same navy/blue/brass, blended in soft overlapping pools so the page
     breathes without pulling focus. Fixed to the viewport; content never sits on a hard edge. */
  --tgr-page-glow: radial-gradient(1100px 560px at 88% -10%, rgba(40, 98, 178, 0.36), transparent 66%),
                   radial-gradient(900px 640px at -6% 38%, rgba(30, 72, 140, 0.20), transparent 70%),
                   radial-gradient(760px 520px at 104% 96%, rgba(40, 98, 178, 0.14), transparent 68%),
                   radial-gradient(700px 420px at 12% 108%, rgba(196, 164, 102, 0.11), transparent 70%),
                   radial-gradient(520px 300px at 58% 46%, rgba(70, 120, 200, 0.05), transparent 70%);
  --tgr-page-base: linear-gradient(180deg, #0c1527 0%, #0b1220 45%, #090f1b 100%);
  --tgr-grain-opacity: 0.045;

  /* Statement band */
  --tgr-band: #070d18;
  --tgr-band-edge: #2f4466;
  --tgr-band-glow: rgba(46, 110, 196, 0.62);
  --tgr-slab-glow: rgba(46, 110, 196, 0.30);
  --tgr-band-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --tgr-chart: #2f6fc4;
  --tgr-chart-ghost: #4c5a74;

  /* Primary button */
  --tgr-btn-bg: var(--tgr-brass);
  --tgr-btn-fg: #14110a;
  --tgr-btn-hover: var(--tgr-brass-soft);

  /* Status */
  --tgr-ok: #6fc7a3;
  --tgr-warn: #d9b46a;
  --tgr-danger: #ea958b;

  --tgr-font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  /* Owner rule (18 Oct): the display face (Reem Kufi) is for the wordmark «نقلة» only — every heading and figure uses the body face */
  --tgr-heading: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tgr-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tgr-wordmark: "Reem Kufi", "IBM Plex Sans Arabic", sans-serif; /* «نقلة» only */
  --tgr-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tgr-radius: 4px;  /* WEB-10 (U-17): spec is 4px; every corner uses this token */
  --tgr-max: 1360px;
  --tgr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tgr-dur: 140ms;

  /* Legacy aliases used across older admin blades */
  --ink: var(--tgr-text);
  --muted: var(--tgr-text-3);
  --line: var(--tgr-rule);
  --bg: var(--tgr-paper);
  --card: var(--tgr-paper);
  --brand: var(--tgr-link);
  --danger: var(--tgr-danger);
  --warn: var(--tgr-warn);

  color-scheme: dark;
}

/* Light theme — warm paper with an ink masthead. All pairs ≥ AA. */
:root[data-theme="paper"] {
  --tgr-ink: #0b0d0c;
  --tgr-ink-3: #1d2320;
  --tgr-ink-line: #262d29;
  --tgr-ink-text: #e9e6de;
  --tgr-ink-soft: #b8c1bb;
  --tgr-ink-mute: #9aa59e;
  --tgr-mast-bg: #0b0d0c;
  --tgr-brass-ink: #7a5c22;
  --tgr-paper: #f3f0e9;
  --tgr-paper-2: #ebe7dd;
  --tgr-field: #faf8f4;
  --tgr-surface: #fbf9f5;
  --tgr-surface-head: #ece7dd;
  --tgr-surface-hover: #f1ede4;
  --tgr-rule: #cbc4b4;
  --tgr-rule-soft: #e3ded2;
  --tgr-rule-strong: #16191a;
  --tgr-text: #16191a;
  --tgr-text-2: #424845;
  --tgr-text-3: #5f6460;
  --tgr-link: #0f3d33;
  --tgr-page-glow: radial-gradient(1000px 520px at 88% -10%, rgba(46, 104, 182, 0.10), transparent 66%),
                   radial-gradient(820px 560px at -6% 40%, rgba(29, 107, 88, 0.06), transparent 70%),
                   radial-gradient(700px 440px at 12% 106%, rgba(196, 164, 102, 0.14), transparent 70%);
  --tgr-page-base: linear-gradient(180deg, #f6f3ec 0%, #f3f0e9 50%, #efebe2 100%);
  --tgr-grain-opacity: 0.035;
  --tgr-band: #0b0d0c;
  --tgr-band-edge: transparent;
  --tgr-band-glow: rgba(29, 107, 88, 0.42);
  --tgr-slab-glow: rgba(29, 107, 88, 0.22);
  --tgr-band-shadow: none;
  --tgr-chart: #1d6b58;
  --tgr-chart-ghost: #4a544f;
  /* WEB-10 (U-18): primary action stays brass in paper too (#14110a on #c4a466 ≈ 8:1) */
  --tgr-btn-bg: #c4a466;
  --tgr-btn-fg: #14110a;
  --tgr-btn-hover: #d1b47a;
  --tgr-ok: #1f6f58;
  --tgr-warn: #85601a;
  --tgr-danger: #a3433c;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tgr-font);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tgr-text);
  background: var(--tgr-paper);   /* the blended pools live on html::after, see end of file */
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--tgr-link); text-underline-offset: 0.2em; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tgr-brass);
  outline-offset: 2px;
}

.num {
  font-family: var(--tgr-mono);
  direction: ltr;
  unicode-bidi: isolate;
}

/* visually hidden without offsetting — an inline-start offset widens the page in RTL */
.skip-link {
  position: absolute;
  top: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1000;
  width: auto; height: auto; overflow: visible;
  clip-path: none;
  padding: 0.5rem 0.85rem;
  background: var(--tgr-paper);
  color: var(--tgr-text);
  border: 1px solid var(--tgr-text);
}

/* —— Masthead —— */
.mast {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--tgr-mast-bg);
  backdrop-filter: blur(12px);
  color: var(--tgr-ink-text);
  border-bottom: 1px solid var(--tgr-ink-line);
}
.mast-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 60px;
  padding: 0 2rem;
}
.mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.mark .mark-icon { width: 28px; height: 28px; flex: 0 0 auto; }
/* Naqla wordmark — Reem Kufi 600, per brand sheet */
.mark b {
  font-family: var(--tgr-wordmark);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
}
.mark span {
  color: var(--tgr-ink-mute);
  font-size: 0.8125rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--tgr-ink-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modules { display: flex; gap: 0.25rem; }
.modules a {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--tgr-ink-mute);
  text-decoration: none;
  border-radius: var(--tgr-radius);
  white-space: nowrap;
}
.modules a:hover { color: var(--tgr-ink-text); }
.modules a.active { color: var(--tgr-ink-text); background: var(--tgr-ink-3); }
.mast-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 0.75rem; }
.store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.85rem;
  border: 1px solid var(--tgr-ink-line);
  border-radius: var(--tgr-radius);
  color: var(--tgr-ink-text);
  text-decoration: none;
  font-size: 0.8125rem;
}
.store-link:hover { border-color: var(--tgr-ink-mute); }
/* WEB-06: «كل الصفحات» — only between 901px and 1180px, where neither .modules nor .dock is shown */
.all-pages {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.85rem;
  border: 1px solid var(--tgr-ink-line);
  border-radius: var(--tgr-radius);
  color: var(--tgr-ink-text);
  text-decoration: none;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.all-pages:hover { border-color: var(--tgr-ink-mute); }
.all-pages:focus-visible { outline: 2px solid var(--tgr-brass); outline-offset: 2px; }

.subnav {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  height: 44px;
  padding: 0 2rem;
  border-top: 1px solid var(--tgr-ink-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--tgr-ink-mute);
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { color: var(--tgr-ink-text); }
.subnav a.active { color: var(--tgr-ink-text); }
.subnav a.active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--tgr-brass);
}
.subnav .count { font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-brass); }

/* —— Work zone —— */
main#main-content {
  max-width: var(--tgr-max);
  margin: 0 auto;
  padding: 2.25rem 2rem 5rem;
  min-width: 0;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-block-end: 1.75rem;
}
.page-head h1 {
  margin: 0;
  font-family: var(--tgr-heading);
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1.15;
  color: var(--tgr-text);
}
.page-lede {
  margin: 0.4rem 0 0;
  color: var(--tgr-text-3);
  font-size: 0.8125rem;
  max-width: 44rem;
}
.page-head .acts { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-head .acts form { margin: 0; }

/* —— Statement band (signature) —— */
.statement {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  background: var(--tgr-band);
  color: var(--tgr-ink-text);
  border-radius: var(--tgr-radius);
  box-shadow: inset 0 0 0 1px var(--tgr-band-edge), var(--tgr-band-shadow);
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 300px at 92% -10%, var(--tgr-band-glow), transparent 70%),
    radial-gradient(420px 260px at 8% 120%, rgba(196, 164, 102, 0.18), transparent 70%);
}
.st-main { position: relative; padding: 1.9rem 2.1rem; display: flex; flex-direction: column; min-width: 0; }
.st-label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.st-label .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4fbf98;
  box-shadow: 0 0 0 4px rgba(79, 191, 152, 0.15);
}
.st-figure {
  margin-top: 0.75rem;
  font-family: var(--tgr-display);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  direction: ltr;
  text-align: end;
  align-self: flex-start;
}
.st-figure small { font-size: 0.45em; color: var(--tgr-ink-mute); }
.st-delta { margin-top: 0.65rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.st-delta b { font-weight: 500; color: var(--tgr-up); }
.st-delta b.down { color: var(--tgr-down); }
.st-chart { margin: 1.25rem -2.1rem -1.9rem; height: 150px; }
.st-chart svg { display: block; width: 100%; height: 100%; }
.st-cta { margin-top: auto; padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.st-cta form { margin: 0; }

.st-side {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  border-inline-start: 1px solid var(--tgr-ink-line);
}
.st-side > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid var(--tgr-ink-line);
}
.st-side > div:last-child { border-bottom: 0; }
.st-side span { font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.st-side b {
  margin-top: 0.25rem;
  font-family: var(--tgr-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.1;
}
.st-side em { font-style: normal; font-size: 0.75rem; color: var(--tgr-ink-mute); margin-top: 0.15rem; }

.st-chart stop { stop-color: var(--tgr-chart); }
.st-chart .ghost { stroke: var(--tgr-chart-ghost); }

/* theme switch (masthead) */
.theme-switch { display: flex; padding: 2px; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); }
.theme-switch button {
  padding: 4px 10px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--tgr-ink-mute);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--tgr-ink-3); color: var(--tgr-ink-text); }

/* —— Editorial columns —— */
.columns {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  margin-top: 2.25rem;
  border-top: 1px solid var(--tgr-rule-strong);
}
.columns.three { grid-template-columns: 320px minmax(0, 1fr) 300px; }
.columns > section {
  min-width: 0;
  padding: 1.4rem 1.75rem 0;
  border-inline-start: 1px solid var(--tgr-rule);
}
.columns > section:first-child { border-inline-start: 0; padding-inline-start: 0; }
.columns > section:last-child { padding-inline-end: 0; }
.col-head { display: flex; align-items: baseline; gap: 0.6rem; }
.col-head h2 { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.col-head a { margin-inline-start: auto; font-size: 0.8125rem; color: var(--tgr-text-3); text-decoration: none; }
.col-head a:hover { color: var(--tgr-text); }
.col-sub { margin: 0.2rem 0 1.1rem; font-size: 0.8125rem; color: var(--tgr-text-3); }

/* decisions list */
.dec { list-style: none; margin: 0; padding: 0; }
.dec li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.2rem 0.4rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--tgr-rule-soft);
}
.dec li:first-child { border-top: 0; padding-top: 0; }
.dec .n { font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-brass-ink); padding-top: 0.15rem; }
.dec strong { font-weight: 500; font-size: 0.875rem; }
.dec p { grid-column: 2; margin: 0; font-size: 0.8125rem; color: var(--tgr-text-2); }
.dec .go {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tgr-link);
  text-decoration: none;
}
.dec .go:hover { text-decoration: underline; }

/* —— Tables: ledger — hairlines, double rule under the header, no boxes (applies to every admin table) —— */
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
th, td { text-align: start; vertical-align: middle; padding-inline: 0.75rem; }
thead tr { border-top: 1px solid var(--tgr-rule-strong); }
th {
  padding-block: 0.75rem 0.6rem;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--tgr-text-3);
  border-bottom: 3px double var(--tgr-rule);
  white-space: nowrap;
}
td {
  padding-block: 1rem;
  border-bottom: 1px solid var(--tgr-rule-soft);
  color: var(--tgr-text);
}
tfoot td { border-top: 3px double var(--tgr-rule); border-bottom: 0; }
/* outer edges flush with the page grid; physical per direction so LTR figure cells don't flip it */
[dir="rtl"] tr > :first-child { padding-right: 0; }
[dir="rtl"] tr > :last-child { padding-left: 0; }
[dir="ltr"] tr > :first-child { padding-left: 0; }
[dir="ltr"] tr > :last-child { padding-right: 0; }
/* hover: a brass edge on the row's start, not a fill */
tbody tr:hover td { background: color-mix(in srgb, var(--tgr-text) 3%, transparent); }
[dir="rtl"] tbody tr:hover > :first-child { box-shadow: inset -2px 0 0 var(--tgr-brass); }
[dir="ltr"] tbody tr:hover > :first-child { box-shadow: inset 2px 0 0 var(--tgr-brass); }
[dir="rtl"] tbody tr > :first-child { padding-right: 0.9rem; }
[dir="ltr"] tbody tr > :first-child { padding-left: 0.9rem; }
[dir="rtl"] thead tr > :first-child { padding-right: 0.9rem; }
[dir="ltr"] thead tr > :first-child { padding-left: 0.9rem; }
th.fit, td.fit { width: 1%; white-space: nowrap; }
/* ledger numbering: 01, 02… in brass before the first cell (opt-in: table.indexed) */
table.indexed tbody { counter-reset: ledger-row; }
table.indexed tbody tr { counter-increment: ledger-row; }
table.indexed tbody td:first-child::before {
  content: counter(ledger-row, decimal-leading-zero);
  display: inline-block;
  min-width: 2.2rem;
  font-family: var(--tgr-mono);
  font-size: 0.75rem;
  color: var(--tgr-brass-ink);
  vertical-align: top;
  padding-top: 0.15rem;
}
table.indexed tbody td:first-child { white-space: nowrap; }
table.indexed tbody td:first-child > * { display: inline-flex; vertical-align: top; }
table.indexed thead th:first-child { padding-inline-start: calc(0.9rem + 2.2rem); }
/* figures line up under their headers: amounts hug the end edge, counts the start edge */
[dir="rtl"] td.amount { text-align: left; }
[dir="ltr"] td.amount { text-align: right; }
[dir="rtl"] td.num { text-align: right; }
[dir="rtl"] .kpis b, [dir="rtl"] .stat b { text-align: right; }
.toolbar + table, .toolbar + .tscroll { margin-top: 0; }
.toolbar + .tscroll thead tr, .toolbar + table thead tr { border-top: 0; }
.tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* person cell: typographic — name, then a mono sub-line. No avatars. */
.person { display: flex; flex-direction: column; min-width: 0; }
.person b { font-weight: 500; font-size: 0.875rem; color: var(--tgr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { margin-top: 0.15rem; font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-text-3); direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .person small { text-align: right; }

/* role / category marker: plain text with a square brass tick — not a pill */
.tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--tgr-text-2); white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; background: var(--tgr-rule); flex: 0 0 auto; }
.tag.brass { color: var(--tgr-brass-ink); }
.tag.brass::before { background: var(--tgr-brass); }
td.id, td.id a { font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-text-2); text-decoration: none; }
td.id a:hover { color: var(--tgr-text); text-decoration: underline; }
.r { text-align: end; }
td.amount { font-family: var(--tgr-mono); font-weight: 500; text-align: end; direction: ltr; }
td.amount small { font-family: var(--tgr-font); font-weight: 400; font-size: 0.75rem; color: var(--tgr-text-3); }
td.meta, .meta { color: var(--tgr-text-2); }

/* status — dot + word, no capsule */
.pill, .status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--tgr-text-3);
  white-space: nowrap;
}
.pill::before, .status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pill.ok, .status.ok { color: var(--tgr-ok); }
.pill.warn, .status.warn { color: var(--tgr-warn); }
.pill.danger, .status.danger { color: var(--tgr-danger); }

.empty-state {
  padding: 2rem 0;
  color: var(--tgr-text-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.empty-state strong { display: block; color: var(--tgr-text); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.2rem; }
td .empty-state { text-align: center; }
tbody tr:hover td:has(.empty-state) { background: transparent; }

/* —— Generic blocks used by other admin pages —— */
.card {
  margin-bottom: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--tgr-rule-strong);
  background: transparent;
}
.card > h2, .card > h3, .card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.card-head h2 { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.card-head p { margin: 0.2rem 0 0; font-size: 0.8125rem; font-weight: 400; color: var(--tgr-text-3); }
.card-head > :last-child:not(:first-child) { margin-inline-start: auto; }

/* generic card grid (e.g. themes catalog) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 1.75rem;
}

/* KPI strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tgr-rule-strong);
  border-bottom: 1px solid var(--tgr-rule);
  margin-bottom: 1.75rem;
}
.stat {
  padding: 1rem 1.25rem;
  border-inline-start: 1px solid var(--tgr-rule);
}
.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stat .muted, .stat > span { display: block; font-size: 0.8125rem; color: var(--tgr-text-3); }
.stat b { display: block; margin-top: 0.25rem; font-family: var(--tgr-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.stat .delta { font-size: 0.75rem; color: var(--tgr-ok); }

.muted { color: var(--tgr-text-3); }

code, pre { font-family: var(--tgr-mono); font-size: 0.8125rem; }
code { padding: 0.1em 0.35em; background: var(--tgr-paper-2); border-radius: 2px; }
pre {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: var(--tgr-paper-2);
  border: 1px solid var(--tgr-rule-soft);
  border-radius: var(--tgr-radius);
  color: var(--tgr-text-2);
}
pre code { padding: 0; background: none; }
.card > form + form, .card > form + a { margin-top: 0.5rem; }

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 36px;
  padding: 0 1rem;
  border: 1px solid var(--tgr-btn-bg);
  border-radius: var(--tgr-radius);
  background: var(--tgr-btn-bg);
  color: var(--tgr-btn-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tgr-dur) var(--tgr-ease), border-color var(--tgr-dur) var(--tgr-ease);
}
.btn:hover { background: var(--tgr-btn-hover); border-color: var(--tgr-btn-hover); }
.btn.secondary {
  background: transparent;
  color: var(--tgr-text);
  border-color: var(--tgr-rule);
}
.btn.secondary:hover { border-color: var(--tgr-text); background: transparent; }
.btn.ghost {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tgr-link);
}
.btn.ghost:hover { text-decoration: underline; background: none; }
.btn.danger { background: var(--tgr-danger); border-color: var(--tgr-danger); }
/* on ink surfaces */
.btn.light { background: var(--tgr-ink-text); color: var(--tgr-ink); border-color: var(--tgr-ink-text); }
.btn.light:hover { background: #fff; border-color: #fff; color: var(--tgr-ink); }
.btn.outline { background: transparent; color: var(--tgr-ink-text); border-color: var(--tgr-ink-line); }
.btn.outline:hover { border-color: var(--tgr-ink-mute); background: transparent; }

/* —— Forms —— */
label { font-size: 0.8125rem; color: var(--tgr-text-2); font-weight: 500; }
input, select, textarea {
  width: 100%;
  margin: 0.3rem 0 0.9rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--tgr-rule);
  border-radius: var(--tgr-radius);
  background: var(--tgr-field);
  color: var(--tgr-text);
  font: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--tgr-text-3); }
input::placeholder, textarea::placeholder { color: var(--tgr-text-3); }
/* WEB-06: checkbox/radio sit inline with their text (the global width:100% put them on their own centered line) */
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; flex: none; accent-color: var(--tgr-brass); }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
/* a .hint outside .field (e.g. settings › الضريبة) took body size/colour; keep it a quiet note everywhere */
.hint { font-size: 0.75rem; color: var(--tgr-text-3); font-weight: 400; }

/* —— Orders column picker (V4) —— */
.col-picker { position: relative; }
.col-picker > summary { list-style: none; cursor: pointer; }
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 11rem; padding: 0.55rem 0.65rem; display: grid; gap: 0.35rem;
  background: var(--tgr-surface, #0e1728); border: 1px solid var(--tgr-ink-line, var(--tgr-rule));
  border-radius: var(--tgr-radius); box-shadow: 0 16px 36px -24px rgba(0,0,0,0.75);
}
.col-picker-menu label {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-size: 0.82rem; color: var(--tgr-ink-text, var(--tgr-text)); cursor: pointer;
}
.col-picker-menu input { width: auto; margin: 0; }

/* —— List toolbar: status tabs + search (client-side filter) —— */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--tgr-rule-strong);
  border-bottom: 1px solid var(--tgr-rule);
}
.seg { display: flex; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative;
  padding: 0.85rem 1.1rem 0.8rem;
  border: 0;
  background: none;
  color: var(--tgr-text-3);
  font: inherit;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}
.seg button b { margin-inline-start: 0.4rem; font-family: var(--tgr-mono); font-weight: 400; font-size: 0.75rem; }
.seg button:hover { color: var(--tgr-text); }
.seg button[aria-pressed="true"] { color: var(--tgr-text); }
.seg button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 1.1rem;
  bottom: -1px;
  height: 2px;
  background: var(--tgr-brass);
}
.toolbar .search {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 260px;
  padding: 0 1rem;
  border-inline-start: 1px solid var(--tgr-rule);
  color: var(--tgr-text-3);
}
.toolbar .search input { margin: 0; padding: 0.7rem 0; border: 0; background: transparent; }
.toolbar .search input:focus-visible { outline: none; }
/* WEB-07 (U-14): the search input is borderless, so the focus cue lives on its wrapper — brass underline like .seg */
.toolbar .search:focus-within { box-shadow: inset 0 -2px 0 var(--tgr-brass); }
.list-foot { display: flex; justify-content: space-between; padding: 0.9rem 0; font-size: 0.8125rem; color: var(--tgr-text-3); }
tr[hidden] { display: none; }

/* —— Sections inside a page —— */
.panel { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--tgr-rule-strong); }
.panel:first-child { margin-top: 0; }
.panel-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; font-size: 0.875rem; font-weight: 600; }
.panel-head p { margin: 0; font-size: 0.8125rem; color: var(--tgr-text-3); }
.panel-head > :last-child:not(:first-child) { margin-inline-start: auto; }
.panel-head a { font-size: 0.8125rem; color: var(--tgr-text-3); text-decoration: none; }
.panel-head a:hover { color: var(--tgr-text); }
.note { margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--tgr-text-3); }

/* —— Forms —— */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label { margin-bottom: 0.1rem; }
.field .hint { margin: -0.6rem 0 0.9rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.form-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.form-inline input, .form-inline select { width: auto; margin: 0; }
textarea.code { font-family: var(--tgr-mono); font-size: 0.8125rem; line-height: 1.6; direction: ltr; text-align: left; }
input[type="number"], input[type="email"], input.ltr { direction: ltr; text-align: end; }
input[type="email"], input.ltr { text-align: start; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--tgr-brass); outline-offset: 0; }
.btn.sm { height: 30px; padding: 0 0.75rem; font-size: 0.75rem; }

/* collapsible "create" panel — native <details>, no JS */
.disclose { margin-bottom: 1.75rem; }
.disclose > summary {
  display: flex;
  padding-block: 1rem;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1.4rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--tgr-btn-bg);
  color: var(--tgr-btn-fg);
  font-family: var(--tgr-mono);
  font-size: 0.875rem;
}
.disclose[open] > summary::before { content: "−"; }
.disclose > summary span { margin-inline-start: auto; font-weight: 400; font-size: 0.8125rem; color: var(--tgr-text-3); }
.disclose > .disclose-body { padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--tgr-rule-soft); }

/* —— KPI row inside pages (ERP, accounting, platform) —— */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.75rem; overflow: hidden; }
.kpis > div { padding: 1.2rem 1.4rem; border-inline-start: 1px solid var(--tgr-rule); margin-inline-start: -1px; }
.kpis span { display: block; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.kpis b { display: block; margin-top: 0.2rem; font-family: var(--tgr-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }

/* —— Record detail (order) —— */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 2.5rem; }
.detail > * { min-width: 0; }
.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(8rem, 1fr); gap: 0.6rem 1.5rem; margin: 0; font-size: 0.8125rem; }
.kv dt, .kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv dt { color: var(--tgr-text-3); }
.kv dd { margin: 0; color: var(--tgr-text); }
.total-line { display: flex; align-items: baseline; justify-content: space-between; padding: 0.9rem 0; border-top: 1px solid var(--tgr-rule); font-size: 0.875rem; }
.total-line b { font-family: var(--tgr-display); font-weight: 400; font-size: 1.6rem; direction: ltr; }
.back { display: inline-flex; gap: 0.4rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-3); text-decoration: none; }
.back:hover { color: var(--tgr-text); }
details.raw summary { cursor: pointer; font-size: 0.8125rem; color: var(--tgr-text-3); margin-bottom: 0.6rem; }
code.snap { display: block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }

/* —— Theme catalog —— */
.theme-card { padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--tgr-rule-strong); }
.theme-card h3 { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 600; }
.theme-card .code { font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-text-3); }
.theme-card .form-actions { margin-top: 1rem; }
.theme-card.is-live h3::after { content: "منشور"; margin-inline-start: 0.6rem; font-size: 0.75rem; font-weight: 500; color: var(--tgr-ok); }
.swatch-row { display: flex; gap: 6px; margin-top: 0.75rem; }
.swatch-row i { width: 18px; height: 18px; border-radius: 2px; outline: 1px solid var(--tgr-rule); }

/* revisions list */
.rev { list-style: none; margin: 0; padding: 0; }
.rev li { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--tgr-rule-soft); font-size: 0.8125rem; }
.rev li .num { min-width: 3ch; }
.rev li form { margin-inline-start: auto; }
.frame { width: 100%; height: 440px; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: #fff; }

/* —— Bare pages: onboarding (centered, branded) —— */
.bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 3.5rem 1rem 3rem; }
.bare-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; color: var(--tgr-text); text-decoration: none; }
.bare-brand svg { width: 34px; height: 34px; }
.bare-brand b { font-family: var(--tgr-wordmark); font-weight: 600; font-size: 1.6rem; line-height: 1; }
.bare-card {
  width: 100%;
  max-width: 480px;
  padding: 2rem 2rem 1.75rem;
  background: var(--tgr-band);
  border-radius: var(--tgr-radius);
  box-shadow: inset 0 0 0 1px var(--tgr-band-edge), var(--tgr-band-shadow);
  color: var(--tgr-ink-text);
  position: relative;
  overflow: hidden;
}
.bare-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 220px at 95% -20%, var(--tgr-band-glow), transparent 70%);
}
.bare-card > * { position: relative; }
.bare-card h1 { margin: 0 0 0.35rem; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.6rem; }
.bare-card .lede { margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.bare-card label { color: var(--tgr-ink-soft); }
.bare-card input, .bare-card select { background: rgba(255,255,255,0.04); border-color: var(--tgr-ink-line); color: var(--tgr-ink-text); }
.bare-card .btn { width: 100%; justify-content: center; height: 42px; margin-top: 0.4rem; }
.bare-card .btn.light, .bare-card .btn.outline { width: auto; }
.bare-card .kv dt { color: var(--tgr-ink-mute); }
.bare-card .kv dd { color: var(--tgr-ink-text); }
.bare-card code { background: rgba(255,255,255,0.06); color: var(--tgr-brass); }
.steps { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; }
.steps i { flex: 1; height: 2px; background: var(--tgr-ink-line); }
.steps i.on { background: var(--tgr-brass); }
.bare-foot { margin-top: 1.5rem; font-size: 0.75rem; color: var(--tgr-text-3); }


/* —— Slab: every content block is cut from the same material as the statement band ——
   Ink ground, a light leak from the start-top corner, a faint brass leak from the far corner,
   hairline edge. Inside a slab, text/rule/status tokens switch to their on-ink values, so the
   same markup reads correctly in both themes (in "paper" the slabs stay ink, like the band). */
.slab, .tscroll, .kpis, .disclose, .panel > .empty-state, .columns > section > .empty-state, ol.dec, .ui-dialog-panel {
  position: relative;
  isolation: isolate;
  background: var(--tgr-band);
  border-radius: var(--tgr-radius);
  box-shadow: inset 0 0 0 1px var(--tgr-band-edge), var(--tgr-band-shadow);
  --tgr-text: var(--tgr-ink-text);
  --tgr-text-2: var(--tgr-ink-soft);
  --tgr-text-3: var(--tgr-ink-mute);
  --tgr-rule: var(--tgr-ink-line);
  --tgr-rule-soft: color-mix(in srgb, var(--tgr-ink-line) 70%, transparent);
  --tgr-rule-strong: var(--tgr-ink-line);
  --tgr-brass-ink: var(--tgr-brass);
  --tgr-link: #8dc1f6;
  --tgr-ok: #6fc7a3;
  --tgr-warn: #d9b46a;
  --tgr-danger: #ea958b;
  --tgr-field: rgba(255, 255, 255, 0.04);
  color: var(--tgr-text);
}
.slab::before, .tscroll::before, .kpis::before, .disclose::before, .panel > .empty-state::before, .columns > section > .empty-state::before, ol.dec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(560px 240px at 100% -30%, var(--tgr-slab-glow), transparent 70%),
    radial-gradient(420px 220px at 0% 130%, rgba(196, 164, 102, 0.10), transparent 70%);
}
[dir="ltr"] .slab::before, [dir="ltr"] .tscroll::before, [dir="ltr"] .kpis::before, [dir="ltr"] .disclose::before, [dir="ltr"] .panel > .empty-state::before, [dir="ltr"] .columns > section > .empty-state::before, [dir="ltr"] ol.dec::before {
  background:
    radial-gradient(560px 240px at 0% -30%, var(--tgr-slab-glow), transparent 70%),
    radial-gradient(420px 220px at 100% 130%, rgba(196, 164, 102, 0.10), transparent 70%);
}
:root[data-theme="paper"] .slab, :root[data-theme="paper"] .tscroll, :root[data-theme="paper"] .kpis, :root[data-theme="paper"] .disclose { --tgr-slab-glow: rgba(29, 107, 88, 0.30); }

/* tables inside a slab: breathing room on the edges, no outer top rule */
.tscroll { margin-bottom: 0.25rem; }
.tscroll table thead tr { border-top: 0; }
.tscroll th { padding-block: 1rem 0.7rem; }
[dir="rtl"] .tscroll tr > :first-child, [dir="rtl"] .tscroll tbody tr > :first-child, [dir="rtl"] .tscroll thead tr > :first-child { padding-right: 1.4rem; }
[dir="rtl"] .tscroll tr > :last-child { padding-left: 1.4rem; }
[dir="ltr"] .tscroll tr > :first-child, [dir="ltr"] .tscroll tbody tr > :first-child, [dir="ltr"] .tscroll thead tr > :first-child { padding-left: 1.4rem; }
[dir="ltr"] .tscroll tr > :last-child { padding-right: 1.4rem; }
.tscroll table.indexed thead th:first-child { padding-inline-start: calc(1.4rem + 2.2rem); }
.tscroll tbody tr:last-child td { border-bottom: 0; }
.toolbar + .tscroll { margin-top: 0.9rem; }
.panel > .empty-state, .columns > section > .empty-state { padding: 1.6rem 1.4rem; }
ol.dec { padding: 1.1rem 1.4rem; }
ol.dec li:first-child { padding-top: 0.2rem; }


/* —— Theme editor (storefront design tokens) —— */
.theme-editor { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.te-controls { display: grid; gap: 0; padding: 0.4rem 1.4rem 1.4rem; position: sticky; top: calc(104px + 1rem); max-height: calc(100vh - 140px); overflow: auto; }
.te-group { margin: 0; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--tgr-rule-soft); min-width: 0; }
.te-group legend, .te-group > label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0; margin-bottom: 0.6rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.te-group small { font-size: 0.75rem; color: var(--tgr-text-3); }
.te-group output { font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-brass-ink); direction: ltr; }
.te-group input[type="range"] { margin: 0; padding: 0; border: 0; background: none; accent-color: var(--tgr-brass); }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.te-chips label { cursor: pointer; }
.te-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.te-chips span { display: inline-block; padding: 6px 12px; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); font-size: 0.8125rem; color: var(--tgr-text-2); }
.te-chips input:checked + span { border-color: var(--tgr-brass); color: var(--tgr-brass-ink); }
.te-chips input:focus-visible + span { outline: 2px solid var(--tgr-brass); outline-offset: 2px; }
.te-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.te-presets button { padding: 0; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: none; color: var(--tgr-text); font: inherit; text-align: start; cursor: pointer; overflow: hidden; }
.te-presets button[aria-pressed="true"] { border-color: var(--tgr-brass); box-shadow: 0 0 0 1px var(--tgr-brass); }
.te-presets .sw { display: flex; height: 30px; }
.te-presets .sw i { flex: 1; }
.te-presets b { display: block; padding: 6px 10px; font-size: 0.8125rem; font-weight: 500; }
.te-published-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.te-code-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.55rem; border-radius: var(--tgr-radius); font-size: 0.78rem; font-weight: 600;
  background: rgba(196,164,102,0.12); color: var(--tgr-brass-ink, var(--tgr-brass));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tgr-brass) 35%, transparent);
}
.te-code-pill[data-theme="aurora"] { background: color-mix(in srgb, #6b8cae 18%, transparent); color: #c5d8ea; box-shadow: inset 0 0 0 1px color-mix(in srgb, #6b8cae 45%, transparent); }
.te-code-pill[data-theme="sandstone"] { background: color-mix(in srgb, #c4a466 18%, transparent); color: #e8d4a8; box-shadow: inset 0 0 0 1px color-mix(in srgb, #c4a466 45%, transparent); }
.te-history-panel { margin-bottom: 1.25rem; }
.te-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.te-history-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.75rem; border-radius: var(--tgr-radius);
  background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--tgr-ink-line, var(--tgr-rule));
}
.te-history-item.is-current { box-shadow: inset 0 0 0 1px var(--tgr-brass); }
.te-history-ver { font-weight: 600; }
.te-history-status { font-size: 0.8rem; color: var(--tgr-ink-soft, var(--tgr-text-2)); }
.te-history-when { margin-inline-start: auto; font-size: 0.78rem; }
.te-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.te-colors label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--tgr-text-3); }
.te-colors input { height: 32px; margin: 0; padding: 0; cursor: pointer; }
.te-controls .form-actions { padding-top: 1rem; }
.te-stage { min-width: 0; }
.te-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-3); }
.te-stage-bar .seg { width: auto; }
.te-frame { display: block; width: 100%; height: 78vh; margin-inline: auto; border: 0; border-radius: var(--tgr-radius); background: #fff; box-shadow: inset 0 0 0 1px var(--tgr-band-edge), var(--tgr-band-shadow); transition: width 0.3s; }
.te-frame.mobile { width: 390px; max-width: 100%; }
@media (max-width: 1100px) { .theme-editor { grid-template-columns: 1fr; } .te-controls { position: static; max-height: none; } }

/* —— Mobile dock (admin) —— */
.dock { display: none; }
.sheet {
  width: min(100% - 2rem, 520px);
  max-height: 80vh;
  margin: auto auto 0;
  padding: 0 1.25rem 1.5rem;
  border: 1px solid var(--tgr-ink-line);
  border-radius: var(--tgr-radius) var(--tgr-radius) 0 0;
  background: var(--tgr-ink);
  color: var(--tgr-ink-text);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; background: var(--tgr-ink); }
.sheet-head .btn.secondary { color: var(--tgr-ink-text); border-color: var(--tgr-ink-line); }
.sheet-group { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem 0; border-top: 1px solid var(--tgr-ink-line); }
.sheet-group span { width: 100%; font-size: 0.75rem; color: var(--tgr-ink-mute); }
.sheet-group a { padding: 0.4rem 0.75rem; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); font-size: 0.8125rem; color: var(--tgr-ink-text); text-decoration: none; }
.sheet-group a.active { border-color: var(--tgr-brass); color: var(--tgr-brass); }

.flash {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-inline-start: 2px solid var(--tgr-ok);
  background: var(--tgr-paper-2);
  color: var(--tgr-text);
  font-size: 0.8125rem;
}
.flash.err { border-inline-start-color: var(--tgr-danger); }

.pager {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1rem 0;
}
.pager span, .pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--tgr-radius);
  font-family: var(--tgr-mono);
  font-size: 0.75rem;
  color: var(--tgr-text-2);
  text-decoration: none;
}
.pager span.current { border-color: var(--tgr-text); color: var(--tgr-text); }

/* —— Responsive —— */
@media (max-width: 1180px) {
  .columns.three { grid-template-columns: 1fr 1fr; }
  .columns.three > section:nth-child(2) { order: -1; grid-column: 1 / -1; border-inline-start: 0; padding-inline: 0; }
  .columns.three > section:first-child { padding-inline-end: 1.75rem; }
  .modules { display: none; }
  .all-pages { display: inline-flex; }
}
@media (max-width: 900px) {
  .all-pages { display: none; }
  /* WEB-06 (U-09): title on its own line, description under it — no squeezed 70px title column */
  .panel-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .panel-head > :last-child:not(:first-child) { margin-inline-start: 0; }
  .mast-row { height: 54px; padding: 0 1rem; gap: 1rem; }
  .store-link span { display: none; }
  .subnav { padding: 0 1rem; gap: 1.25rem; }
  main#main-content { padding: 1.4rem 1rem 3rem; }
  .page-head h1 { font-size: 1.75rem; }
  .page-head .acts { margin-inline-start: 0; width: 100%; }
  .page-head .acts .btn, .page-head .acts form { flex: 1; }
  .page-head .acts form .btn { width: 100%; }
  .page-head .acts .btn { justify-content: center; }
  .statement { grid-template-columns: 1fr; }
  .st-main { padding: 1.4rem 1.25rem; }
  .st-chart { margin-inline: -1.25rem; margin-bottom: -1.4rem; height: 110px; }
  .st-figure { font-size: 3rem; }
  .st-side { grid-auto-rows: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); border-inline-start: 0; border-top: 1px solid var(--tgr-ink-line); }
  .st-side > div { padding: 0.9rem; border-bottom: 0; border-inline-start: 1px solid var(--tgr-ink-line); }
  .st-side > div:first-child { border-inline-start: 0; }
  .st-side b { font-size: 1.25rem; }
  .st-side em { display: none; }
  .columns, .columns.three { grid-template-columns: 1fr; }
  .columns > section,
  .columns > section:first-child,
  .columns.three > section:first-child { padding: 1.4rem 0 0; border-inline-start: 0; border-top: 1px solid var(--tgr-rule); }
  .columns > section:first-child { border-top: 0; }
  .columns.three > section:nth-child(2) { border-top: 0; }
  .columns.three > section:first-child { border-top: 1px solid var(--tgr-rule); }
  .hide-sm { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* tables: wrap long identifiers; .tscroll (added by layout JS) scrolls wide tables in place */
  .person b, .person small { white-space: normal; overflow-wrap: anywhere; }
  th, td { padding-inline: 0.6rem; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .toolbar .search { width: 100%; margin: 0; padding: 0; border-inline-start: 0; border-top: 1px solid var(--tgr-rule); }
  .seg { width: 100%; }
  .bare-card { padding: 1.5rem 1.25rem; }
  main#main-content { padding-bottom: 6rem; }
  .dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom));
    background: var(--tgr-mast-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--tgr-ink-line);
  }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.25rem 0; font-size: 0.75rem; color: var(--tgr-ink-mute); text-decoration: none; }
  .dock a.active { color: var(--tgr-brass); }
  .dock svg { width: 20px; height: 20px; }
  .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--tgr-rule-soft); }
}

/* —— Onboarding marketing + async provision —— */
.bare.onboard {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
  isolation: isolate;
}
.onboard-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(980px 520px at 78% -12%, rgba(56, 120, 210, 0.38), transparent 62%),
    radial-gradient(720px 420px at 8% 28%, rgba(196, 164, 102, 0.16), transparent 58%),
    radial-gradient(640px 360px at 92% 88%, rgba(40, 90, 170, 0.18), transparent 55%),
    linear-gradient(180deg, #0c1526 0%, #070c16 42%, #0a1424 100%);
}
.onboard-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(233, 237, 244, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 237, 244, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 78%);
}
.onboard-atmosphere::after {
  content: "";
  position: absolute;
  inset: auto 10% -20% 10%;
  height: 45%;
  background: radial-gradient(ellipse at center, rgba(196, 164, 102, 0.08), transparent 70%);
  filter: blur(8px);
}
.onboard-hero { text-align: center; margin: 0 0 1.5rem; }
.onboard-hero h1 {
  margin: 0.35rem 0 0.65rem;
  font-family: var(--tgr-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tgr-ink-text);
}
.onboard-kicker, .done-kicker { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgr-brass); }
.onboard-hero .lede { max-width: 38rem; margin: 0 auto; color: var(--tgr-text-2); font-size: 0.95rem; line-height: 1.65; }
.path-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1.35rem;
}
.path-btn {
  text-align: start;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--tgr-radius);
  cursor: pointer;
  color: var(--tgr-ink-text);
  background: rgba(7, 13, 24, 0.72);
  box-shadow: inset 0 0 0 1px var(--tgr-band-edge);
  transition: box-shadow .15s ease, background .15s ease;
}
.path-btn strong { display: block; font-family: var(--tgr-heading); font-size: 1rem; margin-bottom: 0.25rem; }
.path-btn span { display: block; font-size: 0.78rem; color: var(--tgr-ink-soft); line-height: 1.45; }
.path-btn:hover { background: rgba(18, 28, 47, 0.9); }
.path-btn.is-on { box-shadow: inset 0 0 0 2px var(--tgr-brass); background: linear-gradient(160deg, rgba(196,164,102,0.14), rgba(7,13,24,0.85)); }
.salla-panel { margin-bottom: 1.25rem; }
.salla-panel[hidden] { display: none !important; }
.import-source { border: 0; margin: 1rem 0 0.75rem; padding: 0; }
.import-source legend { margin: 0 0 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--tgr-ink-text, #e9edf4); }
.import-source-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.import-source-opt {
  display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer;
  padding: 0.85rem 1rem; border-radius: var(--tgr-radius);
  background: rgba(18, 28, 47, 0.72);
  box-shadow: inset 0 0 0 1px rgba(233, 237, 244, 0.12);
}
.import-source-opt input { position: absolute; opacity: 0; pointer-events: none; }
.import-source-opt strong { font-family: var(--tgr-heading); font-size: 0.98rem; }
.import-source-opt span { font-size: 0.78rem; color: var(--tgr-ink-soft); }
.import-source-opt.is-on { box-shadow: inset 0 0 0 2px var(--tgr-brass); background: linear-gradient(160deg, rgba(196,164,102,0.14), rgba(7,13,24,0.85)); }
.import-source-opt.is-soon { opacity: 0.62; cursor: not-allowed; }
@media (max-width: 760px) {
  .import-source-opts { grid-template-columns: 1fr; }
}
.salla-head h2 { margin: 0 0 0.35rem; font-family: var(--tgr-heading); font-size: 1.15rem; }
.salla-steps {
  margin: 0 0 1rem;
  padding: 0 1.2rem 0 0;
  color: var(--tgr-ink-soft);
  font-size: 0.85rem;
  line-height: 1.7;
}
.salla-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--tgr-ink-mute); }
.bare-card.wide { max-width: 960px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem 1.15rem 1.1rem; border-radius: var(--tgr-radius); cursor: pointer;
  background: linear-gradient(165deg, rgba(22, 34, 58, 0.95), rgba(7, 13, 24, 0.96));
  color: var(--tgr-ink-text);
  box-shadow: inset 0 0 0 1px var(--tgr-band-edge), 0 18px 40px -28px rgba(0,0,0,0.85);
  transition: box-shadow .15s ease, transform .15s ease;
}
/* 1px like .te-chips input: the global input { width: 100% } pushed this radio 2.4px past the RTL edge at 390px */
.plan-card input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.plan-card.is-selected, .plan-card.popular.is-selected {
  box-shadow: inset 0 0 0 2px var(--tgr-brass), 0 18px 40px -24px rgba(0,0,0,0.9);
}
.plan-card.popular { background: linear-gradient(165deg, rgba(196,164,102,0.16), rgba(7,13,24,0.96) 50%); }
.plan-badge {
  /* WEB-07 (U-16): dot + word like .status — no capsule, 12px minimum */
  position: absolute; top: 0.75rem; inset-inline-end: 0.8rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--tgr-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--tgr-brass-soft);
}
.plan-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tgr-brass); }
.plan-top h2 { margin: 0; font-size: 1.15rem; font-family: var(--tgr-heading); font-weight: 600; }
.plan-desc { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--tgr-ink-soft); min-height: 2.4em; }
.plan-price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan-price strong,
.plan-price .price-free,
.plan-price .price-num {
  font-size: 1.65rem;
  font-family: var(--tgr-heading);
  font-weight: 600;
  color: var(--tgr-brass-soft);
  letter-spacing: -0.01em;
}
.plan-price span { font-size: 0.75rem; color: var(--tgr-ink-mute); }
.plan-meta, .plan-feats { list-style: none; margin: 0; padding: 0; font-size: 0.78rem; color: var(--tgr-ink-soft); }
.plan-meta li, .plan-feats li { padding: 0.2rem 0; border-top: 1px solid var(--tgr-ink-line); }
.plan-feats li::before { content: "✓ "; color: var(--tgr-brass); }
.plan-compare { margin-bottom: 1.25rem; }
.plan-compare h2 { margin: 0 0 0.75rem; font-size: 1rem; }
.compare-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.compare-table th, .compare-table td { padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--tgr-ink-line); text-align: center; }
.compare-table th:first-child, .compare-table td:first-child { text-align: start; color: var(--tgr-ink-soft); }
.compare-table td.yes { color: var(--tgr-brass); font-weight: 600; }
.compare-table td.no { color: var(--tgr-ink-mute); }
.onboard-form-card h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; margin-bottom: 0.75rem; }
.field-grid .span-2 { grid-column: 1 / -1; }
.plan-chosen { font-size: 0.8rem; color: var(--tgr-ink-soft); margin: 0 0 0.75rem; }
.provision-card .progress-track {
  height: 6px; border-radius: 99px; background: var(--tgr-ink-line); overflow: hidden; margin: 1.25rem 0 0.6rem;
}
.provision-card .progress-track i {
  display: block; height: 100%; width: 12%; background: linear-gradient(90deg, var(--tgr-brass), #e2c787);
  transition: width .4s ease;
}
.provision-card .progress-track i.fail { background: #c45c5c; }
.progress-label { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tgr-ink-soft); }
.provision-store { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--tgr-brass); }
.prov-steps { list-style: none; margin: 0; padding: 0; }
.prov-steps li {
  position: relative; padding: 0.55rem 0 0.55rem 1.6rem; font-size: 0.85rem; color: var(--tgr-ink-mute);
  border-bottom: 1px solid var(--tgr-ink-line);
}
.prov-steps li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.85rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--tgr-ink-line);
}
.prov-steps li.on { color: var(--tgr-ink-text); }
.prov-steps li.on::before { background: var(--tgr-brass); box-shadow: 0 0 0 3px rgba(196,164,102,0.2); }
.prov-steps li.done { color: var(--tgr-ink-soft); }
.prov-steps li.done::before { background: #6f9e6a; }
.done-creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 1.25rem 0 1.5rem;
}
.done-creds > div {
  padding: 0.75rem 0.85rem; border-radius: var(--tgr-radius); background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px var(--tgr-ink-line);
}
.done-creds span { display: block; font-size: 0.7rem; color: var(--tgr-ink-mute); margin-bottom: 0.25rem; }
.done-creds strong { font-size: 0.9rem; word-break: break-word; }
.done-actions { flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }
.done-actions .btn.light { order: -1; }
.done-note { margin: 1rem 0 0; font-size: 0.75rem; color: var(--tgr-ink-mute); }

/* Done + settings readiness (Claude F*) */
.done-readiness {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--tgr-ink-line);
}
.done-readiness-title {
  margin: 0 0 0.3rem;
  font-family: var(--tgr-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tgr-ink-text);
}
.done-readiness-lede {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tgr-ink-soft);
}
.done-readiness-list,
.readiness-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.done-readiness-item,
.readiness-step-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.75rem;
  border-radius: var(--tgr-radius);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--tgr-ink-line);
}
.done-readiness-item.is-done,
.readiness-step-item.is-done { opacity: 0.88; }
.done-readiness-item.is-empty,
.readiness-step-item.is-empty {
  color: var(--tgr-ink-soft);
  font-size: 0.88rem;
}
.done-readiness-mark,
.readiness-step-mark {
  width: 1.25rem;
  text-align: center;
  color: var(--tgr-brass);
  flex: 0 0 auto;
}
.done-readiness-item.is-todo .done-readiness-mark,
.readiness-step-item.is-todo .readiness-step-mark { color: var(--tgr-ink-mute); }
.done-readiness-label,
.readiness-step-label { flex: 1 1 auto; font-size: 0.92rem; color: var(--tgr-ink-text); }
.done-readiness-cta,
.readiness-step-cta { margin-inline-start: auto; }
.done-readiness-ok,
.readiness-step-ok {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: var(--tgr-ink-mute);
}
.done-readiness-item.is-skeleton {
  min-height: 2.6rem;
  pointer-events: none;
}
.done-readiness-skel {
  display: block;
  width: 72%;
  height: 0.7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: done-skel 1.2s ease-in-out infinite;
}
@keyframes done-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .done-readiness-skel { animation: none; }
}
.readiness-panel .panel-head { margin-bottom: 0.85rem; }
/* settings: the step list is written in on-ink tokens, so it sits on a slab (ink in both themes);
   the head note sits on the page and uses page tokens (paper theme was 1.1:1) */
.readiness-step-list.slab { padding: 0.9rem 1rem; }
.readiness-panel .readiness-modes { color: var(--tgr-text-2); }
.readiness-panel .readiness-modes-note { color: var(--tgr-text-3); }
.readiness-modes {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tgr-ink-soft);
}
.readiness-modes-note { display: inline; color: var(--tgr-ink-mute); }
@media (max-width: 860px) {
  .plan-grid, .path-switch { grid-template-columns: 1fr; }
  .field-grid, .done-creds { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .plan-card { transition: none; }
}

/* —— Section editor (page builder) —— */
.sec-ed { margin: 1.1rem 0 0.4rem; }
.sec-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sec-ed-title { font-family: var(--tgr-display); font-weight: 600; font-size: 1rem; }
.sec-add { display: flex; align-items: center; gap: 0.5rem; }
.sec-add select { width: auto; margin: 0; min-width: 160px; }
.sec-list { display: grid; gap: 0.75rem; }
.sec-card { border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: var(--tgr-paper-2); overflow: hidden; transition: box-shadow .15s ease, opacity .15s ease; }
.sec-card.is-dragging { opacity: 0.55; }
.sec-card.is-drop { box-shadow: inset 0 0 0 2px var(--tgr-brass); }
.sec-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent); outline-offset: 2px; }
.sec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.85rem; background: var(--tgr-surface-head); border-bottom: 1px solid var(--tgr-rule); }
.sec-card-type { font-weight: 600; font-size: 0.875rem; flex: 1 1 auto; }
.sec-grip { cursor: grab; margin-inline-end: 0.15rem; }
.sec-grip:active { cursor: grabbing; }
.sec-card-tools { display: flex; gap: 0.25rem; }
.sec-tbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: var(--tgr-field); color: var(--tgr-text-2); font-size: 0.95rem; line-height: 1; cursor: pointer; }
.sec-tbtn:hover:not(:disabled) { color: var(--tgr-text); border-color: var(--tgr-text-3); }
.sec-tbtn:disabled { opacity: 0.35; cursor: default; }
.sec-tbtn.danger:hover:not(:disabled) { color: var(--tgr-danger); border-color: color-mix(in srgb, var(--tgr-danger) 45%, transparent); }
.sec-card-body { padding: 0.85rem; display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
.sec-f { display: flex; flex-direction: column; min-width: 0; }
.sec-f.sec-f-list { grid-column: 1 / -1; }
.sec-f label { font-size: 0.75rem; color: var(--tgr-text-3); margin-bottom: 0.15rem; }
.sec-f input, .sec-f select, .sec-f textarea { margin: 0.1rem 0 0; }
.sec-sub { display: grid; gap: 0.4rem; }
.sec-sub-row { display: flex; gap: 0.4rem; align-items: center; }
.sec-sub-row input { margin: 0; }
.icon-x { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: var(--tgr-field); color: var(--tgr-text-3); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.icon-x:hover { color: var(--tgr-danger); border-color: color-mix(in srgb, var(--tgr-danger) 45%, transparent); }
.sec-empty { color: var(--tgr-text-3); font-size: 0.8125rem; padding: 0.9rem; border: 1px dashed var(--tgr-rule); border-radius: var(--tgr-radius); text-align: center; }
.sec-warn { color: var(--tgr-warn); font-size: 0.8125rem; margin: 0; }
.sec-json-wrap { margin-top: 1rem; }
.sec-json-msg { font-size: 0.8125rem; margin-inline-start: 0.5rem; }
.sec-json-msg.ok { color: var(--tgr-ok); }
.sec-json-msg.err { color: var(--tgr-danger); }
@media (max-width: 640px) { .sec-card-body { grid-template-columns: 1fr; } }

/* —— Platform marketing home — Ink & Brass, full landing (not empty hero-only) —— */
.plat { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; gap: clamp(48px, 8vw, 96px); padding: 20px clamp(16px, 5vw, 40px) 40px; }
.plat-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plat-top .bare-brand { color: var(--tgr-ink-text); }
.plat-top-nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); }
.plat-top-nav a { color: var(--tgr-ink-soft); font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.plat-top-nav a:hover, .plat-top-nav a.is-active { color: var(--tgr-ink-text); }
.plat-top-nav a.is-active { box-shadow: inset 0 -2px 0 var(--tgr-brass); padding-bottom: 2px; }
.plat-top-login { color: var(--tgr-brass-soft) !important; border: 1px solid color-mix(in srgb, var(--tgr-brass) 42%, transparent); border-radius: var(--tgr-radius); padding: 7px 16px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease; box-shadow: none !important; }
.plat-top-login:hover { background: color-mix(in srgb, var(--tgr-brass) 14%, transparent); border-color: var(--tgr-brass); color: var(--tgr-brass) !important; }
.plat-page-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 52rem; }
.plat-page-head .plat-h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.plat-teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.plat-teaser { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.25rem 1.15rem; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); text-decoration: none; background: color-mix(in srgb, var(--tgr-ink) 45%, transparent); transition: border-color var(--tgr-dur) var(--tgr-ease), transform var(--tgr-dur) var(--tgr-ease); }
.plat-teaser:hover { border-color: color-mix(in srgb, var(--tgr-brass) 45%, transparent); transform: translateY(-2px); }
.plat-teaser strong { color: var(--tgr-ink-text); font-family: var(--tgr-heading); font-size: 1.05rem; }
.plat-teaser > span:last-child { color: var(--tgr-ink-soft); font-size: 0.92rem; line-height: 1.65; }
.plat-band-note a { color: var(--tgr-brass-soft); }
.plat-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(24px, 6vw, 64px); min-height: min(72dvh, 640px); padding-block: clamp(24px, 6vw, 48px); }
.plat-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; animation: plat-rise 0.7s var(--tgr-ease) both; }
.plat-eyebrow { font-family: var(--tgr-display); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--tgr-brass-soft); background: color-mix(in srgb, var(--tgr-brass) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tgr-brass) 35%, transparent); border-radius: var(--tgr-radius); padding: 6px 14px; }
.plat-title { font-family: var(--tgr-display); font-weight: 800; font-size: clamp(34px, 7vw, 64px); line-height: 1.08; letter-spacing: -0.01em; color: var(--tgr-ink-text); margin: 0; text-wrap: balance; }
.plat-title .brass { color: var(--tgr-brass); }
.plat-title .plat-brandword { font-family: var(--tgr-wordmark); font-weight: 600; letter-spacing: 0; }
.plat-lede { font-size: clamp(16px, 2.4vw, 19px); line-height: 1.8; color: var(--tgr-ink-soft); max-width: 46ch; margin: 0; }
.plat-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn.lg { height: 54px; padding: 0 1.8rem; font-size: 1.0625rem; border-radius: var(--tgr-radius); }
.plat-hero-visual { display: grid; place-items: center; animation: plat-rise 0.9s var(--tgr-ease) 0.12s both; }
.plat-mark { width: min(340px, 72vw); height: auto; color: var(--tgr-ink-text); filter: drop-shadow(0 24px 60px rgba(196,164,102,0.22)); animation: plat-float 6s ease-in-out infinite; }

.plat-kicker { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgr-brass); font-family: var(--tgr-display); }
.plat-h2 { font-family: var(--tgr-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.15rem); line-height: 1.25; color: var(--tgr-ink-text); margin: 0 0 0.75rem; text-wrap: balance; }
.plat-section-lede, .plat-band-lede { margin: 0; color: var(--tgr-ink-soft); font-size: 1.05rem; line-height: 1.75; max-width: 52ch; }
.plat-section-head { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.plat-band { border-top: 1px solid color-mix(in srgb, var(--tgr-brass) 28%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--tgr-brass) 28%, transparent); padding: clamp(28px, 5vw, 48px) 0; animation: plat-rise 0.65s var(--tgr-ease) both; }
.plat-url-chip { margin: 1.35rem 0 0.85rem; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0; padding: 0.85rem 1.15rem; background: color-mix(in srgb, var(--tgr-ink) 55%, transparent); border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); font-family: var(--tgr-mono); font-size: clamp(0.95rem, 2.4vw, 1.15rem); color: var(--tgr-ink-text); }
.plat-url-host { color: var(--tgr-ink-mute); }
.plat-url-path { color: var(--tgr-ink-soft); }
.plat-url-slug { color: var(--tgr-brass); font-weight: 500; }
.plat-band-note { margin: 0; font-size: 0.9rem; color: var(--tgr-ink-mute); }

.plat-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tgr-ink-line); }
.plat-pillars li { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.35rem 1.1rem; border-bottom: 1px solid var(--tgr-ink-line); border-inline-end: 1px solid var(--tgr-ink-line); }
.plat-pillars li:nth-child(2n) { border-inline-end: none; }
.plat-pillars strong { font-family: var(--tgr-heading); font-size: 1.05rem; color: var(--tgr-ink-text); font-weight: 600; }
.plat-pillars span { color: var(--tgr-ink-soft); font-size: 0.95rem; line-height: 1.7; }

.plat-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.plat-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 0.25rem 0; }
.plat-step-n { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--tgr-radius); border: 1px solid color-mix(in srgb, var(--tgr-brass) 45%, transparent); color: var(--tgr-brass); font-family: var(--tgr-display); font-size: 1rem; background: color-mix(in srgb, var(--tgr-brass) 10%, transparent); }
.plat-steps strong { display: block; color: var(--tgr-ink-text); font-family: var(--tgr-heading); margin-bottom: 0.35rem; }
.plat-steps p { margin: 0; color: var(--tgr-ink-soft); font-size: 0.95rem; line-height: 1.7; }

.plat-close { text-align: center; padding: clamp(28px, 5vw, 40px) clamp(12px, 3vw, 24px); border: 1px solid color-mix(in srgb, var(--tgr-brass) 30%, transparent); border-radius: var(--tgr-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--tgr-brass) 8%, transparent), transparent 70%); }
.plat-close .plat-h2 { margin-inline: auto; }
.plat-close .plat-section-lede { margin-inline: auto; margin-bottom: 1.25rem; }
.plat-close .plat-cta { justify-content: center; }

.plat-foot { color: var(--tgr-ink-mute); font-size: 0.8125rem; text-align: center; padding-top: 8px; display: flex; flex-direction: column; gap: 0.75rem; }
.plat-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.35rem; }
.plat-foot-links a { color: var(--tgr-ink-soft); text-decoration: none; }
.plat-foot-links a:hover { color: var(--tgr-brass-soft); }
.plat-foot p { margin: 0; }

@keyframes plat-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes plat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .plat-hero-copy, .plat-hero-visual, .plat-band, .plat-mark { animation: none; }
}

@media (max-width: 760px) {
  .plat-hero { grid-template-columns: 1fr; text-align: start; gap: 24px; min-height: 0; }
  .plat-hero-visual { order: -1; }
  .plat-mark { width: min(160px, 42vw); }
  .plat-cta { width: 100%; }
  .plat-cta .btn { flex: 1; justify-content: center; min-width: 0; }
  .plat-top-nav a:not(.plat-top-login) { display: none; }
  .plat-teasers { grid-template-columns: 1fr; }
  .plat-pillars { grid-template-columns: 1fr; }
  .plat-pillars li { border-inline-end: none; padding-inline: 0; }
  .plat-steps { grid-template-columns: 1fr; gap: 1.25rem; }
  .plat-url-chip { width: 100%; justify-content: flex-start; }
}

/* Overflow guards */
body[data-tgr-shell] { overflow-x: clip; }
.plat, .plat-hero, .plat-hero-copy, .plat-cta, .plat-section, .plat-band { max-width: 100%; min-width: 0; }
.plat-hero-copy { width: 100%; }
.plat-title, .plat-lede, .plat-h2 { max-width: 100%; overflow-wrap: break-word; }

/* —— Why / stages / sectors / FAQ (full marketing depth) —— */
.plat-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--tgr-ink-line); border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); overflow: hidden; }
.plat-why li { background: color-mix(in srgb, var(--tgr-ink) 72%, transparent); padding: 1.35rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.plat-why strong { font-family: var(--tgr-heading); color: var(--tgr-ink-text); font-size: 1.05rem; }
.plat-why span { color: var(--tgr-ink-soft); font-size: 0.95rem; line-height: 1.75; }

.plat-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.plat-stages article { padding: 1.25rem 1.1rem; border-top: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent); background: color-mix(in srgb, var(--tgr-ink) 40%, transparent); }
.plat-stage-tag { display: block; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tgr-brass); margin-bottom: 0.65rem; font-family: var(--tgr-display); }
.plat-stages h3 { margin: 0 0 0.5rem; font-family: var(--tgr-heading); font-size: 1.1rem; color: var(--tgr-ink-text); font-weight: 600; }
.plat-stages p { margin: 0; color: var(--tgr-ink-soft); font-size: 0.92rem; line-height: 1.7; }

.plat-sector-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.65rem; }
.plat-sector-list li { padding: 0.55rem 0.95rem; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); color: var(--tgr-ink-soft); font-size: 0.9rem; background: color-mix(in srgb, var(--tgr-ink) 35%, transparent); }

.plat-buyer-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.plat-buyer-points li { color: var(--tgr-ink-text); font-size: 0.95rem; padding-inline-start: 1.1rem; position: relative; }
.plat-buyer-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--tgr-brass); }

.plat-faq { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.plat-faq div { border-top: 1px solid var(--tgr-ink-line); padding-top: 1rem; }
.plat-faq dt { font-family: var(--tgr-heading); color: var(--tgr-ink-text); font-weight: 600; margin-bottom: 0.4rem; }
.plat-faq dd { margin: 0; color: var(--tgr-ink-soft); font-size: 0.95rem; line-height: 1.7; }

@media (max-width: 960px) {
  .plat-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .plat-why, .plat-faq { grid-template-columns: 1fr; }
  .plat-stages { grid-template-columns: 1fr; }
}

/* —— Merchant login (split panel, full-height, no broken form grid) —— */
.mlogin { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.mlogin-aside { display: flex; align-items: center; padding: clamp(28px, 5vw, 56px); border-inline-end: 1px solid color-mix(in srgb, var(--tgr-brass) 22%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tgr-brass) 10%, transparent), transparent 55%); }
.mlogin-aside-inner { max-width: 28rem; display: flex; flex-direction: column; gap: 1.25rem; animation: plat-rise 0.65s var(--tgr-ease) both; }
.mlogin-aside .bare-brand { color: var(--tgr-ink-text); }
.mlogin-aside-title { margin: 0; font-family: var(--tgr-display); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.2; color: var(--tgr-ink-text); }
.mlogin-aside-title .brass { color: var(--tgr-brass); }
.mlogin-aside-lede { margin: 0; color: var(--tgr-ink-soft); font-size: 1.05rem; line-height: 1.75; }
.mlogin-aside-points { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.mlogin-aside-points li { color: var(--tgr-ink-text); font-size: 0.95rem; padding-inline-start: 1.15rem; position: relative; }
.mlogin-aside-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--tgr-brass); }
/* Light theme: the login hero sits on the paper page, not on an ink band, so it takes the page text
   colours (the --tgr-ink-* tokens stay light on purpose for dark band surfaces). AA on #f3f0e9. */
:root[data-theme="paper"] .mlogin-aside .bare-brand,
:root[data-theme="paper"] .mlogin-aside-title,
:root[data-theme="paper"] .mlogin-aside-points li { color: var(--tgr-text); }
:root[data-theme="paper"] .mlogin-aside-lede { color: var(--tgr-text-2); }

.mlogin-panel { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px); }
.mlogin-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); background: color-mix(in srgb, var(--tgr-ink) 78%, transparent); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.75); animation: plat-rise 0.7s var(--tgr-ease) 0.08s both; }
.mlogin-kicker { margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgr-brass); font-family: var(--tgr-display); }
.mlogin-card h1 { margin: 0; font-family: var(--tgr-display); font-size: clamp(1.6rem, 3vw, 2rem); color: var(--tgr-ink-text); }
.mlogin-card .lede { margin: 0 0 0.5rem; color: var(--tgr-ink-soft); font-size: 0.95rem; line-height: 1.7; }
.mlogin-form { display: flex; flex-direction: column; gap: 0.95rem; }
.mlogin-form .field { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.mlogin-form label { font-size: 0.875rem; color: var(--tgr-ink-soft); }
.mlogin-form input { width: 100%; height: 48px; padding: 0 0.9rem; border-radius: var(--tgr-radius); border: 1px solid var(--tgr-ink-line); background: var(--tgr-field); color: var(--tgr-ink-text); font: inherit; }
.mlogin-form input:focus { outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent); outline-offset: 1px; border-color: color-mix(in srgb, var(--tgr-brass) 45%, transparent); }
.mlogin-form input.ltr { direction: ltr; text-align: left; }
.mlogin-actions { margin-top: 0.35rem; }
.mlogin-actions .btn { width: 100%; justify-content: center; }
.mlogin-errors { border: 1px solid color-mix(in srgb, var(--tgr-danger) 45%, transparent); background: color-mix(in srgb, var(--tgr-danger) 12%, transparent); border-radius: var(--tgr-radius); padding: 0.75rem 0.9rem; }
.mlogin-errors ul { margin: 0; padding-inline-start: 1.1rem; color: var(--tgr-danger); font-size: 0.9rem; }
.mlogin-foot { margin: 0.75rem 0 0; text-align: center; font-size: 0.875rem; color: var(--tgr-ink-mute); }
.mlogin-foot a { color: var(--tgr-brass-soft); text-decoration: none; }
.mlogin-foot a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .mlogin { grid-template-columns: 1fr; }
  .mlogin-aside { border-inline-end: none; border-bottom: 1px solid color-mix(in srgb, var(--tgr-brass) 22%, transparent); padding-bottom: 1.5rem; }
  .mlogin-aside-points { display: none; }
  .mlogin-aside-title { font-size: 1.5rem; }
  .mlogin-panel { padding-top: 0.5rem; align-items: flex-start; }
}

/* ── UI components (C10): Select + Dialog — Claude J* polish aligned to field tokens ── */
.ui-select { position: relative; display: block; min-width: 0; margin: 0.3rem 0 0.9rem; }
.ui-select-native { width: 100%; margin: 0; }
.ui-select[data-enhanced] .ui-select-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  /* tabindex=-1 set in JS — keep out of tab order while preserving validation */
}
.ui-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; min-height: 42px; padding: 0.55rem 0.75rem;
  border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius);
  background: var(--tgr-field); color: var(--tgr-ink-text, var(--tgr-text));
  font: inherit; cursor: pointer; text-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-select-btn:hover { border-color: var(--tgr-text-3, var(--tgr-ink-mute)); }
.ui-select-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent);
  outline-offset: 1px;
}
.ui-select-btn[aria-expanded="true"] {
  border-color: var(--tgr-brass);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tgr-brass) 35%, transparent);
}
.ui-select-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ui-select.is-error .ui-select-btn {
  border-color: color-mix(in srgb, var(--tgr-danger, #c45c5c) 60%, transparent);
}
.ui-select.is-readonly .ui-select-btn {
  cursor: default;
  opacity: 0.92;
  background: color-mix(in srgb, var(--tgr-field) 88%, transparent);
}
.ui-select-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-val.is-placeholder { color: var(--tgr-ink-mute, var(--tgr-text-3)); }
.ui-select-caret {
  flex: 0 0 auto; display: grid; place-items: center; opacity: 0.7;
  transition: transform .15s ease;
}
.ui-select-btn[aria-expanded="true"] .ui-select-caret { transform: rotate(180deg); }
.ui-select-clear {
  position: absolute; inset-inline-end: 2.25rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--tgr-ink-mute); font-size: 1.1rem;
  line-height: 1; cursor: pointer; padding: 0.25rem; border-radius: var(--tgr-radius);
}
.ui-select-clear:focus-visible { outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent); outline-offset: 1px; }
.ui-select-pop {
  /* Default absolute under trigger; JS switches to fixed and clears logical insets (RTL-safe). */
  position: absolute; z-index: 80; inset-inline-start: 0; inset-inline-end: 0; margin-top: 4px;
  background: var(--tgr-surface, #0e1728); border: 1px solid var(--tgr-ink-line, var(--tgr-rule));
  border-radius: var(--tgr-radius);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7); max-height: min(288px, 50vh);
  display: flex; flex-direction: column; overflow: hidden;
}
.ui-select-pop.is-fixed {
  inset: auto; inset-inline: auto; inset-block: auto; right: auto; margin-top: 0;
  z-index: 120; /* above dialog panel when escaped */
}
/* When JS sets position:fixed for overflow/dialog clipping escape, coords are inline. */
.ui-select-pop[hidden] { display: none !important; }
.ui-dialog .ui-select-pop { z-index: 90; }
.ui-select-search {
  margin: 6px; height: 36px; padding: 0 0.6rem;
  border: 1px solid var(--tgr-ink-line, var(--tgr-rule)); border-radius: calc(var(--tgr-radius) - 2px);
  background: var(--tgr-field); color: var(--tgr-ink-text, var(--tgr-text)); font: inherit;
}
.ui-select-search:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent);
  outline-offset: 0;
}
.ui-select-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1 1 auto; }
.ui-select-opt {
  padding: 0.55rem 0.65rem; border-radius: calc(var(--tgr-radius) - 2px);
  cursor: pointer; color: var(--tgr-ink-text, var(--tgr-text)); font-size: 0.9rem;
}
.ui-select-opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--tgr-brass) 16%, transparent); font-weight: 600;
}
.ui-select-opt.is-active, .ui-select-opt:hover {
  background: color-mix(in srgb, var(--tgr-brass) 10%, transparent);
}
.ui-select-opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.ui-select-opt[hidden] { display: none; }
.ui-select-empty {
  padding: 12px; color: var(--tgr-ink-mute); font-size: 0.9rem; text-align: center; list-style: none;
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-btn, .ui-select-caret { transition: none; }
}

/* Dialog — native <dialog> (focus trap + Esc + return are native) */
.ui-dialog { padding: 0; border: 0; background: transparent; width: 100%; color: var(--tgr-ink-text); }
.ui-dialog-sm { max-width: min(92vw, 400px); }
.ui-dialog-md { max-width: min(92vw, 560px); }
.ui-dialog-lg { max-width: min(94vw, 820px); }
.ui-dialog::backdrop { background: rgba(5, 10, 20, 0.6); backdrop-filter: blur(2px); }
/* WEB-10 (U-17): the dialog is a slab (ink ground, 1px inset edge, 4px) — not a soft rounded modal */
.ui-dialog-panel { display: flex; flex-direction: column; max-height: min(86vh, 720px); overflow: hidden; }
.ui-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tgr-ink-line); }
.ui-dialog-head h2 { margin: 0; font-family: var(--tgr-display); font-size: 1.15rem; color: var(--tgr-ink-text); }
.ui-dialog-x { border: 0; background: transparent; color: var(--tgr-ink-mute); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.ui-dialog-x:focus-visible { outline: 2px solid color-mix(in srgb, var(--tgr-brass) 55%, transparent); outline-offset: 2px; border-radius: var(--tgr-radius); }
.ui-dialog-body { padding: 1.25rem; overflow-y: auto; }
.ui-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--tgr-ink-line); }
@media (max-width: 520px) { .ui-dialog-foot { flex-direction: column-reverse; } .ui-dialog-foot > * { width: 100%; } }

/* —— Audit 2026-10-17: shared helpers replacing per-page inline styles —— */
/* status word after a figure or inside a heading: one gap, set here instead of inline */
.num + .status, h2 > .status { margin-inline-start: 0.5rem; }
/* card view of a list (products, shipping companies): slabs on a grid; [hidden] must still win */
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.ledger-grid[hidden] { display: none; }
.ledger-cell { padding: 1.1rem 1.25rem; }
.ledger-cell h2, .ledger-cell h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.ledger-cell .kv { margin-top: 0.75rem; }
/* a hidden table leaves no empty slab behind (JS wraps every admin table in .tscroll) */
.tscroll:has(> table[hidden]) { display: none; }
/* inline explanation that sits between the page head and the list */
.note strong { color: var(--tgr-text-2); font-weight: 600; }

/* —— Design preview (owner review): staff permission templates + coupon conditions ——
   Read-only surfaces: controls render, saving is disabled until the owner approves. */
.preview-note {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-inline-start: 2px solid var(--tgr-brass);
  background: var(--tgr-paper-2);
  color: var(--tgr-text);
  font-size: 0.8125rem;
}
.slab .preview-note, .disclose .preview-note { background: rgba(255, 255, 255, 0.04); }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { background: var(--tgr-btn-bg); border-color: var(--tgr-btn-bg); }
/* radio / checkbox rows: the global input { width: 100% } must not stretch them */
.choice-list, .cond-opts, .pick-list { margin: 0.3rem 0 0.9rem; padding: 0; border: 0; min-width: 0; }
.choice-list > legend, .cond-row > .cond-lbl { padding: 0; font-size: 0.8125rem; color: var(--tgr-text-2); font-weight: 500; }
.choice-list > legend { margin-bottom: 0.4rem; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; align-items: start; padding: 0.75rem 0; border-top: 1px solid var(--tgr-rule-soft); cursor: pointer; }
.choice:first-of-type { border-top: 0; }
.choice b { font-weight: 500; color: var(--tgr-text); }
.choice small { grid-column: 2; font-size: 0.75rem; color: var(--tgr-text-3); }
.choice input, .cond-opts input, .pick-list input { width: auto; height: auto; margin: 0.2rem 0 0; accent-color: var(--tgr-brass); }
/* permission ledger */
table.perm td.c, table.perm th.c { text-align: center; }
.perm-edit { color: var(--tgr-ok); }
.perm-view { color: var(--tgr-text-2); }
.perm-none { color: var(--tgr-text-3); }
/* coupon conditions */
.cond { margin: 0; padding: 0; border: 0; min-width: 0; }
.cond > p { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-3); }
.cond-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.5rem 1.5rem; padding: 0.9rem 0; border-top: 1px solid var(--tgr-rule-soft); }
.cond-lbl small { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.75rem; color: var(--tgr-text-3); }
.cond-opts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; }
.cond-opts label, .pick-list label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; color: var(--tgr-text); }
.cond-opts .decision { font-size: 0.75rem; color: var(--tgr-warn); }
.pick-search { margin-top: 0; }
.pick-list { display: grid; gap: 0; max-height: 15rem; overflow-y: auto; margin: 0; }
.pick-list label { display: flex; padding: 0.45rem 0; border-bottom: 1px solid var(--tgr-rule-soft); }
.pick-list label .num { margin-inline-start: auto; font-size: 0.75rem; color: var(--tgr-text-3); }
.pick-list label[hidden] { display: none; }
.cond-empty { margin: 0; font-size: 0.8125rem; color: var(--tgr-text-3); }
@media (max-width: 760px) { .cond-row { grid-template-columns: 1fr; } }
.preview-assign { margin-top: 1.25rem; }
.cond-slab { padding: 0.4rem 1.4rem 1.2rem; }
.cond-slab .cond-row:first-child { border-top: 0; }
.cond-slab + table, .cond-slab + .tscroll { margin-top: 1.25rem; }
/* paper theme: the primary button is ink, but slabs stay ink, so inside them it had no visible shape.
   On ink surfaces the primary is brass in both themes (as on the statement band). */
:root[data-theme="paper"] :is(.slab, .disclose, .tscroll, .kpis, ol.dec) {
  --tgr-btn-bg: var(--tgr-brass);
  --tgr-btn-fg: #14110a;
  --tgr-btn-hover: var(--tgr-brass-soft);
}
/* —— WEB-07 (U-15): touch targets ≥ 44px on touch screens and narrow viewports.
   Desktop pointer layouts keep their compact sizes; icon buttons grow their hit area, not their glyph. —— */
@media (pointer: coarse), (max-width: 900px) {
  .btn, .btn.sm, summary.btn { min-height: 44px; height: auto; }
  .theme-switch button { min-height: 40px; min-width: 44px; }
  .store-link, .all-pages { min-height: 44px; }
  .sec-tbtn, .icon-x { position: relative; }
  .sec-tbtn::after, .icon-x::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .pager span, .pager a { min-width: 44px; height: 44px; }
  .sheet-group a { display: inline-flex; align-items: center; min-height: 44px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; }
  .dock a { min-height: 48px; justify-content: center; }
}

/* WEB-09: plan comparison folded into a native disclosure on /onboarding */
details.plan-compare > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
details.plan-compare > summary::-webkit-details-marker { display: none; }
details.plan-compare > summary h2 { margin: 0; }
details.plan-compare > summary::after { content: "+"; font-family: var(--tgr-mono); color: var(--tgr-brass); font-size: 1.1rem; }
details.plan-compare[open] > summary::after { content: "−"; }
details.plan-compare[open] > summary { margin-bottom: 0.75rem; }
.done-note a { color: var(--tgr-brass-soft); }

/* —— WEB-10 (U-25): settings save bar — sticky at the bottom of the long form, ink like a slab —— */
.form-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 1.5rem; padding: 0.75rem 1rem;
  background: var(--tgr-band); color: var(--tgr-ink-text);
  border-radius: var(--tgr-radius);
  box-shadow: inset 0 1px 0 var(--tgr-band-edge), 0 -12px 30px -24px rgba(0, 0, 0, 0.8);
}
.form-savebar .btn { margin-inline-start: auto; }
.form-savebar-state { font-size: 0.8125rem; color: var(--tgr-ink-mute); }
.form-savebar[data-dirty="1"] .form-savebar-state { color: var(--tgr-brass); }
@media (max-width: 900px) { .form-savebar { bottom: calc(64px + env(safe-area-inset-bottom)); } }
/* ERP: secondary indicators as a ledger list under the statement band */
.ledger-kv { margin: 0; }

/* WEB-19: where a guide step lives in the dashboard */
.plat-step-where { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--tgr-ink-mute); }

/* —— WEB-02: shipping methods (list + add/edit form) ——
   Salla's courier flow in Naqllah material: ledger list, one slab per «تسعيرة», brass summary line. */
.ship-ledger td b { font-weight: 600; }
.ship-sub { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.ship-empty .form-actions { justify-content: flex-start; }
.ship-label { display: block; font-size: 0.8125rem; color: var(--tgr-text-2); font-weight: 500; margin-bottom: 0.3rem; }
/* radio segments: same underline language as .seg buttons */
.seg label { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1.1rem; color: var(--tgr-text-3); font-size: 0.8125rem; cursor: pointer; white-space: nowrap; }
.seg label:has(input:checked) { color: var(--tgr-text); }
.seg label:has(input:checked)::after { content: ""; position: absolute; inset-inline: 1.1rem; bottom: -1px; height: 2px; background: var(--tgr-brass); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--tgr-brass); outline-offset: -2px; }
.ship-form .seg { border-bottom: 1px solid var(--tgr-rule); width: max-content; max-width: 100%; }
.ship-rates { margin-top: 1.75rem; }
.ship-rate { padding: 1.25rem 1.4rem 1.4rem; margin-bottom: 1rem; }
.ship-rate-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.ship-rate-head h3 { margin: 0; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.05rem; }
.ship-rate-head .btn { margin-inline-start: auto; }
.ship-rate-n { font-family: var(--tgr-mono); font-size: 0.8125rem; color: var(--tgr-brass-ink); margin-inline-end: 0.35rem; }
.ship-type { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.ship-type legend { padding: 0; margin-bottom: 0.3rem; font-size: 0.8125rem; color: var(--tgr-text-2); font-weight: 500; }
.ship-block { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--tgr-rule-soft); }
.ship-block h4 { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--tgr-text-2); }
.ship-cost { margin-top: 0.5rem; }
.ship-cost > summary { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.8125rem; color: var(--tgr-text-2); }
.ship-cost > summary::-webkit-details-marker { display: none; }
.ship-cost > summary::before { content: "+"; font-family: var(--tgr-mono); color: var(--tgr-brass); }
.ship-cost[open] > summary::before { content: "−"; }
.ship-cost > summary span { color: var(--tgr-text-3); font-size: 0.75rem; }
.ship-summary { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-inline-start: 2px solid var(--tgr-brass); background: color-mix(in srgb, var(--tgr-brass) 8%, transparent); color: var(--tgr-brass-ink); font-size: 0.875rem; font-weight: 500; }
.ship-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.4rem; }
.ship-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0 0.3rem 0 0.65rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); font-size: 0.8125rem; color: var(--tgr-text); }
.ship-chip.is-all { padding: 0 0.65rem; color: var(--tgr-brass-ink); border-color: color-mix(in srgb, var(--tgr-brass) 45%, transparent); }
.ship-chip button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: var(--tgr-text-3); font-size: 1rem; cursor: pointer; position: relative; }
.ship-chip button:hover { color: var(--tgr-danger); }
.ship-chip button::after { content: ""; position: absolute; inset: -8px; }
.ship-chips-field input[data-chip-input] { max-width: 22rem; }
.ship-opt { font-weight: 400; color: var(--tgr-text-3); font-size: 0.75rem; }
.ship-cod { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--tgr-text); }
.field-err { display: block; min-height: 0; margin: -0.6rem 0 0.8rem; font-size: 0.75rem; color: var(--tgr-danger); }
.field-err:empty { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--tgr-danger); }
[data-show][hidden], [data-show-when-all][hidden] { display: none !important; }
@media (max-width: 900px) {
  .ship-rate { padding: 1rem; }
  .ship-form .seg { width: 100%; }
  .seg label { flex: 1; justify-content: center; }
}

/* WEB-02 round 2 (Salla study): breadcrumb, required mark, side summary */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-3); }
.crumbs a { color: var(--tgr-text-2); text-decoration: none; }
.crumbs a:hover { color: var(--tgr-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--tgr-text); }
.req { color: var(--tgr-brass-ink); font-weight: 600; margin-inline-start: 0.15rem; }
.ship-none { color: var(--tgr-text-3); }
.ship-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; margin-top: 1.75rem; }
.ship-layout .ship-rates { margin-top: 0; }
.ship-aside { position: sticky; top: 1rem; padding: 1.1rem 1.2rem; }
.ship-aside h2 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; }
.ship-aside-name { margin: 0 0 0.75rem; font-family: var(--tgr-heading); font-size: 1.05rem; }
.ship-aside-list { margin: 0 0 0.75rem; padding: 0; list-style: none; counter-reset: ship-aside; }
.ship-aside-list li { counter-increment: ship-aside; display: grid; gap: 0.15rem; padding: 0.6rem 0; border-top: 1px solid var(--tgr-rule-soft); font-size: 0.8125rem; color: var(--tgr-text-2); }
.ship-aside-list li::before { content: counter(ship-aside, decimal-leading-zero); font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-brass-ink); }
.ship-aside-list li b { color: var(--tgr-text); font-weight: 500; }
.ship-aside-list li span { color: var(--tgr-brass-ink); }
@media (max-width: 1100px) { .ship-layout { grid-template-columns: 1fr; } .ship-aside { position: static; } }
/* WEB-02 QA fix: the save bar is ink in both themes, so its contents use on-ink tokens (paper «إلغاء» was 1.1:1) */
.form-savebar { --tgr-text: var(--tgr-ink-text); --tgr-text-2: var(--tgr-ink-soft); --tgr-text-3: var(--tgr-ink-mute); --tgr-rule: var(--tgr-ink-line); --tgr-brass-ink: var(--tgr-brass); }
/* 44px fields in the shipping form on touch/narrow screens (select measured 43px) */
@media (pointer: coarse), (max-width: 900px) { .ship-form input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .ship-form select { min-height: 44px; } }

/* —— WEB-04: orders workspace (statuses · list by day · detail) — Salla master-detail flow, Naqllah material —— */
.ow-head .acts { align-items: center; }
.ow-search { display: inline-flex; align-items: center; gap: 0.5rem; min-width: min(22rem, 100%); padding: 0 0.75rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: var(--tgr-field); }
.ow-search input { margin: 0; padding: 0.55rem 0; border: 0; background: transparent; }
.ow-search:focus-within { box-shadow: inset 0 -2px 0 var(--tgr-brass); }
.ow-search input:focus-visible { outline: none; }
.ow { display: grid; grid-template-columns: 13.5rem minmax(17rem, 21rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ow-status { position: sticky; top: 1rem; padding: 0.5rem; }
.ow-status ul { list-style: none; margin: 0; padding: 0; }
.ow-status a { display: flex; align-items: center; gap: 0.55rem; min-height: 40px; padding: 0 0.7rem; border-radius: var(--tgr-radius); color: var(--tgr-text-2); text-decoration: none; font-size: 0.8125rem; }
.ow-status a .status { gap: 0; }
.ow-status a:hover { color: var(--tgr-text); }
.ow-status a.is-on { color: var(--tgr-text); box-shadow: inset -2px 0 0 var(--tgr-brass); background: color-mix(in srgb, var(--tgr-brass) 7%, transparent); }
[dir="ltr"] .ow-status a.is-on { box-shadow: inset 2px 0 0 var(--tgr-brass); }
.ow-status-label { flex: 1; }
.ow-status b { font-weight: 400; font-size: 0.75rem; color: var(--tgr-text-3); }
.ow-day { margin: 0 0 0.4rem; padding-top: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--tgr-text-3); }
.ow-day:not(:first-child) { margin-top: 1.1rem; }
.ow-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tgr-rule); }
.ow-row { display: grid; gap: 0.2rem; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--tgr-rule-soft); color: var(--tgr-text); text-decoration: none; }
.ow-row:hover { background: color-mix(in srgb, var(--tgr-text) 4%, transparent); }
.ow-row.is-sel { box-shadow: inset -2px 0 0 var(--tgr-brass); background: color-mix(in srgb, var(--tgr-brass) 7%, transparent); }
[dir="ltr"] .ow-row.is-sel { box-shadow: inset 2px 0 0 var(--tgr-brass); }
.ow-row-top, .ow-row-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ow-no { font-size: 0.75rem; color: var(--tgr-brass-ink); }
.ow-row-mid b { font-weight: 500; font-size: 0.875rem; }
.ow-amt { font-size: 0.8125rem; white-space: nowrap; }
.ow-row-sub { font-size: 0.75rem; color: var(--tgr-text-3); }
.ow-foot { margin-top: 0.75rem; }
.ow-pick { padding: 3rem 1.5rem; text-align: center; }
.ow-bar { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 0.75rem 1rem; background: var(--tgr-band); color: var(--tgr-ink-text); border-radius: var(--tgr-radius); box-shadow: inset 0 0 0 1px var(--tgr-band-edge), var(--tgr-band-shadow);
  --tgr-text: var(--tgr-ink-text); --tgr-text-2: var(--tgr-ink-soft); --tgr-text-3: var(--tgr-ink-mute); --tgr-rule: var(--tgr-ink-line); --tgr-field: rgba(255, 255, 255, 0.04); --tgr-ok: #6fc7a3; --tgr-warn: #d9b46a; --tgr-danger: #ea958b; --tgr-brass-ink: var(--tgr-brass); }
.ow-bar-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ow-bar-title h2 { margin: 0; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.25rem; }
.ow-back { display: none; font-size: 0.8125rem; color: var(--tgr-ink-mute); text-decoration: none; }
.ow-bar-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ow-pop { position: relative; }
.ow-pop > summary { list-style: none; }
.ow-pop > summary::-webkit-details-marker { display: none; }
.ow-pop > summary::after { content: "⌄"; margin-inline-start: 0.4rem; font-size: 0.75rem; }
.ow-pop-body { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; width: max-content; min-width: 13rem; max-width: min(24rem, 90vw); padding: 0.9rem; background: var(--tgr-band); color: var(--tgr-ink-text); border-radius: var(--tgr-radius); box-shadow: inset 0 0 0 1px var(--tgr-band-edge), 0 24px 50px -24px rgba(0, 0, 0, 0.85); }
.ow-move .ow-pop-body { width: min(24rem, 90vw); }
.ow-pop-body fieldset { border: 0; margin: 0; padding: 0; }
.ow-pop-body legend { margin-bottom: 0.6rem; font-size: 0.75rem; color: var(--tgr-ink-mute); }
.ow-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.ow-move-opt { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0.15rem !important; min-height: 44px; padding: 0.55rem 0.65rem; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); cursor: pointer; }
.ow-move-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ow-move-opt:has(input:checked) { border-color: var(--tgr-brass); box-shadow: inset 0 0 0 1px var(--tgr-brass); }
.ow-move-opt:has(input:focus-visible) { outline: 2px solid var(--tgr-brass); outline-offset: 2px; }
.ow-move-opt small { font-size: 0.75rem; color: var(--tgr-ink-mute); }
.ow-notify { margin: 0.75rem 0 0.25rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.ow-confirm { margin: 0.5rem 0; padding: 0.5rem 0.65rem; border-inline-start: 2px solid #ea958b; font-size: 0.8125rem; color: var(--tgr-ink-text); background: rgba(234, 149, 139, 0.08); }
.ow-why { font-size: 0.75rem; color: var(--tgr-ink-mute); }
.ow-menu { display: grid; gap: 0.25rem; }
.ow-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 0.5rem; color: var(--tgr-ink-text); text-decoration: none; font-size: 0.8125rem; border-radius: var(--tgr-radius); }
.ow-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ow-card { padding: 1.1rem 1.2rem; }
.ow-card h3, .ow-items h3, .ow-log h3 { margin: 0 0 0.6rem; font-size: 0.875rem; font-weight: 600; }
.ow-cust-name { margin: 0; font-family: var(--tgr-heading); font-size: 1.1rem; }
.ow-cust-name small { margin-inline-start: 0.5rem; font-family: var(--tgr-font); font-size: 0.75rem; color: var(--tgr-brass-ink); }
.ow-phone { margin: 0.2rem 0 0; color: var(--tgr-text-2); }
.ow-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.75rem 0; }
.ow-kv { grid-template-columns: 7.5rem 1fr; }
.ow-nd { color: var(--tgr-text-3); }
.ow-ship-line { margin: 0 0 0.75rem; font-size: 0.875rem; }
.ow-awb { font-size: 0.8125rem; color: var(--tgr-text-2); }
.ow-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem; max-width: 22rem; margin: 1rem 0 0 auto; font-size: 0.8125rem; }
[dir="rtl"] .ow-totals { margin: 1rem auto 0 0; }
.ow-totals dt { color: var(--tgr-text-3); }
.ow-totals dd { margin: 0; text-align: end; }
.ow-minus { color: var(--tgr-danger); }
.ow-comment textarea { margin-bottom: 0.5rem; }
.ow-events { list-style: none; margin: 1rem 0 0; padding: 0; border-inline-start: 1px solid var(--tgr-rule); }
.ow-events li { position: relative; display: grid; gap: 0.15rem; padding: 0 1rem 1rem; font-size: 0.8125rem; }
.ow-events li::before { content: ""; position: absolute; inset-inline-start: -4px; top: 0.4em; width: 7px; height: 7px; border-radius: 50%; background: var(--tgr-text-3); }
.ow-events li.is-comment::before { background: var(--tgr-brass); border-radius: 1px; }
.ow-events li.is-comment .ow-ev-what { padding: 0.5rem 0.65rem; border-inline-start: 2px solid var(--tgr-brass); background: color-mix(in srgb, var(--tgr-brass) 7%, transparent); }
.ow-ev-who { font-weight: 500; color: var(--tgr-text); }
.ow-ev-who small { margin-inline-start: 0.5rem; font-weight: 400; color: var(--tgr-text-3); }
.ow-ev-what { color: var(--tgr-text-2); }
.ow-ev-effect { font-size: 0.75rem; color: var(--tgr-brass-ink); }
.ow-ev-empty { color: var(--tgr-text-3); }
@media (max-width: 1279px) {
  .ow { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .ow-status { grid-column: 1 / -1; position: static; padding: 0.25rem; }
  .ow-status ul { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0.25rem; }
  .ow-status a { white-space: nowrap; }
  .ow-status a.is-on, [dir="ltr"] .ow-status a.is-on { box-shadow: inset 0 -2px 0 var(--tgr-brass); }
  .ow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ow { grid-template-columns: 1fr; }
  .ow[data-has-detail] .ow-list { display: none; }
  .ow:not([data-has-detail]) .ow-detail { display: none; }
  .ow-back { display: inline-flex; min-height: 44px; align-items: center; }
  .ow-bar { top: 0; }
  .ow-bar-acts { width: 100%; }
  .ow-bar-acts .ow-pop { flex: 1; }
  .ow-bar-acts .ow-pop > summary { width: 100%; justify-content: center; }
  .ow-pop-body, .ow-move .ow-pop-body { position: fixed; inset: auto 0.75rem calc(72px + env(safe-area-inset-bottom)) 0.75rem; width: auto; max-width: none; }
  .ow-kv { grid-template-columns: 6.5rem 1fr; }
  .ow-search { min-width: 0; width: 100%; }
}

/* —— WEB-05: dashboard — setup checklist, intro banner (Salla patterns #16/#17, Naqllah slabs) —— */
.setup { padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; }
.setup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.setup-head h2 { margin: 0; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.15rem; }
.setup-count { font-size: 0.8125rem; color: var(--tgr-text-3); }
.setup-count b { color: var(--tgr-brass-ink); font-weight: 500; }
.setup-bar { flex: 1 1 8rem; height: 4px; background: var(--tgr-rule); border-radius: var(--tgr-radius); overflow: hidden; }
.setup-bar i { display: block; height: 100%; background: var(--tgr-brass); }
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-top: 1px solid var(--tgr-rule-soft); }
.setup-n { font-family: var(--tgr-mono); font-size: 0.8125rem; color: var(--tgr-brass-ink); }
.setup-text strong { font-weight: 500; font-size: 0.875rem; }
.setup-text p { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--tgr-text-3); }
.setup-steps li.is-done .setup-text strong { color: var(--tgr-text-3); text-decoration: line-through; text-decoration-color: var(--tgr-rule); }
.setup-act { display: flex; align-items: center; gap: 0.4rem; }
.setup-act form { margin: 0; }
.setup-soon { font-size: 0.75rem; color: var(--tgr-text-3); }
.intro-banner { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: 1.25rem; border-inline-start: 2px solid var(--tgr-brass); }
.intro-banner > div { flex: 1; }
.intro-banner strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.intro-banner p { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--tgr-text-2); max-width: 46rem; }
.intro-go { display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--tgr-brass-ink); text-decoration: none; }
.intro-x { flex: none; width: 44px; height: 44px; margin: -0.6rem -0.6rem 0 0; border: 0; background: none; color: var(--tgr-text-3); font-size: 1.25rem; cursor: pointer; }
.intro-x:hover { color: var(--tgr-text); }
.dec strong .status { margin-inline-end: 0.4rem; }
.ov-journey { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .setup-steps li { grid-template-columns: 2rem minmax(0, 1fr); }
  .setup-act { grid-column: 2; }
}

/* —— Gated feature in place (WEB-11 component): square brass mark, slab explanation, never an error —— */
.lock-mark { display: inline-block; width: 7px; height: 7px; margin-inline-end: 0.45rem; background: var(--tgr-brass); transform: rotate(45deg); vertical-align: middle; }
.btn.is-locked { border-style: dashed; }
.lock-menu { display: grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: 0; min-height: 44px !important; padding: 0.35rem 0.5rem !important; }
.lock-menu small { grid-column: 2; font-size: 0.75rem; color: var(--tgr-brass); }
.lock-field input[disabled] { border-style: dashed; cursor: not-allowed; }
.lock-card, .lock-page { padding: 1.2rem 1.4rem; border-inline-start: 2px solid var(--tgr-brass); }
.lock-kicker { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--tgr-brass-ink); }
.lock-card strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.lock-card p { margin: 0.25rem 0 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.lock-page { padding: 2rem 1.75rem; max-width: 46rem; }
.lock-page h2 { margin: 0 0 0.5rem; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.5rem; }
.lock-why { margin: 0 0 1rem; color: var(--tgr-text-2); }
.lock-points { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.lock-points li { position: relative; padding: 0.35rem 1.1rem 0.35rem 0; font-size: 0.875rem; border-top: 1px solid var(--tgr-rule-soft); }
.lock-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.85em; width: 5px; height: 5px; background: var(--tgr-brass); transform: rotate(45deg); }
[dir="rtl"] .lock-points li { padding: 0.35rem 1.1rem 0.35rem 0; }
[dir="ltr"] .lock-points li { padding: 0.35rem 0 0.35rem 1.1rem; }
.lock-page .hint { margin-top: 1rem; }
/* WEB-04 QA fixes: grid children may shrink (status row scrolls inside, no page overflow); 12px minimum for currency/time labels */
.ow > * { min-width: 0; }
.ow small, .ow-totals small, .ow-ev-who small, .ow-cust-name small { font-size: 0.75rem; }
/* WEB-07 follow-up: theme switch reaches 44px on touch/narrow (was 40) */
@media (pointer: coarse), (max-width: 900px) { .theme-switch button { min-height: 44px; } }
/* WEB-04 polish: product option on its own line; unit price line on narrow screens; no wrapped currency; one-line actions */
.ow-items .ow-item-name { display: block; }
.ow-items .ow-item-opt { display: block; margin-top: 0.15rem; color: var(--tgr-text-3); }
.ow-items .ow-item-unit { display: none; margin-top: 0.15rem; color: var(--tgr-text-3); }
.ow-items td.amount { white-space: nowrap; }
.ow-bar-acts .ow-pop > summary { white-space: nowrap; }
@media (max-width: 900px) { .ow-items .ow-item-unit { display: block; } }

/* —— WEB-14 (J-18): «شارك رابط متجرك» slab —— */
.share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.75rem 1.5rem; align-items: center; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; border-inline-start: 2px solid var(--tgr-brass); }
.share h2 { margin: 0 0 0.25rem; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.15rem; }
.share p { margin: 0; font-size: 0.8125rem; color: var(--tgr-text-2); }
.share-link { display: flex; gap: 0.5rem; }
.share-link input { margin: 0; min-height: 44px; text-align: left; }
.share-link .btn { flex: none; min-height: 44px; }
.share-acts { grid-column: 1 / -1; margin: 0; }
.share-done { font-size: 0.8125rem; color: var(--tgr-ok); }

/* —— WEB-17: reports —— */
.rep-seg { margin-bottom: 1.5rem; border-bottom: 1px solid var(--tgr-rule); align-items: stretch; overflow: visible; flex-wrap: wrap; }
.rep-seg > a, .rep-custom > summary { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; color: var(--tgr-text-3); font-size: 0.8125rem; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.rep-custom > summary::-webkit-details-marker { display: none; }
.rep-seg > a:hover, .rep-custom > summary:hover { color: var(--tgr-text); }
.rep-seg > a.is-on, .rep-custom > summary[aria-current] { color: var(--tgr-text); }
.rep-seg > a.is-on::after, .rep-custom > summary[aria-current]::after { content: ""; position: absolute; inset-inline: 1.1rem; bottom: -1px; height: 2px; background: var(--tgr-brass); }
.rep-custom { position: relative; }
.rep-range { position: absolute; inset-inline-start: 0; top: 100%; z-index: 20; display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; width: max-content; max-width: 90vw; padding: 0.9rem; background: var(--tgr-band); color: var(--tgr-ink-text); border-radius: var(--tgr-radius); box-shadow: inset 0 0 0 1px var(--tgr-band-edge), 0 24px 50px -24px rgba(0,0,0,.85); --tgr-text: var(--tgr-ink-text); --tgr-text-2: var(--tgr-ink-soft); --tgr-text-3: var(--tgr-ink-mute); --tgr-rule: var(--tgr-ink-line); --tgr-field: rgba(255,255,255,.04); }
.rep-range label { display: grid; gap: 0.2rem; font-size: 0.75rem; }
.rep-range input { margin: 0; }
.rep-range .hint { width: 100%; margin: 0; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-top: 1.5rem; }
.rep-grid > * { min-width: 0; }
.rep-share { display: inline-flex; align-items: center; gap: 0.5rem; }
.rep-share i { display: inline-block; width: 4rem; height: 4px; background: linear-gradient(to left, var(--tgr-brass) var(--w), var(--tgr-rule) var(--w)); }
[dir="ltr"] .rep-share i { background: linear-gradient(to right, var(--tgr-brass) var(--w), var(--tgr-rule) var(--w)); }
.rep-share .num { min-width: 2.5rem; font-size: 0.75rem; color: var(--tgr-text-3); }
@media (max-width: 1100px) { .rep-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .share { grid-template-columns: 1fr; } .rep-seg { flex-wrap: nowrap; overflow-x: auto; } .rep-range { position: fixed; inset: auto 0.75rem calc(72px + env(safe-area-inset-bottom)) 0.75rem; width: auto; } }

/* —— WEB-20: platform console (stores ledger, store page, decisions inbox) —— */
.pf-seg { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1.1rem; color: var(--tgr-text-3); font-size: 0.8125rem; text-decoration: none; white-space: nowrap; }
.pf-seg b { font-weight: 400; font-size: 0.75rem; color: var(--tgr-text-3); }
.pf-seg:hover, .pf-seg.is-on { color: var(--tgr-text); }
.pf-seg.is-on::after { content: ""; position: absolute; inset-inline: 1.1rem; bottom: -1px; height: 2px; background: var(--tgr-brass); }
.pf-tabs { margin-bottom: 1.25rem; border-bottom: 1px solid var(--tgr-rule); }
.pf-stores td b { font-weight: 600; }
.pf-sub { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.pf-flag { color: var(--tgr-warn); }
.pf-ready { display: inline-flex; align-items: center; gap: 0.5rem; }
.pf-ready-bar { display: inline-block; width: 4.5rem; height: 4px; background: var(--tgr-rule); border-radius: var(--tgr-radius); overflow: hidden; }
.pf-ready-bar i { display: block; height: 100%; background: var(--tgr-brass); }
.pf-ready .num { font-size: 0.75rem; color: var(--tgr-text-2); }
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.pf-cols > * { min-width: 0; }
.pf-card { padding: 1.2rem 1.4rem; margin-bottom: 1.25rem; }
.pf-card h2 { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; }
.pf-count { font-size: 0.75rem; color: var(--tgr-brass-ink); font-weight: 400; }
.pf-steps { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.pf-steps li { display: flex; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--tgr-rule-soft); color: var(--tgr-text); }
.pf-steps li span[aria-hidden] { width: 1rem; color: var(--tgr-text-3); font-family: var(--tgr-mono); }
.pf-steps li.is-done { color: var(--tgr-text-3); }
.pf-steps li.is-done span[aria-hidden] { color: var(--tgr-ok); }
.pf-danger { border-inline-start: 2px solid var(--tgr-danger); }
.pf-confirm > summary { list-style: none; cursor: pointer; }
.pf-confirm > summary::-webkit-details-marker { display: none; }
.pf-confirm-body { margin-top: 1rem; }
.pf-step { margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.pf-effects { margin: 0 0 1rem; padding: 0; list-style: none; font-size: 0.8125rem; }
.pf-effects li { position: relative; padding: 0.35rem 1rem 0.35rem 0; border-top: 1px solid var(--tgr-rule-soft); color: var(--tgr-text); }
.pf-effects li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.85em; width: 6px; height: 6px; background: var(--tgr-danger); transform: rotate(45deg); }
[dir="ltr"] .pf-effects li { padding: 0.35rem 0 0.35rem 1rem; }
.pf-confirm-body .num { color: var(--tgr-brass-ink); }
.pf-inbox li strong .status { margin-inline-end: 0.4rem; }
.pf-inbox-acts { margin-top: 0.6rem; }
@media (max-width: 1100px) { .pf-cols { grid-template-columns: 1fr; } }
/* WEB-20 QA: ledger scrolls in place on narrow screens; short buttons still 44px wide on touch */
.pf-scroll { overflow-x: auto; }
@media (pointer: coarse), (max-width: 900px) { .btn { min-width: 44px; justify-content: center; } }
/* WEB-20 QA: every admin field reaches 44px on touch/narrow screens (selects measured 43px) */
@media (pointer: coarse), (max-width: 900px) { input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; } }
/* WEB-07/10 follow-up (server QA, paper theme): the custom select drew ink text on light fields (1.18:1).
   Trigger follows the page text token (slabs already switch it to ink); the popup is an ink panel in both themes. */
.ui-select-btn { color: var(--tgr-text); }
.ui-select-val.is-placeholder { color: var(--tgr-text-3); }
.ui-select-pop { background: var(--tgr-band); border-color: var(--tgr-band-edge, var(--tgr-ink-line)); color: var(--tgr-ink-text); }
.ui-select-pop .ui-select-search { color: var(--tgr-ink-text); background: rgba(255, 255, 255, 0.04); }
.ui-select-pop .ui-select-opt { color: var(--tgr-ink-text); }
@media (pointer: coarse), (max-width: 900px) { .ui-select-btn { min-height: 44px; } .ui-select-opt { min-height: 44px; display: flex; align-items: center; } }
/* WEB-09 follow-up (final server QA): «تم» credentials labels reach 12px; the status word inside a value keeps its inline dot+word form */
.done-creds > div > span { font-size: 0.75rem; }
.done-creds strong .status { display: inline-flex; font-size: inherit; margin: 0; }
.done-creds { --tgr-ok: #6fc7a3; --tgr-warn: #d9b46a; --tgr-danger: #ea958b; } /* the card is ink in both themes */

/* —— WEB-11: «قريبًا» in navigation (word, not a pill), gated page shown in place —— */
.nav-soon { margin-inline-start: 0.35rem; font-family: var(--tgr-mono); font-size: 0.75rem; letter-spacing: 0; color: var(--tgr-brass-ink, var(--tgr-brass)); }
.subnav .nav-soon, .sheet-group .nav-soon { font-size: 0.75rem; color: var(--tgr-brass); }

/* —— WEB-16: staff permission templates (owner decision #7) —— */
.rl-ledger td b { font-weight: 600; }
.rl-sub { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.rl-warn { color: var(--tgr-warn); }
.rl-you { margin-inline-start: 0.4rem; font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-brass-ink); }
.rl-why { display: inline-block; max-width: 13rem; font-size: 0.75rem; color: var(--tgr-text-3); white-space: normal; }
.rl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.rl-layout > * { min-width: 0; }
.rl-sec { padding: 1.1rem 1.4rem 0.6rem; margin-bottom: 1rem; }
.rl-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.25rem; }
.rl-sec-head h3 { margin: 0; font-family: var(--tgr-heading); font-weight: 600; font-size: 1.05rem; }
.rl-sec-head .btn { margin-inline-start: auto; }
.rl-sec-note { margin-inline-start: auto; font-size: 0.75rem; color: var(--tgr-text-3); }
.rl-sec.is-owner { border-inline-start: 2px solid var(--tgr-brass); }
.rl-perms { list-style: none; margin: 0; padding: 0; }
.rl-perm { border-top: 1px solid var(--tgr-rule-soft); }
.rl-perm:first-child { border-top: 0; }
.rl-perm label { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.25rem 0.75rem; min-height: 44px; padding: 0.7rem 0; cursor: pointer; }
.rl-perm input { margin-top: 0.2rem; }
.rl-perm-text b { display: block; font-weight: 500; color: var(--tgr-text); }
.rl-perm-text small { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.rl-perm.is-owner label { cursor: not-allowed; }
.rl-perm.is-owner .rl-perm-text b { color: var(--tgr-text-2); }
.rl-tag { align-self: center; font-family: var(--tgr-mono); font-size: 0.75rem; color: var(--tgr-text-3); white-space: nowrap; }
.rl-tag-warn { color: var(--tgr-warn); }
.rl-tag-warn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 0.35rem; background: var(--tgr-warn); transform: rotate(45deg); vertical-align: middle; }
.rl-aside { position: sticky; top: 1rem; padding: 1.1rem 1.2rem; }
.rl-aside h2 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; }
.rl-sum { margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.rl-sum-warn { margin: 0 0 0.6rem; padding: 0.5rem 0.65rem; border-inline-start: 2px solid var(--tgr-warn); font-size: 0.8125rem; color: var(--tgr-text); background: color-mix(in srgb, var(--tgr-warn) 10%, transparent); }
.rl-dialog { max-width: min(92vw, 520px); }
.rl-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.rl-warn-list { margin: 0.5rem 0 1rem; padding: 0; list-style: none; font-size: 0.8125rem; }
.rl-warn-list li { padding: 0.45rem 0; border-top: 1px solid var(--tgr-rule-soft); color: var(--tgr-ink-soft); }
.rl-warn-list li b { color: var(--tgr-ink-text); font-weight: 600; }
.rl-ack { display: flex !important; gap: 0.6rem; align-items: flex-start !important; font-size: 0.8125rem; color: var(--tgr-ink-text); }
.rl-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.6rem; }
.rl-choice { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 1rem 1.2rem; cursor: pointer; }
.rl-choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--tgr-band-edge), inset 2px 0 0 var(--tgr-brass); }
[dir="rtl"] .rl-choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--tgr-band-edge), inset -2px 0 0 var(--tgr-brass); }
.rl-choice input { margin-top: 0.25rem; }
.rl-choice-main b { font-weight: 600; }
.rl-choice-main small { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.rl-diff-h { margin: 0.5rem 0 0.2rem; font-size: 0.75rem; color: var(--tgr-text-3); }
.rl-diff { margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: 0.8125rem; }
.rl-diff li { padding: 0.2rem 0; color: var(--tgr-text); }
@media (max-width: 1100px) { .rl-layout { grid-template-columns: 1fr; } .rl-aside { position: static; order: -1; } }
/* QA (static WEB-16): the mono face has no Arabic glyphs, so Arabic words in it rendered disconnected («تحذ ير»).
   Arabic status words use the body face; digits and codes stay mono. */
.nav-soon, .rl-you, .rl-tag, .plan-badge { font-family: var(--tgr-font); }
/* disabled primary actions look disabled (the «تأكيد وحفظ» button read as active) */
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--tgr-btn-bg); border-color: var(--tgr-btn-bg); }
.btn.secondary:disabled:hover, .btn.ghost:disabled:hover { background: transparent; }

/* —— ENG-45: VAT number state in settings —— */
.vat-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tgr-rule-soft); }
.vat-state { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.vat-state .status { margin-inline-end: 0.5rem; }
.vat-note { margin-bottom: 0; }
.vat-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; }
.vat-acts form { margin: 0; }
.vat-reason { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--tgr-danger); }

/* —— ENG-46: support tickets (merchant + platform) —— */
.sp-new { margin-inline-start: 0.45rem; font-size: 0.75rem; color: var(--tgr-brass-ink); }
.sp-thread { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.sp-msg { max-width: 46rem; padding: 0.85rem 1rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); }
.sp-msg.is-support { margin-inline-start: auto; background: var(--tgr-band); color: var(--tgr-ink-text); border-color: var(--tgr-band-edge); --tgr-text: var(--tgr-ink-text); --tgr-text-3: var(--tgr-ink-mute); --tgr-link: #8dc1f6; --tgr-brass-ink: #cfb173; }
.sp-msg.is-system { max-width: none; border-style: dashed; font-size: 0.8125rem; color: var(--tgr-text-3); }
.sp-msg.is-internal { border-inline-start: 2px solid var(--tgr-brass); }
.sp-who { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin: 0 0 0.35rem; font-size: 0.8125rem; }
.sp-who small { color: var(--tgr-text-3); font-size: 0.75rem; }
.sp-tag { font-size: 0.75rem; color: var(--tgr-brass-ink); }
.sp-body { font-size: 0.875rem; line-height: 1.7; }
.sp-file { margin: 0.5rem 0 0; font-size: 0.8125rem; }
.sp-reply { display: grid; gap: 0.5rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.sp-reply textarea { margin: 0; }
.sp-reply-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sp-reply-foot .btn { margin-inline-start: auto; }
.sp-attach, .sp-after { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.sp-attach input { width: auto; margin: 0; min-height: 0; }
.sp-after select { width: auto; margin: 0; }
.sp-kind { border: 0; padding: 0; margin: 0; }
.sp-close { margin-bottom: 1rem; }

/* —— Screen-reader-only text (was inlined per page) —— */
.rv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* —— WEB-13: plans — a ledger list (no card grid), nothing preselected, comparison always visible —— */
.plan-section { width: 100%; max-width: 960px; }
.plan-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.plan-head .plat-h2 { font-size: 1.35rem; margin: 0; }
.plan-head .lede { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--tgr-ink-soft); }
.plan-cycle { display: inline-flex; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); overflow: hidden; }
.plan-cycle button { min-height: 44px; padding: 0 1rem; background: transparent; border: 0; color: var(--tgr-ink-soft); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.plan-cycle button[aria-pressed="true"] { background: var(--tgr-brass); color: #14110a; font-weight: 600; }
.plan-list { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.plan-card.plan-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 1.5rem;
  padding: 1rem 1.15rem; background: var(--tgr-band); box-shadow: inset 0 0 0 1px var(--tgr-band-edge); transition: box-shadow 150ms ease-out, transform 120ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .plan-card.plan-row:hover { box-shadow: inset 0 0 0 1px var(--tgr-brass-soft); } }
.plan-card.plan-row:active { transform: scale(0.99); }
.plan-card.plan-row.is-selected { box-shadow: inset 0 0 0 2px var(--tgr-brass); }
.plan-card.plan-row:focus-within { outline: 2px solid var(--tgr-brass); outline-offset: 2px; }
.plan-pick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tgr-ink-soft); }
.plan-row.is-selected .plan-pick { border-color: var(--tgr-brass); background: var(--tgr-brass); box-shadow: inset 0 0 0 3px var(--tgr-band); }
.plan-id { display: grid; gap: 0.2rem; min-width: 0; }
.plan-name { font-family: var(--tgr-heading); font-size: 1.15rem; font-weight: 600; color: var(--tgr-ink-text); }
.plan-row .plan-desc { margin: 0; min-height: 0; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.plan-facts { display: grid; gap: 0.15rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); white-space: nowrap; }
.plan-facts b { color: var(--tgr-ink-text); font-weight: 600; }
.plan-row .plan-price { display: block; text-align: end; white-space: nowrap; }
.plan-row .plan-price [hidden] { display: none; }
.plan-amount { font-family: var(--tgr-heading); font-size: 1.6rem; font-weight: 600; color: var(--tgr-brass-soft); }
.plan-per { font-size: 0.75rem; color: var(--tgr-ink-mute); }
.plan-trial-note { margin: 0 0 1.25rem; padding: 0.15rem 1rem; border-inline-start: 2px solid var(--tgr-brass); font-size: 0.875rem; line-height: 1.85; color: var(--tgr-ink-soft); }
.plan-trial-note p { margin: 0; }
.plan-trial-note b { color: var(--tgr-ink-text); }
.plan-trial-note .plan-fine { margin-top: 0.35rem; font-size: 0.75rem; color: var(--tgr-ink-mute); }
.plan-compare h2 { margin: 0 0 0.75rem; font-family: var(--tgr-heading); font-size: 1.1rem; }
.plan-compare .compare-table { font-size: 0.8125rem; }
@media (max-width: 760px) { .plan-compare .compare-table th, .plan-compare .compare-table td { padding: 0.5rem 0.25rem; } }
.plan-compare .compare-table thead th { font-family: var(--tgr-heading); font-size: 0.95rem; font-weight: 600; color: var(--tgr-ink-text); }
.plan-compare .compare-table tbody th { font-weight: 400; text-align: start; color: var(--tgr-ink-soft); }
.plan-compare .compare-table td { color: var(--tgr-ink-text); }
.plan-need { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--tgr-ink-soft); }
.plan-need[hidden] { display: none; }
@media (max-width: 760px) {
  .plan-card.plan-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 0.9rem; }
  .plan-row .plan-price { grid-column: 3; grid-row: 1; }
  .plan-facts { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; white-space: normal; }
  .plan-amount { font-size: 1.35rem; }
}

/* —— Payment activation: one combined fee per method + explicit consent —— */
.pa-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1rem; padding: 0.9rem 1.1rem; font-size: 0.875rem; }
.pa-state { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.8; color: var(--tgr-text-2); }
.pa-state .status { margin-inline-end: 0.5rem; }
.pa-reason { margin: -0.5rem 0 1rem; font-size: 0.875rem; color: var(--tgr-danger); }
.pa-fees { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.pa-fees-head h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.pa-fees-head p { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.pa-table { width: 100%; }
.pa-eg { font-size: 0.8125rem; color: var(--tgr-text-2); }
.plan-compare .compare-table tbody th small { font-size: 0.75rem; color: var(--tgr-ink-mute); }
.pa-rate { font-size: 1.05rem; font-weight: 600; color: var(--tgr-brass-ink); white-space: nowrap; }
.pa-notes { margin: 0.75rem 0 0; padding-inline-start: 1.1rem; font-size: 0.8125rem; line-height: 1.8; color: var(--tgr-text-2); }
.pa-consent { display: grid; gap: 0.9rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.pa-ack { display: flex !important; gap: 0.65rem; align-items: flex-start; min-height: 44px; font-size: 0.875rem; line-height: 1.7; color: var(--tgr-text); cursor: pointer; }
.pa-ack input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0.2rem 0 0; accent-color: var(--tgr-brass); }
.pa-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pa-go .btn { margin-inline-start: auto; }
.pa-why { margin: 0; font-size: 0.8125rem; color: var(--tgr-text-3); }
.pa-why[hidden] { display: none; }
.pa-terms { font-size: 0.8125rem; }
@media (max-width: 760px) {
  .plan-compare .compare-table { table-layout: fixed; width: 100%; }
  .plan-compare .compare-table th, .plan-compare .compare-table td { white-space: normal; overflow-wrap: anywhere; }
  .plan-compare .compare-table th:first-child, .plan-compare .compare-table td:first-child { width: 36%; }
  .plan-compare .compare-table td .num { font-size: 0.75rem; }
  .pa-table, .pa-table tbody { display: block; width: 100%; }
  .pa-table thead { display: none; }
  .pa-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--tgr-rule); }
  .pa-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .pa-table .pa-eg { grid-column: 1 / -1; }
}

/* —— WEB-18: storefront section editor (ENG-25) —— */
.se-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.se-bar h1 { margin: 0 0 0.3rem; }
.se-draft { margin: 0; font-size: 0.8125rem; color: var(--tgr-text-2); }
.se-draft .status { margin-inline-end: 0.4rem; }
.se-bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.se-device button { min-height: 44px; }
.se-work { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.se-work.is-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.se-side { padding: 0.5rem 1rem 1rem; min-width: 0; }
.se-tabs { display: flex; gap: 0; margin: 0 0 1rem; border-bottom: 1px solid var(--tgr-rule); overflow-x: auto; }
.se-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; font-size: 0.8125rem; color: var(--tgr-text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.se-tabs a[aria-current="page"] { color: var(--tgr-text); border-bottom-color: var(--tgr-brass); font-weight: 600; }
.se-panel-head h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.se-panel-head p { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.se-fixed { margin: 0.4rem 0; padding: 0.45rem 0.75rem; font-size: 0.75rem; color: var(--tgr-text-3); border: 1px dashed var(--tgr-rule); border-radius: var(--tgr-radius); }
.se-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.se-item { border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: var(--tgr-field); }
.se-item.is-dragging { opacity: 0.5; }
.se-row { display: flex; align-items: center; gap: 0.15rem; padding: 0.15rem 0.4rem; }
.se-grip { padding: 0 0.3rem; color: var(--tgr-text-3); cursor: grab; }
.se-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; }
.se-hidden-word { display: none; margin-inline-start: 0.5rem; font-size: 0.75rem; font-weight: 400; color: var(--tgr-text-3); }
.se-item.is-hidden .se-hidden-word { display: inline; }
.se-item.is-hidden .se-name { color: var(--tgr-text-2); }
.se-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: var(--tgr-radius); color: var(--tgr-text-2); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .se-ic:hover:not(:disabled) { background: color-mix(in srgb, var(--tgr-text) 8%, transparent); color: var(--tgr-text); } }
.se-ic { transition: transform 120ms ease-out; }
.se-ic:active:not(:disabled) { transform: scale(0.94); }
.se-ic:disabled { opacity: 0.35; cursor: default; }
.se-eye .se-eye-off { display: none; }
.se-eye[aria-pressed="false"] .se-eye-off { display: inline; }
.se-edit summary, .se-add summary { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; font-size: 0.8125rem; color: var(--tgr-brass-ink); cursor: pointer; border-top: 1px solid var(--tgr-rule); }
.se-add { margin-top: 0.75rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); }
.se-add summary { border-top: 0; }
.se-fields { display: grid; gap: 0.6rem; padding: 0.25rem 0.75rem 0.85rem; }
.se-fields .field { margin: 0; }
.se-file { margin: 0 0 0.3rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.se-add-list { list-style: none; margin: 0; padding: 0 0.75rem 0.5rem; }
.se-add-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--tgr-rule); font-size: 0.875rem; }
.se-add-list small { display: block; font-size: 0.75rem; color: var(--tgr-text-3); }
.se-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; margin-top: 1rem; }
.se-dirty { font-size: 0.8125rem; color: var(--tgr-warn); }
.se-dirty[hidden] { display: none; }
.se-stage { position: sticky; top: 1rem; min-width: 0; }
.se-frame-wrap { display: flex; justify-content: center; padding: 0.75rem; border-radius: var(--tgr-radius); background: color-mix(in srgb, var(--tgr-text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--tgr-rule); }
.se-frame { display: block; width: 100%; height: 72vh; min-height: 560px; border: 0; border-radius: var(--tgr-radius); background: #fff; }
.se-work[data-device="mobile"] .se-frame { width: 390px; max-width: 100%; }
.se-stage-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--tgr-text-3); }
.se-phone-note { display: none; font-size: 0.875rem; line-height: 1.7; color: var(--tgr-text-2); }
.se-group { border: 0; padding: 0; margin: 0 0 1.1rem; }
.se-group legend { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--tgr-text); }
.se-group-row { margin: 0 0 1.1rem; }
.se-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.se-color { display: flex !important; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.se-color input[type="color"] { flex: none; width: 44px; height: 44px; min-height: 0; padding: 2px; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); background: transparent; }
.se-color span { flex: 1; min-width: 0; }
.se-color code { font-size: 0.75rem; color: var(--tgr-text-3); }
.se-contrast { list-style: none; margin: 0.75rem 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.se-contrast .status { margin-inline-end: 0.4rem; }
.se-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.se-choice label { display: inline-flex !important; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); font-size: 0.8125rem; color: var(--tgr-text); cursor: pointer; }
.se-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.se-ver { padding: 0.75rem 1rem; border: 1px solid var(--tgr-rule); border-radius: var(--tgr-radius); }
.se-ver.is-current { border-color: var(--tgr-brass); }
.se-ver-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.se-ver-meta { margin: 0.2rem 0; font-size: 0.75rem; color: var(--tgr-text-3); }
.se-ver-sum { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.se-empty { font-size: 0.875rem; color: var(--tgr-text-2); }
.se-code-state { margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.se-code-state .status { margin-inline-end: 0.4rem; }
.se-code-reason { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--tgr-danger); }
.se-code-warn { margin: 0 0 1rem; padding: 0.4rem 0.9rem; border-inline-start: 2px solid var(--tgr-warn); font-size: 0.8125rem; line-height: 1.8; color: var(--tgr-text-2); }
.se-code-warn strong, .se-code-warn b { color: var(--tgr-text); }
.se-code-warn ul { margin: 0.3rem 0 0; padding-inline-start: 1.1rem; }
.se-lang { margin-bottom: 0.6rem; }
.se-lang button { min-height: 44px; }
.se-code-pane[hidden] { display: none; }
.se-code-area { min-height: 240px; font-family: var(--tgr-mono); font-size: 0.8125rem; line-height: 1.6; tab-size: 2; direction: ltr; text-align: left; white-space: pre; }
.se-code-preview { margin-top: 1rem; }
.se-code-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.se-code-preview-head h3 { margin: 0; font-size: 0.95rem; }
.se-code-frame { display: block; width: 100%; height: 360px; border: 0; border-radius: var(--tgr-radius); background: #fff; }
.se-changes { margin: 0.5rem 0 0.75rem; padding-inline-start: 1.1rem; font-size: 0.875rem; line-height: 1.9; }
.se-note { margin: 0 0 0.6rem; padding: 0.2rem 0.75rem; border-inline-start: 2px solid var(--tgr-brass); font-size: 0.8125rem; color: var(--tgr-text-2); }
@media (max-width: 760px) {
  .se-work, .se-work.is-wide { grid-template-columns: minmax(0, 1fr); }
  .se-stage, .se-device, .se-tabs, .se-grip, .se-desk-only { display: none !important; }
  .se-phone-note { display: block; }
  .se-side { padding: 0.75rem; }
}
.se-color code { background: none; padding: 0; }
.btn .num { color: inherit; }
.ui-dialog-x { min-width: 44px; min-height: 44px; }

/* —— WEB-18 / WEB-20: platform review of custom code —— */
.cr-add { color: var(--tgr-ok); }
.cr-del { color: var(--tgr-danger); }
.cr-diff { padding: 1rem 1.2rem; margin-bottom: 1rem; }
.cr-diff h2 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 0.95rem; }
.cr-diff h2 small { font-size: 0.75rem; font-weight: 400; color: var(--tgr-text-3); }
.cr-lines { width: 100%; border-collapse: collapse; font-family: var(--tgr-mono); font-size: 0.8125rem; line-height: 1.55; direction: ltr; }
.cr-lines td { padding: 0 0.5rem; border: 0; vertical-align: top; white-space: pre; text-align: left; }
.cr-lines .cr-n { width: 2.5rem; color: var(--tgr-text-3); text-align: right; user-select: none; }
.cr-lines .cr-m { width: 1rem; color: var(--tgr-text-3); }
.cr-lines tr.cr-add td { background: rgba(111, 199, 163, 0.12); }
.cr-lines tr.cr-add .cr-m { color: var(--tgr-ok); }
.cr-lines tr.cr-del td { background: rgba(234, 149, 139, 0.12); }
.cr-lines tr.cr-del .cr-m { color: var(--tgr-danger); }
.cr-lines tr.cr-add td.cr-code, .cr-lines tr.cr-del td.cr-code, .cr-lines tr.cr-ctx td.cr-code { color: var(--tgr-text); }
.cr-lines tr.is-flag-danger td:first-child { box-shadow: inset 3px 0 0 var(--tgr-danger); }
.cr-lines tr.is-flag-warn td:first-child { box-shadow: inset 3px 0 0 var(--tgr-warn); }
.cr-lines tr:target td { outline: 1px solid var(--tgr-brass); outline-offset: -1px; }
.cr-lines tr.cr-gap td { padding: 0.3rem 0.5rem; font-family: var(--tgr-font); font-size: 0.75rem; color: var(--tgr-text-3); text-align: left; border-block: 1px dashed var(--tgr-rule); }
.cr-lines tbody tr:hover td { background-color: transparent; }
.cr-lines tbody tr:hover > :first-child { box-shadow: none; }
.cr-checks, .cr-domains { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.cr-checks li, .cr-domains li { padding: 0.5rem 0; border-top: 1px solid var(--tgr-rule-soft); line-height: 1.7; color: var(--tgr-text); }
.cr-checks .status, .cr-domains .status { margin-inline-end: 0.35rem; }
.cr-at { display: inline-block; margin-inline-start: 0.25rem; font-size: 0.75rem; }
.cr-domains code { font-size: 0.8125rem; color: var(--tgr-text); background: none; padding: 0; }
.cr-quiet { margin: 0; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.cr-form { display: grid; gap: 0.45rem; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid var(--tgr-rule); }
.cr-form:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.cr-form h3 { margin: 0; font-size: 0.875rem; }
.cr-form textarea, .cr-form select { margin: 0; }
.cr-form .hint { margin: 0; }
.cr-diff .pf-scroll { position: relative; direction: ltr; }
.cr-form .rl-ack { min-height: 44px; } .cr-form .rl-ack input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0.2rem 0 0; accent-color: var(--tgr-brass); }
.cr-lines td.cr-code { font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace; }

/* —— break-ui pass (bundle 2): realistic worst-case data —— */
/* long names / subjects / store names wrap inside their cell instead of stretching the table */
table.indexed tbody td.cell-wrap, td.cell-wrap { white-space: normal; min-width: 9rem; max-width: 24rem; overflow-wrap: anywhere; }
td.cell-wrap .rl-sub, td.cell-wrap .pf-sub { overflow-wrap: anywhere; }
/* unbreakable e-mails, URLs and file names never push the page sideways */
.page-head h1, .page-lede, .sp-body, .sp-file, .sp-who b, .vat-reason, .pa-reason, .cr-quiet, .se-file, .se-ver-sum, .rl-sub { overflow-wrap: anywhere; }
/* reply footer at 320px: the file input may shrink, the row wraps */
.sp-reply-foot > * { min-width: 0; }
.sp-attach { flex-wrap: wrap; max-width: 100%; }
.sp-attach input { max-width: 100%; }
@media (max-width: 760px) { .plan-row .plan-price { white-space: normal; } }
.sp-reply { grid-template-columns: minmax(0, 1fr); }
/* roles on narrow screens: the permission summary keeps a readable width; the ledger scrolls sideways instead */
@media (max-width: 760px) { [data-sel="roles-template-row"] > td:nth-child(2) { min-width: 13rem; } }
@media (max-width: 760px) { [data-sel="roles-member-row"] > td:nth-child(2) { min-width: 8rem; } }
@media (prefers-reduced-motion: reduce) { .plan-card.plan-row, .se-ic { transition: none; } .plan-card.plan-row:active, .se-ic:active:not(:disabled) { transform: none; } }
/* WEB-02 contract alignment: on/off toggle beside «تعديل» */
/* a table cell must stay display: table-cell (flex on a td breaks the row at narrow widths) */
td.ship-row-acts { white-space: nowrap; text-align: end; }
td.ship-row-acts > * { display: inline-block; vertical-align: middle; margin: 0 0 0 0.35rem; }
.ship-row-acts form { margin: 0; }
/* break-ui (shipping): an 80-character method name wraps in its cell; the type choice never forces the form wider */
table.indexed tbody td.ship-name-cell, td.ship-name-cell { white-space: normal; min-width: 10rem; max-width: 22rem; overflow-wrap: anywhere; }
.ship-type { min-width: 0; }
.ship-type .seg { flex-wrap: wrap; }
.ship-rate-head { flex-wrap: wrap; gap: 0.5rem; }
.ship-free { font-family: var(--tgr-font); }

/* —— Bundle 3: settings hub (sections + anchor nav) —— */
.st-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.st-nav { position: sticky; top: 1rem; display: grid; gap: 0.15rem; padding-inline-start: 0.25rem; border-inline-start: 1px solid var(--tgr-rule); }
.st-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; font-size: 0.875rem; color: var(--tgr-text-2); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -1px; }
.st-nav a:focus-visible, .st-nav a:target { color: var(--tgr-text); border-inline-start-color: var(--tgr-brass); }
@media (hover: hover) and (pointer: fine) { .st-nav a:hover { color: var(--tgr-text); } }
.st-nav a.is-danger { color: var(--tgr-danger); }
.st-sections { display: grid; gap: 1rem; min-width: 0; }
.st-sec { padding: 1.1rem 1.25rem; scroll-margin-top: 1rem; min-width: 0; }
.st-head h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.st-head p { margin: 0 0 0.85rem; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.st-form .form-grid { margin-bottom: 0.5rem; }
.st-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.85rem; }
.st-kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0.5rem; font-size: 0.8125rem; color: var(--tgr-text-2); }
.st-kv code, .st-state code, .st-dns code { font-size: 0.8125rem; color: var(--tgr-text); background: none; padding: 0; overflow-wrap: anywhere; }
.st-plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.85rem; }
.st-plan-name { font-family: var(--tgr-heading); font-size: 1.25rem; }
.st-plan-state, .st-state { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.st-plan-state .status, .st-state .status { margin-inline-end: 0.4rem; }
.st-plan-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.st-usage, .st-matrix, .st-dns { width: 100%; margin-bottom: 0.75rem; }
.st-usage td, .st-matrix td, .st-matrix th[scope="row"] { font-size: 0.8125rem; }
.st-bar { width: 38%; }
.st-meter { display: block; height: 4px; border-radius: var(--tgr-radius); background: var(--tgr-rule); overflow: hidden; }
.st-meter i { display: block; height: 100%; background: var(--tgr-brass); }
.st-usage tr.is-near .st-meter i { background: var(--tgr-warn); }
.st-muted, .st-sub { color: var(--tgr-text-3); }
.st-sub { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 400; }
.st-matrix th[scope="row"] { font-weight: 500; text-align: start; }
.st-check { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.st-check input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--tgr-brass); }
.st-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.st-inline .field { flex: 1 1 16rem; margin: 0; }
.st-reason { margin: 0.25rem 0 0.5rem; font-size: 0.8125rem; color: var(--tgr-danger); }
.st-val { word-break: break-all; }
.st-danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tgr-danger) 55%, transparent), var(--tgr-band-shadow); }
.st-danger .st-head h2 { color: var(--tgr-danger); }
.st-risks { list-style: none; margin: 0; padding: 0; }
.st-risks > li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.85rem 0; border-top: 1px solid var(--tgr-rule-soft); }
.st-risks > li > div { flex: 1 1 18rem; min-width: 0; }
.st-risks strong { font-size: 0.9rem; }
.st-risks p { margin: 0.2rem 0 0; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.st-confirm { flex: 0 1 22rem; }
.st-confirm .pf-confirm-body { display: grid; gap: 0.5rem; }
.st-confirm input { margin: 0; }
.st-danger-btn { color: var(--tgr-danger) !important; border-color: color-mix(in srgb, var(--tgr-danger) 60%, transparent) !important; }
@media (max-width: 900px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-nav { position: static; display: flex; overflow-x: auto; border-inline-start: 0; border-bottom: 1px solid var(--tgr-rule); padding: 0; }
  .st-nav a { white-space: nowrap; border-inline-start: 0; border-bottom: 2px solid transparent; margin: 0; }
  .st-bar { width: 30%; }
}

/* —— Bundle 3: partial / full refund dialog (decision 4) —— */
.rf-lede { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.7; }
.rf-quick { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }
.rf-lines { width: 100%; margin-bottom: 0.5rem; }
.rf-lines td { vertical-align: top; padding-block: 0.5rem; }
.rf-name { font-weight: 600; font-size: 0.875rem; overflow-wrap: anywhere; }
.rf-sub { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tgr-ink-mute); }
.rf-qty { width: 5rem; margin: 0; text-align: center; }
.rf-restock, .rf-check { display: flex !important; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.8125rem; color: var(--tgr-ink-text); cursor: pointer; }
.rf-restock input, .rf-check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--tgr-brass); }
.rf-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--tgr-ink-line); }
.rf-total b { font-family: var(--tgr-heading); font-size: 1.35rem; color: var(--tgr-brass-soft); }
.rf-tax { margin: 0.25rem 0 0; }
.rf-effects { margin-bottom: 0.5rem; }
.rf-final { margin: 0; font-size: 0.8125rem; color: var(--tgr-danger); }
.rf-why { margin-inline-end: auto; font-size: 0.8125rem; color: var(--tgr-ink-mute); }
.rf-why[hidden] { display: none; }
.ow-refunded { display: block; font-size: 0.75rem; color: var(--tgr-warn); }
.ow-rf-dt small { display: block; font-size: 0.75rem; color: var(--tgr-text-3); }
.st-confirm code, .st-risks code { background: none; padding: 0; color: inherit; overflow-wrap: anywhere; }
.btn.st-danger-btn, .btn.sm.st-danger-btn { background: transparent !important; }
@media (hover: hover) and (pointer: fine) { .btn.st-danger-btn:hover { background: color-mix(in srgb, var(--tgr-danger) 14%, transparent) !important; } }
.rf-dialog [hidden] { display: none !important; }

/* —— Bundle 3: merchant plan & subscription —— */
.bl-now, .bl-compare, .bl-inv { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.bl-now-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.85rem; }
.bl-plan { margin: 0; font-family: var(--tgr-heading); font-size: 1.4rem; }
.bl-state { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--tgr-text-2); }
.bl-state .status { margin-inline-end: 0.4rem; }
.bl-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bl-after { margin: 0 0 1rem; padding: 0.35rem 1rem; border-inline-start: 2px solid var(--tgr-brass); }
.bl-after h3 { margin: 0 0 0.35rem; font-size: 0.9rem; }
.bl-after ol { margin: 0; padding-inline-start: 1.2rem; font-size: 0.8125rem; line-height: 1.85; color: var(--tgr-text-2); }
.bl-usage tr.is-full .st-meter i { background: var(--tgr-danger); }
.bl-note { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--tgr-warn); }
.bl-usage tr.is-full .bl-note { color: var(--tgr-danger); }
.bl-compare h2, .bl-inv h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.bl-table { width: 100%; min-width: 34rem; }
.bl-table th[scope="col"] { font-family: var(--tgr-heading); font-size: 0.95rem; color: var(--tgr-text); }
.bl-table th[scope="col"] small { display: block; font-family: var(--tgr-font); font-size: 0.75rem; font-weight: 400; color: var(--tgr-brass-ink); }
.bl-table th.is-current { box-shadow: inset 0 -2px 0 var(--tgr-brass); }
.bl-table tbody th { font-weight: 400; color: var(--tgr-text-2); text-align: start; }
.bl-table tbody th small { font-size: 0.75rem; color: var(--tgr-text-3); }
.bl-actions-row td { vertical-align: top; padding-block: 0.75rem; }
.bl-why { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.75rem; line-height: 1.6; color: var(--tgr-warn); max-width: 14rem; }
.bl-down .pf-confirm-body { display: grid; gap: 0.5rem; max-width: 16rem; font-size: 0.8125rem; }

/* —— Bundle 3: platform plans & limits editor —— */
.pe-table { width: 100%; min-width: 40rem; }
.pe-table th[scope="col"] { font-family: var(--tgr-heading); font-size: 0.95rem; color: var(--tgr-text); }
.pe-sub { display: block; font-family: var(--tgr-font); font-size: 0.75rem; font-weight: 400; color: var(--tgr-text-3); }
.pe-table tbody th[scope="row"] { font-weight: 400; color: var(--tgr-text-2); text-align: start; font-size: 0.8125rem; }
.pe-group th { padding-top: 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--tgr-text); text-align: start; border-bottom: 1px solid var(--tgr-rule); }
.pe-group th small { font-weight: 400; color: var(--tgr-text-3); }
.pe-internal th, .pe-internal td { background: color-mix(in srgb, var(--tgr-brass) 6%, transparent); }
.pe-in { width: 7rem; margin: 0; text-align: center; }
.pe-save { display: grid; gap: 0.75rem; padding: 1rem 1.2rem; margin: 1rem 0; }
.pe-changes strong { font-size: 0.9rem; }
.pe-changes .pf-effects { margin: 0.5rem 0 0; }
.pe-ack[hidden], .pe-changes [hidden] { display: none !important; }
.pe-log { margin-top: 1rem; }

/* —— Bundle 3: private store / publish (ENG-02) —— */
.sv-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.sv-main { flex: 1 1 20rem; min-width: 0; }
.sv-main h2 { margin: 0 0 0.25rem; font-size: 1rem; }
.sv-main p { margin: 0; font-size: 0.8125rem; line-height: 1.7; color: var(--tgr-text-2); }
.sv-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sv-why { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--tgr-text-2); }
.sv-confirm .pf-confirm-body { display: grid; gap: 0.5rem; max-width: 18rem; font-size: 0.8125rem; }
.pe-group th small { font-size: 0.75rem; }


/* Fine grain over the background pools: removes gradient banding and gives the surface a material feel.
   Static (no motion), behind all content, ignored by pointer and assistive tech. */
/* The pools and grain sit on a layer that spans the whole document (not background-attachment: fixed,
   which stopped at the first viewport and left a hard seam on long pages and in full-page captures). */
html { position: relative; min-height: 100%; }
html::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--tgr-page-glow), var(--tgr-page-base, var(--tgr-paper)); background-repeat: no-repeat; }
html::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--tgr-grain-opacity, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="paper"]::before { filter: invert(1); }
@media (prefers-reduced-transparency: reduce) { html::before { display: none; } }

/* Carrier logo slot: the carrier's logo file when present, otherwise a neutral named tile (never empty) */
.carrier { display: inline-flex; align-items: center; gap: 0.5rem; vertical-align: middle; }
.carrier-logo { width: 2.5rem; height: 1.625rem; flex: none; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 26, 44, 0.12); display: grid; place-items: center; overflow: hidden; }
.carrier-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carrier-logo.lg { width: 3.25rem; height: 2.125rem; border-radius: 8px; }

/* ================= Audit batch E: public pages and sign-up ================= */
/* N-41: the light theme applies fully on public pages — the public components read the «ink» tokens, which stay dark
   for the admin bands; inside the public containers they become the paper surface. */
:root[data-theme="paper"] :is(.plat, .bare.onboard) {
  --tgr-ink: var(--tgr-surface); --tgr-ink-line: var(--tgr-rule); --tgr-ink-text: var(--tgr-text);
  --tgr-ink-soft: #3b4440; --tgr-ink-mute: #56605a; --tgr-mast-bg: color-mix(in srgb, var(--tgr-paper) 90%, transparent);
  --tgr-brass-soft: var(--tgr-brass-ink);
  --tgr-band: var(--tgr-surface); --tgr-band-edge: var(--tgr-rule); --tgr-band-glow: rgba(196, 164, 102, 0.12);
  --tgr-band-shadow: 0 18px 40px -28px rgba(22, 25, 26, 0.22);
}
/* sign-up cards had dark fills written as colours, not tokens */
:root[data-theme="paper"] .bare.onboard :is(.path-btn, .plan-card, .plan-card.popular, .import-source-opt) { background: var(--tgr-surface); color: var(--tgr-text); box-shadow: inset 0 0 0 1px var(--tgr-rule), 0 14px 30px -24px rgba(22, 25, 26, 0.25); }
:root[data-theme="paper"] .bare.onboard .path-btn:hover { background: var(--tgr-surface-hover); }
:root[data-theme="paper"] .bare.onboard :is(.path-btn.is-on, .plan-card.is-selected, .plan-card.popular.is-selected) { background: color-mix(in srgb, var(--tgr-brass) 10%, var(--tgr-surface)); box-shadow: inset 0 0 0 2px var(--tgr-brass); }
:root[data-theme="paper"] :is(.plat, .bare.onboard) .bare-card :is(input, select, textarea) { background: var(--tgr-field); border-color: var(--tgr-rule); color: var(--tgr-text); }
:root[data-theme="paper"] :is(.plat, .bare.onboard) .bare-card code { background: var(--tgr-surface-head); color: var(--tgr-brass-ink); }
:root[data-theme="paper"] .bare.onboard .plan-pick { border-color: var(--tgr-rule); }
:root[data-theme="paper"] .onboard-atmosphere {
  background: radial-gradient(980px 520px at 78% -12%, rgba(46, 104, 182, 0.10), transparent 62%),
    radial-gradient(720px 420px at 8% 28%, rgba(196, 164, 102, 0.12), transparent 58%), var(--tgr-page-base);
}
:root[data-theme="paper"] :is(.plat, .bare.onboard) .btn.secondary { color: var(--tgr-text); border-color: var(--tgr-rule); }
:root[data-theme="paper"] :is(.plat, .bare.onboard) :is(.plat-kicker, .plat-eyebrow, .onboard-kicker) { color: var(--tgr-brass-ink); }

/* N-42: 44px targets on the public header, the phone menu and the footer */
.bare-brand { min-height: 44px; }
.plat-top-nav .plat-top-link, .plat-top-login { display: inline-flex; align-items: center; min-height: 44px; }
.plat-top-nav a.is-active { padding-bottom: 0; }
.plat-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.plat-menu { display: none; position: relative; }
.plat-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--tgr-ink-line); border-radius: 10px; color: var(--tgr-ink-text); cursor: pointer; }
.plat-menu > summary::-webkit-details-marker { display: none; }
.plat-menu > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.plat-menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30; display: grid; gap: 2px; min-width: 220px; padding: 8px; border-radius: 14px; background: var(--tgr-ink); border: 1px solid var(--tgr-ink-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.plat-menu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--tgr-ink-text); text-decoration: none; }
.plat-menu-list a[aria-current="page"] { background: color-mix(in srgb, var(--tgr-brass) 16%, transparent); }
.plat-menu-list .btn { justify-content: center; margin-top: 6px; color: var(--tgr-btn-fg); }
@media (max-width: 900px) {
  .plat-top-nav .plat-top-link { display: none; }
  .plat-menu { display: block; }
  .plat-top-nav { gap: 8px; }
}

/* N-43: the hero shows the real dashboard; benefits, prices and carriers */
.plat-hero.plat-hero-shot { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); min-height: 0; }
.plat-shot { margin: 0; display: grid; gap: 8px; }
.plat-shot picture { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--tgr-ink-line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55); background: var(--tgr-ink); }
.plat-shot img { display: block; width: 100%; height: auto; }
.plat-shot .shot-light { display: none; }
:root[data-theme="paper"] .plat-shot .shot-dark { display: none; }
:root[data-theme="paper"] .plat-shot .shot-light { display: block; }
.plat-shot figcaption { font-size: 13px; color: var(--tgr-ink-mute); text-align: center; }
.plat-shot-wide { margin-top: 28px; }
.plat-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plat-benefit { padding: 20px; border: 1px solid var(--tgr-ink-line); border-radius: 14px; background: color-mix(in srgb, var(--tgr-ink) 55%, transparent); }
.plat-benefit strong { display: block; font-size: 17px; color: var(--tgr-ink-text); margin-bottom: 6px; }
.plat-benefit p { margin: 0; color: var(--tgr-ink-soft); line-height: 1.7; }
.plat-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plat-price { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border: 1px solid var(--tgr-ink-line); border-radius: 16px; background: color-mix(in srgb, var(--tgr-ink) 60%, transparent); }
.plat-price.is-featured { border-color: var(--tgr-brass); box-shadow: 0 0 0 1px var(--tgr-brass) inset; }
.plat-price h3 { margin: 0; font-size: 20px; color: var(--tgr-ink-text); }
.plat-price-for, .plat-price-annual, .plat-price-trial { margin: 0; color: var(--tgr-ink-soft); font-size: 14px; }
.plat-price-amount { margin: 8px 0 0; color: var(--tgr-ink-text); }
.plat-price-amount b { font-size: 34px; }
.plat-price .btn { margin-top: auto; justify-content: center; min-height: 44px; }
.plat-carrier-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; padding: 0; margin: 12px 0; }
.plat-carrier-list li { display: inline-flex; align-items: center; gap: 8px; color: var(--tgr-ink-text); }
.plat-carrier-list small { color: var(--tgr-ink-mute); font-size: 12.5px; }
@media (max-width: 900px) {
  .plat-hero.plat-hero-shot, .plat-benefits, .plat-prices { grid-template-columns: 1fr; }
}

/* N-19 / N-20 / N-21 on the sign-up page */
.pass-wrap { position: relative; display: flex; align-items: stretch; gap: 8px; }
.pass-wrap input { flex: 1; min-width: 0; }
.pass-toggle { flex: none; min-width: 72px; min-height: 44px; padding: 0 14px; border: 1px solid var(--tgr-ink-line); border-radius: var(--tgr-radius); background: transparent; color: var(--tgr-ink-text); font: inherit; font-weight: 600; cursor: pointer; }
.slug-state { min-height: 1.4em; margin: 4px 0 0; font-size: 13.5px; color: var(--tgr-ink-mute); }
.slug-state[data-tone="ok"] { color: var(--tgr-ok); }
.slug-state[data-tone="bad"] { color: var(--tgr-danger); font-weight: 600; }
details.plan-compare > summary { list-style: none; display: flex; align-items: center; min-height: 44px; cursor: pointer; }
details.plan-compare > summary::-webkit-details-marker { display: none; }
details.plan-compare > summary h2 { margin: 0; font-size: 18px; }
details.plan-compare > summary::after { content: "+"; margin-inline-start: auto; font-size: 22px; color: var(--tgr-brass); }
details.plan-compare[open] > summary::after { content: "−"; }
.onboard-submit-card .btn { min-height: 48px; }
.bare.onboard .plan-section { margin-top: 28px; }