/* ══════════════════════════════════════════════════════════
   ERNIX 2026 — SCAN · MODEL · SITE
   The site as a drafting machine running at night: ink-dark
   ground, linework in off-white, one laser-cyan signal for
   anything that is captured, measured or live, and a deviation
   ramp (in tolerance → watch → out) used only for data.

   Loads LAST on every page. It swaps the colour tokens the rest
   of the CSS was written with (the names --white / --black are
   kept so nothing else has to change: --white is now the ground,
   --black the ink) and fixes the few literal colours.
   ══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* ground and ink (names kept from the light build) */
  --white:  #0B0D10;   /* drawing ground */
  --black:  #E8EBEE;   /* ink */
  --g50:    #101318;
  --g100:   #151920;
  --g200:   #232831;   /* rules */
  --g300:   #363D48;   /* borders, faint marks */
  --g400:   #8D96A3;   /* 6.6:1 on ground — smallest text grey */
  --g600:   #B3BBC5;   /* body text */

  --on-black-mute:  rgba(11,13,16,0.70);
  --on-black-faint: rgba(11,13,16,0.58);
  --on-black-rule:  rgba(11,13,16,0.12);

  /* signal + deviation ramp (data only) */
  --scan:      #5BE3D2;
  --scan-dim:  rgba(91,227,210,0.18);
  --dev-ok:    #4ADE80;
  --dev-watch: #F2C14E;
  --dev-out:   #FF6B5A;
  --accent-live: var(--dev-ok);

  --font-latin: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --shadow-hair:  0 1px 0 rgba(0,0,0,0.6);
  --shadow-lift:  0 10px 28px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(91,227,210,0.10);
  --shadow-panel: 0 30px 60px -30px rgba(0,0,0,0.9);
}
:where([lang="ar"]) { font-family: var(--font-arabic); }

body { background: var(--white); color: var(--black); }
::selection { background: var(--scan); color: var(--white); }

/* Labels, sheet numbers, readouts: the instrument face */
.section-eyebrow, .sec-sheet, .callout-ref, .sheet-block-head, .detail-key,
.rail-count, .rail-hint, .segment-label, .build-ref, .builds-count, .pl-sheet,
.terminus-chainage, .terminus-key, .layer-code, .prog-year, .stmt-stat-label,
.stmt-tri-key, .gal-head, .lb-pos, .sheet-pos, .sheet-hero-tag, .seg-count, .hud {
  font-family: var(--font-mono);
}

/* Nav: smoked glass over the drawing */
.nav { background: rgba(11,13,16,0.78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-block-end: 1px solid var(--g200); }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(91,227,210,0.10), 0 12px 28px -18px rgba(0,0,0,0.9); }
.nav-links a[aria-current="true"] { color: var(--scan); }

/* Statement: the headline gets a faint scan glow where it is measured */
.stmt-line .dim-term::before, .terminus-head .dim-term::before { border-color: var(--scan); }
.stmt-line .dim-tick, .terminus-head .dim-tick { background: var(--scan); }
.stmt-line .dim-term::after, .terminus-head .dim-term::after { color: var(--scan); font-family: var(--font-mono); }
.stmt-stat-num { color: var(--black); }
.stmt-tri-col:hover .stmt-tri-cue { color: var(--scan); }

/* Long section: linework glows a little when a project is picked up */
.d-axo .sec-col:hover .glyph-layer--arc,
.d-axo .sec-col:focus-visible .glyph-layer--arc { filter: drop-shadow(0 0 6px rgba(91,227,210,0.45)); }
.d-axo .sec-col:hover .glyph-layer--str,
.d-axo .sec-col:focus-visible .glyph-layer--str { filter: drop-shadow(0 0 3px rgba(91,227,210,0.25)); }
.sec-col:hover .sec-name-txt { color: var(--scan); }
.rail-fill { background: var(--scan); box-shadow: 0 0 10px rgba(91,227,210,0.55); }

