/* New Again design system (pipeline item #49).
   The ONE place colour, type, spacing, radius and shadow are declared. Every screen moved
   onto the design system uses these tokens instead of literal colours; tests/design-system.test.js
   enforces that over the migrated stylesheets and that no other stylesheet declares a --ds- token.
   Loaded once, after every legacy stylesheet in index.html, so the .ds- component classes win
   where a screen opts in. Reference: docs/design-system.md. */

:root{
 /* Neutrals */
 --ds-white:#ffffff;--ds-rgb-white:255 255 255;
 --ds-surface:#f6f9fa;--ds-rgb-surface:246 249 250;
 --ds-surface-alt:#eef3f5;--ds-rgb-surface-alt:238 243 245;
 --ds-line:#dce5ea;--ds-rgb-line:220 229 234;
 --ds-line-strong:#c9d6de;--ds-rgb-line-strong:201 214 222;
 --ds-text-muted:#5d6f7a;--ds-rgb-text-muted:93 111 122;
 --ds-text-subtle:#8a969d;--ds-rgb-text-subtle:138 150 157;
 /* Navy ink and the sidebar */
 --ds-ink:#173247;--ds-rgb-ink:23 50 71;
 --ds-ink-strong:#102f4d;--ds-rgb-ink-strong:16 47 77;
 --ds-ink-soft:#39596d;--ds-rgb-ink-soft:57 89 109;
 --ds-overlay:#0a2335;--ds-rgb-overlay:10 35 53;
 --ds-nav-heading:#6f94ab;--ds-rgb-nav-heading:111 148 171;
 --ds-nav-text:#a9c4d5;--ds-rgb-nav-text:169 196 213;
 --ds-nav-icon:#80c2e7;--ds-rgb-nav-icon:128 194 231;
 /* Brand blue, sky and teal */
 --ds-primary:#176ca4;--ds-rgb-primary:23 108 164;
 --ds-primary-bright:#2790c0;--ds-rgb-primary-bright:39 144 192;
 --ds-primary-soft:#e4f2f9;--ds-rgb-primary-soft:228 242 249;
 --ds-accent:#2bbfed;--ds-rgb-accent:43 191 237;
 --ds-teal:#168eb1;--ds-rgb-teal:22 142 177;
 --ds-teal-strong:#137684;--ds-rgb-teal-strong:19 118 132;
 --ds-teal-soft:#dff4f6;--ds-rgb-teal-soft:223 244 246;
 /* Status families: base, strong (text on soft), soft (fills), wash (large backgrounds) */
 --ds-danger:#d52943;--ds-rgb-danger:213 41 67;
 --ds-danger-strong:#a91f35;--ds-rgb-danger-strong:169 31 53;
 --ds-danger-muted:#bf514b;--ds-rgb-danger-muted:191 81 75;
 --ds-danger-soft:#fde5e9;--ds-rgb-danger-soft:253 229 233;
 --ds-danger-wash:#fff7f8;--ds-rgb-danger-wash:255 247 248;
 --ds-warning:#e19a23;--ds-rgb-warning:225 154 35;
 --ds-warning-strong:#8e5c00;--ds-rgb-warning-strong:142 92 0;
 --ds-warning-soft:#fff0cc;--ds-rgb-warning-soft:255 240 204;
 --ds-warning-wash:#fffbf2;--ds-rgb-warning-wash:255 251 242;
 --ds-success:#32a66a;--ds-rgb-success:50 166 106;
 --ds-success-strong:#157442;--ds-rgb-success-strong:21 116 66;
 --ds-success-soft:#def4e7;--ds-rgb-success-soft:222 244 231;
 --ds-success-wash:#f6fcf8;--ds-rgb-success-wash:246 252 248;
 --ds-violet:#7f57c2;--ds-rgb-violet:127 87 194;
 --ds-violet-strong:#68409e;--ds-rgb-violet-strong:104 64 158;
 --ds-violet-soft:#eee5fb;--ds-rgb-violet-soft:238 229 251;
 --ds-violet-wash:#faf7ff;--ds-rgb-violet-wash:250 247 255;
 --ds-orange:#e77825;--ds-rgb-orange:231 120 37;
 --ds-orange-strong:#a34b0d;--ds-rgb-orange-strong:163 75 13;
 --ds-orange-soft:#ffead9;--ds-rgb-orange-soft:255 234 217;
 --ds-orange-wash:#fff8f2;--ds-rgb-orange-wash:255 248 242;
 /* Borders and accents some screens need between the families above */
 --ds-brand-indigo:#222b60;--ds-rgb-brand-indigo:34 43 96;
 --ds-warning-line:#e3c27a;--ds-rgb-warning-line:227 194 122;
 --ds-warning-ink:#7b6437;--ds-rgb-warning-ink:123 100 55;
 --ds-success-line:#8fc2a4;--ds-rgb-success-line:143 194 164;
 --ds-success-deep:#336b52;--ds-rgb-success-deep:51 107 82;
 --ds-danger-line:#e8b2ad;--ds-rgb-danger-line:232 178 173;
 --ds-danger-ink:#714743;--ds-rgb-danger-ink:113 71 67;
 --ds-violet-muted:#776d86;--ds-rgb-violet-muted:119 109 134;
 --ds-mint:#72f1cb;--ds-rgb-mint:114 241 203;
 /* Item #51: shades the screen-by-screen migration needed so no colour moves far (CIE76 nearest) */
 --ds-black:#000000;--ds-rgb-black:0 0 0;
 --ds-link:#2660ab;--ds-rgb-link:38 96 171;
 --ds-sky:#9fd3e8;--ds-rgb-sky:159 211 232;
 --ds-sky-strong:#78cdee;--ds-rgb-sky-strong:120 205 238;
 --ds-green:#45a07a;--ds-rgb-green:69 160 122;
 --ds-forest:#164c3f;--ds-rgb-forest:22 76 63;
 --ds-yellow:#f4d04a;--ds-rgb-yellow:244 208 74;
 --ds-gold:#d8a746;--ds-rgb-gold:216 167 70;
 --ds-amber:#b4760f;--ds-rgb-amber:180 118 15;
 --ds-amber-deep:#6f4b0e;--ds-rgb-amber-deep:111 75 14;
 --ds-brown-deep:#3f321a;--ds-rgb-brown-deep:63 50 26;
 --ds-danger-deep:#943f3c;--ds-rgb-danger-deep:148 63 60;
 --ds-indigo:#183c74;--ds-rgb-indigo:24 60 116;
 --ds-violet-mid:#6959a0;--ds-rgb-violet-mid:105 89 160;
 --ds-cyan:#26a7bd;--ds-rgb-cyan:38 167 189;
 --ds-teal-deep:#136a87;--ds-rgb-teal-deep:19 106 135;

 /* Type */
 --ds-font-body:"DM Sans",system-ui,sans-serif;
 --ds-font-heading:Manrope,"DM Sans",system-ui,sans-serif;
 --ds-text-xs:11px;--ds-text-sm:13px;--ds-text-md:15px;--ds-text-lg:18px;--ds-text-xl:24px;--ds-text-xxl:32px;
 /* Spacing (4px scale) */
 --ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;--ds-space-5:24px;--ds-space-6:32px;--ds-space-7:48px;
 /* Shape and depth */
 --ds-radius-sm:6px;--ds-radius:10px;--ds-radius-lg:14px;--ds-radius-pill:999px;
 --ds-shadow-sm:0 1px 2px rgb(var(--ds-rgb-ink) / .08);
 --ds-shadow:0 6px 20px rgb(var(--ds-rgb-ink) / .10);
 --ds-focus:0 0 0 3px rgb(var(--ds-rgb-accent) / .35);
 /* Layout */
 --ds-touch:44px;
 --ds-content-max:1680px;
}

/* Breakpoints shared by the shell and every polished screen:
   iPad: up to 1180px. Desktop: 1181–1899px. Wall TV: 1900px and wider. */
@media (min-width:1900px){:root{--ds-text-xs:13px;--ds-text-sm:15px;--ds-text-md:18px;--ds-text-lg:22px;--ds-text-xl:30px;--ds-text-xxl:40px;--ds-space-4:20px;--ds-space-5:30px}}

/* Page frame */
.ds-page{display:grid;gap:var(--ds-space-5);max-width:var(--ds-content-max);margin:0 auto;font-family:var(--ds-font-body);color:var(--ds-ink)}
.ds-page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ds-space-4)}
.ds-page-header h1,.ds-page-header h2{margin:0;font:800 var(--ds-text-xl)/1.2 var(--ds-font-heading);color:var(--ds-ink)}
.ds-eyebrow{margin:0 0 var(--ds-space-1);color:var(--ds-primary);font:800 var(--ds-text-xs)/1 var(--ds-font-body);letter-spacing:1.2px;text-transform:uppercase}
.ds-lede{margin:var(--ds-space-1) 0 0;color:var(--ds-text-muted);font-size:var(--ds-text-sm)}

/* Section grid: one column on phones, two on iPad, three on desktop, four on the TV */
.ds-grid{display:grid;gap:var(--ds-space-4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (min-width:1900px){.ds-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Card */
.ds-card{display:grid;align-content:start;gap:var(--ds-space-3);padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-white);box-shadow:var(--ds-shadow-sm)}
.ds-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2)}
.ds-card-head h3{margin:0;font:800 var(--ds-text-md)/1.3 var(--ds-font-heading);color:var(--ds-ink)}
.ds-card-wide{grid-column:1/-1}

