/* Admin console components — one block per component, named after
   README-admin.md §2/§3/§4. Layout with flex/grid + gap only; logical
   properties so accent bars survive RTL; no hex — tokens only. */

/* ---------- Buttons (§3) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-space-2);
  min-height: var(--a-min-hit-touch);
  padding: 0 var(--a-space-4);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
  border: 0;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .btn {
    min-height: var(--a-min-hit);
  }
}

.btn-primary {
  background: var(--a-action-primary);
  color: var(--a-action-primary-fg);
}

.btn-primary:hover {
  background: var(--a-action-primary-hover);
}

.btn-primary:active {
  background: var(--a-action-primary-active);
}

.btn-primary[disabled],
.btn-primary[aria-disabled="true"] {
  background: var(--a-action-disabled-bg);
  color: var(--a-action-disabled-fg);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--a-surface-raised);
  color: var(--a-action-secondary-fg);
  border: 1px solid var(--a-action-secondary-border);
}

.btn-secondary:hover {
  background: var(--a-action-secondary-hover-bg);
}

.btn-secondary:active {
  border-color: var(--a-action-primary);
}

.btn-danger {
  background: none;
  color: var(--a-action-danger);
}

.btn-danger:hover {
  color: var(--a-action-danger-hover);
}

.btn[data-loading="true"] {
  position: relative;
  color: transparent;
}

.btn[data-loading="true"] .btn__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin .7s linear infinite;
}

.btn-primary[data-loading="true"] .btn__spinner,
.btn-primary[data-loading="true"]::after {
  color: var(--a-action-primary-fg);
}

.btn-secondary .btn__spinner {
  color: var(--a-action-secondary-fg);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-right-color: currentColor;
    border-top-color: currentColor;
    opacity: .6;
  }
}

.field-reason {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

/* ---------- Page header (§2.2) ---------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-space-5);
  flex-wrap: wrap;
}

.page-header__title {
  font-size: var(--a-font-size-page-title);
  line-height: var(--a-line-height-page-title);
  font-weight: var(--a-weight-bold);
}

.page-header__desc {
  margin-top: var(--a-space-1);
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
  max-width: var(--a-measure-read);
}

.page-header__actions {
  display: flex;
  gap: var(--a-space-2);
  flex: none;
}

/* ---------- Filter tabs (§2.3) ---------- */
.filter-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--a-border-default);
  overflow-x: auto;
}

.filter-tabs__tab {
  padding: var(--a-space-3) var(--a-space-4);
  font-size: var(--a-font-size-body-sm);
  color: var(--a-text-secondary);
  border-bottom: var(--a-border-width-tab) solid transparent;
  flex: none;
}

.filter-tabs__tab[aria-pressed="true"] {
  color: var(--a-action-primary);
  font-weight: var(--a-weight-medium);
  border-bottom-color: var(--a-action-primary);
}

/* ---------- Filter chip row (§2.3) ---------- */
.chip-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-space-2);
}

.chip-filters--spaced {
  margin-top: var(--a-space-4);
}

.icon-inline-small {
  width: 11px;
  height: 11px;
}

.chip-filters__label {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-1);
  padding: 7px 11px;
  background: var(--a-surface-muted);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-caption);
  color: var(--a-text-primary);
}

.filter-chip select {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
}

.filter-chip--applied {
  background: var(--a-status-ai-bg);
  border-color: var(--a-status-ai-border);
  color: var(--a-status-ai-fg);
}

.chip-filters__apply {
  padding: 7px 11px;
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-caption);
  background: var(--a-surface-raised);
}

/* ---------- Status chip (§4) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-chip);
  border: 1px solid transparent;
  line-height: 1.3;
}

.chip svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.chip[data-state="ai"] { color: var(--a-status-ai-fg); background: var(--a-status-ai-bg); border-color: var(--a-status-ai-border); }
.chip[data-state="waiting"] { color: var(--a-status-waiting-fg); background: var(--a-status-waiting-bg); border-color: var(--a-status-waiting-border); }
.chip[data-state="assigned"] { color: var(--a-status-assigned-fg); background: var(--a-status-assigned-bg); border-color: var(--a-status-assigned-border); }
.chip[data-state="in-progress"] { color: var(--a-status-inprogress-fg); background: var(--a-status-inprogress-bg); border-color: var(--a-status-inprogress-border); }
.chip[data-state="pending"] { color: var(--a-status-pending-fg); background: var(--a-status-pending-bg); border-color: var(--a-status-pending-border); }
.chip[data-state="resolved"] { color: var(--a-status-resolved-fg); background: var(--a-status-resolved-bg); border-color: var(--a-status-resolved-border); }
.chip[data-state="needs-help"] { color: var(--a-status-needshelp-fg); background: var(--a-status-needshelp-bg); border-color: var(--a-status-needshelp-border); }
.chip[data-state="risk"] { color: var(--a-status-risk-fg); background: var(--a-status-risk-bg); border-color: var(--a-status-risk-border); }
.chip[data-state="stale"] { color: var(--a-status-stale-fg); background: var(--a-status-stale-bg); border-color: var(--a-status-stale-border); }
.chip[data-state="unavailable"] { color: var(--a-status-unavailable-fg); background: var(--a-status-unavailable-bg); border-color: var(--a-status-unavailable-border); }

/* Inline (borderless) status label used above case subjects / in rail rows */
.status-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-chip);
}

