/* ============================================================
   SULLIVAN DASHBOARD — COMPONENT LIBRARY  (components.css)
   Loads AFTER tokens.css. Every class reads tokens only — no
   literal colors, sizes, or z-indexes in this file.
   Each component's copy-paste markup is in the comment above it.
   All properties are logical (inline-start/-end) ⇒ RTL works by
   setting dir="rtl" on any container, nothing else.
   ============================================================ */

/* ---------- BUTTONS ----------
   <button class="btn">Default</button>
   <button class="btn btn-primary">Save</button>
   <button class="btn btn-ghost">Reset</button>
   <button class="btn btn-danger">Delete</button>
   <button class="btn btn-sm">Small</button>
   <button class="btn btn-icon" aria-label="Refresh">⟳</button>   */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-latin);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  padding: 0 var(--sp-4); height: 34px;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: transparent; border-color: var(--loss-bd); color: var(--danger); }
.btn-danger:hover { background: var(--loss-bg); }
.btn-sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn-icon { width: 34px; padding: 0; font-size: var(--fs-lg); }
.btn-sm.btn-icon { width: 28px; font-size: var(--fs-md); }

/* ---------- INPUTS / SELECTS / DATE ----------
   <input class="input" type="text" placeholder="Search name, phone, TG, UID…">
   <select class="input select"><option>…</option></select>
   <input class="input" type="date">
   With leading icon:
   <label class="field"><span class="field-icon">🔍</span>
     <input class="input" type="search" …></label>                */
.input {
  font: var(--fw-regular) var(--fs-sm)/1.2 var(--font-latin);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  height: 34px; padding: 0 var(--sp-3);
  min-width: 0;
  transition: border-color var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-faint); }
.input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.select {
  appearance: none; padding-inline-end: var(--sp-8); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .select { background-position: 16px 55%, 11px 55%; }
input[type="date"].input { padding-inline-end: var(--sp-2); }
.field { position: relative; display: inline-flex; align-items: center; }
.field-icon { position: absolute; inset-inline-start: var(--sp-3); pointer-events: none; font-size: var(--fs-sm); opacity: 0.7; }
.field .input { padding-inline-start: var(--sp-8); width: 100%; }

/* ---------- CHECKBOX-DROPDOWN PICKER (Columns ▾, Contactability) ----------
   <details class="picker">
     <summary class="btn">Columns <span class="picker-count">8</span> ▾</summary>
     <div class="picker-menu" role="group" aria-label="Visible columns">
       <label class="picker-item"><input type="checkbox" checked> Name</label>
       …
       <div class="picker-foot"><button class="btn btn-sm btn-ghost">Reset</button></div>
     </div>
   </details>                                                      */
.picker { position: relative; display: inline-block; }
.picker > summary { list-style: none; }
.picker > summary::-webkit-details-marker { display: none; }
.picker-count {
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-latin);
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-full); padding: 2px 7px;
}
.picker-menu {
  position: absolute; inset-inline-start: 0; top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  min-width: 220px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-2);
  padding: var(--sp-2);
  animation: menu-in var(--t-med) var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.picker-item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-1); cursor: pointer;
}
.picker-item:hover { background: var(--surface-2); }
.picker-item input { accent-color: var(--accent); }
.picker-foot { border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-2); display: flex; justify-content: flex-end; }

/* ---------- SEGMENTED 3-STATE CONTROL (Active / Silent / Off) ----------
   Radios ⇒ keyboard arrows work natively. Instant, reversible.
   <fieldset class="seg" role="radiogroup" aria-label="Channel mode">
     <label class="seg-opt seg-active"><input type="radio" name="ch1" checked><span>Active</span></label>
     <label class="seg-opt seg-silent"><input type="radio" name="ch1"><span>Silent</span></label>
     <label class="seg-opt seg-off"><input type="radio" name="ch1"><span>Off</span></label>
   </fieldset>                                                     */
.seg {
  display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--r-1); background: var(--surface-2);
  padding: 2px; gap: 2px; margin: 0;
}
.seg-opt { position: relative; display: inline-flex; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg-opt span {
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-latin);
  color: var(--text-muted); padding: 6px 12px; border-radius: 4px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg-opt:hover span { color: var(--text); }
.seg-opt input:focus-visible + span { box-shadow: var(--focus-ring); }
.seg-active input:checked + span { background: var(--win-bg); color: var(--win-fg); box-shadow: inset 0 0 0 1px var(--win-bd); }
.seg-silent input:checked + span { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn-bd); }
.seg-off input:checked + span { background: var(--expired-bg); color: var(--expired-fg); box-shadow: inset 0 0 0 1px var(--expired-bd); }

