/* sm-hud.css: the SM HUD theme for frames/sm-proof.html (stage 1, SM-PAGE).
   Everything is scoped under .sm (on <body>) and reads --hud-* tokens, so stage 2 is a token flip.
   Palette from art/sm/palette-sm.json (fixed hex). No shadow, no radius, no gradient fills:
   the only gradients below are hard 1:1 stripes used to draw the corner strokes. */

/* the .sm token block (palette, roles, continuum grounds) lives in css/sm-tokens.css */

html:has(body.sm) { background: #010315; }
/* anchors land with the fixed bar clear of the title; links styled as buttons carry no underline */
.sm [data-section][id], .sm #about { scroll-margin-block-start: 64px; }
.sm a.hud-cta, .sm a.sm-nav-cta { text-decoration: none; }
/* skip link: revealed on focus */
.sm a.sec-sr-only:focus-visible {
  position: fixed; inset-block-start: 56px; inset-inline-start: 16px; inline-size: auto; block-size: auto; overflow: visible; clip: auto; white-space: nowrap; z-index: 101;
  padding: 8px 14px; background: var(--hud-n1); border: 2px solid var(--hud-ifc); color: var(--hud-l3);
  font-family: 'General Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.4; text-decoration: none; outline: none;
}
body.sm { margin: 0; padding-block-start: 48px; background: var(--hud-ground); color: var(--hud-prose); }

/* ── Arabic display face: Pixel AE (CC0), see css/sm-ar.css ──────────────────────────────── */
/* AR sizes and leading: labels 1.35 to 1.4, the title enough that a shadda never touches the line above */
[dir="rtl"] .sm .hud-hl { white-space: nowrap; } /* a whole iḍāfa never breaks across lines */
[dir="rtl"] .sm .pf-caption { max-inline-size: min(740px, calc(100% - var(--ox, 0px) - var(--pl, 72px) - var(--gutter))); }

/* ── Arabic guard: composed, never tracked, never synthesised ─────────────── */
[lang="ar"], [lang="ar"] *, [dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }
.sm, .sm * { font-synthesis: none; }
.sm bdi { unicode-bidi: isolate; }

/* ── Prose, in the normal face ─────────────────────────────────────────────── */
.sm .sec-prose {
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--hud-prose); text-wrap: balance;
}
[dir="rtl"] .sm .sec-prose, .sm [dir="rtl"] .sec-prose, .sm[dir="rtl"] .sec-prose {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 18px; line-height: 1.8;
}
.sm .sec-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sm .tba-inline {
  color: var(--hud-hl); text-decoration: none; padding-block-end: 3px;
  background: repeating-linear-gradient(90deg, var(--hud-hl) 0 6px, transparent 6px 10px) left bottom / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sm .px-dot { display: inline-block; inline-size: 8px; block-size: 8px; background: currentColor; vertical-align: middle; }

/* ── HUD primitives ────────────────────────────────────────────────────────── */
/* hud-frame: transparent interior, only over flat sky at N2 or darker (or on a panel).
   hud-panel: opaque N1 fill (N2 where the band behind it is N2). Both: a 2 css px #064169 frame,
   and #29b1da corners (2 css px, arms 12 css px) drawn on the frame line. */
.sm .hud-frame, .sm .hud-panel {
  position: relative; box-sizing: border-box;
  border: 2px solid var(--hud-frame); border-radius: 0; box-shadow: none;
}
.sm .hud-frame { background: transparent; }
.sm .hud-panel { background: var(--hud-fill); }
.sm .hud-frame::before, .sm .hud-panel::before {
  --b: var(--hud-corner);
  content: ''; position: absolute; inset: -2px; pointer-events: none; /* the border box: the corners sit on the frame line */
  background:
    linear-gradient(var(--b), var(--b)) left top / 12px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left top / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) right top / 12px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right top / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / 2px 12px no-repeat;
}

/* Labels: Unixel, Latin uppercase and tracked in L3, one whole word in C2. Arabic has no caps and no tracking. */
.sm .hud-label { color: var(--hud-label); text-transform: uppercase; letter-spacing: var(--hud-track); margin: 0; }
.sm .hud-hl { color: var(--hud-hl); }
.sm .nobr { white-space: nowrap; }



