/* ============================================================================
   ReadyAED Design System — Components
   Depends on tokens.css and base.css.
   Naming: block__element--modifier, flat and predictable.
   ============================================================================ */

/* Icon sizing. Global so any inline SVG from the sprite is sized by its context. */
.icon { width: 1em; height: 1em; flex: none; }
.btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------------------------
   BUTTONS
   Navy is the default action. Red is reserved for destructive + critical, so
   that a red button always means "this changes or removes something".
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-action-text);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-action-hover);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-5);
  border: var(--border-thin) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.btn--sm { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: var(--control-height-lg); padding: var(--space-4) var(--space-6); font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* Secondary — bordered, quiet */
.btn--secondary {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-brand);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-brand-soft);
}
.btn--secondary:hover { border-color: var(--color-brand); }

/* Tertiary — text only */
.btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--color-link);
  --btn-bg-hover: var(--color-surface-subtle);
  padding-inline: var(--space-3);
}
.btn--tertiary:hover { color: var(--color-link-hover); }

/* Destructive — the only place a red button is allowed.
   Uses dedicated danger tokens so white text keeps AA contrast in both themes. */
.btn--danger {
  --btn-bg: var(--color-danger-bg);
  --btn-fg: var(--color-danger-text);
  --btn-bg-hover: var(--color-danger-bg-hover);
}

/* Inverse — for navy/dark panels */
.btn--inverse {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--color-brand);
  --btn-bg-hover: var(--slate-100);
}
.btn--outline-inverse {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-border: rgba(255, 255, 255, 0.5);
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
}

/* Icon-only — keeps a 44px hit area */
.btn--icon {
  min-width: var(--control-height-md);
  padding: var(--space-2);
}
.btn--icon.btn--sm { min-width: var(--control-height-sm); }

/* Pill — only for filters, tags, and prompts. Status uses .badge. */
.btn--pill { border-radius: var(--radius-full); }

/* Toggle — a button that keeps a pressed state */
.btn--toggle[aria-pressed="true"] {
  --btn-bg: var(--color-brand-soft);
  --btn-fg: var(--color-brand);
  --btn-border: var(--color-brand);
}

/* Loading — the label is replaced by a spinner, width is preserved */
.btn--loading,
.btn--loading:hover { color: transparent; position: relative; pointer-events: none; }
.btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--btn-fg);
  opacity: 0.85;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   CHAT / ASSISTANT
   The assistant is read-only. Every answer shows the tool calls behind it, so
   a claim can be verified instead of trusted. The user's bubble is navy; the
   assistant's is a bordered white card. Status is never colour-only.
   --------------------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
}
.chat__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-border);
}
.chat__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); }
.chat__subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); }
.chat__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-surface-subtle);
}
.chat__footer {
  padding: var(--space-4);
  background: var(--color-surface);
  border-top: var(--border-thin) solid var(--color-border);
}

