/* Aswar design system: base + components. Tokens only (web/ds/tokens.css): no hex or rgba literals in here. */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text-1); font: var(--fw-r) var(--fs-3)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 var(--s-2); font-weight: var(--fw-sb); line-height: var(--lh-tight); letter-spacing: -.01em; }
[dir="rtl"] :is(h1, h2, h3, h4) { letter-spacing: 0; }
h1 { font-size: var(--fs-6); } h2 { font-size: var(--fs-4); } h3 { font-size: var(--fs-3); } h4 { font-size: var(--fs-2); }
p { margin: 0 0 var(--s-3); }
code, pre, kbd, .mono { font-family: var(--mono); font-size: .92em; }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-in); padding: var(--s-3); overflow: auto;
  white-space: pre-wrap; word-break: break-all; max-height: 420px; direction: ltr; text-align: left; }
kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 11px; line-height: 18px; color: var(--text-3); }
::selection { background: var(--brand-line); }
* { scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* utilities */
.ltr, bdi.n { direction: ltr; unicode-bidi: isolate; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); } .secondary { color: var(--text-2); }
.small { font-size: var(--fs-1); } .nowrap { white-space: nowrap; } .break { word-break: break-all; }
.hidden, [hidden] { display: none !important; }
.row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.nowrap { flex-wrap: nowrap; }
.stack > * + * { margin-top: var(--s-4); }
.stack.tight > * + * { margin-top: var(--s-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.trunc { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.w-full { width: 100%; }
.fwd { display: inline-block; } [dir="rtl"] .fwd { transform: scaleX(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ layout */
.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); align-items: start; }
.grid.stretch { align-items: stretch; }
.grid.two-col { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.grid > .card + .card { margin-top: 0; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--fs-6); margin: 0; letter-spacing: -.02em; }
[dir="rtl"] .page-head h1 { letter-spacing: 0; }
.page-head p, .page-head .sub { color: var(--text-2); margin: 4px 0 0; font-size: var(--fs-3); }
.page-head .actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.section-title { font-size: var(--fs-2); color: var(--text-3); margin: var(--s-2) 0 var(--s-3); font-weight: var(--fw-m); }

/* ------------------------------------------------------------------ card */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4) var(--s-5);
  min-width: 0; box-shadow: var(--e1); }
.card + .card { margin-top: var(--s-4); }
.card.flush { padding: 0; overflow: hidden; }
.card.raised { background: var(--s2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); min-height: 28px; }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-sb); }
.card-head .hint, .card-head .sub { color: var(--text-3); font-size: var(--fs-1); font-weight: var(--fw-r); }
.card-head .title { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; flex-wrap: wrap; }
.card.flush > .card-head { padding: var(--s-4) var(--s-5); margin: 0; border-bottom: 1px solid var(--line); }
.card-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s-2); align-items: center; }
.card.flush > .card-foot { margin: 0; padding: var(--s-3) var(--s-5); }

/* ------------------------------------------------------------------ stat / KPI */
.tile { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4) var(--s-5); box-shadow: var(--e1);
  transition: border-color var(--t-1); min-width: 0; }