/* Panels that were "black on white" stay a step darker than the ground */
.detail-canvas, .sched-plate, .layersched-plate { background: #07090B; }

/* Images: photographs sit on the ground; drawings keep their white sheet */
.sheet-hero--drawing, .gal-thumb--drawing, .lb-img--drawing { background: #F5F6F4; }
.gal-thumb { background: var(--g100); }
.gal-thumb:hover { box-shadow: 0 0 0 1px var(--scan), 0 10px 26px -12px rgba(0,0,0,0.9); }
.sheet-hero-tag { background: rgba(11,13,16,0.82); color: var(--black); border: 1px solid var(--g300); box-shadow: none; }
.callout-photo, .sheet-hero { background: var(--g100); }
.lightbox { background: #050607; }

/* Buttons that were black-filled are now ink-filled; keep a cyan focus ring */
:focus-visible { outline-color: var(--scan) !important; }
.terminus-cta:hover, .callout-more:hover { box-shadow: 0 0 0 1px var(--scan), 0 0 22px -4px rgba(91,227,210,0.5); }
.terminus-val--live .footer-avail-dot,
.builds-group--deployed .builds-group-head > span:first-child::before { background: var(--dev-ok); box-shadow: 0 0 8px var(--dev-ok); }
.build-dl--off { border-color: var(--g300); }

/* No-JS project sheet sits on the ground */
.pl-item:target { background: var(--white); }

/* Overlay used by older hero code */
.sec-overlay, .hero-overlay { background: rgba(0,0,0,0.6); }

/* ── Scan reveal: a captured image arrives behind a laser line ── */
@keyframes scanReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scanLine   { from { inset-block-start: 0; opacity: 1; } 92% { opacity: 1; } to { inset-block-start: 100%; opacity: 0; } }
.js .sheet-hero img { animation: scanReveal 1.1s cubic-bezier(0.22,1,0.36,1) both; }
.js .sheet-hero::after {
  content: ''; position: absolute; inset-inline: 0; block-size: 2px; inset-block-start: 0;
  background: var(--scan); box-shadow: 0 0 14px 2px rgba(91,227,210,0.7);
  animation: scanLine 1.1s cubic-bezier(0.22,1,0.36,1) both; pointer-events: none;
}
.sheet-hero { position: relative; }

/* ── The field behind the page (field.js) ─────────────────── */
.field-canvas { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; z-index: 0; pointer-events: none; }
.has-field main, .has-field footer { position: relative; z-index: 1; }
.has-field .terminus { background: transparent; }
.field-label {
  position: fixed; inset-block-end: 14px; inset-inline-start: 16px; z-index: 5; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g400);
  padding: 4px 8px; border: 1px solid var(--g200); border-radius: 3px; background: rgba(11,13,16,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); direction: ltr;
}
.field-label span { color: var(--scan); margin-inline-end: 8px; }
.is-sheet .field-label { opacity: 0; }
@media (max-width: 760px) { .field-label { display: none; } }

/* ── Projects, augmented (holo.js) ───────────────────────── */
.holo-canvas { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; opacity: 0; }
.holo-tag, .holo-beam { position: fixed; inset-block-start: 0; left: 0; z-index: 151; pointer-events: none; opacity: 0; }
.holo-tag {
  inline-size: 240px; padding: 10px 12px 9px; display: grid; gap: 5px;
  border: 1px solid rgba(91,227,210,0.45); border-radius: 3px;
  background: linear-gradient(180deg, rgba(91,227,210,0.10), rgba(11,13,16,0.82));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 24px -8px rgba(91,227,210,0.6), inset 0 0 0 1px rgba(91,227,210,0.06);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--g600); direction: ltr; text-align: left;
}
.holo-tag::before {             /* leader line to the hologram */
  content: ''; position: absolute; inset-block-start: 18px; right: 100%; inline-size: 34px; block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--scan));
}
.holo-tag::after { content: ''; position: absolute; inset-block-start: 15px; right: calc(100% + 32px); inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--scan); box-shadow: 0 0 10px var(--scan); }
.holo-tag.is-left::before { right: auto; left: 100%; background: linear-gradient(270deg, transparent, var(--scan)); }
.holo-tag.is-left::after { right: auto; left: calc(100% + 32px); }
.holo-head { color: var(--black); font-size: 11px; font-weight: 500; line-height: 1.35; padding-block-end: 5px; border-block-end: 1px solid rgba(91,227,210,0.25); }
.holo-head b { color: var(--scan); font-weight: 600; margin-inline-end: 8px; }
.holo-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; line-height: 1.35; }
.holo-tag.is-on .holo-row { animation: holoRow 0.35s cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(0.25s + var(--n) * 70ms); }
.holo-row span { color: var(--scan); opacity: 0.75; text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; padding-block-start: 1px; }
.holo-note { font-size: 9px; color: var(--g400); padding-block-start: 4px; border-block-start: 1px dashed rgba(91,227,210,0.2); }
@keyframes holoRow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.holo-beam { inline-size: 1px; translate: -0.5px 0; background: linear-gradient(180deg, rgba(91,227,210,0.7), rgba(91,227,210,0)); box-shadow: 0 0 8px rgba(91,227,210,0.6); }
.holo-beam::before { content: ''; position: absolute; inset-block-start: 0; left: -14px; inline-size: 29px; block-size: 100%; background: linear-gradient(180deg, rgba(91,227,210,0.10), transparent); clip-path: polygon(0 0, 100% 0, 52% 100%, 48% 100%); }
.is-sheet .holo-canvas, .is-sheet .holo-tag, .is-sheet .holo-beam { display: none; }

/* ── Reticle (fine pointers) ─────────────────────────────── */
.reticle { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
[dir="rtl"] .reticle { left: 0; right: auto; }
.reticle.is-on { opacity: 1; }
.reticle i { position: absolute; inline-size: 7px; block-size: 7px; border: 0 solid var(--scan); }
.reticle i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.reticle i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.reticle i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.reticle b {
  position: absolute; top: calc(100% + 5px); left: 100%; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; color: var(--scan); opacity: 0.8;
}
.reticle.is-lock i { inline-size: 10px; block-size: 10px; filter: drop-shadow(0 0 4px rgba(91,227,210,0.7)); }
.reticle:not(.is-lock) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .reticle { display: none; } }

/* ── Model panel in the project sheet (model.js) ───────────── */
.sheet-model { border-block-start: 1px solid var(--g200); padding: 22px 36px 26px; display: grid; gap: 12px; }
.model-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g400); }
.model-key span { color: var(--scan); margin-inline-start: 6px; }
.model-modes { display: inline-flex; border: 1px solid var(--g300); border-radius: 999px; padding: 2px; }
.model-modes button, .model-replay {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g600); padding: 6px 11px; border-radius: 999px; min-block-size: 30px;
}
.model-modes button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.model-modes button:hover:not([aria-pressed="true"]), .model-replay:hover { color: var(--scan); }
.model-stage {
  position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--g200); border-radius: 4px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(91,227,210,0.06), transparent 65%),
    linear-gradient(to right, rgba(232,235,238,0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(232,235,238,0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    #07090B;
}
.model-stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; cursor: grab; touch-action: pan-y; outline: 0; }
.model-stage canvas:active { cursor: grabbing; }
.model-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--scan); }
.model-hint, .model-read, .model-legend {
  position: absolute; pointer-events: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--g400);
}
.model-hint { inset-block-end: 10px; inset-inline-start: 12px; transition: opacity 0.4s; }
.sheet-model.is-touched .model-hint { opacity: 0; }
.model-read { inset-block-start: 10px; inset-inline-start: 12px; display: flex; gap: 14px; flex-wrap: wrap; direction: ltr; }
.model-read b { color: var(--black); font-weight: 500; font-variant-numeric: tabular-nums; }
.model-legend { inset-block-end: 10px; inset-inline-end: 12px; display: flex; gap: 10px; opacity: 0; transition: opacity 0.4s; }
.sheet-model.is-dev .model-legend { opacity: 1; }
.model-legend span::before { content: ''; display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; margin-inline-end: 5px; }
.model-legend .l-ok::before { background: var(--dev-ok); }
.model-legend .l-w::before  { background: var(--dev-watch); }
.model-legend .l-o::before  { background: var(--dev-out); }
.model-foot { display: flex; align-items: center; gap: 16px; }
.model-cut { flex: 1; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g400); }
.model-cut input { flex: 1; accent-color: var(--scan); min-block-size: 30px; }
.model-replay { border: 1px solid var(--g300); }
.model-src { font-size: 11.5px; line-height: 1.5; color: var(--g400); }
.sheet-model.is-real .model-src::before { content: '● '; color: var(--dev-ok); }
@media (max-width: 760px) {
  .sheet-model { padding: 18px 24px 22px; }
  .model-stage { aspect-ratio: 4 / 3; }
  .model-read span:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .model-hint, .model-legend { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sheet-hero img, .js .sheet-hero::after { animation: none; }
  .js .sheet-hero::after { display: none; }
}

/* ══════════════════════════════════════════════════════════
   GLASS — panels let the field through
   Every solid panel becomes smoked glass with a hairline and AR
   corner brackets, so the point cloud runs under the whole page.
   Grids that drew their rules with a grey gap now draw them with
   borders, so the glass does not turn grey.
   ══════════════════════════════════════════════════════════ */
:root {
  --glass:    rgba(13,16,21,0.42);
  --glass-hi: rgba(18,23,30,0.62);
  --ar:       rgba(91,227,210,0.55);
}
.layersched, .stmt-tri, .terminus-grid { background: transparent; }
.layersched-list, .layersched-view, .stmt-tri-col, .terminus-cell, .sheet-main, .sheet-block, .callout-inner {
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(2px) saturate(1.15); backdrop-filter: blur(2px) saturate(1.15);
}
.layersched-list { border-inline-end: 1px solid var(--g200); }
.stmt-tri-col + .stmt-tri-col { border-inline-start: 1px solid var(--g200); }
.terminus-cell { box-shadow: inset 0 0 0 0.5px var(--g200); }
.detail-canvas, .sched-plate, .layersched-plate { background: rgba(7,9,11,0.30); }
.stmt-tri-col:hover, .prog-row:hover, .layer-row:hover { background-color: rgba(91,227,210,0.05); }
.sheet-main { background-color: rgba(13,16,21,0.55); }        /* reading surface: a touch more solid */

/* AR corner brackets, drawn as background layers (no extra markup) */
.layersched-view, .sheet-block, .callout-inner, .terminus-grid, .stmt-tri, .sheet-model .model-stage, .layersched-list {
  --c: var(--ar); --l: 14px; --t: 1.5px;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size: var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l),
                   var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l);
  transition: --l 0.3s;
}
.sheet-model .model-stage { background-color: rgba(7,9,11,0.35); }
.layersched-view:hover, .sheet-block:hover, .terminus-grid:hover { --c: var(--scan); --l: 22px; }

/* Capability rows: a scan line sweeps the row you are on */
.layer-row { position: relative; overflow: hidden; }
.layer-row::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -30%; inline-size: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(91,227,210,0.10), rgba(91,227,210,0.28) 92%, transparent);
  opacity: 0; transform: translateX(0);
}
.layer-row:hover::after, .layer-row[aria-selected="true"]::after, .layer-row.is-on::after { animation: rowSweep 1.1s cubic-bezier(0.3,0.7,0.2,1) both; }
@keyframes rowSweep { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(440%); } }

/* Projects: columns float on the field, with a ground glow under each */
#projects .sec-col::before {
  content: ''; position: absolute; inset-inline: 8%; inset-block-end: 22%; block-size: 40px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(91,227,210,0.22), transparent 70%);
  opacity: 0; transition: opacity 0.35s;
}
#projects .sec-col { position: relative; }
#projects .sec-col:hover::before, #projects .sec-col:focus-visible::before { opacity: 1; }
.callout-inner { border-inline-start: 1px solid rgba(91,227,210,0.35); box-shadow: -18px 0 40px -30px rgba(91,227,210,0.5); }
.sheet-body { background: transparent; }
.sheet-block { border-inline-start: 1px solid var(--g200); }

@media (prefers-reduced-motion: reduce) {
  .layer-row::after { display: none; }
}

@media print {
  :root { --white: #FFFFFF; --black: #0A0A0A; --g400: #767676; --g600: #5A5A5A; --g200: #E8E8E8; --g300: #D0D0D0; color-scheme: light; }
  .nav { background: #fff; }
}