/* DESIGN_SYSTEM sections 2.3 (token sheet), 7 (status badges) and 11 (focus, motion). */
:root {
  --blue-50: 237 244 254;  --blue-100: 218 236 255; --blue-200: 186 213 251;
  --blue-300: 143 186 249; --blue-400: 93 156 248;  --blue-500: 61 143 247;
  --blue-600: 39 129 246;  --blue-700: 29 111 224;  --blue-800: 26 92 192;
  --blue-900: 23 74 153;   --blue-950: 15 57 102;
  --gray-50: 249 249 251;  --gray-100: 240 240 243; --gray-200: 232 232 236;
  --gray-300: 217 217 224; --gray-400: 185 187 198; --gray-500: 139 141 152;
  --gray-600: 96 100 108;  --gray-700: 73 77 85;    --gray-800: 28 32 36;
  --gray-900: 21 23 26;    --gray-950: 16 17 19;
  --neutral-50: 250 250 251;  --neutral-100: 244 245 246; --neutral-200: 237 238 240;
  --neutral-300: 213 216 221; --neutral-400: 176 180 186; --neutral-500: 105 110 119;
  --neutral-600: 67 72 78;    --neutral-700: 54 58 63;    --neutral-800: 33 34 37;
  --neutral-900: 24 25 27;    --neutral-950: 17 17 19;

  --bg: #f7f7f7;            --bg-soft: rgb(var(--gray-100));
  --panel: #ffffff;         --side-bg: #ffffff;
  --ink: rgb(var(--gray-800)); --ink-soft: rgb(var(--gray-600)); --muted: #80838d;
  --rule: #eaeaea;          --rule-soft: rgb(var(--gray-100));
  --accent: rgb(var(--blue-600)); --accent-hover: rgb(var(--blue-700));
  --accent-soft: rgb(var(--blue-50)); --accent-ink: #ffffff;
  --ok: #16a34a;   --ok-soft: #dcfce7;
  --warn: #d97706; --warn-soft: #fef3c7;
  --bad: #dc2626;  --bad-soft: #fee2e2;
  --info: #2f81f6; --info-soft: #dceafd;
  --field-bg: #ffffff; --field-border: rgb(var(--gray-500)); --field-placeholder: rgb(var(--gray-500));

  --side-w: 208px; --settings-rail-w: 230px;
  --radius: 12px; --radius-sm: 8px;
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --ring: 0 0 0 4px var(--accent-soft);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}

html.dark {
  --bg: #1c1d20;  --bg-soft: #26282c;  --panel: #1c1e22;  --side-bg: #111113;
  --ink: #edeef0; --ink-soft: #b0b4ba; --muted: #777b84;
  --rule: #1f1f25; --rule-soft: #232428;
  --accent: #2781f6; --accent-hover: #3d8ff7; --accent-soft: rgba(39,129,246,0.16);
  --ok: #22c55e;   --ok-soft: rgba(34,197,94,0.18);
  --warn: #f59e0b; --warn-soft: rgba(245,158,11,0.18);
  --bad: #ef4444;  --bad-soft: rgba(239,68,68,0.18);
  --info: #4c90f7; --info-soft: rgba(47,129,246,0.20);
  --field-bg: #18191b; --field-border: #2e2d32; --field-placeholder: #696e77;
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -4px rgba(0,0,0,0.5);
  --ring: 0 0 0 4px rgba(59,130,246,0.35);
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
code, .font-mono { font-family: var(--mono); }
main:focus { outline: none; }

.brand-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 32px;
  border-radius: 9px; background: #2781f6; color: #fff; font-weight: 700; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--panel);
  color: var(--ink); border-radius: 0 0 8px 0; box-shadow: var(--shadow-lg); }
.skip-link:focus { left: 0; box-shadow: var(--ring); }

/* Section 7 status badge. Severity words map onto the section 7 tones:
   bad (RED-HARD, RED, hold over 4 weeks, O12), info (DECISION), warn (AMBER, hold up to 4 weeks), neutral (INFO). */
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .2rem .6rem; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-soft); font: 500 .72rem/1.4 var(--sans); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex-shrink: 0; }
.badge.st-unassigned, .badge.st-pending, .badge.st-amber, .badge.st-hold-short { background: var(--warn-soft); color: #92400e; }
.badge.st-upcoming, .badge.st-authorized, .badge.st-assigned, .badge.st-sent, .badge.st-decision { background: var(--info-soft); color: #1e40af; }
.badge.st-completed, .badge.st-charged, .badge.st-captured, .badge.st-paid { background: var(--ok-soft); color: #166534; }
.badge.st-declined, .badge.st-failed, .badge.st-deleted, .badge.st-red, .badge.st-red-hard, .badge.st-hold-long { background: var(--bad-soft); color: #991b1b; }
.badge.st-cancelled, .badge.st-voided, .badge.st-info { background: var(--bg-soft); color: var(--muted); }
.badge.st-updated { background: #e0e7ff; color: #3730a3; }
html.dark .badge { color: #d1d5db; }
html.dark .badge.st-upcoming, html.dark .badge.st-authorized, html.dark .badge.st-assigned, html.dark .badge.st-sent, html.dark .badge.st-decision { color: #93c5fd; }
html.dark .badge.st-completed, html.dark .badge.st-charged, html.dark .badge.st-captured, html.dark .badge.st-paid { color: #86efac; }
html.dark .badge.st-unassigned, html.dark .badge.st-pending, html.dark .badge.st-amber, html.dark .badge.st-hold-short { color: #fcd34d; }
html.dark .badge.st-declined, html.dark .badge.st-failed, html.dark .badge.st-deleted, html.dark .badge.st-red, html.dark .badge.st-red-hard, html.dark .badge.st-hold-long { color: #fca5a5; }
html.dark .badge.st-updated { background: rgba(99,102,241,0.2); color: #c7d2fe; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Narrow screens: a table with class "stack" becomes one card per row, each cell labelled by data-label. */
@media (max-width: 699px) {
  table.stack thead { position: absolute; left: -9999px; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: .75rem 1rem; }
  table.stack td { padding: .25rem 0 !important; text-align: left !important; white-space: normal !important; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
}