/* Design tokens are the only source of values — see ui/styles/tokens.css.
     No hardcoded hex, font-family, or px radii here. */
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh);
  }
  .bar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .bar h1 { font-size: var(--fs-lg); margin: 0; font-weight: 600; }
  .bar h1 .accent { color: var(--accent); }
  .bar .tenant { color: var(--text-2); font-size: var(--fs-xs); }
  .bar .spacer { flex: 1; }
  .bar .meta { color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .nav {
    display: flex; gap: var(--sp-1); padding: 0 var(--sp-5); background: var(--surface);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 4;
  }
  .nav a {
    padding: var(--sp-3) var(--sp-3); color: var(--text-2); text-decoration: none;
    font-size: var(--fs-sm); border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .nav a:hover { color: var(--text); }
  .nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
  .view[hidden] { display: none; }
  button {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-1) var(--sp-3); cursor: pointer;
  }
  button:hover { border-color: var(--accent); }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  button.icon { padding: var(--sp-1); }
  button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
  button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  label.toggle { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-xs); }
  .i { display: inline-flex; align-items: center; }
  .i svg { display: block; }
  main { padding: var(--sp-5); max-width: var(--maxw); margin: 0 auto; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); }
  .card .n { font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
  .card .k { color: var(--text-2); font-size: var(--fs-xs); margin-top: var(--sp-1); }
  .card.alarm .n { color: var(--bad); }
  .card.watch .n { color: var(--warn); }
  .tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
  .thead-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
  .thead-bar .title { font-weight: 600; font-size: var(--fs-sm); }
  .thead-bar .spacer { flex: 1; }
  .scroll { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  thead th {
    text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-2); font-weight: 500;
    font-size: var(--fs-xs); border-bottom: 1px solid var(--border); white-space: nowrap;
    position: sticky; top: 0; background: var(--surface);
  }
  thead th.num { text-align: right; }
  tbody td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
  tbody tr:last-child td { border-bottom: 0; }
  /* box-shadow on <tr> is not painted under border-collapse — put the marker on
     the first cell. Colour by the row's worst severity. */
  tbody tr.flag-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
  tbody tr.flag-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
  /* Retired rows are archived context, not active fleet — muted, no severity bar. */
  tbody tr.retired td { color: var(--text-2); }
  tbody tr.retired td.dom { font-weight: 400; }
  td.dom { font-weight: 500; }
  td.num { font-family: var(--font-mono); text-align: right; }
  /* Execution-detail: a daily-run row expands into its per-slot send attempts. */
  tr.runrow.clickable { cursor: pointer; }
  tr.runrow.clickable:hover td { background: var(--surface-2); }
  tr.runrow.open td { background: var(--surface-2); }
  tr.attrow > td { background: var(--surface-2); white-space: normal; padding: var(--sp-2) var(--sp-3); }
  tr.attrow table.subt { margin: 0; }
  .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
  .pill { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; }
  .pill.good { color: var(--good); background: var(--good-bg); }
  .pill.warn { color: var(--warn); background: var(--warn-bg); }
  .pill.bad { color: var(--bad); background: var(--bad-bg); }
  .pill.idle { color: var(--idle); background: var(--idle-bg); }
  .bararea { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .track { display: inline-block; width: 64px; height: 6px; border-radius: var(--r-bar); background: var(--idle-bg); overflow: hidden; vertical-align: middle; }
  .fill { display: block; height: 100%; border-radius: var(--r-bar); }
  .faint { color: var(--text-3); }
  .msg { padding: var(--sp-6); text-align: center; color: var(--text-2); }
  .msg.err { color: var(--bad); }
  .msg code { background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-bar); }
  dialog {
    border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text);
    padding: var(--sp-5); max-width: 380px; width: calc(100% - var(--sp-6));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  }
  dialog::backdrop { background: rgba(0, 0, 0, .4); }
  dialog h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); font-weight: 600; }
  .field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
  .field span { font-size: var(--fs-xs); color: var(--text-2); }
  .field input, .field select {
    font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text); background: var(--surface);
    border: 1px solid var(--border-2); border-radius: var(--r-control); padding: var(--sp-2);
  }
  .dlg-err { color: var(--bad); font-size: var(--fs-sm); min-height: 1.2em; margin: 0 0 var(--sp-3); }
  .dlg-note { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
  .dlg-note b { color: var(--text); font-weight: 600; }
  .dlg-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
  .detail-head .spacer { flex: 1; }
  button.danger { color: var(--bad); border-color: var(--bad); background: var(--surface-2); }
  button.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
  @media (prefers-reduced-motion: no-preference) { .fill { transition: width .3s ease; } }
  /* --- phase 1: per-domain detail --- */
  td.dom a { color: inherit; text-decoration: none; }
  td.dom a:hover { color: var(--accent); text-decoration: underline; }
  .detail-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .detail-head .back { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
  .detail-head .back:hover { color: var(--accent); }
  .detail-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
  .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
  .panel h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); margin: 0; }
  .kv dt { color: var(--text-2); }
  .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .gate ul { margin: 0; padding: 0; }
  .gate li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 3px 0; list-style: none; }
  .gate .ok { color: var(--good); }
  .gate .fail { color: var(--bad); }
  .provbar { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
  .provbar .prov { padding: 2px var(--sp-2); font-size: var(--fs-xs); }
  /* --- phase 3: audience --- */
  .aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-3); }
  .aud-grid .thead-bar .spacer { flex: 1; }
  /* --- phase 7: monitoring --- */
  .mon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
  .mon-grid .panel h3 { display: flex; align-items: center; gap: var(--sp-2); }
  .monlist { margin: 0; padding: 0; list-style: none; }
  .monlist li { padding: 3px 0; font-size: var(--fs-sm); }
  .monlist a { color: inherit; text-decoration: none; }
  .monlist a:hover { color: var(--accent); text-decoration: underline; }