/* ---------- BADGES (outcome vocabulary) ----------
   <span class="badge win">Win</span>  — classes: win loss riskfree
   open pending expired warn · neutral default                    */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-latin);
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}
.badge.win      { background: var(--win-bg);      color: var(--win-fg);      border-color: var(--win-bd); }
.badge.loss     { background: var(--loss-bg);     color: var(--loss-fg);     border-color: var(--loss-bd); }
.badge.riskfree { background: var(--riskfree-bg); color: var(--riskfree-fg); border-color: var(--riskfree-bd); }
.badge.open     { background: var(--open-bg);     color: var(--open-fg);     border-color: var(--open-bd); }
.badge.pending  { background: var(--pending-bg);  color: var(--pending-fg);  border-color: var(--pending-bd); }
.badge.expired  { background: var(--expired-bg);  color: var(--expired-fg);  border-color: var(--expired-bd); }
.badge.warn     { background: var(--warn-bg);     color: var(--warn-fg);     border-color: var(--warn-bd); }

/* ---------- HEALTH / PROGRESS PILL ----------
   <span class="pill ok"><i class="dot"></i>engine · 12s</span>
   states: ok / warn / bad — dot pulses only for .bad             */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-latin);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.pill.ok .dot { background: var(--ok); }
.pill.warn { border-color: var(--warn-bd); color: var(--warn-fg); }
.pill.warn .dot { background: var(--warn-fg); }
.pill.bad { border-color: var(--loss-bd); color: var(--danger); background: var(--loss-bg); }
.pill.bad .dot { background: var(--danger); animation: pill-pulse 1.2s ease-in-out infinite; }
@keyframes pill-pulse { 50% { opacity: 0.35; } }

/* ---------- STAT TILE ----------
   <button class="tile" aria-pressed="false">
     <span class="tile-label">Active</span>
     <span class="tile-value">1,204</span>
     <span class="tile-delta up">▲ 3.2% vs prev 7d</span>
   </button>
   Clickable tiles = <button>; aria-pressed marks the applied filter.
   delta classes: up / down / flat                                */
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--font-latin); text-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-1); cursor: pointer; min-width: 130px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.tile:hover { border-color: var(--border-strong); }
.tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tile-label { font: var(--fw-medium) var(--fs-xs)/1.2 var(--font-latin); color: var(--text-muted); }
.tile-value { font: var(--fw-semibold) var(--fs-2xl)/var(--lh-tight) var(--font-latin); font-variant-numeric: tabular-nums; color: var(--text); }
.tile-delta { font: var(--fw-medium) var(--fs-2xs)/1.2 var(--font-latin); font-variant-numeric: tabular-nums; color: var(--text-faint); }
.tile-delta.up { color: var(--money-pos); }
.tile-delta.down { color: var(--money-neg); }

/* ---------- CARD + STANDARD HEADER PATTERN ----------
   ONE header pattern everywhere (kills the h2/small/floated mess):
   <section class="card">
     <header class="card-head">
       <h2 class="card-title"><span class="card-emoji">📡</span>Channels</h2>
       <p class="card-hint">3-state toggle writes instantly</p>
       <div class="card-actions"> …buttons/selects… </div>
     </header>
     <div class="card-body">…</div>
   </section>                                                     */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); box-shadow: var(--shadow-1);
}
.card-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.card-title {
  margin: 0; font: var(--fw-semibold) var(--fs-lg)/var(--lh-tight) var(--font-latin);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.card-emoji { font-size: var(--fs-lg); line-height: 1; width: 22px; text-align: center; }
.card-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.card-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card-body { padding: var(--sp-4); }

/* ---------- TABLE ----------
   <div class="table-wrap">
     <table class="table">
       <thead><tr>
         <th aria-sort="descending"><button class="th-sort">Vol <span class="th-arrow">↓</span></button></th>
       …</tr></thead>
       <tbody>
         <tr class="row-assets">…</tr>
         <tr class="tint-win">…</tr>
       </tbody>
     </table>
   </div>
   <nav class="pagination" aria-label="Pages">…</nav>
   .table-wrap scrolls horizontally; edge fade appears automatically.
   td.num for numeric cells (end-aligned).                        */
.table-wrap {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface); max-width: 100%;
  background-image:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left,  var(--surface) 30%, transparent),
    linear-gradient(to right, var(--scrim), transparent),
    linear-gradient(to left,  var(--scrim), transparent);
  background-position: left, right, left, right;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--sp-2) var(--sp-3); text-align: start; white-space: nowrap; }