/* ── Site chrome: top bar and footer ───────────────────────────────────────── */
.sm .sm-nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; box-sizing: border-box;
  block-size: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 16px;
  background: var(--hud-n0); border-block-end: 2px solid var(--hud-frame);
}
/* corner accents on the bar line: the ends of the dim rule, #29b1da, 12 css px arms */
.sm .sm-nav::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 2px; pointer-events: none;
  background:
    linear-gradient(var(--hud-corner), var(--hud-corner)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) right bottom / 12px 2px no-repeat;
}
.sm .nav-home { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.sm .nav-home-icon {
  box-sizing: border-box; inline-size: 24px; block-size: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--hud-n1); border: 2px solid var(--hud-ifc);
}
.sm .nav-home-icon svg { inline-size: 12px; block-size: 12px; }
.sm .nav-ktech-logo { block-size: 20px; inline-size: auto; }
.sm .sm-nav-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sm .sm-nav-toggle, .sm .sm-nav-cta {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-block-size: 36px;
  padding: 4px 12px; border: 2px solid var(--hud-ifc); border-radius: 0; box-shadow: none; cursor: pointer;
  background: var(--hud-n1); color: var(--hud-l3); font-size: 25px; line-height: 25px; white-space: nowrap;
}
.sm .sm-nav-icon { position: relative; inline-size: 36px; padding: 0; }
.sm .sm-nav-icon svg { fill: var(--hud-l3); }
.sm .sm-nav-icon .ico-off { display: none; }
.sm .sm-nav-icon[aria-pressed="true"] .ico-on { display: none; }
.sm .sm-nav-icon[aria-pressed="true"] .ico-off { display: inline; }
.sm .sm-nav .sm-nav-cta { padding: 4px 20px; min-block-size: 36px; background: var(--hud-b2); }
.sm .sm-nav-toggle:focus-visible, .sm .sm-footer-top:focus-visible, .sm .nav-home:focus-visible .nav-home-icon { outline: 2px solid var(--hud-ifc); outline-offset: 3px; }

.sm .cta-demo[hidden] { display: none; }

.sm .sm-footer { background: var(--ground-3); border-block-start: 2px solid var(--hud-frame); position: relative; padding: 0; }
.sm .sm-footer::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: -2px; block-size: 2px; pointer-events: none;
  background:
    linear-gradient(var(--hud-corner), var(--hud-corner)) left top / 12px 2px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) right top / 12px 2px no-repeat;
}
.sm .sm-footer-in { inline-size: min(1296px, calc(100% - 2 * var(--gutter))); margin-inline: auto; padding: 36px 0 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sm .sm-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.sm .sm-footer-link, .sm .sm-footer-top { display: inline-block; box-sizing: border-box; padding: 4px 0; border-block-end: 2px solid var(--hud-ifc); text-decoration: none; }
.sm .sm-footer-link:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 3px; }
.sm .sm-footer-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.sm .sm-footer-contact, .sm .sm-footer-privacy { margin: 0; }
.sm .sm-footer-contact { color: var(--hud-prose); }
.sm .sm-footer-privacy { color: var(--hud-muted); }
.sm .sm-footer-host { margin: 0; color: var(--hud-prose); }
.sm .sm-footer-rights { margin: 0; color: var(--hud-muted); }
.sm .sm-footer-top { display: inline-block; box-sizing: border-box; padding: 4px 0; border-block-end: 2px solid var(--hud-ifc); text-decoration: none; }

/* ── Stages: one dark ground, scene first, content flowing out of it ───────────────────────────────
   Geometry of frames/css/proof.css and sec-how.css, art-locked overlays on the SM fluid plan v2 clamp.
   Physical left/right for anything drawn over the scene (drawn scenes never mirror). */
.sm .pf-stage, .sm #how[data-section] { position: relative; overflow: hidden; background: var(--hud-n0); padding-block: 0; }
.sm .pf-scene-box { position: relative; inline-size: 100%; block-size: 760px; overflow: hidden; background: var(--hud-n0); }
.sm .pf-scene {
  position: absolute; inset-block-start: 0; left: 0; inline-size: 1440px; block-size: 1000px;
  direction: ltr; image-rendering: pixelated;
}
.sm .hw-scene-box { position: relative; inline-size: 100%; block-size: 720px; overflow: hidden; background: var(--hud-n0); }
.sm .hw-scene {
  position: absolute; inset-block-start: 0; left: 0; inline-size: 1440px; block-size: 720px;
  direction: ltr; image-rendering: pixelated;
}
.sm .pf-scene.is-placeholder, .sm .hw-scene.is-placeholder { background: var(--hud-n0); }

/* About caption: the one big line. Sprite-like pixel type, no box. */
.sm .pf-caption { z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sm .pf-caption p, .sm .pf-caption h2 { margin: 0; }
.sm .pf-title { font-size: 62.5px; line-height: 70px; letter-spacing: 2px; text-wrap: balance; }
.sm .pf-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: min(100%, 860px); margin-block-start: 8px; border-block-start: 2px solid var(--hud-frame); }
.sm .pf-cell { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 0 0; }
.sm .pf-cell + .pf-cell { border-inline-start: 2px solid var(--hud-frame); padding-inline-start: 14px; }
.sm .hud-mark { flex: none; inline-size: 8px; block-size: 8px; margin-block-start: 8px; background: var(--hud-hl); }
.sm .pf-cell .hud-label { line-height: 25px; }

