/* Clearline PWA Kit v2: design tokens and base
   ---------------------------------------------------------------
   One system for every Clearline app, built for reps first: fast to read on a shop floor,
   big targets, numbers you can trust. Navy #101322 and orange #E25127 come from the logo;
   Josefin Sans capitals, the cut corner and the orange fade come from the brochures.

   Rules of thumb
   - Orange is rare: the main action on a screen, the one number that matters, "best"/"prime" markers.
   - Navy carries weight: the hero panel, the selected tab, dark buttons.
   - Semantic colours (good / warn / bad) are separate from orange. Never use orange for an error.
   - Body text is Geist. Josefin Sans capitals only for short labels and hero/report titles.
   - Radii are small and consistent: 12 (panels) / 8 (inner boxes) / 6 (tags, fields).
     The hero and report covers get one cut corner instead, like the brochures.
   - Numbers use tabular figures and tight tracking. Codes and account numbers use Geist Mono.
   - Every colour is a token. Light values on :root; dark values in the blocks below;
     high-contrast overrides after that. Charts use --c1…--c6 in that order.
*/
:root {
  /* brand */
  --navy: #101322;
  --navy-2: #1b1f33;
  --accent: #e25127;           /* Clearline orange: marks, fills, focus */
  --accent-btn: #c94420;       /* orange deep enough for white button text (4.85:1) */
  --accent-ink: #b8401e;       /* orange text on light surfaces */
  --accent-tint: rgba(226, 81, 39, .1);
  --amber: #f6a13a;            /* brochure fade partner */
  --ice: #e9ecf3;              /* brochure "baby blue" page colour: reports and printouts */

  /* surfaces & ink */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;        /* tonal fills: fields, tracks, secondary buttons */
  --ink: #0f1220;
  --ink-2: #3a3f50;
  --muted: #5f6577;            /* 5.3:1 on --bg */
  --hair: rgba(15, 18, 32, .08);
  --line: #e2e5ea;
  --sel: #101322;              /* selected chip */
  --glass: rgba(255, 255, 255, .72);
  --edge: transparent;         /* panel outline: only drawn in high contrast */

  /* meaning */
  --good: #0a7a46;  --good-bg: #e3f5ea;
  --warn: #9a4a00;  --warn-bg: #fff1df;
  --bad: #b42318;   --bad-bg: #fde7e4;
  --info: #2f6fed;
  --offline: #f59e0b;

  /* charts: series colours in order, all ≥3:1 against --surface */
  --c1: #e25127;   /* orange: the series that matters */
  --c2: #101322;   /* navy */
  --c3: #3a4fd8;   /* brochure blue */
  --c4: #12865f;   /* brochure green, deepened */
  --c5: #c47a12;   /* amber, deepened for white backgrounds */
  --c6: #6b7280;   /* slate: "other" */
  --grid: rgba(15, 18, 32, .07);

  /* data-vis neutrals */
  --rail: #b7bec9;
  --fixture: #1a1e2c;

  /* shape, depth, type, motion */
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --cut: 18px;                 /* brochure corner cut */
  --lift: 0 1px 0 var(--hair), 0 18px 40px -24px rgba(16, 19, 34, .28);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Josefin Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.3, .3, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --header-h: 56px;
  --maxw: 860px;
  --side-w: 248px;             /* desktop sidebar */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b10; --surface: #14161f; --surface-2: #1d202c; --ink: #eef0f6; --ink-2: #c5c9d6; --muted: #9298a9;
    --hair: rgba(255, 255, 255, .08); --line: #262a37; --sel: #f0f1f5; --glass: rgba(20, 22, 31, .72);
    --accent-ink: #ff8f6b; --accent-tint: rgba(226, 81, 39, .16); --ice: #161b2b;
    --good: #6fd39b; --good-bg: #10291b; --warn: #f3b25e; --warn-bg: #2f220f; --bad: #ff8a80; --bad-bg: #3a1714; --info: #7aa7ff;
    --c1: #ff7a4d; --c2: #e9ecf3; --c3: #7f8cff; --c4: #3fcf98; --c5: #f6a13a; --c6: #8b93a5; --grid: rgba(255, 255, 255, .07);
    --rail: #5d6575; --fixture: #10131c;
    --lift: 0 1px 0 var(--hair), 0 18px 40px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0b10; --surface: #14161f; --surface-2: #1d202c; --ink: #eef0f6; --ink-2: #c5c9d6; --muted: #9298a9;
  --hair: rgba(255, 255, 255, .08); --line: #262a37; --sel: #f0f1f5; --glass: rgba(20, 22, 31, .72);
  --accent-ink: #ff8f6b; --accent-tint: rgba(226, 81, 39, .16); --ice: #161b2b;
  --good: #6fd39b; --good-bg: #10291b; --warn: #f3b25e; --warn-bg: #2f220f; --bad: #ff8a80; --bad-bg: #3a1714; --info: #7aa7ff;
  --c1: #ff7a4d; --c2: #e9ecf3; --c3: #7f8cff; --c4: #3fcf98; --c5: #f6a13a; --c6: #8b93a5; --grid: rgba(255, 255, 255, .07);
  --rail: #5d6575; --fixture: #10131c;
  --lift: 0 1px 0 var(--hair), 0 18px 40px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* High contrast: for bright forecourts and shop windows. Solid surfaces, real outlines,
   darker secondary text. Settings → Display → High contrast, or app.setContrast('high'). */
@media (prefers-color-scheme: light) {
  :root[data-contrast="high"]:not([data-theme="dark"]) {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #e4e7ee; --ink: #000000; --ink-2: #14171f; --muted: #33384a;
    --hair: rgba(0, 0, 0, .28); --line: #6b7183; --glass: #ffffff; --edge: #14171f; --accent-ink: #9c330f;
    --good: #05582f; --warn: #6e3400; --bad: #8f1a10; --grid: rgba(0, 0, 0, .16); --lift: none;
  }
}
:root[data-contrast="high"][data-theme="light"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #e4e7ee; --ink: #000000; --ink-2: #14171f; --muted: #33384a;
  --hair: rgba(0, 0, 0, .28); --line: #6b7183; --glass: #ffffff; --edge: #14171f; --accent-ink: #9c330f;
  --good: #05582f; --warn: #6e3400; --bad: #8f1a10; --grid: rgba(0, 0, 0, .16); --lift: none;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --bg: #000000; --surface: #000000; --surface-2: #1f2230; --ink: #ffffff; --ink-2: #f0f1f5; --muted: #d3d7e2;
    --hair: rgba(255, 255, 255, .4); --line: #a3a9b8; --glass: #000000; --edge: #f0f1f5; --accent-ink: #ffa585;
    --grid: rgba(255, 255, 255, .22); --lift: none;
  }
}
:root[data-contrast="high"][data-theme="dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #1f2230; --ink: #ffffff; --ink-2: #f0f1f5; --muted: #d3d7e2;
  --hair: rgba(255, 255, 255, .4); --line: #a3a9b8; --glass: #000000; --edge: #f0f1f5; --accent-ink: #ffa585;
  --grid: rgba(255, 255, 255, .22); --lift: none;
}