.chat-thread { display: flex; flex-direction: column; gap: var(--space-4); }
.chat-msg { display: flex; gap: var(--space-3); max-width: 84%; }
.chat-msg--assistant { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg__avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}
.chat-msg--user .chat-msg__avatar { background: var(--color-action); color: var(--color-action-text); }
.chat-bubble {
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.chat-msg--user .chat-bubble { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); }
.chat-bubble + .chat-bubble { margin-top: var(--space-2); }
.chat-meta { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); }
.chat-msg--user .chat-meta { text-align: end; }
.chat-system {
  align-self: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.chat-tools { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.chat-tool {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.chat-tool--done .icon { color: var(--color-ready); }

.chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: var(--space-3) var(--space-4); }
.chat-typing span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-text-muted); animation: chat-bounce 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-composer {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.chat-composer:focus-within { border-color: var(--color-brand); box-shadow: var(--shadow-focus); }
.chat-composer__input {
  flex: 1;
  min-height: 28px;
  max-height: 140px;
  padding: var(--space-1) 0;
  border: none;
  background: none;
  resize: none;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.chat-composer__input:focus-visible { outline: none; }
.chat-composer__input::placeholder { color: var(--color-text-muted); }
.chat-send {
  width: var(--control-height-md); height: var(--control-height-md); flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-action-text);
}
.chat-send:hover { background: var(--color-action-hover); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-prompts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.chat-prompt {
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.chat-prompt:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* Phones: keep the header and footer small so the thread stays readable */
@media (max-width: 560px) {
  .chat__header { padding: var(--space-3) var(--space-4); }
  .chat__title { font-size: var(--text-base); }
  .chat__subtitle { display: none; }
  .chat__body { padding: var(--space-4); }
  .chat__footer { padding: var(--space-3); }
  .chat-msg { max-width: 92%; }
  .chat-prompts { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--space-1); }
  .chat-prompt { flex: none; }
}


/* ---------------------------------------------------------------------------
   BADGES / STATUS PILLS
   Pills are reserved for status. Status always carries an icon + label.
   --------------------------------------------------------------------------- */
.badge {
  --badge-fg: var(--color-text-secondary);
  --badge-bg: var(--color-offline-bg);
  --badge-border: var(--color-offline-border);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2em 0.65em;
  border: var(--border-thin) solid var(--badge-border);
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; flex: none; }

.badge--ready     { --badge-fg: var(--color-ready-text);     --badge-bg: var(--color-ready-bg);     --badge-border: var(--color-ready-border); }
.badge--attention { --badge-fg: var(--color-attention-text); --badge-bg: var(--color-attention-bg); --badge-border: var(--color-attention-border); }
.badge--critical  { --badge-fg: var(--color-critical-text);  --badge-bg: var(--color-critical-bg);  --badge-border: var(--color-critical-border); }
.badge--offline   { --badge-fg: var(--color-offline-text);   --badge-bg: var(--color-offline-bg);   --badge-border: var(--color-offline-border); }
.badge--info      { --badge-fg: var(--color-info-text);      --badge-bg: var(--color-info-bg);      --badge-border: var(--color-info-border); }

/* Solid variant for dense tables. Uses fixed, darker status colours so white
   label text always clears AA — theme-agnostic by design. */
.badge--solid { border-color: transparent; color: #fff; }
.badge--solid.badge--ready     { background: var(--green-600); }
.badge--solid.badge--attention { background: var(--amber-700); }
.badge--solid.badge--critical  { background: var(--red-700); }
.badge--solid.badge--offline   { background: var(--slate-600); }
.badge--solid.badge--info      { background: var(--navy-600); }

/* Neutral tag / chip — for filters, brands, categories (not status) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15em 0.6em;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.tag--removable { padding-right: var(--space-1); }
.tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.tag__remove:hover { background: var(--color-border); color: var(--color-text); }

/* Chip — a pastel category label. Not a status; see .badge for status. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--tint-gray);
  color: var(--color-text-on-tint);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.chip--blue   { background: var(--tint-blue);   color: var(--tint-blue-text); }
.chip--green  { background: var(--tint-green);  color: var(--tint-green-text); }
.chip--amber  { background: var(--tint-amber);  color: var(--tint-amber-text); }
.chip--red    { background: var(--tint-red);    color: var(--tint-red-text); }
.chip--purple { background: var(--tint-purple); color: var(--tint-purple-text); }
.chip--teal   { background: var(--tint-teal);   color: var(--tint-teal-text); }
.chip--orange { background: var(--tint-orange); color: var(--tint-orange-text); }

/* Status dot — only next to a written label, never on its own */
.status-dot { width: 10px; height: 10px; flex: none; border-radius: var(--radius-full); background: var(--color-offline); }
.status-dot--ready { background: var(--color-ready); }
.status-dot--attention { background: var(--color-attention); }
.status-dot--critical { background: var(--color-critical); }
.status-dot--offline { background: var(--color-offline); }
.status-dot--info { background: var(--color-info); }

/* ---------------------------------------------------------------------------
   ALERTS / BANNERS
   --------------------------------------------------------------------------- */
.alert {
  --alert-fg: var(--color-info-text);
  --alert-bg: var(--color-info-bg);
  --alert-border: var(--color-info-border);
  --alert-accent: var(--color-info);

  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--alert-border);
  border-left: var(--border-accent) solid var(--alert-accent);
  border-radius: var(--radius-md);
  background: var(--alert-bg);
  color: var(--color-text);
}
.alert__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--alert-accent); margin-top: 0.15em; }
.alert__content { display: flex; flex-direction: column; gap: var(--space-1); }
.alert__title { font-weight: var(--font-weight-semibold); color: var(--alert-fg); }
.alert__body { font-size: var(--text-base); color: var(--color-text-secondary); }
.alert__actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.alert--ready     { --alert-fg: var(--color-ready-text);     --alert-bg: var(--color-ready-bg);     --alert-border: var(--color-ready-border);     --alert-accent: var(--color-ready); }
.alert--attention { --alert-fg: var(--color-attention-text); --alert-bg: var(--color-attention-bg); --alert-border: var(--color-attention-border); --alert-accent: var(--color-attention); }
.alert--critical  { --alert-fg: var(--color-critical-text);  --alert-bg: var(--color-critical-bg);  --alert-border: var(--color-critical-border);  --alert-accent: var(--color-critical); }

/* ---------------------------------------------------------------------------
   CARDS / PANELS
   Borders, not shadows. Shadow is earned by floating surfaces only.
   --------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
}
.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.card__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); }
.card__subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.card__body { padding: var(--space-5); }
.card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-thin) solid var(--color-border);
  background: var(--color-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.card--interactive { transition: border-color var(--duration-fast) var(--ease-standard); }
.card--interactive:hover { border-color: var(--color-border-strong); }
.card--critical { border-left: var(--border-accent) solid var(--color-critical); }
.card--attention { border-left: var(--border-accent) solid var(--color-attention); }
.card--ready { border-left: var(--border-accent) solid var(--color-ready); }

/* Radius, surface, and selection variants */
.card--page { border-radius: var(--radius-xl); }
.card--flat { background: var(--color-surface-subtle); border-color: transparent; }
.card--raised { box-shadow: var(--shadow-sm); }
.card--selected { border-color: var(--color-brand); box-shadow: var(--shadow-focus); }
.card--tinted-gray  { background: var(--tint-gray);  border-color: transparent; }
.card--tinted-blue  { background: var(--tint-blue);  border-color: transparent; }
.card--tinted-green { background: var(--tint-green); border-color: transparent; }
.card--tinted-amber { background: var(--tint-amber); border-color: transparent; }
.card--tinted-red   { background: var(--tint-red);   border-color: transparent; }

.panel {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.panel--brand {
  background: var(--color-brand-surface);
  border-color: var(--color-brand-surface-border);
  color: var(--color-brand-surface-text);
}
.panel--brand h1, .panel--brand h2, .panel--brand h3 { color: var(--color-brand-surface-text); }
.panel--brand .u-text-secondary { color: var(--color-brand-surface-dim) !important; }

/* ---------------------------------------------------------------------------
   FORMS
   Labels sit above fields, always visible. No placeholder-as-label.
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.field__label .field__optional { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.field__hint { font-size: var(--text-sm); color: var(--color-text-secondary); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-critical-text);
}
/* Generic status line: error or success. .field__error is the shorthand. */
.field__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}
.field__status--error { color: var(--color-critical-text); }
.field__status--success { color: var(--color-ready-text); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-brand); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-critical);
}
.input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--color-critical-border); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234E566B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

