/* The single declaration point for every design token. styles.css and screens.css only
   reference these; neither declares custom properties of its own. */
:root {
  /* Surfaces and text */
  --canvas: #f3f5f8;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --ink: #172033;
  --muted: #5f6f86;
  /* Alias, not a second border token: one value now drives every separator. */
  --line: var(--console-border);
  --accent: #1769d2;
  --accent-soft: #eaf2ff;
  --danger: #b42318;
  --warning: #8d5d00;

  /* Spacing scale */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* Status badges */
  --status-scheduled-fg: #1557a8;
  --status-scheduled-bg: #eaf3ff;
  --status-progress-fg: #6d28d9;
  --status-progress-bg: #f3e8ff;
  --status-success-fg: #157347;
  --status-success-bg: #e9f7ef;
  --status-warning-fg: #a54808;
  --status-warning-bg: #fff1e6;
  --status-danger-fg: #b42318;
  --status-danger-bg: #fff0ef;
  --status-declined-fg: #be123c;
  --status-declined-bg: #fff1f4;
  --status-neutral-fg: #475569;
  --status-neutral-bg: #f1f5f9;
  --status-info-fg: #1e40af;

  /* Console chrome */
  --console-focus: #005fcc;
  /* Separators, card outlines and table rules. Structural, so a low ratio is fine. */
  --console-border: #cbd5e1;
  /* Control boundaries whose border is the ONLY thing marking the control -- a filter
     tab or select sitting on the same white as its card. WCAG 1.4.11 wants 3:1 there,
     and #64748b gives 4.76:1 on --surface. Do not use it as a separator: at 1px it
     reads as a rule twice as heavy as everything around it. */
  --console-border-strong: #64748b;
}

/* margin-left came from a second .status-badge block in styles.css. That block set padding,
   font-size and font-weight too, but this rule loads later and overrode all three -- so the
   only declaration that ever reached the screen from there was the margin. It lives here now. */
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 24px; margin-left: auto; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 13px; font-weight: 650; line-height: 1.25; white-space: nowrap; }
.status-badge svg { flex: 0 0 auto; }
.status-scheduled { color: var(--status-scheduled-fg); background: var(--status-scheduled-bg); }
.status-progress { color: var(--status-progress-fg); background: var(--status-progress-bg); }
.status-success { color: var(--status-success-fg); background: var(--status-success-bg); }
.status-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.status-danger { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.status-declined { color: var(--status-declined-fg); background: var(--status-declined-bg); }
.status-neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); }

.feedback-banner, .field-message { font-size: 14px; line-height: 1.5; }
.feedback-banner { padding: 0.75rem 1rem; border: 1px solid var(--console-border); border-radius: 0.5rem; }
.feedback-error { color: var(--status-danger-fg); background: var(--status-danger-bg); }
.feedback-success { color: var(--status-success-fg); background: var(--status-success-bg); }
.feedback-info { color: var(--status-neutral-fg); background: var(--status-neutral-bg); }
.field-message { margin: 0.25rem 0 0; color: var(--status-danger-fg); }

.timeline { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.timeline li { display: grid; gap: 0.15rem; padding-left: 1rem; border-left: 2px solid var(--console-border); }
.timeline time { color: var(--status-neutral-fg); font-size: 14px; }
.technical-details { font-size: 14px; }
.technical-details summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }

button, input, select, textarea { min-height: 44px; }
/* The ONLY focus ring. It is deliberately unqualified: an element-restricted list (the
   one styles.css used to carry) silently misses anything given tabindex, and two rules
   meant one element could show a different colour than its neighbour depending on which
   selector won. 3px offset keeps the ring clear of a control's own 1px border. */
:focus-visible { outline: 3px solid var(--console-focus); outline-offset: 3px; }