/* ==========================================================================
   Phoenix Boss — framework (boss.css)
   Rules: tokens only (no raw colors here), logical properties only,
   [dir="rtl"] only inside .icon-mirror, every component in both themes
   through the tokens, hit areas >= 44 px, text >= 14 px (labels 13, tab
   labels 12 — CONVENTIONS §8). Class names are the fixed vocabulary
   (docs/tasks/T-20260910-01, step 3). Propose a new class in chat first.
   ========================================================================== */

/* ---------- 0. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}
/* Arabic typography (D-X): Plex Arabic face first, no letter-spacing, taller lines, no kashida */
:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; line-height: var(--lh-ar); text-justify: none; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
/* icon defaults apply to icon classes only — never to chart SVGs (ApexCharts draws its own text and shapes) */
.icon, .icon-sm, .list-icon, .list-chev, .chev { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.is-fill, .icon-sm.is-fill { fill: currentColor; stroke: none; }
/* no browser tap highlight; a soft pressed wash that follows the element's corners instead */
a, button, [role="button"], .tile, .list-row, .alert-row, .tab, .chip, .switch { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus:not(:focus-visible) { outline: none; }
.tile:active, .list-row:active, .alert-row:active, .day-selector .pill-btn:active, .freshness:active, .audit-strip a:active { background-color: var(--pressed); }
.tab:active .tab-icon { background-color: var(--pressed); }
.btn:active, .chip:active, .segmented button:active, .btn-icon:active, .sheet-close:active, .th-sort:active, .day-selector .step:active { opacity: 0.8; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--acc-text); text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--t3); }

[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Numbers, codes, phones, emails: always LTR, isolated from the surrounding bidi run (D-Q) */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
/* Only directional icons mirror in RTL (list in CONVENTIONS §8) */
[dir="rtl"] .icon-mirror { transform: scaleX(-1); }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; flex: none; }

/* ---------- 1. layout ---------- */
.stack { display: grid; gap: var(--sp-3); }
.stack-sm { display: grid; gap: var(--sp-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 359px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
/* three money values side by side (cash box): content-sized columns, two rows on narrow phones */
.grid-3:has(> .kv) { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
@media (max-width: 379px) { .grid-3:has(> .kv) { grid-template-columns: 1fr 1fr; } }
.screen {
  display: grid; gap: var(--sp-3);
  padding-inline: calc(var(--sp-4) + var(--safe-s)) calc(var(--sp-4) + var(--safe-e));
  padding-block: var(--sp-4) var(--sp-6);
  max-width: var(--content-max); margin-inline: auto; width: 100%;
}
.section { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.section-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--t3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
:lang(ar) .section-title { letter-spacing: 0; text-transform: none; }
.section-title::before, .section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.spacer { flex: 1; }
.text-2 { color: var(--t2); }
.text-3 { color: var(--t3); }
.support { font-size: var(--fs-support); color: var(--t3); }
.label { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.title { font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

/* ---------- 2. shell ---------- */
.app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.app-main { min-width: 0; }
.app-header {
  position: sticky; top: var(--kit-top, 0px); z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding-block: calc(var(--sp-2) + var(--safe-t)) var(--sp-2);
  padding-inline: calc(var(--sp-4) + var(--safe-s)) calc(var(--sp-4) + var(--safe-e));
  background: var(--bg);
}
.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; max-width: var(--content-max); margin-inline: auto; min-height: var(--tap); min-width: 0; }
/* phones: the gold mark alone is the brand; the wordmark returns from 430 px (tablet, landscape) */
@media (max-width: 429px) { .app-header .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: 1.0625rem; white-space: nowrap; color: var(--t1); min-width: 0; }
.brand .brand-text { overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 24px; height: 24px; flex: none; border-radius: 8px 8px 8px 2px; background: linear-gradient(145deg, var(--acc), color-mix(in oklab, var(--acc), var(--bad) 45%)); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 7px 8px 5px; border-radius: 5px 5px 5px 1px; background: var(--card); opacity: 0.85; }
/* branch name as the switcher trigger: a 44 px button with a chevron */
.branch-switch { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding-inline: var(--sp-1); font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--t1); line-height: var(--lh-tight); max-width: 100%; }
.branch-switch .icon { color: var(--t3); }
.branch-switch .presence { margin-inline-end: var(--sp-1); }

.day-selector {
  display: inline-flex; align-items: center; gap: 0;
  min-height: var(--tap); padding-inline: 2px; max-width: 100%;
  border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--line);
  color: var(--t1); font-size: var(--fs-body); box-shadow: var(--shadow-card); white-space: nowrap;
}
.day-selector .pill-btn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding-inline: var(--sp-2) var(--sp-1); border-radius: var(--r-pill); }
.day-selector b { font-weight: var(--fw-semibold); }
.day-selector .sep { color: var(--t3); padding-inline: 2px; }
.day-selector .pill-btn .icon { width: 18px; height: 18px; color: var(--acc-text); }
.day-selector .step { display: grid; place-items: center; width: 32px; height: 36px; border-radius: 50%; color: var(--t2); }
.day-selector .step:disabled { color: var(--line); cursor: default; }
.day-selector .step .icon { width: 18px; height: 18px; }

.tabbar {
  position: sticky; bottom: 0; z-index: var(--z-tabbar);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card-2); border-block-start: 1px solid var(--line);
  padding-block: var(--sp-2) calc(var(--sp-2) + var(--safe-b));
  padding-inline: calc(var(--sp-1) + var(--safe-s)) calc(var(--sp-1) + var(--safe-e));
}
.tab { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: var(--tap); font-size: var(--fs-nav); font-weight: var(--fw-medium); color: var(--t3); text-decoration: none; }
.tab .tab-icon { position: relative; width: 52px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); transition: background-color var(--dur-fast) var(--ease); }
.tab .tab-icon .icon { width: 24px; height: 24px; }
.tab.is-active { color: var(--acc-text); }
.tab.is-active .tab-icon .icon { stroke-width: 2.2; }
.tab .badge { position: absolute; top: -3px; inset-inline-start: calc(50% + 5px); }

.sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-sheet) - 1); }
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sheet);
  max-height: 90dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--card-2); border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-raised); border-block-start: 1px solid var(--line);
  padding-inline: var(--safe-s) var(--safe-e);
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: var(--sp-2) auto 0; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-section); font-weight: var(--fw-semibold); }
.sheet-close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-inline-end: calc(var(--sp-2) * -1); border-radius: 50%; color: var(--t2); }
.sheet-body { overflow: auto; padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; overscroll-behavior: contain; }
.sheet-actions { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + var(--safe-b)); border-block-start: 1px solid var(--line); background: var(--card-2); }
.branch-switcher { display: grid; gap: var(--sp-2); }
.branch-switcher .list-row .money { font-weight: var(--fw-semibold); }

/* ---------- 3. data ---------- */
.kv { display: grid; gap: 2px; min-width: 0; }
.kv .v .money-cur, .kpi .v .money-cur { font-size: var(--fs-label); }
/* a money value wider than its box wraps the currency label onto its own line instead of overflowing (D-X: wrap, never clip) */
.kv .v.money, .kpi .v.money { flex-wrap: wrap; row-gap: 0; column-gap: 4px; white-space: normal; }
.kv .v.money .money-val, .kpi .v.money .money-val { white-space: nowrap; }
.kv .k { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.kv .v { font-size: var(--fs-kpi-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); white-space: nowrap; font-variant-numeric: tabular-nums; }

.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); display: grid; gap: var(--sp-1); box-shadow: var(--shadow-card); min-width: 0; }
.kpi .k { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.kpi .v { font-size: var(--fs-kpi); font-weight: var(--fw-semibold); line-height: var(--lh-tight); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: var(--fs-support); color: var(--t3); }
.kpi-sm .v { font-size: var(--fs-kpi-sm); }
.kpi .money .money-cur { font-size: var(--fs-label); }

.totals-bar {
  display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card);
}
.totals-bar .kv .v { font-size: var(--fs-totals); }
.totals-bar .meta { grid-column: 1 / -1; width: 0; min-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-support); color: var(--t2); } /* width 0 + min-width 100%: a spanning row must not widen the content-sized columns */
@media (max-width: 379px) { .totals-bar { grid-template-columns: 1fr 1fr; } .totals-bar .kv:first-child { grid-column: 1 / -1; } }
.totals-bar.is-sticky { position: sticky; top: calc(var(--kit-top, 0px) + var(--tap) + var(--sp-4) + var(--safe-t)); z-index: var(--z-sticky); }