.input-group { display: flex; align-items: stretch; }

/* Compact inputs for toolbars and dense headers */
.input--sm, .select--sm { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.select--sm { padding-right: var(--space-8); }
.input-group .input { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group .btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Search */
.search { position: relative; }
.search .input { padding-left: var(--space-10); }
.search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Checkbox & radio */
.choice { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; min-height: var(--tap-target-min); }
.choice__control {
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 0.2em;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.choice__control[type="radio"] { border-radius: var(--radius-full); }
.choice__control:checked { background: var(--color-action); border-color: var(--color-action); }
.choice__control[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.choice__control[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px);
}
.choice__control:focus-visible { outline: var(--border-accent) solid var(--focus-ring-color); outline-offset: 2px; }
.choice__control:disabled { background: var(--color-bg-sunken); border-color: var(--color-border); cursor: not-allowed; }
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__label { font-weight: var(--font-weight-medium); }
.choice__hint { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: var(--tap-target-min); }
.switch__control {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.switch__control::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.switch__control:checked { background: var(--color-action); }
.switch__control:checked::after { transform: translateX(20px); }
.switch__control:focus-visible { outline: var(--border-accent) solid var(--focus-ring-color); outline-offset: 2px; }

/* Segmented control — pass / fail / n-a for inspections */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--color-bg-sunken);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}
.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.segmented__option:hover { background: var(--color-surface); }
.segmented__option[aria-pressed="true"], .segmented__option[aria-checked="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}
.segmented__option--pass[aria-pressed="true"] { color: var(--color-ready-text); }
.segmented__option--fail[aria-pressed="true"] { color: var(--color-critical-text); }

/* Range input — thresholds and bulk settings */
.slider { width: 100%; height: 24px; appearance: none; background: none; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-sunken); }
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px; margin-top: -7px;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  background: var(--color-action);
  box-shadow: var(--shadow-xs);
}
.slider::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-sunken); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: var(--radius-full); background: var(--color-action); box-shadow: var(--shadow-xs); }
.slider:focus-visible { outline: var(--border-accent) solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--radius-full); }

/* Upload — inspection evidence, bulk import */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
}
.upload:hover { border-color: var(--color-brand); color: var(--color-brand); }
.upload .icon { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------------
   TABLES
   Numeric and date columns use the mono face so they align and read as data.
   --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table caption {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border-bottom: var(--border-thin) solid var(--color-border);
}
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border-bottom: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--color-surface-subtle); }
.table .is-numeric { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); }