/* Stat */
.ds-stat{display:grid;gap:var(--ds-space-1)}
.ds-stat strong{font:800 var(--ds-text-xxl)/1 var(--ds-font-heading);color:var(--ds-ink)}
.ds-stat span{color:var(--ds-text-muted);font-size:var(--ds-text-xs)}

/* Buttons */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);min-height:var(--ds-touch);padding:0 var(--ds-space-4);border:1px solid transparent;border-radius:var(--ds-radius-sm);font:700 var(--ds-text-sm)/1 var(--ds-font-body);cursor:pointer}
.ds-btn:focus-visible{outline:0;box-shadow:var(--ds-focus)}
.ds-btn-primary{background:var(--ds-primary);color:var(--ds-white)}
.ds-btn-primary:hover{background:var(--ds-primary-bright)}
.ds-btn-secondary{border-color:var(--ds-line-strong);background:var(--ds-white);color:var(--ds-ink)}
.ds-btn-secondary:hover{background:var(--ds-surface)}
.ds-btn-danger{background:var(--ds-danger);color:var(--ds-white)}
.ds-btn-link{min-height:0;padding:0;border:0;background:none;color:var(--ds-primary);text-decoration:underline}

/* Table and list */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-text-sm)}
.ds-table th{padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line);color:var(--ds-text-muted);font-size:var(--ds-text-xs);font-weight:800;letter-spacing:.6px;text-align:left;text-transform:uppercase}
.ds-table td{padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-surface-alt);color:var(--ds-ink);vertical-align:top}
.ds-list{display:grid;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}
.ds-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-surface-alt);border-radius:var(--ds-radius-sm);background:var(--ds-surface);font-size:var(--ds-text-sm)}
.ds-list small{display:block;color:var(--ds-text-muted);font-size:var(--ds-text-xs)}

/* Form field */
.ds-field{display:grid;gap:var(--ds-space-1);color:var(--ds-ink-soft);font-size:var(--ds-text-xs);font-weight:700}
.ds-field input,.ds-field select,.ds-field textarea{min-height:var(--ds-touch);padding:0 var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-white);color:var(--ds-ink);font:500 var(--ds-text-sm) var(--ds-font-body)}
.ds-field textarea{padding:var(--ds-space-2) var(--ds-space-3)}
.ds-field :focus-visible{outline:0;box-shadow:var(--ds-focus)}