/* templates editor (Шаблоны) */
.tpl-editor { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.tpl-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-2); }
.tpl-field input, .tpl-field textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius, 6px); padding: var(--sp-2); width: 100%;
}
.tpl-field textarea { font-family: var(--font-mono); resize: vertical; }
.tpl-hint { font-size: var(--fs-xs); color: var(--text-3); }
.tpl-out { padding: var(--sp-4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.tpl-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.tpl-sub { font-weight: 600; color: var(--text); }
.tpl-pre { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius, 6px); padding: var(--sp-3); margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); }
.tpl-ok { color: var(--good); background: var(--good-bg); border-radius: var(--radius, 6px); padding: var(--sp-2) var(--sp-3); }
.tpl-issues { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius, 6px); padding: var(--sp-2) var(--sp-3); }
.tpl-issues ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }

/* reputation scorecards (Проверки) */
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.rep-card { border: 1px solid var(--border); border-radius: var(--radius, 6px); background: var(--surface); overflow: hidden; }
.rep-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); font-weight: 600; }
.rep-prov { font-size: var(--fs-xs); color: var(--text-2); font-weight: 400; }
.rep-rows { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.rep-rows li { display: flex; align-items: center; }
.rep-lab { flex: 1; font-size: var(--fs-sm); color: var(--text-2); }

/* placement-trend sparkline (домен-детали) */
.spark-wrap { display: flex; align-items: center; gap: var(--sp-3); padding: 0 0 var(--sp-3); flex-wrap: wrap; }
.spark { display: block; }
.spark-cap { font-size: var(--fs-xs); color: var(--text-3); }

/* passkey management */
.pk-add-msg { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
#passkey-list-dlg { max-width: 480px; }
#passkey-list-dlg .msg { padding: var(--sp-3); }
#passkey-list-dlg table thead th { position: static; }
#passkey-list-dlg tbody td { white-space: normal; }
.webauthn-unsupported { color: var(--warn); }
.pk-revoke { padding: 0 var(--sp-2); }
.pk-success { color: var(--good); }