/* audit strip: quiet counters with count and value; loud only when flagged (D-I) */
.audit-strip { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding-inline: var(--sp-1); font-size: var(--fs-support); color: var(--t2); font-variant-numeric: tabular-nums; }
.audit-strip a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-block: 6px; color: inherit; }
.audit-strip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: none; }
.audit-strip .money { font-size: inherit; }
.audit-strip .money .money-cur { font-size: var(--fs-label); }
.audit-strip .is-flagged { color: var(--warn-text); font-weight: var(--fw-semibold); }
.audit-strip .is-flagged .icon-sm { width: 15px; height: 15px; }

/* branch tile (D-J) */
.tile { position: relative; display: grid; gap: var(--sp-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); padding-inline-end: calc(var(--sp-4) + 18px); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
.tile .top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tile .nm { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-section); font-weight: var(--fw-semibold); min-width: 0; }
.tile .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .sub { font-size: var(--fs-support); color: var(--t2); margin-block-start: -4px; }
.tile .row { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-1); }
@media (max-width: 359px) { .tile .row { grid-template-columns: 1fr 1fr; } .tile .row .kv:first-child { grid-column: 1 / -1; } }
.tile .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-support); color: var(--t3); }
.tile .chev { position: absolute; inset-inline-end: 12px; top: 16px; width: 18px; height: 18px; color: var(--t3); }
.tile.is-compact { grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); padding-inline-end: var(--sp-4); min-height: 56px; }
.tile.is-compact .sub { grid-column: 2 / -1; }
.tile.is-compact .nm { font-size: var(--fs-body); }
.tile.is-compact .sub { margin: 0; }
.tile.is-compact .money { font-weight: var(--fw-semibold); }
.tile.is-compact .chev { position: static; }