/* base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15.5px/1.5 var(--font); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain; /* our own pull-to-refresh, not the browser's */
}
img { max-width: 100%; }
a { color: var(--accent-ink); }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; font-weight: 650; letter-spacing: -0.025em; }
h1 { font-size: 22px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; letter-spacing: -0.015em; }
p { margin: 0 0 10px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
/* Brochure capitals: short labels only (eyebrows, section titles, report covers) */
.eyebrow, .caps { font: 700 11.5px/1.2 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-top: 1px; }
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: grid; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.spacer { height: 10px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.scroll-x { overflow-x: auto; }
.boot { padding: 40vh 0; text-align: center; color: var(--muted); }

/* Larger text: Settings → Display → Text size (app.setTextSize). Scales the whole app evenly. */
:root[data-text="large"] #app, :root[data-text="large"] .sheet, :root[data-text="large"] #toasts { zoom: 1.12; }
:root[data-text="xl"] #app, :root[data-text="xl"] .sheet, :root[data-text="xl"] #toasts { zoom: 1.25; }

/* High contrast: outlines instead of shadows, heavier secondary text */
:root[data-contrast="high"] body { font-weight: 450; }
:root[data-contrast="high"] .muted, :root[data-contrast="high"] .s, :root[data-contrast="high"] .small { font-weight: 500; }

/* screen transitions (View Transitions API where supported) */
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
::view-transition-group(morph) { animation-duration: 380ms; animation-timing-function: var(--ease); }
::view-transition-old(morph), ::view-transition-new(morph) { animation-duration: 380ms; height: 100%; object-fit: cover; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none !important; transition: none !important; }
}