.table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-2);
  font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-latin);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}
.th-sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit;
}
.th-sort:hover { color: var(--text); }
.th-sort:focus-visible { box-shadow: var(--focus-ring); border-radius: 3px; }
th[aria-sort] .th-arrow { color: var(--accent); }
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-2) 40%, transparent); }
.table tbody tr:hover { background: var(--surface-2); }
.table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.row-assets { box-shadow: inset 3px 0 0 var(--win-bd); background: var(--has-assets-tint) !important; }
[dir="rtl"] .row-assets { box-shadow: inset -3px 0 0 var(--win-bd); }
.tint-win  { background: color-mix(in oklab, var(--win-bg) 45%, transparent) !important; }
.tint-loss { background: color-mix(in oklab, var(--loss-bg) 45%, transparent) !important; }
.tint-open { background: color-mix(in oklab, var(--open-bg) 40%, transparent) !important; }
.pagination { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pagination .btn { min-width: 28px; }
.pagination .current { font-weight: var(--fw-semibold); color: var(--text); }

/* ---------- TABS ----------
   <nav class="tabs" role="tablist" aria-label="Admin sections">
     <button class="tab" role="tab" aria-selected="true">🎛️ Cockpit</button>
     <button class="tab" role="tab" aria-selected="false">📡 Signaler <span class="tab-count">142</span></button>
   </nav>                                                          */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
.tab {
  all: unset; cursor: pointer; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-latin);
  color: var(--text-muted); padding: var(--sp-3) var(--sp-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--text); }
.tab:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.tab[aria-selected="true"] { color: var(--text); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }
.tab-count { font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-latin); color: var(--text-faint); background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-full); }

/* ---------- DRAWER (profile) ----------
   <div class="scrim" hidden></div>
   <aside class="drawer" role="dialog" aria-modal="true" aria-label="Member profile" hidden>
     <header class="drawer-head">… <button class="btn btn-icon btn-ghost" aria-label="Close">✕</button></header>
     <div class="drawer-body">…sections…</div>
   </aside>
   JS toggles [hidden]; Esc closes; focus loops inside.           */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-drawer); animation: fade-in var(--t-slow) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0;
  width: min(480px, 100vw); z-index: var(--z-drawer);
  background: var(--surface); border-inline-start: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  animation: drawer-in var(--t-slow) var(--ease-out);
}
@keyframes drawer-in { from { transform: translateX(100%); } }
[dir="rtl"] .drawer { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { transform: translateX(-100%); } }
.drawer-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface);
}
.drawer-body { overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- MODAL ----------
   <div class="scrim"></div>
   <div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
     <header class="card-head"><h2 class="card-title" id="m-title">Edit trigger</h2>
       <div class="card-actions"><button class="btn btn-icon btn-ghost" aria-label="Close">✕</button></div></header>
     <div class="card-body">…</div>
     <footer class="modal-foot">…buttons…</footer>
   </div>                                                          */
.modal {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow: auto;
  z-index: var(--z-modal);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
  animation: modal-in var(--t-slow) var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--border); }

/* ---------- TOAST ----------
   <div class="toast-stack" aria-live="polite">
     <div class="toast ok">Channel set to Silent <button class="toast-undo">Undo</button></div>
     <div class="toast err">Couldn't save note — <button class="toast-undo">Retry</button></div>
   </div>
   Replaces confirm() dialogs: act first, offer Undo for 6s.      */
.toast-stack {
  position: fixed; bottom: var(--sp-5); inset-inline-end: var(--sp-5);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-latin);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--text-faint);
  border-radius: var(--r-2); box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-4); max-width: 360px;
  animation: toast-in var(--t-med) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast.ok { border-inline-start-color: var(--ok); }
.toast.err { border-inline-start-color: var(--danger); }
.toast.warn { border-inline-start-color: var(--warn-fg); }
.toast-undo {
  all: unset; cursor: pointer; color: var(--accent);
  font-weight: var(--fw-semibold); margin-inline-start: auto;
}
.toast-undo:focus-visible { box-shadow: var(--focus-ring); border-radius: 3px; }