.tile .label { color: var(--text-2); font-size: var(--fs-2); font-weight: var(--fw-r); }
.tile .value { font-size: var(--fs-6); font-weight: var(--fw-sb); margin-top: var(--s-1); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile .sub { color: var(--text-3); font-size: var(--fs-1); margin-top: var(--s-1); }
.tile.link { cursor: pointer; } .tile.link:hover { border-color: var(--line-2); }
.tile.link.on { border-color: var(--brand-line); box-shadow: inset 0 0 0 1px var(--brand-line); }
.tile .of { font-size: var(--fs-2); color: var(--text-3); font-weight: var(--fw-r); }
.tile.warn-tile .value, .tile-warn .value { color: var(--crit); }

/* KPI strip: one surface split into cells (mockup A) */
.kpi-strip { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); background: var(--s1); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; }
.kpi { padding: var(--s-4) var(--s-5); min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.kpi + .kpi { border-inline-start: 1px solid var(--line); }
a.kpi:hover { background: var(--s2); text-decoration: none; }
.kpi .label { color: var(--text-2); font-size: var(--fs-2); }
.kpi .value { font-size: var(--fs-6); font-weight: var(--fw-sb); letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.kpi .delta-line { font-size: var(--fs-1); color: var(--text-3); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.kpi .spark { margin-top: var(--s-2); height: 22px; width: 100%; max-width: 160px; }
.up-bad, .down-bad { font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.up-bad { color: var(--crit); } .down-bad { color: var(--ok); }
.up-good { color: var(--ok); font-weight: var(--fw-m); } .down-good { color: var(--crit); font-weight: var(--fw-m); }
.flat { color: var(--text-3); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--s1); color: var(--text-1);
  font: var(--fw-m) var(--fs-2)/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--t-1), border-color var(--t-1), color var(--t-1); }
.btn:hover { background: var(--s3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary, .btn.stone { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover, .btn.stone:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, transparent); background: transparent; }
.btn.danger:hover { background: var(--crit-wash); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--s2); color: var(--text-1); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-1); }
.btn.lg { height: 44px; padding: 0 20px; font-size: var(--fs-3); border-radius: var(--r-in); }
.btn.icon { width: 34px; padding: 0; } .btn.icon.sm { width: 28px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .kbd-hint { font: 500 11px var(--mono); color: inherit; opacity: .6; margin-inline-start: 2px; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 2px; background: var(--s1); gap: 2px; }
.seg button { background: transparent; border: 0; color: var(--text-2); padding: 0 10px; height: 26px; cursor: pointer; border-radius: 4px;
  font: var(--fw-m) var(--fs-1) var(--font); }
.seg button:hover { color: var(--text-1); }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--s3); color: var(--text-1); }
.seg button .muted { font-size: 11px; margin-inline-start: 4px; }

/* ------------------------------------------------------------------ form controls */
input, select, textarea { height: 34px; padding: 0 10px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--input);
  color: var(--text-1); font: var(--fs-2) var(--font); min-width: 0; transition: border-color var(--t-1), box-shadow var(--t-1); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { height: auto; padding: 8px 10px; line-height: var(--lh); }
input[type="checkbox"], input[type="radio"] { height: auto; accent-color: var(--brand); }
input[type="file"] { padding: 5px; height: auto; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--brand-wash); }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-1); color: var(--text-2); font-weight: var(--fw-m); }
label.field > input, label.field > select, label.field > textarea { font-weight: var(--fw-r); }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-2); cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; margin-bottom: var(--s-4); }
.filters input[type="search"], .filters input[type="text"] { min-width: 220px; }
.filters .field.grow { flex: 1 1 220px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); align-items: end; }
.form-grid .full { grid-column: 1 / -1; }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; height: auto; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--s3); border: 1px solid var(--line-2); transition: background var(--t-2) var(--ease); }
.switch span::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-2) var(--ease), background var(--t-2); }
.switch input:checked + span { background: var(--brand); border-color: var(--brand); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--brand-ink); }
[dir="rtl"] .switch input:checked + span::after { transform: translateX(-16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-line); }

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s1); box-shadow: var(--e1); }
.card .table-wrap, .card.flush .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px var(--s-4); text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: var(--fs-1); font-weight: var(--fw-m); color: var(--text-3); background: var(--s1); position: sticky; top: 0; white-space: nowrap; }
td { font-size: var(--fs-2); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable td { transition: background var(--t-1); }
tbody tr.clickable:hover td, tbody tr.clickable:focus-visible td { background: var(--s2); }
tbody tr.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
td .title-cell { max-width: 520px; }
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text-1); }
th.sel, td.sel { width: 32px; }
table.dense th, table.dense td { padding: 8px var(--s-3); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) 2px 0; color: var(--text-3); font-size: var(--fs-1); }
.pager .row { gap: 6px; }