.sm .hw-title { margin: 0; font-size: 50px; line-height: 56px; text-wrap: balance; }

/* body text column: calm, single, one reading measure */
.sm .pf-ground, .sm .hw-prom[data-scene="physical"] { position: relative; background: transparent; }
.sm #how[data-section] { background: var(--hud-n1); }
.sm .pf-ground { padding-block: 64px 72px; }
.sm .pf-body-col { margin-inline: auto; max-inline-size: 40ch; padding-block-end: 64px; display: flex; flex-direction: column; gap: 16px; }
.sm .pf-body-col p { margin: 0; }
.sm .pf-body-col .pf-lineage { color: var(--hud-muted); }

/* pillars and stations: equal-height cards standing on the objects' plinths */
.sm .pf-pillar, .sm .hw-station { display: flex; flex-direction: column; }
.sm .pf-card, .sm .hw-card { flex: 1 1 auto; margin-top: 0; padding: 14px 16px 16px; text-align: start; }
.sm .pf-canvas, .sm .hw-canvas { inline-size: 300px; block-size: 300px; image-rendering: pixelated; }
.sm .pf-canvas.is-placeholder, .sm .hw-canvas.is-placeholder { background: var(--hud-n1); outline: 2px solid var(--hud-n3); outline-offset: -2px; }
.sm .pf-card .pf-name, .sm .hw-card .hw-name { margin: 0 0 8px; }
.sm .pf-card .pf-line, .sm .hw-card .hw-line { margin: 0; text-wrap: balance; }
[dir="rtl"] .sm .pf-card, [dir="rtl"] .sm .hw-card { direction: rtl; unicode-bidi: isolate; }
.sm .hw-cta { display: flex; justify-content: center; padding-block: 64px 96px; }

/* ── Art-locked overlays, 768 and up (SM fluid plan v2, "DOM clamp") ───────────────
     left:  max(min(gutter, x) - ox,  x)     right: max(min(gutter, r) - oxr, r)
   plus the stage offset itself, because the holding blocks span the full section width.
   Unconditional: inert when ox >= 0, continuous through 1440, and never closer to the viewport edge than
   the smaller of the gutter and the authored inset. */
@media (min-width: 768px) {
  .sm .pf-stage, .sm #how[data-section] { --ox: var(--stage-ox, 0px); --oxr: var(--stage-ox-r, 0px); }
  .sm .pf-scene, .sm .hw-scene { inline-size: 100%; }
  .sm .pf-caption {
    --x: 72px; --pl: max(calc(min(var(--gutter), var(--x)) - var(--ox)), var(--x));
    position: absolute; inset-block-start: 56px; left: calc(var(--ox) + var(--pl));
    inline-size: fit-content; max-inline-size: min(860px, calc(100% - var(--ox) - var(--pl) - var(--gutter)));
  }
  .sm .pf-pillars, .sm .hw-stations[data-scene="physical"] {
    --x: 218px; --r: 218px;
    position: relative; direction: ltr;
    margin-left:  calc(var(--ox)  + max(calc(min(var(--gutter), var(--x)) - var(--ox)),  var(--x)));
    margin-right: calc(var(--oxr) + max(calc(min(var(--gutter), var(--r)) - var(--oxr)), var(--r)));
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 32px 8px; z-index: 2;
  }
  .sm .hw-stations[data-scene="physical"] { --x: 72px; --r: 72px; padding-block-start: 40px; }
  [dir="rtl"] .sm .pf-pillars, [dir="rtl"] .sm .hw-stations { flex-direction: row-reverse; }
  .sm .pf-pillar, .sm .hw-station { inline-size: 300px; flex: 0 0 300px; }
  .sm .hw-plate[data-scene="physical"] {
    --x: 72px;
    position: absolute; inset-block-start: 48px; z-index: 2; direction: ltr;
    left: calc(var(--ox) + max(calc(min(var(--gutter), var(--x)) - var(--ox)), var(--x)));
  }
}
/* too narrow for the authored rows: the row wraps (pillars 2 + 1 below 1000, stations 2 x 2 below 1340) */
@media (min-width: 768px) and (max-width: 999px) {
  .sm .pf-pillars { max-inline-size: 652px; margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1339px) {
  .sm .hw-stations[data-scene="physical"] { max-inline-size: 632px; margin-inline: auto; }
}

/* ── CTA demo strip ────────────────────────────────────────────────────────── */
.sm .cta-demo { direction: ltr; padding: 64px 72px 72px; background: var(--hud-n0); display: flex; flex-direction: column; gap: 32px; }
.sm .cta-demo-note { margin: 0; color: var(--hud-muted); }
.sm .cta-demo-grid { display: flex; flex-wrap: wrap; gap: 64px; }
.sm .cta-demo-col { display: flex; flex-direction: column; gap: 24px; }
.sm .cta-demo-tag { margin: 0; }
.sm .cta-demo-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.sm .hud-cta {
  position: relative; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 62px;
  padding: 12px 36px; border: 2px solid var(--hud-ifc); border-radius: 0; box-shadow: none;
  font-size: 25px; line-height: 25px; text-align: center;
}
[lang="ar"].hud-cta { line-height: 1.35; }
/* interactive: a full #29b1da frame, never the dim rung */
.sm .hud-cta--a { background: var(--hud-b2); border-color: var(--hud-ifc); color: var(--hud-l3); }
.sm .hud-cta--b { background: var(--hud-teal); border-color: var(--hud-ifc); color: var(--hud-n0); }
/* hover and keyboard focus: one stepped frame outside the ring (fill and corners unchanged, no transition) */
.sm .hud-cta:hover, .sm .hud-cta:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 4px; }

