/* ══════════════════════════════════════════════════════════════════════════
   Industry design system — tokens and component layer.

   Adopted from the design handoff
   (_wip/vd/design_handoff_downtime_insight_shell/reference/industry-design-system/styles.css),
   which states this file "can be adopted verbatim". Two deliberate changes:

   1. The upstream @import of Google Fonts is replaced by /fonts/industry/fonts.css,
      which is self-hosted — a plant-floor terminal must not render-block on a
      third-party CDN.
   2. Four tokens the 1a design needs that the upstream sheet does not define
      (text-muted, text-faint, track, hairline-soft) plus the single alarm hue,
      are added below under "1a additions".

   The look is retuned HERE, not per page. Never hard-code a hex, font name, or px
   value that a token already carries.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.7px;
  --space-2: 7.5px;
  --space-3: 11.2px;
  --space-4: 15px;
  --space-6: 22.4px;
  --space-8: 29.9px;

  --radius-sm: 2px;
  --radius-md: 4.4px;
  --radius-lg: 7.7px;

  /* Elevation — reserved for true overlays (dropdowns, dialogs). In-page
     surfaces carry no shadow; they are line drawings on the ground. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3.3px 11px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 13.2px 35.2px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* ── 1a additions ────────────────────────────────────────────────────── */

  /* The mono font the upstream system does not carry. All numerals in a data
     context use this with tabular figures — the strongest signal of the look. */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The interface is drawn 10% larger than the handoff's base scale. That factor is baked into
     the px values in this file and in industry-app.css rather than applied with CSS `zoom`.
     `zoom` scales the viewport, which leaves canvas elements measuring a fractional size
     (659 / 1.1 = 599.09...) — Chart.js then resizes on every ResizeObserver pass, never
     converges, and the chart shrinks away to nothing. Scale the tokens, not the viewport. */

  /* Two ad-hoc greys the 1a design uses, both derived from ink. */
  --color-text-muted: #6c7075;   /* secondary/meta text, unit suffixes */
  --color-text-faint: #8b8f93;   /* search icon, de-emphasised meta */
  --color-track: rgba(29, 31, 32, .07);          /* progress-bar track */
  --color-hairline-soft: rgba(29, 31, 32, .09);  /* chart gridlines */

  /* Chart lettering. Ticks were --color-text-faint (#8b8f93) at 9-10px, which is the handoff's
     spec for a large, close-read chart — on the dashboard, where a dozen charts share the width
     of a page and are read at a glance from a few feet away, it was unreadable. These two are a
     step darker than muted and are used for every tick, axis title and in-chart annotation.
     Deliberately separate from --color-text-faint so the search icon and table meta, which are
     meant to recede, are not dragged along. Sizes live in industry-charts.js (IndustryChart.font). */
  --color-chart-tick: #45494d;   /* axis tick labels */
  --color-chart-label: #2f3336;  /* axis titles and chart annotations */

  /* The single alarm hue. Status is otherwise carried by tonal weight on the
     accent ramp (darker = worse) — see --uptime-* below. This amber is the ONE
     exception and is reserved for LIVE state: a line that is down right now, a
     climate reading outside its configured band. Do not use it for historical
     severity, thresholds, or validation errors (those use --color-accent-900).
     Adding a second decorative hue anywhere else breaks the system. */
  --color-alarm: #c2703d;
  --color-alarm-tint: rgba(194, 112, 61, .12);

  /* A second DATA-SERIES hue, for charts that plot two different measures together.
     The handoff specifies a single hue and carries status by tonal weight, which works when a
     chart shows one quantity — but temperature and humidity on one axis pair were genuinely
     indistinguishable in two steps of the same ramp, with no legend to fall back on.
     This is a series colour, NOT a status colour: it never means "good" or "bad", and it is
     deliberately far from --color-alarm so an amber reading still means live alarm and nothing
     else. Do not use it for severity, thresholds, or a third series. */
  --color-series-2: #4e8c7a;

  /* Severity by tonal weight, darker = worse. Replaces the previous
     green ≥85 / amber ≥70 / red <70 coding everywhere except live alarm. */
  --uptime-critical: var(--color-accent-900);  /* < 40% */
  --uptime-poor:     var(--color-accent-700);  /* 40–50% */
  --uptime-fair:     var(--color-accent);      /* 50–75% */
  --uptime-good:     var(--color-accent-400);  /* > 75% */

  /* ── Overview additions (Executive / Production / Operator) ───────────────
     The three tokens the Overview handoff names that the shell did not need.

     NOT-YET-RUN. Every hourly series on the Overview views terminates at the current hour, and
     the rest of the plot area carries this wash with a mono NOT YET RUN label. It exists because
     an empty right-hand half of a chart is indistinguishable from a plant that stopped producing
     — the wash is the difference between "nothing happened" and "it has not happened yet". The
     axis ticks for those hours stay visible underneath it.

     ROW HIGHLIGHT. One tint, two jobs on the same table: the tint a down line carries because it
     floated to the top of the line-health table, and the tint any row carries on hover. They are
     deliberately the same value — a row you are pointing at and a row that wants attention are
     both just "this row", and a second, stronger tint for down lines would be a status colour,
     which this system carries by tonal weight rather than by background. */
  --color-notrun:     rgba(29, 31, 32, .04);   /* wash over hours not yet run */
  --color-notrun-ink: #b0b4b8;                 /* the NOT YET RUN label itself */
  --color-row-hl:     rgba(29, 31, 32, .04);   /* down-line row tint, and row hover */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 12.1px; height: 12.1px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5.5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5.5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