.status-inline svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.status-inline[data-state="ai"] { color: var(--a-status-ai-fg); }
.status-inline[data-state="waiting"] { color: var(--a-status-waiting-fg); }
.status-inline[data-state="assigned"] { color: var(--a-status-assigned-fg); }
.status-inline[data-state="in-progress"] { color: var(--a-status-inprogress-fg); }
.status-inline[data-state="pending"] { color: var(--a-status-pending-fg); }
.status-inline[data-state="resolved"] { color: var(--a-status-resolved-fg); }
.status-inline[data-state="needs-help"] { color: var(--a-status-needshelp-fg); }
.status-inline[data-state="risk"] { color: var(--a-status-risk-fg); }
.status-inline[data-state="stale"] { color: var(--a-status-stale-fg); }
.status-inline[data-state="unavailable"] { color: var(--a-status-unavailable-fg); }

.channel-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-chip);
  color: var(--a-text-secondary);
}

.channel-label svg {
  flex: none;
  width: 13px;
  height: 13px;
}

/* ---------- Notice strip (§2.11) ---------- */
.notice {
  display: flex;
  gap: var(--a-space-3);
  align-items: flex-start;
  padding: var(--a-space-3);
  border-radius: var(--a-radius-control);
  border-inline-start: 3px solid;
  font-size: var(--a-font-size-caption);
  line-height: 1.75;
}

.notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.notice--info {
  background: var(--a-status-ai-bg);
  border-color: var(--a-action-primary);
  color: var(--a-status-ai-fg);
}

.notice--warning {
  background: var(--a-status-waiting-bg);
  border-color: var(--a-accent-warning);
  color: var(--a-status-waiting-fg);
}

.notice--danger {
  background: var(--a-status-risk-bg);
  border-color: var(--a-accent-risk);
  color: var(--a-status-risk-fg);
}

.notice--success {
  background: var(--a-status-resolved-bg);
  border-color: var(--a-health-ok);
  color: var(--a-status-resolved-fg);
}

.notice--neutral {
  background: var(--a-surface-sunken);
  border-color: var(--a-border-strong);
  color: var(--a-text-secondary);
}

/* ---------- Panel (generic card surface) ---------- */
.panel {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-pad-panel);
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.panel__title {
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-bold);
}

/* ---------- Case list (§2.3) ---------- */
.case-list {
  display: flex;
  flex-direction: column;
  gap: var(--a-gap-row);
}

.case-row {
  display: block;
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-inline-start: var(--a-border-width-accent) solid var(--a-accent-normal);
  border-radius: var(--a-radius-surface);
  padding: var(--a-pad-row);
  color: var(--a-text-primary);
}

.case-row[data-priority="risk"] { border-inline-start-color: var(--a-accent-risk); }
.case-row[data-priority="warning"] { border-inline-start-color: var(--a-accent-warning); }
.case-row[data-priority="normal"] { border-inline-start-color: var(--a-accent-normal); }
.case-row[data-priority="done"] { border-inline-start-color: var(--a-accent-done); }

.case-row:hover {
  background: var(--a-surface-sunken);
}

.case-row:focus-visible {
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}

.case-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-2);
}

.case-row__status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-row__subject {
  min-width: 0;
}

.case-row__title {
  font-size: var(--a-font-size-row-title);
  font-weight: var(--a-weight-medium);
}