/* ---------- TOOLTIP (pure CSS, for icon buttons & ⓘ) ----------
   <button class="btn btn-icon has-tip" aria-label="Refresh" data-tip="Refresh">⟳</button>
   Uses aria-label for AT + data-tip for the visual.              */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 0;
  z-index: var(--z-tooltip);
  font: var(--fw-medium) var(--fs-2xs)/1.3 var(--font-latin);
  background: var(--text); color: var(--bg);
  padding: 4px 8px; border-radius: var(--r-1); white-space: nowrap;
  display: none; pointer-events: none;
}
[dir="rtl"] .has-tip::after { translate: 50% 0; }
.has-tip:hover::after, .has-tip:focus-visible::after { display: block; animation: tip-in var(--t-fast) var(--ease-out); }
@keyframes tip-in { from { opacity: 0; } }

/* ---------- SKELETON / EMPTY / ERROR ----------
   <div class="skeleton" style="width:60%; height:14px"></div>
   <div class="empty"><span class="empty-emoji">🕵️</span>
     <p>No silent sources right now.</p></div>
   <div class="error-box" role="alert">
     <p>Couldn't load signals — the API didn't answer.</p>
     <button class="btn btn-sm">Try again</button></div>          */
.skeleton {
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  color: transparent; user-select: none;
}
@keyframes skeleton-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-faint);
  font-size: var(--fs-sm);
}
.empty-emoji { font-size: 28px; filter: grayscale(0.4); opacity: 0.8; }
.empty p { margin: 0; }
.error-box {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--loss-bg); border: 1px solid var(--loss-bd);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--text);
}
.error-box p { margin: 0; flex: 1; min-width: 200px; }

/* ---------- STALE-DATA INDICATOR ----------
   <span class="stale" data-state="fresh">updated 14:02 · refreshes in 38s</span>
   data-state: fresh | stale (amber) — JS flips it.               */
.stale { font: var(--fw-regular) var(--fs-2xs)/1.2 var(--font-latin); font-variant-numeric: tabular-nums; color: var(--text-faint); }
.stale[data-state="stale"] { color: var(--warn-fg); }
.stale[data-state="stale"]::before { content: "⚠ "; }

/* ---------- DIVIDER WITH LABEL ----------
   <div class="divider-label" role="separator">quiet — no closed signals yet</div> */
.divider-label {
  display: flex; align-items: center; gap: var(--sp-3);
  font: var(--fw-medium) var(--fs-2xs)/1 var(--font-latin);
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--sp-4) 0;
}
.divider-label::before, .divider-label::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }

/* ---------- THUMBNAIL WITH STATUS RING (screenshot gallery) ----------
   <button class="thumb ok" data-tip="Accepted" aria-label="Screenshot, accepted">
     <img src="…" alt=""><span class="thumb-mark">✓</span></button>
   states: ok(green ✓) / bad(red ✗) / hold(amber ⏳)              */
.thumb {
  all: unset; cursor: pointer; position: relative; display: inline-block;
  width: 96px; height: 96px; border-radius: var(--r-2); overflow: visible;
}
.thumb img, .thumb .thumb-ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-2); background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--expired-bd);
}
.thumb.ok img, .thumb.ok .thumb-ph { box-shadow: 0 0 0 2px var(--win-bd); }
.thumb.bad img, .thumb.bad .thumb-ph { box-shadow: 0 0 0 2px var(--loss-bd); }
.thumb.hold img, .thumb.hold .thumb-ph { box-shadow: 0 0 0 2px var(--warn-bd); }
.thumb:focus-visible img, .thumb:focus-visible .thumb-ph { box-shadow: var(--focus-ring); }
.thumb-mark {
  position: absolute; top: -6px; inset-inline-end: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font: var(--fw-bold) 11px/1 var(--font-latin); color: var(--on-accent);
  background: var(--text-faint); border: 2px solid var(--surface);
}
.thumb.ok .thumb-mark { background: oklch(0.55 0.14 152); }
.thumb.bad .thumb-mark { background: oklch(0.55 0.17 27); }
.thumb.hold .thumb-mark { background: oklch(0.62 0.12 80); }

/* ---------- RTL TEXT BLOCK (Persian content islands) ----------
   <div class="fa-block" dir="rtl">
     <h3 class="fa-block-title">خلاصه گفتگو</h3>
     <p>… wrap Latin tickers/UIDs/amounts in <bdi> …</p>
   </div>
   .fa (font+line-height) is defined in tokens.css.               */
.fa-block {
  font-family: var(--font-fa); line-height: var(--lh-fa);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); text-align: start;
}
.fa-block-title { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fa-block p { margin: 0; }
.fa-block bdi { font-variant-numeric: tabular-nums; }