/* ══════════════════════════════════════════════════════════════════════════
   Components
   ══════════════════════════════════════════════════════════════════════════ */

.industry *, .industry *::before, .industry *::after { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
.industry h1 { font-size: 46.2px; }
.industry h2 { font-size: 35.2px; }
.industry h3 { font-size: 27.5px; }
.industry h4 { font-size: 22px; }
.industry h5 { font-size: 17.6px; }
.industry h6 { font-size: 14.3px; letter-spacing: 0.08em; text-transform: uppercase; }

.industry a { color: var(--color-accent); text-underline-offset: 3.3px; }

/* An anchor carrying .btn is a button and must look like one.
   `.industry a` is two classes (0,2,0) and every .btn-* colour rule below is one (0,1,0), so a
   link-button lost its own colour to the link colour — .btn-primary came out accent text on an
   accent fill, near-invisible, and Bootstrap's `a:hover` underlined it on top. These restate each
   variant's colour at a specificity a link cannot outrank; nothing else about the button changes.
   Affects every `<a class="btn">` in the app (Report another, Back, the error pages). */
.industry a.btn { color: var(--color-text); text-decoration: none; }
.industry a.btn:hover { text-decoration: none; }
.industry a.btn-primary, .industry a.btn-primary:hover { color: var(--color-bg); }
.industry a.btn-danger, .industry a.btn-danger:hover { color: #fff; }
.industry a.btn-ghost, .industry a.btn-ghost:hover { color: var(--color-accent); }

.industry :focus { outline: none; }
.industry :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.industry ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — the micro-label pattern: eyebrows, sidebar section headers, card meta — */
.lbl {
  font-family: var(--font-heading); font-weight: 600; font-size: 11.6px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}

/* — every numeral in a data context — */
.mono, .industry .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6.6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15.4px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn svg { display: block; }
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 39.6px; height: 39.6px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
/* Destructive emphasis lives in a confirm dialog's primary button, never in a
   row icon — this is the only place the alarm hue is allowed on a control. */
.btn-danger { background: var(--color-alarm); border-color: var(--color-alarm); color: #fff; }
.btn-danger:hover { background: #a95e31; color: #fff; }

/* — forms — */
.field > label {
  display: block; font-size: 13.2px; margin-bottom: 5.5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 39.6px; padding: 6.6px 11px; font: inherit;
  font-size: 15.4px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  transition: border-color 120ms ease;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 99px; resize: vertical; }
/* The UA's autofill background reintroduces a color the system does not own. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 44px var(--color-surface) inset;
  -webkit-text-fill-color: var(--color-text);
}
.radio { display: inline-flex; align-items: center; gap: 8.8px; cursor: pointer; font-size: 15.4px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 17.6px; height: 17.6px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
/* Square variant — used where the control is a checkbox, not a choice of one. */
.radio.radio-check .dot { border-radius: 0; }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4.4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); }
.seg-opt {
  display: inline-flex; align-items: center; gap: 6.6px;
  padding: 7.7px 13.2px; font-size: 14.3px; cursor: pointer; margin: 0;
  transition: background 120ms ease, color 120ms ease;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
}
.card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18.7px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 14.3px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6.6px; font-size: 12.1px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 12.1px;
  letter-spacing: 0.02em; padding: 3.3px 11px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* Live out-of-band — the alarm hue's one use on a chip. */
.tag-alarm { background: var(--color-alarm-tint); color: #8a4c24; border: 1px solid var(--color-alarm); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 15.4px; }
.table th {
  text-align: left;
  font-family: var(--font-heading); font-weight: 600; font-size: 11.6px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 40%, transparent);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: rgba(29, 31, 32, .04); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 1050;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(528px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px;
}
.dialog-body { font-size: 15.4px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects — square, transparent,
     hairline-bordered. Square corners are the point; do not reintroduce
     rounding on cards, tiles, buttons, inputs, cells, chips or avatars. — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }