/* ============================================================
   Power Plants & Industrial Zones — "single-line diagram".
   Technical-drawing white, grid-paper ground, thin blue schematic rules, drawing-frame borders.
   Namespaced `.sct-in-*`. Loaded only by /sectors/industrial via its extraStyles.

   Contrast note: WCAG relative luminance, computed (not estimated) with a Python script
   (srgb_to_lin / luminance / contrast) against the actual committed image files. Full arithmetic
   is in task-5-report.md. Summary of the pairings that needed a decision:

   - `--in-accent` (#065078) replaces the brief's literal `var(--blue-600)` for the eyebrow on this
     page's light backgrounds. Measured: blue-600 (#0888d1) on the hero frame's composited
     background (rgba(255,255,255,.82) over the grid-paper texture, L≈0.9644) is only 3.72:1, and
     3.85:1 even on flat white — both fail the 4.5:1 minimum for this 12.5px bold text. --in-accent
     measures 8.37–8.65:1 on the same backgrounds and 7.09:1 on the raw (unframed) grid-paper tile
     average — comfortable margin everywhere it's used.
   - `.sct-in-sld` (the single-line diagram) gets a flat, fully opaque `--panel-fill` background
     instead of sitting directly on the tiled grid-paper image. That texture's own darkest sampled
     pixel (a grid-line intersection, rgb(52,82,106), L=0.078) would put `--grey-500` labels
     (L=0.121) at only 1.33:1 against a single such pixel — the lesson this page is built to avoid. On the flat
     `--panel-fill` the same `--grey-500` note labels measure an exact 5.95:1, `--in-ink` labels
     16.34:1, and the `--in-rule` bus/drop lines 14.84:1 (graphic-element 3:1 minimum).
   - The statement band's scrim (`rgba(13,27,62,.9)` → `rgba(5,16,62,.9)` over
     industrial-switchyard-dawn.jpg) was checked against that file's actual brightest pixel
     (rgb(255,255,255), a cloud highlight near the image's optical centre — i.e. the composited
     "center/cover" crop is likely to keep it in frame). Composited worst case: L≈0.0326. The
     heading (#fff) measures 12.71:1, the .86-alpha body copy 9.83:1, and the blue-400 eyebrow
     6.42:1 — all clear 4.5:1 even under this conservative single-pixel assumption.
   ============================================================ */

.sct-in-hero, .sct-in-intro, .sct-in-statement, .sct-in-chain, .sct-in-table {
  --in-ink: #0d1b3e;
  --in-rule: #1a1b60;
  --in-hair: rgba(26, 27, 96, .22);
  --in-paper: #fbfcfe;
  --in-accent: #065078;
}

.sct-in-hero, .sct-in-chain {
  background: var(--in-paper) url('/assets/images/industrial-grid-paper.jpg') top left/240px repeat;
}

/* The drawing frame — a title-block border, the page's signature container. */
.sct-in-frame {
  border: 1px solid var(--in-hair); border-radius: 2px; background: rgba(255, 255, 255, .82);
  padding: clamp(22px, 3vw, 44px); position: relative;
}
.sct-in-frame::before, .sct-in-frame::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--in-rule);
}
.sct-in-frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.sct-in-frame::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.sct-in-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 18px;
}
.sct-in-hero__eyebrow { color: var(--in-accent); }
.sct-in-hero__title {
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.035em;
  color: var(--in-ink); margin: 12px 0 16px;
}
.sct-in-badge {
  display: inline-block; margin-top: 20px; padding: 6px 14px;
  border: 1px solid var(--in-rule); border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--in-rule); font-variant-numeric: tabular-nums;
}
.sct-in-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sct-in-hero__media img { border-radius: 2px; border: 1px solid var(--in-hair); width: 100%; object-fit: cover; }

.sct-in-h {
  font-size: clamp(25px, 2.9vw, 36px); letter-spacing: -.03em; line-height: 1.14;
  color: var(--in-ink); margin: 12px 0 16px;
}
.sct-in-intro { background: #fff; }

/* ---------- statement ---------- */
.sct-in-statement {
  background:
    linear-gradient(180deg, rgba(13, 27, 62, .9) 0%, rgba(5, 16, 62, .9) 100%),
    url('/assets/images/industrial-switchyard-dawn.jpg') center/cover;
  color: rgba(255, 255, 255, .86);
}
.sct-in-statement .sct-eyebrow { color: var(--blue-400); }
.sct-in-statement__h {
  font-size: clamp(27px, 3.4vw, 42px); letter-spacing: -.03em; line-height: 1.12;
  color: #fff; max-width: 24ch; margin-bottom: 18px;
}
.sct-in-statement__body { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.72; max-width: 68ch; }

/* ---------- single-line diagram ---------- */
/* Eyebrow above the diagram carries the same accent-blue fix as the hero (see file header). */
.sct-in-chain .sct-eyebrow { color: var(--in-accent); }
/* Flat `--panel-fill`, not the raw grid-paper tile: see file header for the sampled-pixel
   arithmetic behind this — a texture's darkest pixel under small text is exactly what the "flat
   background" lesson exists to prevent. */
.sct-in-sld {
  display: block; width: 100%; height: auto; margin-top: 26px;
  background: var(--panel-fill); border: 1px solid var(--in-hair); border-radius: 2px;
  padding: 18px 22px;
}
.sct-in-sld__bus { stroke: var(--in-rule); stroke-width: 2; }
.sct-in-sld__drop { stroke: var(--in-rule); stroke-width: 1.4; }
.sct-in-sld__node { fill: #fff; stroke: var(--in-rule); stroke-width: 2.5; }
.sct-in-sld__label {
  font: 700 14px var(--font); fill: var(--in-ink); letter-spacing: .06em; text-transform: uppercase;
}
.sct-in-sld__note { font: 600 13px var(--font); fill: var(--grey-500); }

/* ---------- load table ---------- */
.sct-in-table { background: #fff; }
.sct-in-table__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.sct-in-grid { width: 100%; border-collapse: collapse; margin-top: 24px; }
.sct-in-grid th, .sct-in-grid td {
  text-align: left; padding: 13px 14px; border: 1px solid var(--in-hair); font-size: 15px;
}
.sct-in-grid thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500); background: var(--in-paper);
}
.sct-in-grid tbody th { font-weight: 700; color: var(--in-ink); }
.sct-in-grid tbody td { color: var(--ink-70); }
.sct-in-table__media img { border-radius: 2px; border: 1px solid var(--in-hair); width: 100%; }

.sct-rail__heading, .sct-read__heading, .sct-faq__heading, .sct-rel__heading { color: #0d1b3e; }

@media (max-width: 860px) {
  .sct-in-hero__grid, .sct-in-table__grid { grid-template-columns: 1fr; }
  .sct-in-sld { min-width: 640px; }
  .sct-in-chain .wrap { overflow-x: auto; }
}