/* ============================================================
   ds.css — the Empower design system: Console, day and night
   (28 September 2026)
   ------------------------------------------------------------
   The owner picked direction 3, "Console", from the Sidekick mockups and
   asked for a day and a night version. Dense, hairline-ruled panels, a
   monospace line for the numbers (job IDs, step counters, readings, money),
   square-ish corners, one light-blue accent. It reads like a dispatcher's
   screen shrunk to a phone.

   A page opts in by putting class="ds" on <html> and linking this file;
   core.js (Core.Theme) sets data-theme="light" (Day) or "dark" (Night) on
   <html> from the person's choice (Auto follows the phone, Day, Night).

   Only opted-in pages change. The ninety-odd pages not converted yet keep
   their own colours, and never turn dark: a page with white boxes drawn in
   its own code would show light text on white.

   Every colour a converted page uses comes from a token here. Status colours
   come in four parts: the text colour (--ds-good), a soft background
   (--ds-good-bg), its border (--ds-good-line) and text on that background
   (--ds-good-ink). A solid fill with white text uses --ds-bad-fill, which is
   dark enough for white text in both looks. Layer 233 checks the contrast of
   every text-on-background pair here, in both looks.
   ============================================================ */
html.ds{
  color-scheme: light;
  --ds-font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --ds-bg:#E9ECF0; --ds-paper:#FFFFFF; --ds-paper-2:#F3F5F8;
  --ds-bar:#FFFFFF; --ds-on-bar:#12161B; --ds-bar-muted:#5B6672;
  --ds-line:#D5DAE1; --ds-line-strong:#B4BCC7;
  --ds-ink:#12161B; --ds-muted:#5B6672;
  --ds-inverse:#12161B; --ds-on-inverse:#FFFFFF;

  --ds-accent:#1F6FD6; --ds-on-accent:#FFFFFF; --ds-accent-text:#175BB5; --ds-accent-soft:#E3EEFC;
  --ds-feature:#12161B; --ds-on-feature:#FFFFFF; --ds-feature-muted:#B9C0CA;

  --ds-good:#1E7A45; --ds-good-bg:#E1F4E8; --ds-good-line:#B5E0C5; --ds-good-ink:#155C33;
  --ds-warn:#8A5A00; --ds-warn-bg:#FFF1D6; --ds-warn-line:#F0D08A; --ds-warn-ink:#6B4500;
  --ds-bad:#C42B1C;  --ds-bad-bg:#FDE8E6;  --ds-bad-line:#F3B7AD;  --ds-bad-ink:#8E231A; --ds-bad-fill:#C42B1C;
  --ds-info:#1F5FC0; --ds-info-bg:#E3EEFC; --ds-info-line:#BBD3F5;

  --ds-radius:8px; --ds-radius-sm:6px; --ds-pill:999px;
  --ds-shadow: 0 1px 2px rgba(18,22,27,.06);
  --ds-scrim: rgba(18,22,27,.5);
}
html.ds[data-theme="dark"]{
  color-scheme: dark;

  --ds-bg:#1B2027; --ds-paper:#242A32; --ds-paper-2:#2C3540;
  --ds-bar:#12161B; --ds-on-bar:#E6EAEE; --ds-bar-muted:#9AA4AF;
  --ds-line:#2E353E; --ds-line-strong:#3A424C;
  --ds-ink:#E6EAEE; --ds-muted:#9AA4AF;
  --ds-inverse:#E6EAEE; --ds-on-inverse:#12161B;

  --ds-accent:#7CC4FF; --ds-on-accent:#12161B; --ds-accent-text:#7CC4FF; --ds-accent-soft:#1B2C3D;
  --ds-feature:#12161B; --ds-on-feature:#E6EAEE; --ds-feature-muted:#9AA4AF;

  --ds-good:#58D68D; --ds-good-bg:#14301F; --ds-good-line:#2A5A3A; --ds-good-ink:#8FE0B0;
  --ds-warn:#F0A020; --ds-warn-bg:#33240C; --ds-warn-line:#6B4A14; --ds-warn-ink:#F6C97A;
  --ds-bad:#FF7A6E;  --ds-bad-bg:#3A1A17;  --ds-bad-line:#6B2C26;  --ds-bad-ink:#FFB3AA; --ds-bad-fill:#D93636;
  --ds-info:#7CC4FF; --ds-info-bg:#172A3A; --ds-info-line:#2A4A66;

  --ds-shadow: none;
  --ds-scrim: rgba(0,0,0,.62);
}
html.ds, html.ds body{ background:var(--ds-bg); color:var(--ds-ink); }
html.ds body{ font-family:var(--ds-font); }

/* The Look control (Core.Theme.control()): Auto, Day, Night. */
.ds-seg{ display:inline-flex; gap:2px; padding:3px; border-radius:var(--ds-radius); background:var(--ds-paper-2); border:1px solid var(--ds-line); }
.ds-seg button{ min-height:40px; padding:0 16px; border-radius:var(--ds-radius-sm); border:none; background:transparent; color:var(--ds-muted); font:600 14px/1 var(--ds-font); cursor:pointer; }
.ds-seg button[aria-pressed="true"]{ background:var(--ds-accent); color:var(--ds-on-accent); }

/* ============================================================================
   THE APP, AND THE iPAD (28 September 2026, 1.38.59).
   core.js adds html.native inside the iPhone and iPad app (Capacitor). The
   web view starts under the status bar and the shell paints the strip behind
   it to match the look, so the bar needs no top inset of its own; what the
   app does need is room above the home indicator on anything fixed to the
   bottom, which every bar already takes from env(safe-area-inset-bottom).
   A web view has no URL bar to scroll away, so the rubber-band at the page
   edges and the long-press callout on links are turned off: both read as a
   browser, not an app. The iPad rules below are scoped to the app too, so a
   desktop browser sees the site exactly as before.
   ---------------------------------------------------------------------------- */
html.native{ -webkit-text-size-adjust:100%; -webkit-touch-callout:none; overscroll-behavior-y:none; }
html.native body{ overscroll-behavior-y:none; }
html.native input, html.native textarea, html.native [contenteditable]{ -webkit-touch-callout:default; }
html.native a{ -webkit-touch-callout:none; }
/* The iPad has the room; a phone column in the middle of it does not use it.
   The rebuilt pages (Sidekick, the Evaluator) keep their column but widen it
   and their sheets at 740px and up (an iPad mini in portrait is 744).
   The skinned pages set their own .wrap widths (760 to 1240px) and already
   fill an iPad. */
@media (min-width: 740px){
  html.native.ds .app{ max-width:720px; }
  html.native.ds .tabbar{ max-width:720px; }
  html.native.ds .sheet{ max-width:640px; }
}