/* ---- fonts.css ---- */
/* @cleargrid/theme: Inter, self-hosted (SIL Open Font License, fonts/OFL.txt).
   The four faces the type scale uses (--fw-regular .. --fw-bold). */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---- tokens.css ---- */
/* @cleargrid/theme: design tokens.

   The single source of the clearGRID brand tokens (Mirage, Tarnished Lamp,
   the accounts.cleargrid.io login theme). Every colour a consumer draws comes
   from a --cg-* custom property here; pick by meaning, not hue:

     ok / warn / bad / info   state: success, pending, failure, information.
                              Text colour on its own, -soft as a tinted
                              background with the matching text colour, -solid
                              as a fill with --cg-on-solid (--cg-on-warn on
                              warn), -border as the outline of a -soft box.
     neutral, teal            the same set for a neutral state and a teal hue.
     accent                   brand lime (buttons, selection) with
                              --cg-on-accent.
     bg/card/surface/border   neutral greys: --cg-bg is the page, --cg-card
                              white boxes, --cg-surface and --cg-surface-2
                              greyer panels; --cg-text for body text.
     ink / on-ink             the header band and table heads. The header band
                              uses --cg-env / --cg-on-env, which env.css
                              recolours outside production.
     shadow, backdrop         drop shadows; the dim layer behind modals.
     series-1..3              data series in charts and map overlays, in this
                              fixed order. Never reuse a status colour.
     scale-low/high           one-hue sequential scale; mix between the ends
                              with color-mix(in oklab, ...). Drawn over map
                              tiles, which stay light, so it does not change
                              with the scheme.
   Extensions (app specific, same naming style): offline, status-0..3 and
   on-status, lamp-*, toast-* and on-toast, map-*, atc-*, row-*,
   tiles-*-filter, hover, link-rgb.

   Type scale: rem against the browser's 16px root. --fs-xs 12px (the
   smallest text), --fs-sm 13px, --fs-base 14px (body text in dense apps),
   --fs-md 16px, --fs-lg 20px, --fs-xl 24px. Line heights --lh-tight 1.2,
   --lh-snug 1.35, --lh-normal 1.5. Weights are Inter's four faces.

   Light and dark: prefers-color-scheme by default; data-cg-scheme="light" or
   "dark" on <html> (set by env.js setScheme()) overrides it. The dark values
   appear twice, for the attribute and for the media query; the build fails
   if the two blocks differ, so edit both.

   Contrast: WCAG AA in both schemes (test/contrast.test.js). */