/* ── 390: the scene is a crop; caption, body and cards stack on the one ground ─ */
@media (max-width: 767px) {
  .sm .sm-nav { padding-inline: 12px; }
  .sm .nav-ktech-logo, .sm .sm-nav-cta, .sm .sm-nav-cta-ring { display: none; }
  .sm .sm-footer-in { inline-size: auto; margin-inline: 0; padding: 28px 22px 36px; }

  .sm .pf-scene-box { block-size: 600px; }
  /* the crop is centred on art x 574 (the Kuwait Towers, x 615 to 656) at every phone width, on the 2 px art grid. A fixed left of -940px
     sliced the right tower at 360 wide (visible art 470 to 650); found by tools/phone_scene_check.mjs, 6 Oct. From 584 px wide
     the second term takes over: the art's right edge (x 720) stays on the screen's right edge, so no empty strip shows beside
     the scene on small tablets (the fixed left left one of 100 px at 600 wide and 267 px at 767). */
  .sm .pf-scene { inline-size: 1440px; left: max(calc(50% - 1148px), calc(100% - 1440px)); left: round(up, max(calc(50% - 1148px), calc(100% - 1440px)), 1px); inset-block-start: -120px; }
  .sm .pf-caption { padding: 28px 22px 0; }
  .sm .pf-title { font-size: 37.5px; line-height: 44px; letter-spacing: 0; }
  .sm .pf-readout { grid-template-columns: 1fr; }
  .sm .pf-cell, .sm .pf-cell + .pf-cell { border-inline-start: 0; padding: 12px 0 12px 0; border-block-end: 2px solid var(--hud-frame); }
  .sm .pf-cell:last-child { border-block-end: 0; }
  .sm .pf-ground { padding: 24px 22px 40px; }
  .sm .pf-body-col { padding-block-end: 40px; }
  .sm .pf-pillars { display: flex; flex-direction: column; align-items: center; gap: 36px; }
  .sm .pf-pillar, [dir="rtl"] .sm .pf-pillar[data-pillar] { inline-size: 300px; flex: none; }

  .sm #how[data-section] { overflow: visible; }
  /* the campus is 720 x 360 art px: on a phone the whole atrium is shown at scale 1 (the engine overlay manifest.phone centres it on art x 390) */
  .sm .hw-scene-box { block-size: 360px; }
  .sm .hw-scene-box[data-scene="physical"] .hw-scene { inline-size: 100%; left: 0; inset-block-start: 0; }
  .sm .hw-paper { padding: 28px 22px 0; }
  .sm .hw-plate[data-scene="physical"] { position: relative; }
  .sm .hw-title { font-size: 37.5px; line-height: 44px; }
  .sm .hw-stations { display: flex; padding: 16px 16px 24px; flex-direction: column; align-items: flex-start; gap: 36px; }
  [dir="rtl"] .sm .hw-stations { align-items: flex-end; }
  .sm .hw-station { flex: none; inline-size: 300px; }
  .sm .hw-cta { padding-block: 32px 56px; }

  .sm .cta-demo { padding: 40px 22px 48px; }
  .sm .cta-demo-grid { gap: 40px; }
  .sm .cta-demo-row { gap: 28px; }
}

/* round 4: step 1 is two paragraphs, 8 px apart (the cards stay equal height) */
.sm .hw-card .hw-line + .hw-line { margin-block-start: 8px; }