.presence { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--idle); }
.presence.is-on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.presence.is-off { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.presence.is-idle { background: var(--idle); }

.trend { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.trend.is-up { color: var(--ok-text); }
.trend.is-down { color: var(--bad-text); }
.trend.is-flat { color: var(--t2); }
.trend .trend-ctx { font-weight: var(--fw-regular); color: var(--t3); }

/* bidi-safe money (D-Q) */
.money { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.money .money-cur { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.money .money-val { direction: ltr; unicode-bidi: isolate; letter-spacing: -0.01em; }
:lang(ar) .money .money-cur { order: 2; }
.money.is-neg .money-val { color: var(--bad-text); }
.money.is-pos .money-val { color: var(--ok-text); }

.card { display: grid; gap: var(--sp-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); box-shadow: var(--shadow-card); min-width: 0; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-section); font-weight: var(--fw-semibold); }
.card-title .sub { font-size: var(--fs-support); color: var(--t3); font-weight: var(--fw-regular); }
.card.is-callout { border-color: var(--acc); background: var(--acc-soft); }
/* a card whose list runs edge to edge: title keeps the padding, the list keeps the bottom corners */
.card.is-flush { padding: 0; gap: 0; }
.card.is-flush > .card-title { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.card.is-flush > .list { border: 0; box-shadow: none; border-radius: 0 0 var(--r-card) var(--r-card); }
.card.is-callout .steps { display: grid; gap: var(--sp-2); }
.card.is-callout .steps > div { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
.card.is-callout .n { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--acc-on); display: grid; place-items: center; font-size: var(--fs-label); font-weight: var(--fw-semibold); flex: none; }
.card.is-callout .n.is-done { background: var(--ok); color: var(--card); }

/* freshness chip (D-W) */
.freshness { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-inline: 10px; margin-block: 6px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--t2); font-size: var(--fs-support); font-weight: var(--fw-medium); white-space: nowrap; }
.freshness .icon-sm { width: 14px; height: 14px; }
.freshness .presence { width: 8px; height: 8px; box-shadow: none; }
.freshness.is-fresh .presence { background: var(--ok); }
.freshness.is-aging { color: var(--warn-text); border-color: var(--warn); }
.freshness.is-aging .presence { background: var(--warn); }
.freshness.is-stale .presence { background: var(--idle); }

/* tables: sticky header, sticky first column, numeric cells, pinned totals */
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); max-height: 70dvh; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; margin: var(--r-card); }
.chip-row { scrollbar-width: none; }
.table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-body); }
.table th, .table td { text-align: start; padding: var(--sp-3) var(--sp-3); border-block-end: 1px solid var(--line); white-space: nowrap; vertical-align: middle; height: var(--tap); }
.table th { position: sticky; top: 0; z-index: 2; background: var(--card-2); font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.table td.is-num { direction: ltr; unicode-bidi: isolate; }
.table .th-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--t1); font-weight: var(--fw-medium); }
.table .th-sort .icon-sm { width: 12px; height: 12px; color: var(--t3); }
.table .th-sort.is-asc .icon-sm, .table .th-sort.is-desc .icon-sm { color: var(--acc-text); }
.table .th-sort.is-desc .icon-sm { transform: rotate(180deg); }
.table .is-sticky-col { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--card); border-inline-end: 1px solid var(--line); }
.table th.is-sticky-col { z-index: 3; background: var(--card-2); }
.table .table-totals td { position: sticky; bottom: 0; z-index: 2; background: var(--card-2); font-weight: var(--fw-semibold); border-block-start: 1px solid var(--line); border-block-end: 0; }
.table .table-totals td.is-sticky-col { z-index: 3; }
.table-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2); font-size: var(--fs-support); color: var(--t3); }

/* lists */
.list { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--sp-4); border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
.list-row:last-child { border-block-end: 0; }
.list-row .list-icon { width: 22px; height: 22px; color: var(--t2); flex: none; }
.list-row .list-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.list-row .list-sub { font-size: var(--fs-support); color: var(--t3); }
.list-row .list-meta { font-size: var(--fs-support); color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-row .list-meta.is-warn { color: var(--warn-text); font-weight: var(--fw-medium); }
.list-row .list-chev { width: 18px; height: 18px; color: var(--t3); flex: none; }
.list-row.is-danger { color: var(--bad-text); font-weight: var(--fw-medium); }
.list-row .rank { width: 22px; font-size: var(--fs-support); color: var(--t3); font-variant-numeric: tabular-nums; flex: none; }
.day-group { position: sticky; top: calc(var(--kit-top, 0px) + var(--tap) + var(--sp-4) + var(--safe-t)); z-index: var(--z-sticky); display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-2); background: var(--bg); font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }

/* alert rows (UX review E10) */
.alert-row { display: grid; grid-template-columns: 8px 24px minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); min-height: var(--tap); border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
.alert-row:last-child { border-block-end: 0; }
.alert-row .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--acc-text); margin-block-start: 6px; visibility: hidden; }
.alert-row.is-unread .unread { visibility: visible; }
.alert-row .sev { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; }
.alert-row .sev .icon-sm { width: 15px; height: 15px; }
.alert-row.is-high .sev { background: var(--bad-soft); color: var(--bad-text); }
.alert-row.is-medium .sev { background: var(--warn-soft); color: var(--warn-text); }
.alert-row.is-info .sev { background: var(--fill); color: var(--t2); }
.alert-row .body { display: grid; gap: 2px; min-width: 0; }
.alert-row .ttl { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--t1); }
.alert-row.is-unread .ttl { font-weight: var(--fw-semibold); }
.alert-row .txt { font-size: var(--fs-support); color: var(--t2); }
.alert-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-support); color: var(--t3); }
.alert-row .time { font-size: var(--fs-support); color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* chart container: the drawing comes from ApexCharts with the shared options */
.chart { position: relative; min-height: 180px; }
.chart.is-donut { min-height: 200px; }
.chart-legend { display: grid; gap: 6px; font-size: var(--fs-support); }
.chart-legend > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.chart-legend .l { display: flex; align-items: center; gap: var(--sp-2); color: var(--t2); }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-legend .n { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.sw-1 { background: var(--c1); } .sw-2 { background: var(--c2); } .sw-3 { background: var(--c3); }
.sw-4 { background: var(--c4); } .sw-5 { background: var(--c5); } .sw-6 { background: var(--c6); }

/* ---------- 4. state ---------- */
.banner { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-ctl); font-size: var(--fs-support); font-weight: var(--fw-medium); }
.banner .presence { width: 8px; height: 8px; box-shadow: none; }
.banner .icon-sm { flex: none; }
.banner .link { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; min-height: 32px; display: inline-flex; align-items: center; }
.banner.is-live { background: var(--ok-soft); color: var(--ok-text); }
.banner.is-live .presence { background: var(--ok); }
.banner.is-stale { background: var(--warn-soft); color: var(--warn-text); }
.banner.is-stale .presence { background: var(--warn); }
.banner.is-offline { background: var(--bad-soft); color: var(--bad-text); }
.banner.is-offline .presence { background: var(--bad); }
.banner.is-update { background: var(--acc-soft); color: var(--acc-text); }
.banner.is-busy { background: var(--fill); color: var(--t2); }

.skeleton { position: relative; overflow: hidden; background: var(--skeleton); border-radius: var(--r-ctl); min-height: 16px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-hi), transparent); opacity: 0.85; animation: boss-shimmer 1.4s infinite; }
@keyframes boss-shimmer { from { transform: translate(-100%, 0); } to { transform: translate(100%, 0); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
.skeleton.is-tile { min-height: 132px; border-radius: var(--r-card); }
.skeleton.is-kpi { min-height: 84px; border-radius: var(--r-card); }
.skeleton.is-chart { min-height: 180px; border-radius: var(--r-card); }
.skeleton.is-row { min-height: 48px; border-radius: 0; }
.skeleton.is-text { min-height: 14px; max-width: 60%; }
.loading-note { font-size: var(--fs-support); color: var(--t3); text-align: center; }

.empty-state { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.empty-state .icon { width: 32px; height: 32px; color: var(--t3); }
.empty-state .ttl { font-size: var(--fs-section); font-weight: var(--fw-semibold); }
.empty-state .txt { font-size: var(--fs-body); color: var(--t2); max-width: 32ch; }
.empty-state .btn { margin-block-start: var(--sp-2); }
.empty-state.is-error .icon { color: var(--bad-text); }
.empty-state.is-denied .icon, .empty-state.is-expired .icon { color: var(--t2); }
.empty-state.is-needs-live .icon { color: var(--warn-text); }
.empty-state.is-full { min-height: 60dvh; align-content: center; border: 0; background: transparent; }

.toast { position: fixed; inset-inline: var(--sp-4); bottom: calc(var(--tap) + var(--sp-6) + var(--safe-b)); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-ctl); background: var(--toast-bg); color: var(--toast-text); font-size: var(--fs-body); font-weight: var(--fw-medium); box-shadow: var(--shadow-raised); max-width: calc(var(--content-max) - var(--sp-8)); margin-inline: auto; }
body:has(.toast:not([hidden])) .screen { padding-block-end: calc(var(--sp-8) + var(--tap) + var(--sp-4)); }
.toast .link { color: var(--toast-link); font-weight: var(--fw-semibold); margin-inline-start: auto; min-height: 32px; display: inline-flex; align-items: center; }

.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding-inline: 8px; border-radius: var(--r-pill); background: var(--fill); color: var(--t2); font-size: var(--fs-label); font-weight: var(--fw-medium); white-space: nowrap; }
.pill.is-ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.pill.is-bad { background: var(--bad-soft); color: var(--bad-text); }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--bad); color: var(--bad-on); font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.badge.has-icon { height: 20px; min-width: 20px; padding-inline: 6px; font-size: var(--fs-nav); }
.badge.has-icon .icon-sm { width: 12px; height: 12px; }