/* Tree — sites and sub-locations */
.tree { display: flex; flex-direction: column; }
.tree__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.tree__item:hover { background: var(--color-surface-subtle); }
.tree__item--nested { padding-inline-start: calc(var(--space-3) + var(--space-5)); }

/* ---------------------------------------------------------------------------
   TABS
   --------------------------------------------------------------------------- */
.tabs { border-bottom: var(--border-thin) solid var(--color-border); display: flex; gap: var(--space-1); overflow-x: auto; }
.tab {
  position: relative;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-brand); border-bottom-color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.breadcrumb ol, .breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-link); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ---------------------------------------------------------------------------
   PROGRESS + READINESS METER
   Stacked bar, labeled legend, no gradients, no donut charts.
   --------------------------------------------------------------------------- */
.progress {
  height: 8px;
  width: 100%;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__bar { height: 100%; background: var(--color-action); border-radius: inherit; transition: width var(--duration-slow) var(--ease-decelerate); }
.progress__bar--ready { background: var(--color-ready); }
.progress__bar--attention { background: var(--color-attention); }
.progress__bar--critical { background: var(--color-critical); }
.progress--lg { height: 12px; }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-action);
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}

.readiness-meter { display: flex; flex-direction: column; gap: var(--space-3); }
.readiness-meter__bar {
  display: flex;
  height: 14px;
  width: 100%;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  background: var(--color-bg-sunken);
}
.readiness-meter__seg { height: 100%; }
.readiness-meter__seg--ready { background: var(--color-ready); }
.readiness-meter__seg--attention { background: var(--color-attention); }
.readiness-meter__seg--critical { background: var(--color-critical); }
.readiness-meter__seg--offline { background: var(--color-offline); }
.readiness-meter__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); }
.readiness-meter__legend-item { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.readiness-meter__dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: none; }
.readiness-meter__dot--ready { background: var(--color-ready); }
.readiness-meter__dot--attention { background: var(--color-attention); }
.readiness-meter__dot--critical { background: var(--color-critical); }
.readiness-meter__dot--offline { background: var(--color-offline); }
.readiness-meter__count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: var(--font-weight-semibold); }

/* ---------------------------------------------------------------------------
   AED PRODUCT COMPONENTS
   --------------------------------------------------------------------------- */
/* Status card — the core object of the product */
.aed-card { display: flex; flex-direction: column; gap: var(--space-4); }
.aed-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.aed-card__identity { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.aed-card__name { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); }
.aed-card__location { font-size: var(--text-sm); color: var(--color-text-secondary); }
.aed-card__serial { font-size: var(--text-xs); color: var(--color-text-muted); }
.aed-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-border);
}
.aed-fact { display: flex; flex-direction: column; gap: 2px; }
.aed-fact__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.aed-fact__value { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
.aed-fact__value--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Inspection row */
.inspection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) solid var(--color-border);
}
.inspection-row:last-child { border-bottom: none; }
.inspection-row__label { font-weight: var(--font-weight-medium); }

/* ---------------------------------------------------------------------------
   CONTENT — metadata, people, lists, quotes
   --------------------------------------------------------------------------- */
/* Metadata list — labels above values, wraps without breaking the grid */
.meta-list { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.meta-list__item { display: flex; flex-direction: column; gap: 2px; }
.meta-list__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.meta-list__value { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }

/* Avatar — initials, or an image for a person. Never a status. */
.avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  overflow: clip;
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-base); }
.avatar--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.avatar--brand { background: var(--color-brand); color: var(--color-brand-surface-text); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid var(--color-surface); margin-inline-start: -8px; }
.avatar-group .avatar:first-child { margin-inline-start: 0; }

/* Thumbnail — evidence photos, site images */
.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); background: var(--color-bg-sunken); }

/* List — quiet, bordered rows. Use a table when columns matter. */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list__item { padding-block: var(--space-3); border-bottom: var(--border-thin) solid var(--color-border); }
.list__item:last-child { border-bottom: none; }
.list--compact .list__item { padding-block: var(--space-2); }

/* Blockquote — editorial and policy pages only */
.blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-accent) solid var(--color-accent);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Citation — a source under a passage or an assistant answer */
.citation { font-size: var(--text-sm); color: var(--color-text-secondary); }
.citation a { color: var(--color-link); }

.section { padding-block: var(--space-10); }
.divider { border: none; border-top: var(--border-thin) solid var(--color-border); margin: var(--space-5) 0; }