.case-row__meta {
  margin-top: 5px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.case-row__owner,
.case-row__updated {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.case-row__owner span,
.case-row__updated span {
  display: block;
  margin-top: 4px;
  color: var(--a-text-primary);
  font-size: var(--a-font-size-meta);
}

.case-row__sla {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.case-row__sla-text {
  font-size: var(--a-font-size-micro);
  color: var(--a-text-secondary);
}

.case-row__sla-text[data-urgent="true"] {
  color: var(--a-status-risk-fg);
}

.case-row__checkbox {
  display: none;
}

@media (min-width: 1280px) {
  .case-row__grid {
    grid-template-columns: var(--a-case-row-grid);
    align-items: center;
    gap: var(--a-space-4);
  }
}

/* Batch-select checkbox: appears on hover/focus, per §3.
   Lives as a sibling of the row link (not nested inside the <a>) so the
   checkbox and the row-as-link both stay independently interactive. */
.case-list__item {
  position: relative;
}

.case-row__checkbox-wrap {
  display: none;
}

@media (min-width: 1280px) {
  .case-list__item[data-selectable="true"] .case-row__checkbox-wrap {
    display: flex;
    align-items: center;
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }

  .case-list__item[data-selectable="true"]:hover .case-row__checkbox-wrap,
  .case-list__item[data-selectable="true"]:focus-within .case-row__checkbox-wrap,
  .case-list__item[data-selectable="true"][data-checked="true"] .case-row__checkbox-wrap {
    opacity: 1;
  }
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-3);
  flex-wrap: wrap;
}

.pagination__meta {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.pagination__nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pagination__item {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  font: 500 12.5px var(--a-font-mono-label);
  color: var(--a-text-primary);
}

.pagination__item[aria-current="page"] {
  background: var(--a-action-primary);
  border-color: var(--a-action-primary);
  color: var(--a-action-primary-fg);
}

.pagination__item[aria-disabled="true"] {
  color: var(--a-text-disabled);
  cursor: not-allowed;
}

/* ---------- Empty state (§2.11) ---------- */
.empty-state {
  padding: var(--a-space-8) var(--a-space-4);
  text-align: center;
  color: var(--a-text-secondary);
}

.empty-state svg {
  width: 40px;
  height: 40px;
  color: var(--a-text-disabled);
}

.empty-state__title {
  margin-top: var(--a-space-3);
  font-size: var(--a-font-size-body);
  font-weight: var(--a-weight-medium);
  color: var(--a-text-primary);
}

.empty-state__hint {
  margin-top: var(--a-space-1);
  font-size: var(--a-font-size-body-sm);
}

/* ---------- Skeleton row ---------- */
.skeleton-row {
  height: 76px;
  border-radius: var(--a-radius-surface);
  background: linear-gradient(90deg, var(--a-surface-muted) 25%, var(--a-surface-sunken) 37%, var(--a-surface-muted) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-row {
    animation: none;
  }
}

/* ---------- Tab bar (generic role=tablist, §2.6/§2.8) ---------- */
.tab-bar {
  display: flex;
  gap: var(--a-space-1);
  border-bottom: 1px solid var(--a-border-default);
}

.tab-bar__tab {
  padding: 10px var(--a-space-4);
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
  color: var(--a-text-secondary);
  border-bottom: var(--a-border-width-tab) solid transparent;
}

.tab-bar__tab[aria-selected="true"] {
  color: var(--a-action-primary);
  border-bottom-color: var(--a-action-primary);
}

[data-tabpanel-heading] {
  display: none;
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-bold);
  margin-bottom: var(--a-space-3);
}

/* ---------- Radio row / toggle (dialogs, policy) ---------- */
.option-row {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-3);
  padding: var(--a-space-3);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  cursor: pointer;
}

.option-row:has(input:checked) {
  border: 1.5px solid var(--a-action-primary);
  background: var(--a-status-ai-bg);
}

.option-row:has(input:disabled) {
  cursor: not-allowed;
  background: var(--a-surface-sunken);
}

.option-row input[type="radio"] {
  margin-top: 2px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--a-action-primary);
}

.option-row__title {
  font-size: var(--a-font-size-body);
}

.option-row__desc {
  margin-top: 4px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
  line-height: 1.7;
}

.option-row__meta {
  margin-top: 3px;
  font-size: var(--a-font-size-caption);
  color: var(--a-status-waiting-fg);
}

.code-tag {
  font-family: var(--a-font-mono-label);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--a-text-secondary);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-3);
  cursor: pointer;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle__track {
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: var(--a-radius-round);
  background: var(--a-action-secondary-border);
  padding: 2px;
  display: flex;
  transition: background var(--a-duration-fast) var(--a-easing-standard);
}

.toggle__thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--a-surface-raised);
  transition: transform var(--a-duration-fast) var(--a-easing-standard);
}

.toggle input:checked + .toggle__track {
  background: var(--a-action-primary);
  justify-content: flex-end;
}

.toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}

.row-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--a-space-3);
}

.row-setting__title {
  font-size: var(--a-font-size-body-sm);
}

.row-setting__desc {
  margin-top: 3px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

/* ---------- Form controls ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
}

.field--plain {
  border: 0;
  padding: 0;
  margin: 0;
}

.field__options {
  margin-top: var(--a-space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__chip-options {
  margin-top: var(--a-space-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-caption);
}

.chip-radio:has(input:checked) {
  background: var(--a-status-ai-bg);
  border-color: var(--a-status-ai-border);
  color: var(--a-status-ai-fg);
}

.text-risk { color: var(--a-status-risk-fg); }
.text-waiting { color: var(--a-status-waiting-fg); }
.text-resolved { color: var(--a-status-resolved-fg); }
.text-link { color: var(--a-text-link); }
.text-secondary { color: var(--a-text-secondary); }
.text-ai { color: var(--a-status-ai-fg); }
.font-medium { font-weight: var(--a-weight-medium); }
.gap-sm { gap: 6px; }
.text-sm { font-size: var(--a-font-size-body-sm); }

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-3);
  flex-wrap: wrap;
}

.title-row--muted {
  padding: var(--a-space-3) var(--a-space-4);
  background: var(--a-surface-muted);
  border-bottom: 1px solid var(--a-border-default);
}

.label-strong {
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
}

.row-setting--boxed {
  padding: var(--a-space-3);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
}

.row-setting__desc--block {
  display: block;
}

.panel__title--spaced {
  margin-top: var(--a-space-4);
}

.mt-2 { margin-top: var(--a-space-2); }
.mt-3 { margin-top: var(--a-space-3); }
.mt-4 { margin-top: var(--a-space-4); }

.button-row {
  display: flex;
  gap: var(--a-space-2);
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-3);
}

.number-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.number-field input {
  width: 64px;
  padding: 7px 10px;
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-meta);
}

.bordered-form {
  padding: var(--a-space-3);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
}

/* ---------- Group list + policy panel (§2.6) ---------- */
.groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-4);
  align-items: start;
}

@media (min-width: 1280px) {
  .groups-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}

[data-group-rows] tr[aria-current="true"] {
  background: var(--a-surface-sunken);
}

.footnote {
  padding-top: var(--a-space-3);
  border-top: 1px solid var(--a-surface-muted);
}

/* ---------- Batch assign (§2.5 02c) ---------- */
.batch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-4);
  align-items: start;
}