/* ---------- 5. controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding-inline: var(--sp-5); border-radius: var(--r-ctl); border: 1px solid transparent; font-size: 0.9375rem; font-weight: var(--fw-semibold); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn-primary { background: var(--acc); color: var(--acc-on); }
.btn-secondary { background: transparent; color: var(--acc-text); border-color: var(--line); }
.btn-ghost { background: transparent; color: var(--acc-text); }
.btn-danger { background: var(--bad); color: var(--bad-on); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn .icon { width: 18px; height: 18px; }
.btn-icon { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--t2); }

.segmented { display: inline-flex; background: var(--fill); border-radius: var(--r-ctl); padding: 3px; gap: 2px; max-width: 100%; }
.segmented button { flex: 1; min-height: 38px; padding-inline: var(--sp-3); border-radius: 9px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--t2); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.segmented button[aria-pressed="true"] { background: var(--fill-on); color: var(--t1); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); font-weight: var(--fw-semibold); }
.segmented.is-block { display: flex; }

.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding-inline: var(--sp-3); border-radius: var(--r-pill); background: var(--fill); color: var(--t2); font-size: var(--fs-label); font-weight: var(--fw-medium); white-space: nowrap; border: 1px solid transparent; }
.chip.is-active { background: var(--acc-soft); color: var(--acc-text); border-color: var(--acc); }
.chip.is-late { background: var(--warn-soft); color: var(--warn-text); }
.chip.is-attention { background: var(--bad-soft); color: var(--bad-text); }
.chip .icon-sm { width: 14px; height: 14px; }
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: 2px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { flex: none; }

.switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: var(--r-pill); background: var(--idle); transition: background-color var(--dur-fast) var(--ease); }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--switch-knob); transition: inset-inline-start var(--dur-fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { inset-inline-start: 22px; background: var(--switch-knob-on); }
.switch:disabled { opacity: 0.5; }

.field { display: grid; gap: var(--sp-1); }
.field .field-label { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--t2); }
.input, .select { min-height: var(--tap); padding-inline: var(--sp-3); border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--card); color: var(--t1); font-size: var(--fs-body); width: 100%; }
.input:focus, .select:focus { border-color: var(--acc-text); outline: 2px solid var(--focus); outline-offset: 0; }
.input.is-ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }
.field .hint { font-size: var(--fs-support); color: var(--t3); }
.field.is-error .input { border-color: var(--bad); }
.field.is-error .hint { color: var(--bad-text); display: inline-flex; align-items: center; gap: 4px; }
.search { position: relative; }
.search .icon-sm { position: absolute; inset-inline-start: var(--sp-3); top: 50%; transform: translate(0, -50%); color: var(--t3); }
.search .input { padding-inline-start: calc(var(--sp-3) + 24px); }

.period-picker { display: grid; gap: var(--sp-2); }
.period-picker .range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }


/* hit areas: small visible controls get an invisible 44 px tap area (D-Y) */
.chip, .freshness, .audit-strip a, .switch, .th-sort, .day-selector .step, .banner .link, .toast .link { position: relative; }
.chip::before, .freshness::before, .audit-strip a::before, .banner .link::before, .toast .link::before { content: ""; position: absolute; inset-block: -6px; inset-inline: 0; }
.th-sort::before { content: ""; position: absolute; inset-block: -8px; inset-inline: 0; }
.segmented button { position: relative; }
.segmented button::before { content: ""; position: absolute; inset-block: -3px; inset-inline: 0; }
.switch::before { content: ""; position: absolute; inset-block: -8px; inset-inline: -4px; }
.day-selector .step::before { content: ""; position: absolute; inset-block: -4px; inset-inline: -2px; }

/* ---------- 6. helpers used by the kit pages only ---------- */
.frame-note { font-size: var(--fs-support); color: var(--t3); }