/* zacharybhenley.com v16: shared mission kit (HUD vocabulary from skills/ and home/).
   Load after tokens.css and chrome.css. Every class starts with m-. Docs and examples: DESIGN_LANGUAGE.md, "Shared kit".
   Demo of every piece in both themes: shared/kit.html. */

/* the page accent captured at the root, so highlights keep the edition colour inside a .m-scene */
:root { --m-hl: var(--accent); }

/* .m-scene: a dark viewport (space, a canvas) that stays dark in both themes. Mirrors the dark values in tokens.css */
.m-scene {
  --bg: #05070c; --bg-2: #0a0d14; --bg-3: #0f131c;
  --ink: #eef1f6; --ink-2: #b9c0cc; --muted: #8b94a4;
  --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .16);
  --glass: rgba(13, 17, 26, .62); --accent: #9fb7ff; --on-accent: #05070c; --warm: #e9b98c;
  color-scheme: dark; color: var(--ink); --m-hl: #9fb7ff;
}
/* highlights inside a scene use the dark edition accents (tokens.css) in both themes, so they stay legible on the dark viewport */
:root[data-ed="ecom"] .m-scene { --m-hl: #e7c58f; } :root[data-ed="data"] .m-scene { --m-hl: #82d8c4; } :root[data-ed="ops"] .m-scene { --m-hl: #c4a8ff; }

/* ---------- eyebrow chip: STAGE 1 · FOUNDATION ---------- */
.m-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.m-eyebrow > span { padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); }