/* ------------------------------------------------------------------ chips, badges, severity */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-1); font-weight: var(--fw-m); border: 1px solid var(--line-2); color: var(--text-1); background: transparent; white-space: nowrap; line-height: 1; }
.chip .dot { width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex: none; }
.chip.sev-critical { color: var(--crit); border-color: transparent; background: var(--crit-wash); }
.chip.sev-high { color: var(--high); border-color: transparent; background: var(--high-wash); }
.chip.sev-medium { color: var(--med); border-color: transparent; background: var(--med-wash); }
.chip.sev-low { color: var(--low); border-color: transparent; background: var(--low-wash); }
.chip.sev-info { color: var(--text-2); }
.chip.ok { color: var(--ok); border-color: transparent; background: var(--ok-wash); }
.chip.err { color: var(--crit); border-color: transparent; background: var(--crit-wash); }
.chip.warn { color: var(--med); border-color: transparent; background: var(--med-wash); }
.chip.off { color: var(--text-2); }
.chip.off .dot { background: var(--text-3); }
.chip.ps { color: var(--text-1); } .chip.ps .dot { background: var(--data-3); }
.chip.kind { font-weight: var(--fw-r); color: var(--text-2); } .chip.kind .dot { background: var(--kind-color, var(--text-3)); }
.chip.plan { color: var(--text-2); border-color: var(--line-2); }
.chip.brand { color: var(--brand); border-color: var(--brand-line); background: var(--brand-wash); }
/* severity as a plain label (tables, queues): coloured square + coloured word */
.sev { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2); font-weight: var(--fw-m); white-space: nowrap; }
.sev::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }
.sev.critical { color: var(--crit); } .sev.high { color: var(--high); } .sev.medium { color: var(--med); } .sev.low { color: var(--low); } .sev.info { color: var(--text-3); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin: 1px; border-radius: 4px; background: var(--s3); color: var(--text-2); font-size: 11.5px; }
.badge-count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-pill); background: var(--crit-wash); color: var(--crit);
  font: 600 11px/1 var(--mono); display: inline-flex; align-items: center; justify-content: center; }
.badge-count.neutral { background: var(--s3); color: var(--text-2); }
.code-badge { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px;
  font: 500 11px/1 var(--mono); color: var(--text-2); letter-spacing: .04em; }
/* rating grade: letter in a tinted square */
.grade-badge, .grade-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-ctl); font: 700 13px/1 var(--mono);
  color: var(--g, var(--text-2)); background: color-mix(in srgb, var(--g, var(--text-3)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--g, var(--text-3)) 40%, transparent); }
.grade-badge.sm, .grade-mini { width: 22px; height: 22px; font-size: 11.5px; border-radius: 5px; }
.grade-letter { font-weight: 700; } .grade-letter.g-A { color: var(--grade-a); } .grade-letter.g-B { color: var(--grade-b); }
.grade-letter.g-C { color: var(--grade-c); } .grade-letter.g-D { color: var(--grade-d); } .grade-letter.g-F { color: var(--grade-f); }
/* confidence grade A-D: one neutral ramp, never status colours */
.chip.grade { min-width: 22px; justify-content: center; padding: 0 6px; font: 600 11px/1 var(--mono); cursor: help; }
.chip.grade-a { background: var(--text-1); color: var(--s1); border-color: var(--text-1); }
.chip.grade-b { background: color-mix(in srgb, var(--text-1) 22%, transparent); }
.chip.grade-c { background: transparent; }
.chip.grade-d { background: transparent; border-style: dashed; color: var(--text-2); }

/* ------------------------------------------------------------------ states */
.empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-3); font-size: var(--fs-2); }
.empty svg { width: 28px; height: 28px; opacity: .6; margin-bottom: var(--s-2); }
.empty .btn { margin-top: var(--s-3); }
.loading { padding: var(--s-5); color: var(--text-3); display: grid; gap: 10px; }
.loading .sk { height: 12px; border-radius: 4px; background: var(--skeleton); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.loading .sk:nth-child(2) { width: 82%; } .loading .sk:nth-child(3) { width: 64%; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.refetching { opacity: .6; transition: opacity var(--t-1); pointer-events: none; }
.error-box { border: 1px solid color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-wash); border-radius: var(--r-card); padding: var(--s-3) var(--s-4); color: var(--text-1); }
.error-box strong { color: var(--crit); }
.upgrade-box { border: 1px solid var(--brand-line); background: var(--brand-wash); border-radius: var(--r-card); padding: var(--s-4) var(--s-5); }
.notice { border: 1px solid var(--line-2); background: var(--s2); border-radius: var(--r-in); padding: var(--s-3) var(--s-4); color: var(--text-2); font-size: var(--fs-2); }
.notice.warn { border-color: color-mix(in srgb, var(--med) 45%, transparent); background: var(--med-wash); color: var(--text-1); margin-bottom: var(--s-3); }
.notice.brand { border-color: var(--brand-line); background: var(--brand-wash); color: var(--text-1); }
.warn-text { color: var(--med); } .danger-text { color: var(--crit); } .ok-text { color: var(--ok); }
.pos, .ok-t { color: var(--ok); } .neg, .bad-t { color: var(--crit); } .ok-t, .bad-t { font-weight: 600; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.status-dot.ok { background: var(--ok); } .status-dot.warn { background: var(--med); } .status-dot.fail { background: var(--crit); }

/* ------------------------------------------------------------------ overlay: drawer, modal, sheet, popover, toast */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 50; animation: fadein var(--t-2) var(--ease); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(640px, 100vw); background: var(--s1);
  border-inline-start: 1px solid var(--line-2); z-index: 51; display: flex; flex-direction: column; box-shadow: var(--e2); animation: slidein var(--t-3) var(--ease); }
.drawer-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.drawer-head h2 { flex: 1; margin: 0; font-size: var(--fs-4); line-height: 1.4; }
.drawer-body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1; }
.drawer-actions { position: sticky; top: calc(-1 * var(--s-4)); z-index: 2; margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-4); padding: var(--s-3) var(--s-5);
  background: var(--s1); border-bottom: 1px solid var(--line); }