/* Badge */
.ds-badge{display:inline-flex;align-items:center;gap:var(--ds-space-1);padding:2px var(--ds-space-2);border-radius:var(--ds-radius-pill);background:var(--ds-primary-soft);color:var(--ds-primary);font-size:var(--ds-text-xs);font-weight:800;white-space:nowrap}
.ds-badge-success{background:var(--ds-success-soft);color:var(--ds-success-strong)}
.ds-badge-warning{background:var(--ds-warning-soft);color:var(--ds-warning-strong)}
.ds-badge-danger{background:var(--ds-danger-soft);color:var(--ds-danger-strong)}
.ds-badge-muted{background:var(--ds-surface-alt);color:var(--ds-text-muted)}

/* Modal (for <dialog class="ds-modal">) */
.ds-modal{width:min(560px,calc(100vw - 32px));padding:0;border:0;border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow);color:var(--ds-ink)}
.ds-modal::backdrop{background:rgb(var(--ds-rgb-overlay) / .52)}
.ds-modal-head,.ds-modal-body,.ds-modal-foot{padding:var(--ds-space-4) var(--ds-space-5)}
.ds-modal-head{border-bottom:1px solid var(--ds-line)}
.ds-modal-foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);border-top:1px solid var(--ds-line)}

/* Empty state: says plainly what is missing; never a made-up number */
.ds-empty{display:grid;gap:var(--ds-space-1);padding:var(--ds-space-4);border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.ds-empty strong{color:var(--ds-ink-soft)}

/* Glove mode (pipeline item #52, I9): a technician switch, remembered per device by
   remember-screen.js, that sets data-bms-contrast="high" on the root element. Rule 2 keeps every
   --ds- declaration in this file, so the high-contrast overrides live here: darker secondary text,
   stronger borders, and 56px touch targets instead of 44px. qol-pack.css applies --ds-touch to the
   technician and VHC controls. */
:root[data-bms-contrast="high"]{
 --ds-text-muted:#2f4a5c;--ds-rgb-text-muted:47 74 92;
 --ds-text-subtle:#39596d;--ds-rgb-text-subtle:57 89 109;
 --ds-line:#8a969d;--ds-rgb-line:138 150 157;
 --ds-line-strong:#55707f;--ds-rgb-line-strong:85 112 127;
 --ds-touch:56px;
}

/* Item #51: loading and error states. Every screen shows one of loading, error, empty or content. */
.ds-loading{position:relative;display:grid;gap:var(--ds-space-1);padding:var(--ds-space-4);overflow:hidden;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.ds-loading::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:3px;background:var(--ds-primary-bright);animation:ds-loading-slide 1.2s ease-in-out infinite}
@keyframes ds-loading-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.ds-loading::after{animation:none;width:100%;opacity:.4}}
.ds-error{display:grid;gap:var(--ds-space-2);padding:var(--ds-space-4);border:1px solid var(--ds-danger-line);border-radius:var(--ds-radius-sm);background:var(--ds-danger-wash);color:var(--ds-danger-strong);font-size:var(--ds-text-sm)}
.ds-error strong{color:var(--ds-danger-strong)}
.ds-error .ds-btn{justify-self:start}

/* Item #51: numbers. Money and quantity columns are right-aligned with figures of equal width. */
.ds-num,.ds-table .ds-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Item #51: one visible keyboard focus ring everywhere. :where() keeps specificity at zero so a
   screen can still restyle it; it shows for keyboard focus only, never on a mouse click. */
:where(a,button,input,select,textarea,summary,[tabindex],[contenteditable]):focus-visible{outline:3px solid rgb(var(--ds-rgb-accent) / .7);outline-offset:2px}

/* Item #51: wall-TV scale. The --ds-text-* tokens already grow at 1900px; the shared components
   read them, and .ds-tv (the page class for screens left up on the wall) adds room to breathe. */
.ds-table th,.ds-table td{line-height:1.4}
@media (min-width:1900px){
 .ds-tv{font-size:var(--ds-text-md);line-height:1.45}
 .ds-tv .ds-card{padding:var(--ds-space-5)}
 .ds-tv .ds-table td,.ds-tv .ds-table th{padding:var(--ds-space-3) var(--ds-space-4)}
 .ds-badge{padding:var(--ds-space-1) var(--ds-space-3)}
 /* max() so glove mode's larger --ds-touch (item #52) still wins on a big screen */
 .ds-btn{min-height:max(52px,var(--ds-touch))}
}