@media (min-width: 1280px) {
  .batch-grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

.batch-selection__head {
  padding: var(--a-space-3) var(--a-space-4);
  background: var(--a-status-ai-bg);
  border-bottom: 1px solid var(--a-border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
  color: var(--a-status-ai-fg);
}

.link-button {
  background: none;
  border: 0;
  color: var(--a-text-link);
  font-size: var(--a-font-size-caption);
  cursor: pointer;
}

.link-button:hover {
  color: var(--a-text-link-hover);
  text-decoration: underline;
}

.link-button--block {
  display: block;
}

[data-batch-risk-row] {
  background: var(--a-status-stale-bg);
}

[data-noscript-note] {
  margin-top: var(--a-space-2);
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.field__label {
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
}

.field__required {
  color: var(--a-action-danger);
  font-weight: var(--a-weight-regular);
}

.field input[type="text"],
.field input[type="search"],
.field input[type="number"],
.field select,
.field textarea {
  padding: 11px 12px;
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-body);
  background: var(--a-surface-raised);
  color: var(--a-text-primary);
  width: 100%;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
  line-height: var(--a-line-height-body);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--a-text-secondary);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--a-border-field-focus);
  border-width: var(--a-border-width-control);
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 1px;
}

.field input[disabled],
.field select[disabled],
.field textarea[disabled] {
  background: var(--a-surface-muted);
  color: var(--a-text-disabled);
  cursor: not-allowed;
}

.field--invalid textarea,
.field--invalid input {
  border: var(--a-border-width-control) solid var(--a-status-risk-fg);
}

.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-caption);
  color: var(--a-status-risk-fg);
}

.field__error svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.readonly-value {
  padding: 11px 12px;
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  background: var(--a-surface-sunken);
  font-size: var(--a-font-size-body);
  color: var(--a-text-secondary);
}

/* ---------- Dialog primitive (§2.5) ---------- */
[data-dialog-scrim] {
  position: fixed;
  inset: 0;
  background: var(--a-surface-overlay-scrim);
  z-index: var(--a-z-dialog-scrim);
}

/* :not([hidden]) is required — an unqualified `[data-dialog] { display:flex }`
   has the same specificity as the UA stylesheet's `[hidden]{display:none}`,
   and because this rule loads later it would win, leaving "closed" dialogs
   rendered full-screen and eating clicks meant for the page behind them. */
[data-dialog]:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--a-z-dialog);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--a-space-8) var(--a-space-4);
  overflow-y: auto;
}

.dialog-panel {
  width: 100%;
  max-width: 560px;
  background: var(--a-surface-raised);
  border-radius: var(--a-radius-surface);
  box-shadow: var(--a-shadow-dialog);
}

.no-js .dialog-panel {
  box-shadow: none;
  border: 1px solid var(--a-border-default);
  max-width: none;
}

.dialog-panel__header {
  padding: var(--a-space-4) var(--a-space-5);
  border-bottom: 1px solid var(--a-surface-muted);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-space-3);
}

.dialog-panel__title {
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-bold);
}

.dialog-panel__subtitle {
  margin-top: 4px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.dialog-panel__close {
  color: var(--a-text-secondary);
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--a-radius-control);
}

.dialog-panel__close:hover {
  background: var(--a-surface-muted);
}

.dialog-panel__body {
  padding: var(--a-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
}

.dialog-panel__footer {
  padding: var(--a-space-3) var(--a-space-5);
  border-top: 1px solid var(--a-surface-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-3);
  flex-wrap: wrap;
}

.dialog-panel__footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--a-space-2);
  margin-inline-start: auto;
}

/* ---------- Dropdown menu (branch switcher, user menu) ---------- */
.dropdown-menu {
  position: absolute;
  margin-top: 8px;
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  box-shadow: var(--a-shadow-dropdown);
  padding: 6px;
  min-width: 160px;
  z-index: var(--a-z-dropdown);
}

.dropdown-menu__item {
  display: block;
  padding: 8px 12px;
  font-size: var(--a-font-size-body-sm);
  border-radius: var(--a-radius-control);
  color: var(--a-text-primary);
}

.dropdown-menu__item:hover {
  background: var(--a-surface-muted);
}

.dropdown-menu--right {
  right: var(--a-space-4);
}

/* ---------- Toast (§3) ---------- */
.toast-region {
  position: fixed;
  bottom: var(--a-space-5);
  right: var(--a-space-5);
  z-index: var(--a-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-2);
  padding: var(--a-space-3) var(--a-space-4);
  border-radius: var(--a-radius-control);
  background: var(--a-text-primary);
  color: var(--a-text-inverse);
  font-size: var(--a-font-size-body-sm);
  box-shadow: var(--a-shadow-dropdown);
}

.toast[data-kind="error"] {
  background: var(--a-action-danger);
}

.toast__close {
  margin-inline-start: auto;
  color: inherit;
  opacity: .8;
  flex: none;
}

/* ---------- Table (generic, sticky header) ---------- */
.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 640px;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--a-surface-muted);
  text-align: start;
  padding: var(--a-space-3) var(--a-space-4);
  font-size: var(--a-font-size-caption);
  font-weight: var(--a-weight-medium);
  color: var(--a-text-secondary);
  border-bottom: 1px solid var(--a-border-default);
  white-space: nowrap;
}

.data-table th[aria-sort] {
  cursor: pointer;
}

.data-table th[aria-sort]:hover {
  text-decoration: underline;
}

.data-table td {
  padding: var(--a-space-3) var(--a-space-4);
  font-size: var(--a-font-size-body-sm);
  border-bottom: 1px solid var(--a-surface-muted);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.cell-meta {
  margin-top: 3px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.table-row-link {
  color: var(--a-text-primary);
  font-weight: var(--a-weight-medium);
}

.table-row-link:hover {
  color: var(--a-text-link);
  text-decoration: underline;
}

/* ---------- Case detail layout (§2.4) ---------- */
.case-detail {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
}

.case-detail__rail {
  display: none;
}

.case-detail__summary {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.case-detail__summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-space-4);
  flex-wrap: wrap;
}

.case-detail__meta-line {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  flex-wrap: wrap;
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

.case-detail__id {
  font-family: var(--a-font-mono-label);
  font-weight: var(--a-weight-semibold);
  color: var(--a-text-secondary);
}

.case-detail__title {
  margin-top: var(--a-space-2);
  font-size: 19px;
  font-weight: var(--a-weight-bold);
}

.case-detail__subtitle {
  margin-top: var(--a-space-1);
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

.case-detail__actions {
  display: flex;
  gap: var(--a-space-2);
  flex-wrap: wrap;
}

.case-detail__conversation {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-3);
}

.conversation__label {
  font-size: var(--a-font-size-meta);
  font-weight: var(--a-weight-medium);
  color: var(--a-text-secondary);
}

.message {
  display: flex;
  gap: var(--a-space-3);
}

.message__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--a-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--a-text-strong-alt);
}

.message__avatar[data-author="ai"] {
  background: var(--a-status-resolved-bg);
  color: var(--a-status-resolved-fg);
}

.message__avatar[data-author="system"] {
  background: var(--a-status-ai-bg);
  color: var(--a-status-ai-fg);
}

.message__bubble {
  flex: 1;
  min-width: 0;
  max-width: var(--a-measure-read);
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-3) var(--a-space-4);
}

.message__bubble[data-author="ai"] {
  background: var(--a-status-resolved-bg);
  border-color: var(--a-status-resolved-border);
}

.message__meta {
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

.message__bubble[data-author="ai"] .message__meta {
  color: var(--a-status-resolved-fg);
}

.message__text {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.8;
}

.message__ref {
  margin-top: 6px;
  font-size: var(--a-font-size-caption);
}

.reply-box {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.reply-box__label {
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

.reply-box textarea {
  margin-top: var(--a-space-2);
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  font-size: var(--a-font-size-body);
  font-family: inherit;
  line-height: var(--a-line-height-body);
}

.reply-box textarea[disabled] {
  background: var(--a-surface-sunken);
  color: var(--a-text-secondary);
}

.reply-box__footer {
  margin-top: var(--a-space-3);
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
  flex-wrap: wrap;
}

.reply-box__actions-secondary {
  display: flex;
  gap: var(--a-space-2);
}

.case-detail__aside {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--a-surface-muted);
  font-size: var(--a-font-size-meta);
}

.info-list__row:last-child {
  border-bottom: 0;
}

.info-list__row dt {
  color: var(--a-text-secondary);
}

.info-list__row dd {
  margin: 0;
  text-align: end;
}

.readonly-block {
  background: var(--a-surface-sunken);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-3);
}

.readonly-block__row {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
  font-size: var(--a-font-size-meta);
  padding: 5px 0;
}

.readonly-block__row dt {
  color: var(--a-text-secondary);
}

.readonly-block__row dd {
  margin: 0;
}

.readonly-block__note {
  margin-top: var(--a-space-2);
  padding-top: var(--a-space-2);
  border-top: 1px solid var(--a-border-default);
  font-size: var(--a-font-size-micro);
  line-height: 1.7;
  color: var(--a-text-secondary);
}

.audit-trail {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
  font-size: var(--a-font-size-caption);
  line-height: 1.7;
  color: var(--a-text-strong-alt);
}

@media (min-width: 1280px) {
  .case-detail {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    background: var(--a-surface-raised);
    border: 1px solid var(--a-border-default);
    border-radius: var(--a-radius-surface);
    overflow: hidden;
  }

  .case-detail__rail {
    display: block;
    flex: none;
    width: var(--a-case-list-width);
    border-inline-end: 1px solid var(--a-border-default);
    max-height: 780px;
    overflow-y: auto;
  }

  .case-detail__rail-head {
    padding: var(--a-space-3) var(--a-space-4);
    border-bottom: 1px solid var(--a-border-default);
    display: flex;
    justify-content: space-between;
    font-size: var(--a-font-size-body-sm);
  }

  .rail-row {
    display: block;
    padding: var(--a-space-3) var(--a-space-4);
    border-bottom: 1px solid var(--a-border-default);
    color: var(--a-text-primary);
  }

  .rail-row[aria-current="true"] {
    background: var(--a-status-ai-bg);
    border-inline-start: var(--a-border-width-accent) solid var(--a-accent-risk);
  }

  .rail-row__top {
    display: flex;
    justify-content: space-between;
    gap: var(--a-space-2);
    font-size: var(--a-font-size-micro);
  }

  .rail-row__title {
    margin-top: 6px;
    font-size: var(--a-font-size-body-sm);
    line-height: 1.5;
  }

  .rail-row__meta {
    margin-top: 4px;
    font-size: var(--a-font-size-micro);
    color: var(--a-text-secondary);
  }

  .case-detail__main {
    flex: 1;
    min-width: 0;
    background: var(--a-surface-page);
  }

  .case-detail__summary {
    border: 0;
    border-bottom: 1px solid var(--a-border-default);
    border-radius: 0;
  }

  .case-detail__conversation {
    padding: var(--a-space-5);
  }

  .case-detail__aside {
    flex: none;
    width: var(--a-case-aside-width);
    border-inline-start: 1px solid var(--a-border-default);
    padding: var(--a-space-4);
    background: var(--a-surface-raised);
    align-self: stretch;
  }
}

/* Tablet 1024 single column with sticky action bar (§1 breakpoint table) */
@media (min-width: 768px) and (max-width: 1279px) {
  .case-detail__actions {
    position: sticky;
    bottom: 0;
    background: var(--a-surface-raised);
    box-shadow: var(--a-shadow-sticky-bar);
    padding: var(--a-space-3);
    margin: var(--a-space-3) calc(var(--a-space-3) * -1) calc(var(--a-space-3) * -1);
    z-index: var(--a-z-sticky-tablebar);
  }

  .case-detail__actions .btn {
    flex: 1;
  }

  .case-detail__back-link {
    display: inline-flex;
  }
}

.case-detail__back-link {
  display: none;
  margin-bottom: var(--a-space-3);
}

@media (min-width: 1280px) {
  .case-detail__back-link {
    display: none !important;
  }
}

/* ---------- Claim code display (§2.7) ---------- */
.claim-code-box {
  padding: var(--a-space-5);
  background: var(--a-status-ai-bg);
  border: 1px solid var(--a-status-ai-border);
  border-radius: var(--a-radius-surface);
  text-align: center;
}

.claim-code-box__label {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.claim-code-box__code {
  margin-top: var(--a-space-2);
  font: 600 34px/1 var(--a-font-mono-label);
  letter-spacing: .16em;
}

.claim-code-box__countdown {
  margin-top: var(--a-space-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--a-font-size-caption);
  color: var(--a-status-waiting-fg);
}

.claim-code-box__countdown svg {
  width: 14px;
  height: 14px;
}

.copy-row {
  display: flex;
  gap: var(--a-space-2);
  align-items: center;
}

.copy-row__value {
  flex: 1;
  padding: 11px 12px;
  background: var(--a-surface-sunken);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
  font: 500 13.5px var(--a-font-mono-label);
  color: var(--a-text-strong-alt);
}

.claim-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
}

.claim-status-list__item {
  display: flex;
  gap: var(--a-space-2);
  align-items: center;
  font-size: var(--a-font-size-body-sm);
}

.claim-status-list__item svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.demo-sim {
  border: 1.5px dashed var(--a-border-strong);
  border-radius: var(--a-radius-control);
  padding: var(--a-space-3);
  background: var(--a-surface-sunken);
}

.demo-sim__label {
  font-size: var(--a-font-size-micro);
  font-weight: var(--a-weight-semibold);
  letter-spacing: .06em;
  color: var(--a-text-secondary);
  text-transform: uppercase;
}

.demo-sim__actions {
  margin-top: var(--a-space-2);
  display: flex;
  gap: var(--a-space-2);
  flex-wrap: wrap;
}

.demo-sim__actions .btn {
  min-height: 36px;
  padding: 0 var(--a-space-3);
  font-size: var(--a-font-size-caption);
}

/* Small inline demo-only affordance so a reviewer can deterministically
   reach the error state of a simulated write action without waiting on
   randomness — always styled distinctly from real product controls. */
.demo-sim-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
  border-bottom: 1px dashed var(--a-border-strong);
  padding-bottom: 1px;
}