.drawer-actions input.full { width: 100%; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px));
  background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r-card); z-index: 51; padding: var(--s-5);
  max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--e2); animation: fadein var(--t-2) var(--ease); }
.modal h3 { font-size: var(--fs-4); }
.kv { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 8px var(--s-4); font-size: var(--fs-2); margin: 0; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; word-break: break-word; }
.toasts { position: fixed; bottom: var(--s-4); inset-inline-end: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); z-index: 80; max-width: 380px; }
.toast { background: var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-in); padding: 10px 14px; font-size: var(--fs-2); box-shadow: var(--e2);
  display: flex; gap: var(--s-2); align-items: flex-start; animation: tin var(--t-2) var(--ease); }
.toast .dot { width: 8px; height: 8px; border-radius: 2px; margin-top: 6px; flex: none; background: var(--brand); }
.toast.ok .dot { background: var(--ok); } .toast.err .dot { background: var(--crit); } .toast.warn .dot { background: var(--med); }
.popover { position: fixed; z-index: 60; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); background: var(--s2); border: 1px solid var(--line-2);
  border-radius: var(--r-in); box-shadow: var(--e2); padding: 6px; animation: fadein var(--t-1) var(--ease); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-ctl); background: none;
  color: var(--text-1); font: var(--fs-2) var(--font); text-align: start; cursor: pointer; text-decoration: none; }