:root {
  color-scheme: light dark;

  /* Brand */
  --cg-lime: #C6D600;
  --cg-lime-hover: #D3E04A;
  --cg-charcoal: #2E2E2E;

  /* Surfaces */
  --cg-bg: #FAFAFA;
  --cg-card: #FFFFFF;
  --cg-surface: #F2F2F2;
  --cg-surface-2: #E8E8E8;
  --cg-border: #D6D6D6;
  --cg-control-border: #8A8A8A;
  --cg-shadow: rgba(46, 46, 46, .12);
  --cg-hover: rgba(46, 46, 46, .06);

  /* Text */
  --cg-text: #2E2E2E;
  --cg-muted: #5C5C5C;
  --cg-link: #5A6100;
  --cg-link-rgb: 90, 97, 0;
  --cg-link-hover: #2E2E2E;

  /* Accent (buttons, selection): lime with charcoal text */
  --cg-accent: var(--cg-lime);
  --cg-accent-hover: var(--cg-lime-hover);
  --cg-on-accent: #2E2E2E;
  --cg-focus-ring: #2E2E2E;

  /* Header band and table heads; --cg-env is the header band (env.css) */
  --cg-ink: #2E2E2E;
  --cg-on-ink: #FFFFFF;
  --cg-env: var(--cg-ink);
  --cg-on-env: var(--cg-on-ink);

  /* Status colours: text, soft background, border, solid fill */
  --cg-ok: #1B6E2E;
  --cg-ok-soft: #E3F3E7;
  --cg-ok-border: #C3E6CB;
  --cg-ok-solid: #2E7D32;
  --cg-warn: #8A5300;
  --cg-warn-soft: #FFF0CC;
  --cg-warn-border: #FFEEBA;
  --cg-warn-solid: #F2B84B;
  --cg-on-warn: #2E2E2E;
  --cg-bad: #B3261E;
  --cg-bad-soft: #FCE4E2;
  --cg-bad-border: #F5C6CB;
  --cg-bad-solid: #C62828;
  --cg-info: #0B5C8A;
  --cg-info-soft: #E1F0F9;
  --cg-info-border: #BBDEFB;
  --cg-info-solid: #0B5CAD;
  --cg-neutral: #4D4D4D;
  --cg-neutral-soft: #E3E3E3;
  --cg-neutral-border: #BFBFBF;
  --cg-neutral-solid: #5C5C5C;
  --cg-teal: #00695C;
  --cg-teal-soft: #E0F2F1;
  --cg-teal-border: #B2DFDB;
  --cg-on-solid: #FFFFFF;

  /* Modal backdrop */
  --cg-backdrop: rgba(46, 46, 46, .45);

  /* Data series and sequential scale (charts, map overlays) */
  --cg-series-1: #2A78D6;
  --cg-series-2: #EB6834;
  --cg-series-3: #1BAF7A;
  --cg-scale-low: #86B6EF;
  --cg-scale-high: #0D366B;

  /* Background motif (grid lines, meter register) and logo */
  --cg-motif: rgba(46, 46, 46, .05);
  --cg-logo: url("../img/cleargrid-logo.svg");

  /* Extension: offline (things that are not reporting) */
  --cg-offline: var(--cg-muted);

  /* Extension: status filter buttons (0 error, 1 ok, 2 info, 3 unknown) */
  --cg-status-0: var(--cg-bad-solid);
  --cg-status-1: var(--cg-ok-solid);
  --cg-status-2: var(--cg-info-solid);
  --cg-status-3: var(--cg-neutral-solid);
  --cg-on-status: var(--cg-on-solid);

  /* Extension: status lamp dots (outlined in --cg-muted), both schemes */
  --cg-lamp-ok: #43A047;
  --cg-lamp-warn: #FFB300;
  --cg-lamp-bad: #E53935;
  --cg-lamp-unknown: #9E9E9E;

  /* Extension: toasts, solid fills the same in both schemes: white text,
     except warn, which is the light amber fill with dark text */
  --cg-toast-ok: var(--cg-ok-solid);
  --cg-toast-warn: var(--cg-warn-solid);
  --cg-toast-bad: var(--cg-bad-solid);
  --cg-toast-info: var(--cg-info-solid);
  --cg-on-toast: #FFFFFF;
  --cg-on-toast-warn: var(--cg-on-warn);

  /* Extension: maps. Chrome (controls, popups) and the empty map */
  --cg-map-bg: #DDDDDD;
  --cg-map-control: var(--cg-card);
  --cg-on-map-control: var(--cg-text);
  --cg-map-halo: rgba(255, 255, 255, .85);
  /* Air-traffic overlay: trend line, leader line and data block border */
  --cg-atc-trend: #0B3D91;
  --cg-atc-leader: #1F6FB5;
  /* Right-of-way vector layers, in row-inspection's colours: red pipeline,
     green right of way, blue capture area. Drawn over imagery, they are
     pure hues rather than AA colours: pipeline and right of way are under
     3:1 on light surfaces (the contrast test lists them), so keep them off
     light UI and give lines a --cg-map-halo where they cross busy tiles. */
  --cg-row-pipeline: #FF0000;
  --cg-row-right-of-way: #00FF00;
  --cg-row-capture-area: #0000FF;
  /* Raster base layers per kind: nothing is filtered in light mode */
  --cg-tiles-street-filter: none;
  --cg-tiles-vnc-filter: none;
  --cg-tiles-sectional-filter: none;
  --cg-tiles-satellite-filter: none;
  --cg-tiles-row-imagery-filter: none;

  /* Fonts (fonts.css loads Inter) */
  --cg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cg-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (see the header comment) */
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

:root[data-cg-scheme="light"] {
  color-scheme: light;
}

/* Dark: chosen explicitly */
:root[data-cg-scheme="dark"] {
  color-scheme: dark;

  --cg-bg: #0D0E0F;
  --cg-card: #1C1D1E;
  --cg-surface: #232425;
  --cg-surface-2: #2E3032;
  --cg-border: #46484A;
  --cg-control-border: #8D9094;
  --cg-shadow: rgba(0, 0, 0, .55);
  --cg-hover: rgba(255, 255, 255, .06);

  --cg-text: #F2F2F2;
  --cg-muted: #A9ABAD;
  --cg-link: #C6D600;
  --cg-link-rgb: 198, 214, 0;
  --cg-link-hover: #F2F2F2;

  --cg-focus-ring: #C6D600;

  --cg-ink: #2E3032;
  --cg-on-ink: #F2F2F2;

  --cg-ok: #6FD08A;
  --cg-ok-soft: #12301C;
  --cg-ok-border: #2F5A35;
  --cg-warn: #F2B84B;
  --cg-warn-soft: #3A2A08;
  --cg-warn-border: #6B5518;
  --cg-bad: #FF8A80;
  --cg-bad-soft: #3F1514;
  --cg-bad-border: #7A3236;
  --cg-info: #7CC4EC;
  --cg-info-soft: #0F2C3D;
  --cg-info-border: #2F5A8A;
  --cg-neutral: #D0D0D0;
  --cg-neutral-soft: #3A3B3C;
  --cg-neutral-border: #55575A;
  --cg-neutral-solid: #6B6E72;
  --cg-teal: #80CBC4;
  --cg-teal-soft: #173A36;
  --cg-teal-border: #2A5F58;

  --cg-backdrop: rgba(0, 0, 0, .6);

  --cg-series-1: #3987E5;
  --cg-series-2: #D95926;
  --cg-series-3: #199E70;

  --cg-motif: rgba(255, 255, 255, .05);
  --cg-logo: url("../img/cleargrid-logo-rev.svg");

  --cg-status-0: var(--cg-bad);
  --cg-status-1: var(--cg-ok);
  --cg-status-2: var(--cg-info);
  --cg-status-3: var(--cg-muted);
  --cg-on-status: var(--cg-bg);

  --cg-map-bg: #1C1D1E;
  --cg-map-halo: rgba(13, 14, 15, .85);
  --cg-atc-trend: #7FB2FF;
  --cg-atc-leader: #5AA9E6;
  /* Red and green keep row-inspection's hues (4.2:1 and 12.3:1 on the dark
     card); its #0000FF is only 1.96:1 there, so capture area lightens. */
  --cg-row-pipeline: #FF0000;
  --cg-row-right-of-way: #00FF00;
  --cg-row-capture-area: #6EA8FF;
  /* Drawn maps and charts (street, VNC, sectional): inverting and turning the
     hues back gives dark land and light labels and keeps water blue-ish; the
     rest takes the glare off. Photographs (satellite, ROW inspection imagery)
     are never inverted, which would turn them into negatives: they are only
     dimmed a little, keeping their colours. */
  --cg-tiles-street-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
  --cg-tiles-vnc-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
  --cg-tiles-sectional-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
  --cg-tiles-satellite-filter: brightness(.85);
  --cg-tiles-row-imagery-filter: brightness(.85);
}

/* ... or by the system, unless light was chosen. Keep identical to the
   block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-cg-scheme="light"]) {
    color-scheme: dark;

    --cg-bg: #0D0E0F;
    --cg-card: #1C1D1E;
    --cg-surface: #232425;
    --cg-surface-2: #2E3032;
    --cg-border: #46484A;
    --cg-control-border: #8D9094;
    --cg-shadow: rgba(0, 0, 0, .55);
    --cg-hover: rgba(255, 255, 255, .06);

    --cg-text: #F2F2F2;
    --cg-muted: #A9ABAD;
    --cg-link: #C6D600;
    --cg-link-rgb: 198, 214, 0;
    --cg-link-hover: #F2F2F2;

    --cg-focus-ring: #C6D600;

    --cg-ink: #2E3032;
    --cg-on-ink: #F2F2F2;

    --cg-ok: #6FD08A;
    --cg-ok-soft: #12301C;
    --cg-ok-border: #2F5A35;
    --cg-warn: #F2B84B;
    --cg-warn-soft: #3A2A08;
    --cg-warn-border: #6B5518;
    --cg-bad: #FF8A80;
    --cg-bad-soft: #3F1514;
    --cg-bad-border: #7A3236;
    --cg-info: #7CC4EC;
    --cg-info-soft: #0F2C3D;
    --cg-info-border: #2F5A8A;
    --cg-neutral: #D0D0D0;
    --cg-neutral-soft: #3A3B3C;
    --cg-neutral-border: #55575A;
    --cg-neutral-solid: #6B6E72;
    --cg-teal: #80CBC4;
    --cg-teal-soft: #173A36;
    --cg-teal-border: #2A5F58;

    --cg-backdrop: rgba(0, 0, 0, .6);

    --cg-series-1: #3987E5;
    --cg-series-2: #D95926;
    --cg-series-3: #199E70;

    --cg-motif: rgba(255, 255, 255, .05);
    --cg-logo: url("../img/cleargrid-logo-rev.svg");

    --cg-status-0: var(--cg-bad);
    --cg-status-1: var(--cg-ok);
    --cg-status-2: var(--cg-info);
    --cg-status-3: var(--cg-muted);
    --cg-on-status: var(--cg-bg);

    --cg-map-bg: #1C1D1E;
    --cg-map-halo: rgba(13, 14, 15, .85);
    --cg-atc-trend: #7FB2FF;
    --cg-atc-leader: #5AA9E6;
    /* Red and green keep row-inspection's hues (4.2:1 and 12.3:1 on the dark
       card); its #0000FF is only 1.96:1 there, so capture area lightens. */
    --cg-row-pipeline: #FF0000;
    --cg-row-right-of-way: #00FF00;
    --cg-row-capture-area: #6EA8FF;
    /* Drawn maps and charts (street, VNC, sectional): inverting and turning the
       hues back gives dark land and light labels and keeps water blue-ish; the
       rest takes the glare off. Photographs (satellite, ROW inspection imagery)
       are never inverted, which would turn them into negatives: they are only
       dimmed a little, keeping their colours. */
    --cg-tiles-street-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
    --cg-tiles-vnc-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
    --cg-tiles-sectional-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.7);
    --cg-tiles-satellite-filter: brightness(.85);
    --cg-tiles-row-imagery-filter: brightness(.85);
  }
}