/* ---------- Onboarding steps (§2.6) ---------- */
.onboarding {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-status-ai-border);
  border-inline-start: var(--a-border-width-accent) solid var(--a-action-primary);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-5);
}

.onboarding__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-space-4);
  flex-wrap: wrap;
}

.onboarding__intro {
  display: flex;
  gap: var(--a-space-3);
}

.onboarding__intro svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--a-action-primary);
  margin-top: 2px;
}

.onboarding__title {
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-bold);
}

.onboarding__desc {
  margin-top: 5px;
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

.onboarding__steps {
  margin-top: var(--a-space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-3);
}

.onboarding__step {
  border-top: 2px solid var(--a-action-primary);
  padding-top: var(--a-space-3);
}

.onboarding__step-head {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
}

.onboarding__step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--a-action-primary);
  color: var(--a-action-primary-fg);
  font: 600 11px var(--a-font-mono-label);
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding__step-title {
  font-size: var(--a-font-size-body);
  font-weight: var(--a-weight-medium);
}

.onboarding__step-desc {
  margin-top: var(--a-space-2);
  font-size: var(--a-font-size-body-sm);
  line-height: 1.8;
  color: var(--a-text-secondary);
}

.onboarding__step-note {
  margin-top: var(--a-space-2);
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

@media (min-width: 1280px) {
  .onboarding__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Funnel (§2.9) ---------- */
.funnel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-space-3);
  align-items: end;
}

.funnel__stage-bar {
  border-radius: 3px 3px 0 0;
  background: var(--a-action-primary);
}

.funnel__stage-name {
  margin-top: var(--a-space-2);
  font-size: var(--a-font-size-body-sm);
  font-weight: var(--a-weight-medium);
}

.funnel__stage-desc {
  font-size: var(--a-font-size-meta);
  color: var(--a-text-secondary);
}

@media (min-width: 1280px) {
  .funnel {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Health card (§2.10) ---------- */
.health-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-3);
}

@media (min-width: 1024px) {
  .health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.health-card {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-inline-start: var(--a-border-width-accent) solid var(--a-health-ok);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.health-card[data-health="degraded"] { border-inline-start-color: var(--a-health-degraded); }
.health-card[data-health="down"] { border-inline-start-color: var(--a-health-down); }

.health-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--a-space-3);
}

.health-card__name {
  font-size: var(--a-font-size-body);
  font-weight: var(--a-weight-medium);
}

.health-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-caption);
}

.health-card__status svg {
  width: 14px;
  height: 14px;
}

/* --a-health-* tokens are dots/bars (tokens-admin.css calls them out as
   "Health dots"), not text — --a-health-degraded on white is only 2.9:1,
   well under WCAG AA. The status text next to the icon uses the matching
   --a-status-*-fg token instead, which is the one designed to meet 4.5:1. */
.health-card[data-health="ok"] .health-card__status { color: var(--a-status-resolved-fg); }
.health-card[data-health="degraded"] .health-card__status { color: var(--a-status-waiting-fg); }
.health-card[data-health="down"] .health-card__status { color: var(--a-status-risk-fg); }

.health-card__facts {
  margin-top: var(--a-space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.health-card__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.health-card__fact dt {
  color: var(--a-text-secondary);
}

.health-card__fact dd {
  margin: 0;
  color: var(--a-text-primary);
}

.health-card[data-health="down"] .health-card__fact dd,
.health-card[data-health="degraded"] .health-card__fact dd[data-warn="true"] {
  color: var(--a-status-risk-fg);
}

/* ---------- KPI tile (§2.10) ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-space-3);
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-tile {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.kpi-tile__name {
  font-size: var(--a-font-size-body-sm);
  color: var(--a-text-secondary);
}

.kpi-tile__value {
  margin-top: var(--a-space-2);
  font: 600 22px var(--a-font-mono-label);
  color: var(--a-text-secondary);
}

.kpi-tile__status {
  margin-top: 6px;
  font-size: var(--a-font-size-caption);
  color: var(--a-status-waiting-fg);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-4);
  align-items: start;
}

@media (min-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: 1.25fr 1fr;
  }
}

.dashboard-side {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
}

/* ---------- KPI summary cards (dashboard first screen) ---------- */
.kpi-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a-space-3);
}

@media (min-width: 1024px) {
  .kpi-summary-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.kpi-summary-card {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.kpi-summary-card__name {
  font-size: var(--a-font-size-body-sm);
  color: var(--a-text-secondary);
}

.kpi-summary-card__value {
  margin-top: var(--a-space-2);
  font: 600 26px var(--a-font-mono-label);
  color: var(--a-text-primary);
}

.kpi-summary-card__note {
  margin-top: 6px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.kpi-summary-card__note--illustrative {
  color: var(--a-status-waiting-fg);
}

/* ---------- Mini panel (AI/human status, admissions queue) ---------- */
.mini-panel {
  background: var(--a-surface-raised);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-surface);
  padding: var(--a-space-4);
}

.mini-panel__title {
  font-size: var(--a-font-size-panel-title);
  font-weight: var(--a-weight-medium);
}

.mini-stat-row {
  margin-top: var(--a-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
}

.mini-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-2);
  padding: var(--a-space-2) var(--a-space-3);
  background: var(--a-surface-sunken);
  border-radius: var(--a-radius-control);
}

.mini-stat__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-body-sm);
}

.mini-stat__label svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.mini-stat__value {
  font: 600 16px var(--a-font-mono-label);
  color: var(--a-text-primary);
}

.mini-list {
  margin-top: var(--a-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
}

.mini-list__row {
  display: flex;
  flex-direction: column;
  padding: var(--a-space-2) var(--a-space-3);
  border: 1px solid var(--a-border-default);
  border-radius: var(--a-radius-control);
}

.mini-list__title {
  font-size: var(--a-font-size-body-sm);
  color: var(--a-text-primary);
}

.mini-list__meta {
  margin-top: 2px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

/* ---------- Channel distribution bar (official channels only) ---------- */
.bg-channel-group         { background: var(--a-action-primary); }
.bg-channel-parent-oa     { background: var(--a-channel-parent-oa); }
.bg-channel-admissions-oa { background: var(--a-accent-warning); }
.bg-channel-widget        { background: var(--a-channel-widget); }
.bg-channel-liff          { background: var(--a-channel-liff); }

/* ---------- Composition bar (dashboard) ---------- */
.composition-bar {
  margin-top: var(--a-space-3);
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
}

.composition-legend {
  margin-top: var(--a-space-3);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-strong-alt);
}

.composition-legend__dot {
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-2);
}

.composition-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.bg-health-ok { background: var(--a-health-ok); }
.bg-health-degraded { background: var(--a-health-degraded); }
.bg-health-down { background: var(--a-health-down); }
.bg-neutral-strong { background: var(--a-text-nav-brand); }

.notice-line {
  display: flex;
  gap: 9px;
}

.notice-line svg {
  flex: none;
  margin-top: 3px;
  width: 15px;
  height: 15px;
}

/* ---------- Dashboard "今日待辦與重要事項" (§ dashboard redesign) ---------- */
.todo-group + .todo-group {
  margin-top: var(--a-space-5);
  padding-top: var(--a-space-5);
  border-top: 1px solid var(--a-border-default);
}

.todo-group__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--a-font-size-label);
  font-weight: var(--a-weight-medium);
}

.todo-group__label svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.todo-list {
  margin-top: var(--a-space-3);
  display: flex;
  flex-direction: column;
}

.todo-row {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-3);
  padding: var(--a-space-2) 0;
}

.todo-row .chip {
  flex: none;
  margin-top: 1px;
}

.todo-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The title itself is the link (not the whole row) — some rows also need a
   second, unrelated link in the meta line (e.g. "查看帳務系統健康狀態"), and
   an <a> can't nest inside another <a>. */