.menu-item:hover, .menu-item[aria-selected="true"], .menu-item:focus-visible { background: var(--s3); text-decoration: none; outline: none; }
.menu-item svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.menu-item .hint { margin-inline-start: auto; color: var(--text-3); font-size: var(--fs-1); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-label { padding: 6px 10px 4px; font-size: var(--fs-1); color: var(--text-3); }
@keyframes fadein { from { opacity: 0; } }
@keyframes tin { from { transform: translateY(6px); opacity: 0; } }
@keyframes slidein { from { transform: translateX(16px); opacity: 0; } }
[dir="rtl"] .drawer { animation-name: slidein-rtl; } @keyframes slidein-rtl { from { transform: translateX(-16px); opacity: 0; } }
.secret-box { display: flex; gap: var(--s-2); align-items: center; background: var(--bg); border: 1px dashed var(--med); border-radius: var(--r-in); padding: 10px; }
.secret-box code { flex: 1; word-break: break-all; }

/* ------------------------------------------------------------------ charts (svg, hand-rolled in web/charts.js) */
.chart { position: relative; min-height: 120px; }
.chart svg { display: block; width: 100%; overflow: visible; direction: ltr; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick { fill: var(--text-3); font-size: 11px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart .tick.lbl { font-family: var(--font); }
.chart .annot-line { stroke: var(--text-3); stroke-dasharray: 3 3; stroke-width: 1; }
.chart .annot { fill: var(--text-2); font-size: 11px; font-family: var(--font); }
.chart .col-hit { fill: transparent; cursor: default; }
.chart .col-hit:hover, .chart .col-hit.hover { fill: color-mix(in srgb, var(--text-1) 5%, transparent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-1); color: var(--text-2); }
.card-head .legend { margin: 0; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tools { display: flex; gap: 6px; }
.hbars { display: flex; flex-direction: column; gap: var(--s-2); }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 10px; align-items: center; font-size: var(--fs-1); }
.hbar .lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.hbar .bar { height: 12px; background: var(--bar-color, var(--data-1)); border-start-end-radius: 3px; border-end-end-radius: 3px; min-width: 2px; }
.hbar:hover .bar { filter: brightness(1.15); }
.hbar .val { color: var(--text-1); font-variant-numeric: tabular-nums; font-weight: var(--fw-m); white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.segbar, .mixbar { display: flex; gap: 2px; height: 6px; border-radius: 2px; overflow: hidden; background: var(--s3); }
.segbar > span, .mixbar > span { display: block; height: 100%; }
.meter { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.tooltip { position: fixed; z-index: 70; pointer-events: none; background: var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-in);
  padding: 8px 10px; font-size: var(--fs-1); box-shadow: var(--e2); min-width: 140px; max-width: 280px; }
.tooltip .tt-head { color: var(--text-3); margin-bottom: 4px; }
.tooltip .tt-row { display: flex; align-items: center; gap: var(--s-2); }
.tooltip .tt-key { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip .tt-val { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; min-width: 28px; font-family: var(--mono); }
.tooltip .tt-name { color: var(--text-2); }
.big-stat { display: grid; place-items: center; gap: 4px; min-height: 160px; text-align: center; }
.big-stat b { font: 600 var(--fs-7)/1 var(--font); font-variant-numeric: tabular-nums; }
.big-stat span { color: var(--text-3); font-size: var(--fs-2); }

/* list rows (queues, feeds): title + one meta line */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); color: inherit; min-width: 0; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover, .list-row.clickable:hover { background: var(--s2); text-decoration: none; cursor: pointer; }
.list-row .eyebrow-line { font-size: var(--fs-1); color: var(--text-3); }
.list-row .eyebrow-line:empty { display: none; }
.list-row .title-line { font-weight: var(--fw-m); color: var(--text-1); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-row .meta-line { font-size: var(--fs-1); color: var(--text-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.main-side, .grid.two-col { grid-template-columns: minmax(0, 1fr); }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-strip .kpi:nth-child(3n + 1) { border-inline-start: 0; } .kpi-strip .kpi:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .filters input[type="search"], .filters input[type="text"] { min-width: 0; width: 100%; }
  .card { padding: var(--s-4); } .card.flush > .card-head, .list-row { padding-inline: var(--s-4); }
  th, td { padding-inline: var(--s-3); }
  .page-head { margin-bottom: var(--s-4); } .page-head h1 { font-size: var(--fs-5); }
}
@media (max-width: 560px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip .kpi { border-inline-start: 0 !important; border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); }
  .kpi-strip .kpi:nth-child(-n + 2) { border-top: 0; } .kpi-strip .kpi:nth-child(2n) { border-inline-start: 1px solid var(--line) !important; }
  .kpi .value { font-size: var(--fs-5); }
  .tile .value { font-size: var(--fs-5); } .tile { padding: var(--s-3) var(--s-4); }
  .modal { padding: var(--s-4); }
  .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .chip .dot, .hbar .bar, .segbar > span, .mixbar > span, .sev::before, .grade-badge, .status-dot { forced-color-adjust: none; } }
@media print { body { background: #fff; color: #000; } }

/* collector health cells (operator overview) */
.health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-4) var(--s-5); }
.health-cell { display: flex; align-items: center; gap: var(--s-2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-in);
  color: var(--text-1); font-size: var(--fs-2); font-weight: var(--fw-m); min-width: 0; }
.health-cell:hover { background: var(--s2); text-decoration: none; }
.health-cell .ellipsis { flex: 1; }
@media (max-width: 560px) { .health-grid { grid-template-columns: minmax(0, 1fr); padding: var(--s-3) var(--s-4); } }
table.ctry { table-layout: fixed; } table.ctry th:first-child { width: 44%; } table.ctry th.num { width: 18%; } table.ctry th:last-child { width: 15%; }
table.ctry .cname { max-width: 100%; } table.ctry td.mix { padding-inline: var(--s-2); }
table.pq { table-layout: fixed; } table.pq .sevc { width: 120px; } table.pq .orgc { width: 32%; } table.pq .agec { width: 64px; }
table.pq .ellipsis { display: block; }
@media (max-width: 860px) { table.pq .sevc { width: 96px; } }
.btn.ghost.danger { color: var(--crit); }
.tag { white-space: nowrap; }