/* ---------- stage chips: number, label, check + COMPLETE ---------- */
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-2) 55%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink-2); cursor: pointer; font-size: 13px; transition: border-color .35s, color .35s, background-color .35s; }
.m-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.m-chip-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 10.5px/1 var(--mono); transition: all .35s; }
.m-chip-c { display: none; font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.m-chip[data-state="on"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.m-chip[data-state="on"] .m-chip-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.m-chip[data-state="done"] { color: var(--ink); }
.m-chip[data-state="done"] .m-chip-n { border-color: var(--accent); color: var(--accent); font-size: 0; }
.m-chip[data-state="done"] .m-chip-n::before { content: ""; width: 8px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
.m-chip[data-state="done"] .m-chip-c { display: inline; }
.m-chip:focus-visible { outline-color: var(--accent); }

/* ---------- mission-event rail: dots that light in turn (horizontal; .m-rail--v for vertical) ---------- */
.m-rail { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 14px 0 0; list-style: none; }
.m-rail::before { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 1px; background: var(--line-2); }
.m-rail > li { position: relative; flex: 1 1 0; min-width: 0; padding-right: 6px; font: 500 9.5px/1.25 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: color .4s; }
.m-rail > li::before { content: ""; position: absolute; left: 0; top: -15px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--muted) 85%, transparent); transition: all .4s; }
.m-rail > li.done { color: var(--ink-2); }
.m-rail > li.done::before { background: var(--ink-2); border-color: var(--ink-2); }
.m-rail > li.on { color: var(--accent); }
.m-rail > li.on::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.m-rail button { all: unset; cursor: pointer; display: block; border-radius: 4px; }
.m-rail button:hover { color: var(--ink); }
.m-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.m-rail--v { flex-direction: column; justify-content: flex-start; gap: 18px; padding: 2px 0 2px 20px; }
.m-rail--v::before { left: 3px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
.m-rail--v > li { flex: none; padding: 0; font-size: 10.5px; }
.m-rail--v > li::before { left: -20px; top: 2px; }

/* ---------- real-unit ruler: data-dir="v" (needs a height) or "h" (needs a width); built by ruler() ---------- */
.m-ruler { position: relative; --m: 0; pointer-events: none; }
.m-ruler-cap { position: absolute; left: 0; top: -22px; margin: 0; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.m-ruler-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.m-ruler-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--m) * 100%); background: linear-gradient(0deg, color-mix(in srgb, var(--warm) 90%, transparent), var(--accent)); }
.m-ruler-t, .m-ruler-l, .m-ruler-m { position: absolute; left: 0; top: calc((1 - var(--k, var(--m))) * 100%); transform: translateY(-50%); white-space: nowrap; }
.m-ruler-t { display: flex; align-items: baseline; gap: 6px; padding-left: 13px; font: 400 9.5px/1 var(--mono); color: var(--muted); }
.m-ruler-t::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--muted); }
.m-ruler-t b { font-weight: 500; color: var(--ink-2); }
.m-ruler-t span { letter-spacing: .06em; text-transform: uppercase; font-size: 8.5px; }
.m-ruler-t.strong b, .m-ruler-t.strong span { color: var(--accent); }
.m-ruler-t.strong::before { width: 12px; background: var(--accent); }
.m-ruler-l { padding-left: 14px; font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
.m-ruler-m { top: calc((1 - var(--m)) * 100%); left: -5px; display: flex; align-items: center; }
.m-ruler-m i { width: 10px; height: 10px; margin-left: 1px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
.m-ruler[data-dir="h"] { height: 46px; }
.m-ruler[data-dir="h"] .m-ruler-cap { top: -30px; }
.m-ruler[data-dir="h"] .m-ruler-bar { top: 10px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
.m-ruler[data-dir="h"] .m-ruler-fill { top: 0; bottom: 0; right: auto; height: auto; width: calc(var(--m) * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--warm) 90%, transparent), var(--accent)); }
.m-ruler[data-dir="h"] .m-ruler-t, .m-ruler[data-dir="h"] .m-ruler-l, .m-ruler[data-dir="h"] .m-ruler-m { top: 10px; left: calc(var(--k, var(--m)) * 100%); transform: translateX(-50%); }
.m-ruler[data-dir="h"] .m-ruler-t { flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 0; }
.m-ruler[data-dir="h"] .m-ruler-t::before { left: 50%; top: 0; width: 1px; height: 6px; }
.m-ruler[data-dir="h"] .m-ruler-t.strong::before { height: 10px; width: 1px; }
.m-ruler[data-dir="h"] .m-ruler-l { top: -16px; padding: 0; }
.m-ruler[data-dir="h"] .m-ruler-m { left: calc(var(--m) * 100%); top: 11px; transform: translate(-50%, -50%); }
.m-ruler[data-dir="h"] .m-ruler-m i { margin: 0; }

/* ---------- corner readout ---------- */
.m-readout { margin: 0; display: grid; justify-items: end; gap: 6px; text-align: right; }
.m-readout-v { font: 500 20px/1 var(--mono); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-readout-s { font: 500 11px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.m-readout-k { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.m-corner { position: absolute; right: 26px; bottom: 20px; pointer-events: none; }

/* ---------- glass callout + SVG leader that draws in ---------- */
/* Legibility (G2): a mostly solid glass backing, so text passes AA over the brightest scene parts (exhaust, lit Earth, dawn sky).
   Hover or keyboard focus enlarges a card (mission.js lift(): scale 1.07, expo-out 250 ms) and lifts it above its neighbours;
   with callouts() or a page that calls highlight(), the leader line and anchor dot brighten too. */
.m-callout { position: relative; padding: 13px 16px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent) inset, 0 2px 8px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .75); color: var(--ink); z-index: 1; }
:root[data-theme="light"] .m-callout { background: color-mix(in srgb, var(--bg-2) 95%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 8px rgba(15, 20, 30, .08), var(--shadow); }
:root[data-theme="light"] .m-scene .m-callout { background: color-mix(in srgb, var(--bg-2) 92%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent) inset, 0 2px 8px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .75); }
.m-callout, .m-lift { transition: box-shadow .25s var(--ease-out), border-color .3s; }
.m-lifted { z-index: 20; }
@media (hover: hover) and (pointer: fine) {
  .m-callout:not(.m-still):not(.part > .m-callout):hover, .m-lift:hover { border-color: color-mix(in srgb, var(--m-hl) 70%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent) inset, 0 4px 14px rgba(0, 0, 0, .4), 0 30px 54px -22px rgba(0, 0, 0, .85); }
}
.m-callout .m-callout-k { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m-callout .m-callout-t { margin: 5px 0 0; font-size: 17px; font-weight: 500; line-height: 1.28; letter-spacing: -.018em; }
.m-callout .m-callout-tl { margin: 5px 0 0; font: 400 13px/1.45 var(--mono); color: var(--ink-2); }
.m-callout .m-callout-pf { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.m-callout .m-callout-pf b { font-weight: 600; color: var(--ink); }
.m-callout:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* compact: stage cards that sit at fixed offsets from their neighbours (the case-page stages, narrow columns) keep tighter type so a taller card never reaches the next one */
.m-callout--compact, .cs-cards .m-callout { padding: 11px 14px 12px; }
:is(.m-callout--compact, .cs-cards .m-callout) .m-callout-k { font-size: 10px; }
:is(.m-callout--compact, .cs-cards .m-callout) .m-callout-t { font-size: 16px; margin-top: 4px; }
:is(.m-callout--compact, .cs-cards .m-callout) .m-callout-tl { font-size: 12.5px; margin-top: 4px; }
:is(.m-callout--compact, .cs-cards .m-callout) .m-callout-pf { font-size: 13.5px; margin-top: 5px; line-height: 1.45; }
.m-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-leaders path { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1; opacity: .7; transition: stroke-dashoffset .9s var(--ease-out); }
.m-leaders circle { fill: var(--ink); }
.m-leaders circle.rg { fill: none; stroke: var(--ink-2); stroke-width: .8; opacity: .5; }
.m-leaders g.hl path { stroke: var(--m-hl); opacity: 1; stroke-width: 1.8; }
.m-leaders g.hl circle { fill: var(--m-hl); r: 3.4px; }
.m-leaders g.hl circle.rg { fill: none; stroke: var(--m-hl); stroke-width: 1.2; opacity: 1; r: 8px; }
.m-leaders circle { transition: r .25s var(--ease-out); }
.m-leaders.live path { transition: none; }      /* leaders driven every frame (scroll or 3D) */

/* ---------- section backdrops: star dust and fine grid (CSS only) ---------- */
.m-dust, .m-grid { position: relative; isolation: isolate; }
.m-dust::before, .m-dust::after, .m-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m-dust::before { background-image: radial-gradient(1px 1px at 8% 18%, var(--ink-2), transparent), radial-gradient(1px 1px at 27% 66%, var(--ink-2), transparent), radial-gradient(1.3px 1.3px at 46% 12%, var(--ink), transparent), radial-gradient(1px 1px at 63% 48%, var(--muted), transparent), radial-gradient(1px 1px at 79% 83%, var(--ink-2), transparent), radial-gradient(1.2px 1.2px at 91% 29%, var(--ink-2), transparent), radial-gradient(1px 1px at 17% 92%, var(--muted), transparent), radial-gradient(1px 1px at 55% 77%, var(--muted), transparent); background-size: 360px 280px; opacity: .45; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.m-dust::after { background-image: radial-gradient(1.4px 1.4px at 33% 41%, var(--accent), transparent), radial-gradient(1.2px 1.2px at 72% 14%, var(--ink), transparent), radial-gradient(1.2px 1.2px at 88% 62%, var(--accent), transparent); background-size: 620px 460px; opacity: .5; animation: m-twinkle 6s ease-in-out infinite alternate; }
:root[data-theme="light"] .m-dust::before { opacity: .3; }
:root[data-theme="light"] .m-dust::after { opacity: .25; }
@keyframes m-twinkle { from { opacity: .15; } to { opacity: .55; } }
.m-grid::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; -webkit-mask: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 75%); mask: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 75%); opacity: .55; }

/* ---------- pinned scroll: pin() adds .m-pinned on wide screens with motion allowed ---------- */
.m-pinned { position: relative; }
.m-pinned > .m-pin-stage { position: sticky; top: var(--m-pin-top, 74px); height: calc(100vh - var(--m-pin-top, 74px) - 14px); }

/* ---------- closing contact block ---------- */
.m-contact { padding: var(--sec-y) var(--gut); border-top: 1px solid var(--line); }
.m-contact h2:has(+ .m-contact-avail) { margin-bottom: var(--sp2); }
.m-contact h2 { margin: 0 0 var(--sp4); max-width: 20ch; font: 400 var(--t-h2)/1.06 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.m-contact-avail { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp4); max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); font-weight: 300; }
.m-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); flex: none; }
.m-contact-ctas { display: flex; flex-wrap: wrap; gap: var(--sp1); }

@media (prefers-reduced-motion: reduce) {
  .m-dust::after { animation: none; }
  .m-leaders path { transition: none; }
}

/* ---------- scroll cue (G3): a quiet invitation to scroll, bottom centre of the first screen ----------
   Built by chrome.js on every page (label: <body data-cue="Scroll to explore">, target: data-cue-to="#id", opt out: data-no-cue).
   A link to the first section below the fold; fades after the first scroll and returns at the top.
   chrome.js hides it whenever text, a control or a graphic sits under it at the top of the page, so it never covers content
   (art inside a .m-scene or [data-cue-art] does not count; over a scene the cue takes the scene colours). */
.m-scrollcue { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 14px 0; border-radius: 10px; text-decoration: none; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); opacity: 1; transition: opacity .6s var(--ease-out), color .3s; }
.m-scrollcue[data-hide] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease-out), visibility 0s .45s; }
.m-scrollcue:hover { color: var(--ink); }
.m-scrollcue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.m-scrollcue-l { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.m-scrollcue-l::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: linear-gradient(transparent, var(--accent)); animation: m-cue 2.4s var(--ease-out) infinite; }
.m-scrollcue[data-still] .m-scrollcue-l::after { display: none; }
@keyframes m-cue { 0% { transform: translateY(-16px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-scrollcue-l::after { display: none; } }
@media (max-width: 760px) { .m-scrollcue { bottom: max(10px, env(safe-area-inset-bottom)); gap: 6px; font-size: 10px; } .m-scrollcue-l { height: 32px; } @keyframes m-cue { 0% { transform: translateY(-16px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(32px); opacity: 0; } } }
.m-cue-target:focus { outline: none; }