/* RackApp prototype · design tokens and base styles
   Layout: a field instrument on a drafting table. The device sits centre, the flow register on the
   left, spec notes on the right. Galvanised-steel neutrals, gentian blue (upright paint) as the only
   accent; green / amber / red are reserved for damage classes and always ship with a shape and a word.
   The one other green is the No defects confirmation toast, which says so in words. */

:root {
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Report body: Barlow in the prototype because Google serves Noto Sans as a variable font that PDF output
     cannot embed; the product embeds static Noto Sans files for Greek and Cyrillic coverage (docs/05). */
  --font-report: "Barlow", "Segoe UI", system-ui, sans-serif;

  --bg: #E7EBF0;
  --app-bg: #EDF1F5;
  --appbar: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --surface-3: #E4E9EF;
  --line: #D2D9E2;
  --line-strong: #9AA7B7;
  --ink: #0E1726;
  --ink-2: #3F4B5E;
  --ink-3: #5D6979;
  --accent: #1A4FB5;
  --accent-strong: #123C8E;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EBFA;
  --accent-line: #B5C8EE;
  --focus: #1A4FB5;
  --scrim: rgba(8, 13, 22, 0.5);
  --shadow-1: 0 1px 2px rgba(14, 23, 38, 0.06), 0 2px 8px rgba(14, 23, 38, 0.06);
  --shadow-2: 0 2px 6px rgba(14, 23, 38, 0.08), 0 18px 44px rgba(14, 23, 38, 0.16);
  --bw: 1px;

  --green: #17713E;
  --green-fill: #1F8A4C;
  --green-soft: #E2F2E7;
  --green-line: #A9D8B9;
  --amber: #8A5300;
  --amber-fill: #E9A013;
  --amber-soft: #FDF0D6;
  --amber-line: #EFCB84;
  --red: #B3261E;
  --red-fill: #D23A2E;
  --red-soft: #FBE4E1;
  --red-line: #EFB1AA;
  --on-amber: #241500;
  --on-status: #FFFFFF;

  --photo-bg: #18212C;
  --annot: #22B8F0;

  --heat-0: #F3F5F8;
  --heat-1: #9EC5F4;
  --heat-2: #5598E7;
  --heat-3: #1C5CAB;
  --heat-ink-dark: #0E1726;
  --heat-ink-light: #FFFFFF;

  --bezel: #0B1018;
  --bezel-edge: #2B3441;

  --paper: #FFFFFF;
  --paper-ink: #111A27;
  --paper-ink-2: #4A5565;
  --paper-line: #D7DDE5;
  --paper-tint: #F2F5F9;
  --paper-accent: #1A4FB5;
  --paper-shadow: 0 1px 3px rgba(14, 23, 38, 0.14), 0 12px 32px rgba(14, 23, 38, 0.14);

  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080C12;
    --app-bg: #0C121A;
    --appbar: #121A24;
    --surface: #121A24;
    --surface-2: #18212D;
    --surface-3: #212C39;
    --line: #283444;
    --line-strong: #4A5A70;
    --ink: #E7EDF5;
    --ink-2: #B4BFCD;
    --ink-3: #8C99AB;
    --accent: #86ABFF;
    --accent-strong: #A9C4FF;
    --accent-ink: #0A1324;
    --accent-soft: #172748;
    --accent-line: #2E4986;
    --focus: #86ABFF;
    --scrim: rgba(0, 0, 0, 0.62);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
    --green: #66D399;
    --green-soft: #0F2A1B;
    --green-line: #22603E;
    --amber: #F4C05C;
    --amber-soft: #33250B;
    --amber-line: #6E4F14;
    --red: #FF8D82;
    --red-soft: #3A1613;
    --red-line: #7C2C24;
    --photo-bg: #0E141C;
    --heat-0: #18212D;
    --heat-1: #184F95;
    --heat-2: #2A78D6;
    --heat-3: #6DA7EC;
    --bezel: #04070B;
    --bezel-edge: #222C38;
    --paper-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #080C12;
  --app-bg: #0C121A;
  --appbar: #121A24;
  --surface: #121A24;
  --surface-2: #18212D;
  --surface-3: #212C39;
  --line: #283444;
  --line-strong: #4A5A70;
  --ink: #E7EDF5;
  --ink-2: #B4BFCD;
  --ink-3: #8C99AB;
  --accent: #86ABFF;
  --accent-strong: #A9C4FF;
  --accent-ink: #0A1324;
  --accent-soft: #172748;
  --accent-line: #2E4986;
  --focus: #86ABFF;
  --scrim: rgba(0, 0, 0, 0.62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
  --green: #66D399;
  --green-soft: #0F2A1B;
  --green-line: #22603E;
  --amber: #F4C05C;
  --amber-soft: #33250B;
  --amber-line: #6E4F14;
  --red: #FF8D82;
  --red-soft: #3A1613;
  --red-line: #7C2C24;
  --photo-bg: #0E141C;
  --heat-0: #18212D;
  --heat-1: #184F95;
  --heat-2: #2A78D6;
  --heat-3: #6DA7EC;
  --bezel: #04070B;
  --bezel-edge: #222C38;
  --paper-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* The app's own theme setting (Settings → Display) overrides the page theme inside the device. */
.ra-app[data-app-theme="light"] {
  --app-bg: #EDF1F5; --appbar: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F5F8; --surface-3: #E4E9EF;
  --line: #D2D9E2; --line-strong: #9AA7B7; --ink: #0E1726; --ink-2: #3F4B5E; --ink-3: #5D6979;
  --accent: #1A4FB5; --accent-strong: #123C8E; --accent-ink: #FFFFFF; --accent-soft: #E3EBFA; --accent-line: #B5C8EE;
  --focus: #1A4FB5; --scrim: rgba(8, 13, 22, 0.5);
  --shadow-1: 0 1px 2px rgba(14, 23, 38, 0.06), 0 2px 8px rgba(14, 23, 38, 0.06);
  --shadow-2: 0 2px 6px rgba(14, 23, 38, 0.08), 0 18px 44px rgba(14, 23, 38, 0.16);
  --green: #17713E; --green-soft: #E2F2E7; --green-line: #A9D8B9;
  --amber: #8A5300; --amber-soft: #FDF0D6; --amber-line: #EFCB84;
  --red: #B3261E; --red-soft: #FBE4E1; --red-line: #EFB1AA;
  --photo-bg: #18212C; --bw: 1px;
  color-scheme: light;
}
.ra-app[data-app-theme="dark"] {
  --app-bg: #0C121A; --appbar: #121A24; --surface: #121A24; --surface-2: #18212D; --surface-3: #212C39;
  --line: #283444; --line-strong: #4A5A70; --ink: #E7EDF5; --ink-2: #B4BFCD; --ink-3: #8C99AB;
  --accent: #86ABFF; --accent-strong: #A9C4FF; --accent-ink: #0A1324; --accent-soft: #172748; --accent-line: #2E4986;
  --focus: #86ABFF; --scrim: rgba(0, 0, 0, 0.62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
  --green: #66D399; --green-soft: #0F2A1B; --green-line: #22603E;
  --amber: #F4C05C; --amber-soft: #33250B; --amber-line: #6E4F14;
  --red: #FF8D82; --red-soft: #3A1613; --red-line: #7C2C24;
  --photo-bg: #0E141C; --bw: 1px;
  color-scheme: dark;
}
.ra-app[data-app-theme="contrast"] {
  --app-bg: #FFFFFF; --appbar: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #EBEBEB;
  --line: #000000; --line-strong: #000000; --ink: #000000; --ink-2: #000000; --ink-3: #1F1F1F;
  --accent: #002E99; --accent-strong: #001D63; --accent-ink: #FFFFFF; --accent-soft: #E6ECFF; --accent-line: #002E99;
  --focus: #000000; --scrim: rgba(0, 0, 0, 0.7);
  --shadow-1: none; --shadow-2: 0 0 0 2px #000000;
  --green: #004A20; --green-soft: #FFFFFF; --green-line: #004A20;
  --amber: #5A3500; --amber-soft: #FFFFFF; --amber-line: #5A3500;
  --red: #7E0000; --red-soft: #FFFFFF; --red-line: #7E0000;
  --photo-bg: #000000; --bw: 2px;
  color-scheme: light;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.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; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* Damage class mark: shape + colour + word, shared by app, portal and report */
.cls { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.cls svg { flex: none; }
.cls--green { color: var(--green); }
.cls--amber { color: var(--amber); }
.cls--red { color: var(--red); }
.cls--none { color: var(--ink-2); }
.cls-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; border: var(--bw) solid transparent; white-space: nowrap; }
.cls-pill--green { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.cls-pill--amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.cls-pill--red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.cls-pill--none { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }