/* infratrack.theme.css — InfraTrack.
 *
 * Style: "a utility control room, not a SaaS dashboard." InfraTrack watches real
 * water-treatment infrastructure — sites, incidents, samples, compliance. The
 * identity is that of an engineering operations console: a deep teal-steel chrome
 * (the colour of treated water and instrument panels) with a single hazard-amber
 * accent reserved for the alert moments — a critical site, an open incident, a
 * failed sample. An engineered sans for headings (IBM Plex Sans reads like a plant
 * label) over Inter for the dense registers, plus IBM Plex Mono for site codes and
 * coordinates.
 *
 * Scoped at :root — class.ui.css derives the whole --ui-* ladder from --hp-* at
 * :root; a body-level override never reaches it (per every theme file in this repo).
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Brand — RICH deep petrol (the colour of pressure-tested pipework), with the
       hazard-amber accent held for alert moments. /designCore 2026-08-01: the old
       21% saturation greyed the ENTIRE derived ladder (owner: "too grey and
       desaturated") — the instrument look comes from shape + density, never from
       draining the colour out. Reference: Tests/design-compare/ref-richer.png. */
    --hp-hue-1: 194;  --hp-sat-1: 58%;  --hp-l-shift-1: -9%;
    --hp-hue-accent: 38;  --hp-sat-accent: 92%;

    /* Shape — engineered, near-square corners (an instrument panel, not a card app);
       quiet REAL depth (0.02 read as flat-grey — panels now lift off the canvas). */
    --hp-corner-scale: 0.35;
    --hp-shadow-intensity: 0.06;

    /* Type — Space Grotesk for headings/brand (technical display face with actual
       character; owner: "even the fonts are dull"), Inter for the dense registers,
       IBM Plex Mono for codes + coordinates. */
    --hp-font-heading: var(--hp-font-stack-grotesk);
    --hp-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --hp-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
    --hp-weight-heading: 700;
    --hp-weight-body:    400;
    --hp-text-scale: 0.95;
}

/* Alert/critical actions wear the hazard-amber accent (raise incident, flag critical)
 * so they read as distinct from routine teal-steel nav. */
.ui-btn-danger, .ui-btn-warning {
    background: hsl(var(--hp-hue-accent), var(--hp-sat-accent), 46%);
    border-color: hsl(var(--hp-hue-accent), var(--hp-sat-accent), 40%);
    color: #1a1200;
}

/* Site codes, coordinates and sample IDs read as instrument data — mono. */
code, pre, .ui-mono { font-family: var(--hp-font-mono); }

/* A hazard-amber hairline under the top bar — the control-room status line. */
.ui-pageframe-nav, .ui-topbar {
    border-bottom: 2px solid hsl(var(--hp-hue-accent), var(--hp-sat-accent), 52%);
}

/* ── P3 dashboard: service-view layout classes (ported .it-* set + the rail) ── */
.it-map { min-height: 66vh; }   /* fills the dash row at 1000px-tall viewports — no white gulf (§4) */
.it-stage-fill { height: 72vh; }
.it-stage-fill > .ui-bind-layout,
.it-stage-fill .ui-chart-calendar,
.it-stage-fill .ui-chart-calendar > .ui-chart-frame { height: 100%; min-height: 0; }
.it-dash-row { align-items: stretch; }
.it-dash-rail { flex: 0 0 232px; min-width: 0; overflow-y: auto; }
.it-rail-facet { margin-bottom: var(--ui-space-2, .5rem); }
.it-rail-row { padding: 2px 0; gap: .5rem; }
.it-rail-count { color: var(--ui-text-muted, #6b7280); font-variant-numeric: tabular-nums; }

/* P3 leg 2 — activity feed */
.it-dash-feed { flex: 0 0 320px; min-width: 0; overflow-y: auto; }
.it-feed-alert, .it-feed-row { padding: 6px 8px 6px 10px; border-left: 3px solid var(--ui-border, #d1d5db); margin-bottom: 4px; }
.it-sev-5, .it-sev-4 { border-left-color: var(--ui-danger-600, #dc2626); }
.it-sev-3 { border-left-color: var(--ui-warning-500, #f59e0b); }
.it-pri-high { border-left-color: var(--ui-danger-600, #dc2626); }
.it-pri-medium { border-left-color: var(--ui-warning-500, #f59e0b); }
.it-pri-low { border-left-color: var(--ui-border, #d1d5db); }

/* Review sweep 2026-07-31 — the last two inline layout styles in Service.Site
   moved here (rule 35): the pH-trend chart host and the map-legend swatch dot
   (its background stays inline — that is chart-DATA colour, not styling). */
.it-chart-ph { height: 160px; }
.it-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--ui-radius-full, 50%); }
/* Incidents reading pane — the edit facet is a narrow fixed column (§4b:
   a form is at most a third; the story column takes the rest). */
.it-edit-col { flex: 0 0 360px; min-width: 0; }

/* P5 — severity pill (replaces the inline-styled span in Service.Incident).
   Tone via tokens; the number stays the message. */
.it-sevpill { display: inline-block; padding: .03rem .45rem; border-radius: var(--ui-radius-full, 999px);
  font-size: var(--ui-text-2xs, .68rem); font-weight: 600;
  color: var(--ui-success-600, #16a34a); background: color-mix(in srgb, currentColor 9%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.it-sevpill.is-high { color: var(--ui-danger-600, #dc2626); }
.it-sevpill.is-mid  { color: var(--ui-warning-600, #d97706); }

/* §2c — the fleet map folds to a context strip once a site is selected;
   deselect restores the full-bleed map. */
.it-map-mini { --ui-map-h: 26vh; }
.it-map-mini .it-map { min-height: 26vh; }

/* Responsive (design-shot gate §4.12) — the fixed-width flex rails are the
   known non-reflow gap: stack them under 640px. Desktop unchanged. */
@media (max-width: 640px) {
  .it-dash-rail, .it-dash-feed, .it-edit-col { flex: 1 1 100%; }
  .it-dash-row { flex-wrap: wrap; }
}

/* ── /designCore pass 2 (owner: "one colour changed — mediocre") — REFERENCE
   PARITY. Every treatment below is read off Tests/design-compare/ref-richer.png
   and carried onto the system classes. Re-skin only: colour, type, hairlines —
   no layout rules (those stay in the compose layer). ── */

/* Chrome — gradient petrol bar; the wordmark is display-face. */
.ui-pageframe-header {
    background: linear-gradient(180deg, hsl(194, 62%, 22%), hsl(194, 66%, 14%));
}
.ui-pageframe-header .ui-pageframe-title {
    font-family: var(--hp-font-heading); font-weight: 700; letter-spacing: .02em;
    font-size: var(--ui-text-xl);
}

/* Frame tabs — quiet cyan at rest, white on amber when active. */
.ui-pageframe-header .ui-tabs-head { color: hsl(194, 42%, 82%); font-weight: 500; }
.ui-pageframe-header .ui-tabs-head:hover { color: #fff; background: hsla(0, 0%, 100%, .08); }
.ui-pageframe-header .ui-tabs-head.ui-active {
    color: #fff; border-bottom-color: hsl(var(--hp-hue-accent), var(--hp-sat-accent), 52%);
    font-family: var(--hp-font-heading); font-weight: 600;
}

/* KPI strip — display numerals over engineered small-cap labels. */
.ui-metric-chip strong {
    font-family: var(--hp-font-heading); font-weight: 700;
    font-size: var(--ui-text-xl); color: hsl(194, 60%, 24%);
}
.ui-metric-chip {
    color: var(--ui-text-muted); font-size: var(--ui-text-2xs);
    text-transform: uppercase; letter-spacing: .05em;
}

/* Section labels (rail facets, feed panes, report panes) — plant-label caps. */
.it-rail-facet .ui-card-title, .it-dash-feed .ui-card-title {
    font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .07em;
    color: hsl(194, 58%, 27%); font-weight: 700;
}

/* Filter chips — petrol-tinted, not grey. */
.ui-chip { background: hsl(194, 45%, 94%); border-color: hsl(194, 28%, 84%); }

/* Rail facet counts — petrol tabular numerals, not muted grey. */
.it-rail-count { color: hsl(194, 58%, 30%); font-weight: 600; }

/* Feed pane headers (ALERTS / OBSERVATIONS / RECOMMENDATIONS) — petrol
   gradient bars with display type. */
.it-dash-feed .ui-accordion-head {
    background: linear-gradient(180deg, hsl(194, 58%, 27%), hsl(194, 62%, 20%));
    color: #fff; font-family: var(--hp-font-heading); font-weight: 600;
    letter-spacing: .05em;
}
.it-dash-feed .ui-accordion-head:hover { color: #fff; background: hsl(194, 58%, 30%); }

/* Display-size text wears the display face (record headers, big values). */
.ui-text-lg, .ui-text-xl, .ui-text-2xl { font-family: var(--hp-font-heading); }

/* §5d — feed rows act (open their record/area): hover marks the affordance. */
.it-feed-alert.ui-clickable:hover, .it-feed-row.ui-clickable:hover { background: var(--ui-bg-muted); }

/* §5d — a SELECTED chip is unmistakable (the shared table-hash tint washed
   out against this theme): solid petrol, white text, on AND off both read. */
.ui-chip.ui-chip-on, .ui-chip-on[data-table-hash] {
    background: hsl(194, 58%, 28%); color: #fff;
    border-color: hsl(194, 60%, 22%); font-weight: 600;
}
.ui-chip.ui-chip-off:hover { border-color: hsl(194, 40%, 55%); }