/* The logo as a background image; size the element yourself (e.g.
   display: inline-block; width: 132px; height: 28px). The url()s are written
   out here, not taken from var(--cg-logo): a url() inside a custom property
   resolves against the stylesheet that uses the variable, and bundlers
   (Angular/esbuild) neither rewrite nor copy it, so var(--cg-logo) only works
   from this very file. --cg-logo stays for compatibility. The selectors
   follow the scheme rules above; on the header band (.cg-env-band, dark with
   light text in both schemes) it is always the reversed logo. */
.cg-logo {
  background-image: url("../img/cleargrid-logo.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

:root[data-cg-scheme="dark"] .cg-logo {
  background-image: url("../img/cleargrid-logo-rev.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-cg-scheme="light"]) .cg-logo {
    background-image: url("../img/cleargrid-logo-rev.svg");
  }
}

.cg-env-band .cg-logo {
  background-image: url("../img/cleargrid-logo-rev.svg");
}

/* ---- env.css ---- */
/* @cleargrid/theme: environment indicator.

   env.js initEnv() sets data-cg-env and data-cg-channel on <html>. Outside
   production only the header band changes colour (--cg-env, white text
   --cg-on-env) and a text badge says where you are; the brand colours stay.
   Production on the next channel (next.my.cleargrid.io) keeps the charcoal
   band and gets a lime "NEXT · LIVE DATA" badge.

   Paint the header band with background: var(--cg-env); color:
   var(--cg-on-env) (or add the .cg-env-band class). Every band colour carries
   white text at WCAG AA (test/contrast.test.js).

   Also here: the Auto / Light / Dark scheme toggle (.cg-scheme-toggle). */

:root[data-cg-env="staging"] {
  --cg-env: #2E7D32;
  --cg-on-env: #FFFFFF;
}

:root[data-cg-env="demo"] {
  --cg-env: #00796B;
  --cg-on-env: #FFFFFF;
}

:root[data-cg-env="review"] {
  --cg-env: #7B1FA2;
  --cg-on-env: #FFFFFF;
}

:root[data-cg-env="dev"] {
  --cg-env: #1565C0;
  --cg-on-env: #FFFFFF;
}

.cg-env-band {
  background-color: var(--cg-env);
  color: var(--cg-on-env);
}

/* The badge: outlined in the band's text colour outside production ... */
.cg-env-badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--cg-on-env);
  font-family: var(--cg-font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: .06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ... and solid lime on the charcoal band for next. */
:root[data-cg-env="production"][data-cg-channel="next"] .cg-env-badge {
  border-color: var(--cg-accent);
  background-color: var(--cg-accent);
  color: var(--cg-on-accent);
}

/* The scheme toggle: env.js initSchemeToggle(), Django {% cg_scheme_toggle %}.
   A segmented radio group; the chosen option is raised and bold. On a
   surface by default; inside .cg-env-band (or with .cg-scheme-toggle--band)
   it takes the band's colours: outlined in --cg-on-env, the chosen option
   filled with it. The --cg-toggle-* properties can be set to restyle it. */
.cg-scheme-toggle {
  --cg-toggle-bg: var(--cg-surface-2);
  --cg-toggle-fg: var(--cg-muted);
  --cg-toggle-on-bg: var(--cg-card);
  --cg-toggle-on-fg: var(--cg-text);
  --cg-toggle-hover-bg: var(--cg-hover);
  --cg-toggle-hover-fg: var(--cg-text);
  --cg-toggle-ring: var(--cg-focus-ring);
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background-color: var(--cg-toggle-bg);
  font-family: var(--cg-font);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  vertical-align: middle;
}

.cg-env-band .cg-scheme-toggle,
.cg-scheme-toggle.cg-scheme-toggle--band {
  --cg-toggle-bg: transparent;
  --cg-toggle-fg: var(--cg-on-env);
  --cg-toggle-on-bg: var(--cg-on-env);
  --cg-toggle-on-fg: var(--cg-env);
  --cg-toggle-hover-bg: color-mix(in srgb, var(--cg-on-env) 15%, transparent);
  --cg-toggle-hover-fg: var(--cg-on-env);
  --cg-toggle-ring: var(--cg-on-env);
  box-shadow: inset 0 0 0 1px var(--cg-on-env);
}

.cg-scheme-toggle-option {
  appearance: none;
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cg-toggle-fg);
  font: inherit;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}

.cg-scheme-toggle-option:hover {
  background-color: var(--cg-toggle-hover-bg);
  color: var(--cg-toggle-hover-fg);
}

.cg-scheme-toggle-option[aria-checked="true"] {
  background-color: var(--cg-toggle-on-bg);
  color: var(--cg-toggle-on-fg);
  font-weight: var(--fw-bold);
  box-shadow: 0 1px 2px var(--cg-shadow);
}

.cg-scheme-toggle-option:focus-visible {
  outline: 2px solid var(--cg-toggle-ring);
  outline-offset: 1px;
}

@media (forced-colors: active) {
  .cg-scheme-toggle-option[aria-checked="true"] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
}