/* ---------------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}
.empty-state__icon {
  width: 48px; height: 48px;
  color: var(--color-text-muted);
}
.empty-state__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.empty-state__body { font-size: var(--text-base); color: var(--color-text-secondary); max-width: 44ch; }

/* ---------------------------------------------------------------------------
   SKELETON
   --------------------------------------------------------------------------- */
.skeleton {
  background: var(--color-bg-sunken);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.6s var(--ease-standard) infinite;
}
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.skeleton--text { height: 1em; }
.skeleton--title { height: 1.5em; width: 60%; }
.skeleton--block { height: 96px; width: 100%; }

/* ---------------------------------------------------------------------------
   OVERLAYS — the only surfaces that get shadows
   --------------------------------------------------------------------------- */
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-dropdown);
  background: var(--slate-900);
  color: #fff;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.dropdown {
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: left;
  text-decoration: none;
}
.dropdown__item:hover { background: var(--color-surface-subtle); }
.dropdown__item--danger { color: var(--color-critical-text); }
.dropdown__separator { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }

.popover {
  min-width: 260px;
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Sheet — mobile filter and action stacks that rise from the bottom */
.sheet {
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  background: var(--color-surface-raised);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sheet__handle { width: 40px; height: 4px; margin: var(--space-3) auto; border-radius: var(--radius-full); background: var(--color-border-strong); }

.hover-card {
  width: min(320px, 90vw);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(12, 15, 22, 0.5);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal__header { padding: var(--space-5); border-bottom: var(--border-thin) solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); }
.modal__body { padding: var(--space-5); }
.modal__footer { padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-3); }

.toast {
  display: flex;
  gap: var(--space-3);
  width: min(400px, 100%);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-left: var(--border-accent) solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.toast--critical { border-left-color: var(--color-critical); }
.toast--ready { border-left-color: var(--color-ready); }

/* ---------------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-border);
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.topbar__brand img { width: 130px; }
.topbar__nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.topbar__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.topbar__link:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.topbar__link[aria-current="page"] { color: var(--color-brand); font-weight: var(--font-weight-semibold); }

.sidenav { display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: var(--space-6); }
.sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-base);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sidenav__link:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.sidenav__link[aria-current="true"], .sidenav__link--active {
  border-left-color: var(--color-accent);
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
  background: var(--color-brand-soft);
}

/* ---------------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--space-1); }
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: var(--space-2);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  text-decoration: none;
}
.pagination__item:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination__item[aria-current="page"] { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); font-weight: var(--font-weight-semibold); }
.pagination__item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Command palette — keyboard-first jump to a device, site, or action */
.command-palette {
  width: min(560px, 100%);
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}
.command-palette__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: none;
  border-bottom: var(--border-thin) solid var(--color-border);
  background: none;
  font-size: var(--text-base);
}
.command-palette__input:focus-visible { outline: none; border-bottom-color: var(--color-brand); }
.command-palette__list { max-height: 320px; overflow-y: auto; padding: var(--space-2); }
.command-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: left;
}
.command-palette__item:hover,
.command-palette__item[aria-selected="true"] { background: var(--color-brand-soft); }

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   A generic shell for marketing, docs, and embedded views. The app kit in
   app/app.css extends this with .app-shell, .app-sidebar, and .app-topbar.
   --------------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.layout__sidebar { background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border); }
.layout__main { display: flex; flex-direction: column; min-inline-size: 0; }
.layout__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding-inline: var(--space-5);
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-border);
}
.layout__content { flex: 1; width: 100%; max-width: var(--container-max); padding: var(--space-6) var(--space-5) var(--space-16); }
.sidenav__section {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   UTILITY
   --------------------------------------------------------------------------- */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px var(--space-2);
  border: var(--border-thin) solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.resize-handle { width: 6px; cursor: col-resize; background: transparent; }
.resize-handle:hover { background: var(--color-brand-soft); }
.scroll-area { overflow: auto; }

/* ---------------------------------------------------------------------------
   DOC / SPEC HELPERS (used by the style guide itself)
   --------------------------------------------------------------------------- */
.spec {
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: clip;
}
.spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-border);
}
.spec__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.spec__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.spec__preview { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.spec__note { padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--color-border); background: var(--color-surface-subtle); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Do / Don't */
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 768px) { .rule-grid { grid-template-columns: 1fr; } }
.rule { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: clip; }
.rule__label { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-weight-bold); }
.rule--do .rule__label { background: var(--color-ready-bg); color: var(--color-ready-text); }
.rule--dont .rule__label { background: var(--color-critical-bg); color: var(--color-critical-text); }
.rule__body { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }