/* clearGRID theme for Mirage.
   Light/dark follows prefers-color-scheme (as marinus and the sign-in pages do).
   Tokens are the same brand set as the accounts.cleargrid.io login theme.

   Sub-theme: "meters". Mirage reads meters, so its motif is the register of a
   meter: a faint field of odometer digit cells behind the page (the way
   contour lines are marinus's), status colours that read like a ledger
   (paid/ok green, pending amber, overdue/failed red) and tabular numerals for
   IDs, readings and counts.

   Load this before styles.css so every colour in the other stylesheets, which
   refer to these tokens, resolves.

   Every colour in Mirage's templates, stylesheets and scripts comes from these
   tokens (test/ui/test_colour_tokens.py enforces it). 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).
     accent                   brand lime (buttons, selection) with --cg-on-accent.
     surface/border/muted     neutral greys; --cg-card for white backgrounds,
                              --cg-text for body text.
     shadow, backdrop         drop shadows; the dim layer behind modal dialogs.
     series-1..3              data series in charts and map overlays (Chart.js,
                              Leaflet, inline SVG), in this fixed order. Never
                              reuse a status colour for a series. Validated
                              for colour-blind separation on both surfaces.
     scale-low/high           one-hue sequential scale (low to high value), e.g.
                              colouring map points by signal strength. Mix
                              between the ends with color-mix(in oklab, ...).
                              Drawn over map tiles, which stay light in both
                              themes, so it does not change with the theme.
   Canvas and JS-drawn colours read tokens with cgToken() from ui.js.

   Type scale. One set of sizes for the whole interface, in rem against the
   browser's 16px root (test/ui/test_typography.py forbids px and em font
   sizes, keyword weights and stray font families outside this file).
   Mirage is a dense data app, so body text is --fs-base, not 1rem.
     --fs-xs    .75rem   12px  eyebrow labels, chips, badges, fine print.
                               The smallest size text may have.
     --fs-sm    .8125rem 13px  table headers, secondary text, meta lines,
                               small buttons, <small>, h4.
     --fs-base  .875rem  14px  body text, table cells, controls, h3.
     --fs-md    1rem     16px  section headings (h2), card titles.
     --fs-lg    1.25rem  20px  the page title in the header (h1), report
                               titles.
     --fs-xl    1.5rem   24px  big numbers (stat cards), the sign-in title.
   Line heights: --lh-tight 1.2 (headings, controls, single-line labels),
   --lh-snug 1.35 (dense lists, cards), --lh-normal 1.5 (running text).
   Weights are numbers, from Inter's four faces: --fw-regular 400,
   --fw-medium 500, --fw-semibold 600, --fw-bold 700.
   Eyebrows: small uppercase section labels above a group (sidebar headings,
   popover titles, card sections) all use one style, the .eyebrow class, or
   the selector list under "Eyebrow" below for existing component labels.
   Fonts: --cg-font (Inter) for all UI text; --cg-font-mono (code, kbd,
   .mono) for code, serials and file names. Nothing else sets font-family. */

@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"); }

: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);

  /* Text */
  --cg-text: #2E2E2E;
  --cg-muted: #5C5C5C;
  --cg-link: #5A6100;
  --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-ink: #2E2E2E;
  --cg-on-ink: #FFFFFF;

  /* Ledger status colours: text, soft background, solid fill */
  --cg-ok: #1B6E2E;
  --cg-ok-soft: #E3F3E7;
  --cg-ok-solid: #2E7D32;
  --cg-warn: #8A5300;
  --cg-warn-soft: #FFF0CC;
  --cg-warn-solid: #F2B84B;
  --cg-on-warn: #2E2E2E;
  --cg-bad: #B3261E;
  --cg-bad-soft: #FCE4E2;
  --cg-bad-solid: #C62828;
  --cg-info: #0B5C8A;
  --cg-info-soft: #E1F0F9;
  --cg-neutral-solid: #5C5C5C;
  --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;

  /* Meter-register motif */
  --cg-motif: rgba(46, 46, 46, .05);
  --cg-logo: url("../img/cleargrid-logo.svg");

  --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;
}

@media (prefers-color-scheme: dark) {
  :root {
    --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-text: #F2F2F2;
    --cg-muted: #A9ABAD;
    --cg-link: #C6D600;
    --cg-link-hover: #F2F2F2;

    --cg-focus-ring: #C6D600;

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

    --cg-ok: #6FD08A;
    --cg-ok-soft: #12301C;
    --cg-warn: #F2B84B;
    --cg-warn-soft: #3A2A08;
    --cg-bad: #FF8A80;
    --cg-bad-soft: #3F1514;
    --cg-info: #7CC4EC;
    --cg-info-soft: #0F2C3D;
    --cg-neutral-solid: #6B6E72;

    --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");
  }
}

/* ---- Base ---- */
html { background: var(--cg-bg); }

body {
  font-family: var(--cg-font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  background-color: transparent;
  color: var(--cg-text);
}

/* ---- Type: base elements ---- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
/* h1 is the page title; in the shell it sits in the header
   (.header-title h1 in styles.css). */
h1 { font-size: var(--fs-lg); }
h2 { font-size: var(--fs-md); }
h3 { font-size: var(--fs-base); }
h4, h5, h6 { font-size: var(--fs-sm); }
small { font-size: var(--fs-sm); }
label { font-weight: var(--fw-medium); }
/* Tables inherit --fs-base for cells; header cells are styled with their
   table (table th in styles.css, .data-table in components.css). */
button, input, select, textarea { font-size: var(--fs-base); }
code, kbd, samp, pre, .mono { font-family: var(--cg-font-mono); }
code, kbd, samp, pre { font-size: var(--fs-sm); }
b, strong { font-weight: var(--fw-bold); }

/* ---- Eyebrow ---- */
/* Small uppercase label above a group. Use .eyebrow on new markup; the
   component labels listed here share it. Components keep their own margins. */
.eyebrow,
.popover__title,
.sidebar-heading,
.stat-card .label,
.route-stat-card__section,
.rw-phase-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cg-muted);
}

/* The meter-register motif: rows of odometer digit cells, behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--cg-motif);
  -webkit-mask: url("../img/meter-register.svg") 0 0 / 420px 210px repeat;
  mask: url("../img/meter-register.svg") 0 0 / 420px 210px repeat;
  pointer-events: none;
}

button, input, select, textarea { font-family: inherit; }
input, select, textarea { background-color: var(--cg-card); color: var(--cg-text); }
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form select,
form textarea { border-color: var(--cg-control-border); }

a { color: var(--cg-link); text-underline-offset: 2px; }
a:hover { color: var(--cg-link-hover); }

/* Meter IDs, serials, readings and counts: digits that line up in columns. */
table, td, th, input, .meta, code, kbd, samp,
[class*="count"], [class*="stat"], [class*="serial"], [class*="progress"],
#result {
  font-variant-numeric: tabular-nums;
}
code, kbd, samp, pre { font-family: var(--cg-font-mono); }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--cg-focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--cg-lime); color: var(--cg-charcoal); }

/* ---- Header: logo ---- */
.cg-logo {
  display: inline-block;
  width: 132px;
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--cg-logo) left center / contain no-repeat;
}
.header-nav { gap: .25rem; }
.header-nav a { white-space: nowrap; }
.header-brand { display: inline-flex; align-items: center; }
.header-brand + a { margin-left: 4px; }

/* ---- Ledger status ---- */
.status-ok, .genie-online, .genie-status-online, .genie-task-ok { color: var(--cg-ok); }
.status-warn, .genie-unknown, .genie-degraded, .genie-status-degraded { color: var(--cg-warn); }
.status-bad, .genie-offline, .genie-status-offline, .genie-task-missing { color: var(--cg-bad); }
.status-info { color: var(--cg-info); }
.genie-status-unknown { color: var(--cg-muted); }

.status-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status-chip.status-ok { background: var(--cg-ok-soft); }
.status-chip.status-warn { background: var(--cg-warn-soft); }
.status-chip.status-bad { background: var(--cg-bad-soft); }
.status-chip.status-info { background: var(--cg-info-soft); }

/* ---- Sign-in page ---- */
body.cg-login { min-height: 100vh; }
.cg-login-card {
  width: min(100% - 32px, 26rem);
  margin: 8vh auto 0;
  padding: 28px 32px 24px;
  background: var(--cg-card);
  border: 1px solid var(--cg-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px var(--cg-shadow), 0 12px 40px var(--cg-shadow);
}
.cg-login-logo {
  display: block;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--cg-logo) center / contain no-repeat;
}
.cg-login-card h1 { margin: 0 0 4px; text-align: center; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
.cg-login-sub { margin: 0 0 20px; text-align: center; color: var(--cg-muted); font-size: var(--fs-base); }
.cg-login-card .cg-or {
  margin: 16px 0;
  text-align: center;
  color: var(--cg-muted);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cg-login-card .cg-error { color: var(--cg-bad); margin-bottom: 12px; font-size: var(--fs-base); }
.cg-login-card .btn { padding-block: .65rem; }

/* ---- Phones ---- */
@media (max-width: 600px) {
  /* The API index lists label, path and description side by side: stack them. */
  .api-item { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .api-item > * { flex: none; max-width: 100%; overflow-wrap: anywhere; }
  .api-link { width: auto; }
  .cg-logo { width: 104px; margin-right: 6px; }
  .cg-login-card { padding: 24px 20px 20px; margin-top: 4vh; }
}