.todo-row__title {
  font-size: var(--a-font-size-body-sm);
  color: var(--a-text-link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-row__title:hover {
  color: var(--a-text-link-hover);
  text-decoration: underline;
}

.todo-row__meta {
  margin-top: 2px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

/* ---------- Upload / knowledge import pipeline (§2.8) ---------- */
.dropzone {
  padding: var(--a-space-5);
  border: 1.5px dashed var(--a-border-strong);
  border-radius: var(--a-radius-surface);
  background: var(--a-surface-sunken);
  text-align: center;
}

.dropzone[data-dragover="true"] {
  border-color: var(--a-action-primary);
  background: var(--a-status-ai-bg);
}

.dropzone__title {
  font-size: var(--a-font-size-body);
  color: var(--a-text-strong-alt);
}

.dropzone__hint {
  margin-top: 6px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.pipeline {
  margin-top: var(--a-space-4);
  display: flex;
  flex-direction: column;
}

.pipeline__stage {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--a-space-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--a-surface-muted);
  align-items: center;
}

.pipeline__stage:last-child {
  border-bottom: 0;
}

.pipeline__stage-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--a-font-mono-label);
  color: var(--a-text-secondary);
  border: 1.5px solid var(--a-border-strong);
}

.pipeline__stage[data-status="done"] .pipeline__stage-icon {
  background: var(--a-health-ok);
  border-color: var(--a-health-ok);
  color: var(--a-text-inverse);
}

.pipeline__stage[data-status="active"] .pipeline__stage-icon {
  background: var(--a-action-primary);
  border-color: var(--a-action-primary);
  color: var(--a-action-primary-fg);
}

.pipeline__stage[data-status="error"] .pipeline__stage-icon {
  background: var(--a-status-risk-bg);
  border-color: var(--a-status-risk-fg);
  color: var(--a-status-risk-fg);
}

.pipeline__stage-name {
  font-size: var(--a-font-size-body);
}

.pipeline__stage-desc {
  margin-top: 3px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.pipeline__stage-status {
  font-size: var(--a-font-size-caption);
  white-space: nowrap;
}

.pipeline__stage[data-status="done"] .pipeline__stage-status { color: var(--a-status-resolved-fg); }
.pipeline__stage[data-status="active"] .pipeline__stage-status { color: var(--a-status-ai-fg); }
.pipeline__stage[data-status="error"] .pipeline__stage-status { color: var(--a-status-risk-fg); }
.pipeline__stage[data-status="pending"] .pipeline__stage-status { color: var(--a-text-secondary); }

.queue-item {
  padding: var(--a-space-3) var(--a-space-4);
  border-bottom: 1px solid var(--a-surface-muted);
}

.queue-item:last-child {
  border-bottom: 0;
}

.queue-item__top {
  display: flex;
  justify-content: space-between;
  gap: var(--a-space-3);
  font-size: var(--a-font-size-body-sm);
}

.queue-item__meta {
  margin-top: 4px;
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

/* ---------- Knowledge base layout (§2.8) ---------- */
.kb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-space-4);
  align-items: start;
}

@media (min-width: 1280px) {
  .kb-grid {
    grid-template-columns: 210px 1fr;
  }

  .kb-grid--balanced {
    grid-template-columns: 1.15fr 1fr;
  }
}

/* ---------- Knowledge tree (§2.8) ---------- */
.kb-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--a-font-size-body-sm);
}

.kb-tree__group {
  width: 100%;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  color: var(--a-text-primary);
  font: inherit;
  text-align: start;
  border-radius: var(--a-radius-control);
}

.kb-tree__group:hover {
  background: var(--a-surface-muted);
}

.kb-tree__chevron {
  display: inline-block;
  width: 1em;
}

.kb-tree__group[aria-expanded="false"] .kb-tree__chevron {
  transform: rotate(-90deg);
}

[data-kb-group-items][hidden] {
  display: none;
}

.kb-tree__item {
  width: 100%;
  padding: 8px 10px 8px 22px;
  display: flex;
  justify-content: space-between;
  border-radius: var(--a-radius-control);
  color: var(--a-text-primary);
  text-align: start;
  font: inherit;
}

.kb-tree__item:hover {
  background: var(--a-surface-muted);
}

.kb-tree__item[aria-current="true"] {
  background: var(--a-status-ai-bg);
  color: var(--a-status-ai-fg);
}

.kb-tree__count {
  font: 500 11.5px var(--a-font-mono-label);
  color: var(--a-text-secondary);
}

.kb-tree__item[aria-current="true"] .kb-tree__count {
  color: inherit;
}

/* ---------- Chat-sourced knowledge candidate card (§2.8) ---------- */
.kb-candidate {
  padding: var(--a-space-4);
  border-bottom: 1px solid var(--a-surface-muted);
}

.kb-candidate:last-child {
  border-bottom: 0;
}

.kb-candidate__source {
  font-size: var(--a-font-size-caption);
  color: var(--a-text-secondary);
}

.kb-candidate__line {
  margin-top: 6px;
  font-size: var(--a-font-size-body-sm);
  line-height: 1.75;
}

.kb-candidate__line b,
.kb-candidate__label {
  color: var(--a-text-secondary);
  font-weight: var(--a-weight-regular);
}

.kb-candidate__actions {
  margin-top: var(--a-space-3);
  display: flex;
  gap: var(--a-space-2);
}

.kb-page-content__p {
  color: var(--a-text-primary);
  font-size: var(--a-font-size-body-sm);
  line-height: 1.8;
}

.kb-candidate--done {
  opacity: .5;
}