/* NAVISTRI design system, v1 (2026-10-14).
   The source of truth is sites/navistri-home/public/ds/ (served at navistri.com/ds/); tools/sync-ds.mjs copies it
   into every subdomain. Rules and rationale: sites/navistri-home/STYLE.md. */

@font-face { font-family: Raleway; src: url(fonts/Raleway-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Raleway; src: url(fonts/Raleway-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url(fonts/MartianMono-Variable.ttf) format("truetype"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Noto Sans Runic"; src: url(fonts/NotoSansRunic-Runic.woff2) format("woff2"); unicode-range: U+16A0-16F8; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --navy: #152935;        /* page */
  --deep: #0c1c25;        /* panels, the agent layer */
  --ice: #e1faff;         /* text, lines, glyphs */
  --sky: #4ba5c3;         /* secondary text, labels, glyph trails */
  --mist: #82aac8;        /* quiet text */
  --line: rgba(225, 250, 255, 0.14);
  --paper: #c2e6f4;       /* inverted surface: there is something to do here */
  --deep-sky: #1f6f8f;    /* sky on paper */
  --ink-2: #2a4b5d;       /* body text on paper */
  --accent: #ffbf5e;      /* amber: one thing per screen */
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --text: Raleway, ui-sans-serif, system-ui, sans-serif;
  --glyph: "Noto Sans Runic";
  --gutter: clamp(16px, 5vw, 72px);
  --header: 68px;
  /* type scale: two steps for text (.8rem labels, 1.125rem = 18px reading), display sizes above */
  --fs-label: .8rem;
  --fs-text: 1.125rem;
}
@supports (color: color(display-p3 0 0 0)) {
  :root { --paper: color(display-p3 0.78 0.9 0.955); --accent: color(display-p3 1 0.76 0.38); }
}
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { background: var(--navy); }
body { margin: 0; background: var(--navy); color: var(--ice); font: 400 18px/1.6 var(--text); -webkit-font-smoothing: antialiased; --r: 0px; transition: --r .9s cubic-bezier(.3,.7,.2,1); }
body.agent { --r: 260vmax; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.nv-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
header.nv, main { position: relative; z-index: 1; }

/* ---------- header: the logo is the prompt ---------- */
header.nv { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; height: var(--header); padding: 0 var(--gutter); background: rgba(21, 41, 53, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nv-prompt { display: flex; align-items: center; flex: 1; min-width: 0; }
.nv-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ice); flex: none; }
.nv-logo .mark { width: 32px; height: 31px; }
.nv-logo .mark path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.nv-logo .mark path + path { stroke-linecap: butt; }
.nv-wm { position: relative; width: 100px; height: 19px; }
.nv-wm svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.nv-wm svg { overflow: visible; }
/* a page without the inline SVG holds the name as text until /ds/wordmark.svg arrives (and keeps it if it never does) */
.nv-wm:not(:has(svg)) { font: 700 17px/19px var(--mono); white-space: nowrap; }
.boot .nv-wm:not(:has(svg)) { color: transparent; }
/* letters wait for their rune (navistri.js, wordmark); if the script never runs they appear anyway after 4 s */
.boot .nv-wm path { opacity: 0; animation: nv-show .01s 4s forwards; }
@keyframes nv-show { to { opacity: 1; } }
@keyframes nv-hide { to { opacity: 0; } }
.nv-ps { font: 500 17px/1 var(--mono); color: var(--sky); margin: 1px 10px 0 2px; white-space: nowrap; background: none; border: 0; padding: 0; cursor: text; }
.nv-cmd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.nv-in { position: relative; flex: 0 1 300px; min-width: 120px; }
.nv-in input { width: 100%; background: transparent; border: 0; color: var(--ice); font: 400 var(--fs-label)/1 var(--mono); padding: 8px 0; outline: none; caret-color: var(--accent); }
.nv-in input::placeholder { color: rgba(130, 170, 200, .6); }
.nv-ghost { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; font: 400 var(--fs-label)/1 var(--mono); white-space: pre; overflow: hidden; }
.nv-ghost .typed { visibility: hidden; }
.nv-ghost .rest { color: rgba(130, 170, 200, .55); }
.nv-ghost .rest:not(:empty)::after { content: "  tab"; color: rgba(130, 170, 200, .35); }
.nv-out { font: 400 var(--fs-label)/1.3 var(--mono); color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-cl { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 191, 94, .35); text-underline-offset: 3px; }
.nv-switch { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; flex: none; }
.nv-switch button { font: 500 var(--fs-label)/1 var(--mono); padding: 9px 12px; background: transparent; color: var(--mist); border: 0; cursor: pointer; }
.nv-switch button[aria-pressed="true"] { background: var(--ice); color: var(--navy); }
@media (max-width: 760px) {
  .nv-ps { cursor: pointer; border-bottom: 1px dashed rgba(75, 165, 195, .5); }
  .nv-cmd { display: none; position: absolute; left: 0; right: 0; top: var(--header); flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px 14px; background: var(--deep); border-bottom: 1px solid var(--line); }
  header.nv.cmd-open .nv-cmd { display: flex; }
  .nv-in { flex: 1 1 100%; }
  .nv-in input, .nv-ghost { font-size: 16px; }
  .nv-out { white-space: normal; }
  header.nv { gap: 10px; }
}
@media (max-width: 420px) {
  header.nv { padding: 0 12px; gap: 8px; }
  .nv-logo { gap: 8px; } .nv-logo .mark { width: 26px; height: 25px; } .nv-wm { width: 80px; height: 15px; }
  .nv-ps { font-size: 14px; margin-left: 1px; } .nv-switch button { padding: 9px 8px; }
}

/* ---------- the human page over the markdown an agent gets ---------- */
.nv-layered { display: grid; position: relative; container-type: inline-size; }
.nv-layered > .h, .nv-layered > .s { grid-area: 1 / 1; min-width: 0; }
/* the layer out of view gives up its height (once the reveal circle has closed), so neither view ends in blank space */
.nv-layered > .h { transition: opacity .5s; }
/* the markdown is wrapped at 92 characters; the type shrinks so a line fits the column (Martian Mono is .7em wide) */
.nv-layered > .s { --s-pad: var(--gutter); margin: 0; padding: 40px var(--s-pad); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sky); font: 400 clamp(10px, calc((100cqi - 2 * var(--s-pad)) / 65), var(--fs-label))/1.9 var(--mono); background: rgba(12, 28, 37, .5); clip-path: circle(var(--r) at var(--lx, 100%) var(--ly, 0)); pointer-events: none; max-height: 0; overflow: hidden; transition: max-height 0s .9s; }
.s .t { color: var(--ice); font-weight: 700; }
.s .c { color: var(--accent); }
.s .k { color: var(--mist); }
.s a { color: var(--ice); text-underline-offset: 4px; }
body.agent .nv-layered > .h { opacity: 0; pointer-events: none; max-height: 0; overflow: hidden; transition: opacity .5s, max-height 0s .5s; }
body.agent .nv-layered > .s { pointer-events: auto; max-height: 1000000px; transition: none; }

/* ---------- type ---------- */
.nv-h1 { font: 760 clamp(2.2rem, 4.6vw, 4.1rem)/1.02 var(--mono); font-stretch: 112.5%; letter-spacing: -0.02em; margin: 0 0 14px; }
.nv-h2 { font: 700 clamp(1.6rem, 3.2vw, 2.3rem)/1.1 var(--mono); margin: 0 0 8px; text-wrap: balance; }
.nv-label { font: 500 var(--fs-label)/1 var(--mono); color: var(--sky); margin: 0 0 6px; }
.nv-small { font: 400 var(--fs-label)/1.6 var(--mono); color: var(--mist); margin: 0; }
.nv-lede { margin: 0; color: var(--mist); max-width: 50ch; }
.nv-lede b { color: var(--ice); font-weight: 400; }
.ch { display: inline-block; width: var(--adv, 1ch); text-align: center; letter-spacing: 0; }
.wd { white-space: nowrap; }
.ch.g { font-family: var(--glyph); font-weight: 400; color: var(--sky); }
.nv-redact { background: var(--mist); color: transparent; border-radius: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; }

/* ---------- lists: ls ---------- */
[data-ls] { transition: opacity .4s; }
.ls-dim [data-ls]:not(.ls-on) { opacity: .3; }
.nv-rows { list-style: none; margin: 0; padding: 0; }
.nv-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.nv-rows li:last-child { border-bottom: 1px solid var(--line); }
.nv-rows a { font: 700 var(--fs-text)/1.35 var(--mono); text-decoration: none; }
.nv-rows a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.nv-rows p { margin: 2px 0 0; color: var(--mist); font: 400 var(--fs-label)/1.5 var(--mono); }
.nv-rows .st { font: 400 var(--fs-label)/1 var(--mono); color: var(--mist); white-space: nowrap; }
.nv-rows .st.live::before { content: "● "; color: var(--accent); }

/* ---------- seals ---------- */
canvas.seal { width: 64px; height: 64px; display: block; }
.seal-box { position: relative; display: block; flex: none; }
.seal-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-ring { animation: nv-turn 48s linear infinite; animation-play-state: paused; }
.seal-box:hover .seal-ring, li:hover > .seal-box .seal-ring { animation-play-state: running; }
@keyframes nv-turn { to { rotate: 360deg; } }

/* ---------- actions ---------- */
.nv-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nv-btn { display: inline-block; font: 600 var(--fs-label)/1 var(--mono); padding: 14px 18px; border: 1px solid var(--ice); background: var(--ice); color: var(--navy); text-decoration: none; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.nv-btn:hover { background: transparent; color: var(--ice); }
.nv-btn.ghost { background: transparent; color: var(--ice); border-color: var(--line); }
.nv-btn.ghost:hover { border-color: var(--ice); }
.nv-tag { font: 500 var(--fs-label)/1 var(--mono); padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--ice); }
.nv-tag.live { background: var(--ice); color: var(--navy); border-color: var(--ice); }
.nv-tag.off { color: var(--mist); border-style: dashed; }

/* inverted surface: something the reader can do right here. At most one per screen, never navigation. */
.nv-act { background: var(--paper); color: var(--navy); padding: 22px clamp(18px, 3vw, 28px); border-radius: 3px; }
.nv-act .lbl { font: 500 var(--fs-label)/1.4 var(--mono); color: var(--deep-sky); margin: 0 0 10px; }
.nv-act h4 { font: 700 var(--fs-text)/1.35 var(--mono); margin: 0 0 6px; }
.nv-act p { margin: 0; color: var(--ink-2); }
.nv-act .nv-row { margin-top: 16px; }
.nv-act code { font: 400 var(--fs-label)/1.5 var(--mono); background: rgba(21, 41, 53, .06); border: 1px solid rgba(21, 41, 53, .2); padding: 13px 14px; border-radius: 3px; overflow-x: auto; white-space: nowrap; flex: 1; min-width: 0; }
.nv-act .msg { font: 400 var(--fs-label)/1.5 var(--mono); color: var(--ink-2); margin: 10px 0 0; }
.nv-act .nv-btn { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.nv-act .nv-btn:hover { background: transparent; color: var(--navy); }
.nv-field { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(21, 41, 53, .35); padding: 0 12px; font: 400 var(--fs-label) var(--mono); border-radius: 3px; flex: 1; min-width: 180px; }
.nv-field span { color: var(--deep-sky); }
.nv-field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--navy); font: inherit; padding: 14px 0; outline: none; caret-color: var(--navy); }

/* ---------- figures and quotes ---------- */
.nv-big { font: 800 4.2rem/1 var(--mono); font-stretch: 112.5%; }
.nv-gbar { font: 400 1rem/1 var(--mono); color: var(--sky); letter-spacing: -0.05em; margin: 12px 0 8px; white-space: nowrap; overflow: hidden; }
.nv-gbar b { color: var(--accent); font-weight: 400; }
.nv-quote { margin: 0; font: 400 1rem/1.75 var(--mono); white-space: pre-wrap; }
.nv-quote .k { color: var(--sky); }
.nv-rule { border-left: 2px solid var(--accent); padding-left: 16px; max-width: 66ch; }
.nv-rule p { margin: 0 0 8px; }


/* ---------- long pages: a sticky rail (seal + tree) beside the text ---------- */
.nv-report { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 0 clamp(40px, 6vw, 96px); padding: 0 var(--gutter); }
.nv-rail { position: sticky; top: calc(var(--header) + 32px); align-self: start; padding-top: 48px; display: flex; flex-direction: column; gap: 26px; }
.nv-rail canvas.seal, .nv-rail .seal-box { width: 180px; height: 180px; }
.nv-rail .meta { font: 400 var(--fs-label)/1.7 var(--mono); color: var(--mist); margin: 0; }
.nv-rail .meta b { color: var(--ice); font-weight: 400; }
.nv-tree { font: 400 var(--fs-label)/1 var(--mono); }
.nv-tree .root { color: var(--sky); margin: 0 0 10px; }
.nv-tree button { display: flex; gap: 10px; width: 100%; background: none; border: 0; padding: 6px 0; font: inherit; color: var(--mist); text-align: left; cursor: pointer; }
.nv-tree button .br { color: rgba(130, 170, 200, .45); }
.nv-tree button:hover { color: var(--ice); }
.nv-tree button.on { color: var(--ice); font-weight: 700; }
.nv-tree a.page { display: flex; gap: 10px; padding: 6px 0; color: var(--mist); text-decoration: none; }
.nv-tree a.page:hover { color: var(--ice); }
.nv-tree a.page.here { color: var(--ice); }
.nv-tree .br { white-space: pre; }
/* a flat shape woven from runes (navistri.js weave() sets --weave) */
.nv-weave { -webkit-mask: var(--weave) repeat left top / 96px 18px; mask: var(--weave) repeat left top / 96px 18px; }
[data-cd] { scroll-margin-top: calc(var(--header) + 28px); }
@media (max-width: 1080px) {
  .nv-report { grid-template-columns: minmax(0, 1fr); }
  .nv-rail { position: static; padding-top: 32px; flex-direction: row; align-items: center; gap: 20px; }
  .nv-rail canvas.seal, .nv-rail .seal-box { width: 96px; height: 96px; }
  .nv-tree { display: none; }
}
@media (max-width: 760px) { .nv-ps .cwd { max-width: 2ch; overflow: hidden; } }

/* ---------- rune bar: a stacked bar woven from tiny runes ---------- */
.nv-rbar { position: relative; }
.nv-rbar .track { position: relative; }
.nv-rbar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nv-rbar .hits { position: absolute; inset: 0; display: flex; }
/* tooltips hang above the whole bar (the hits are not positioned), so they never run off a narrow screen */
.nv-rbar .hit { outline-offset: 3px; cursor: default; }
.nv-rbar .tip { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 3; width: max-content; max-width: min(320px, 100%); background: var(--deep); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; font: 400 var(--fs-label)/1.45 var(--mono); color: var(--ice); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.nv-rbar .tip small { color: var(--mist); }
.nv-rbar .hit:hover .tip, .nv-rbar .hit:focus .tip { opacity: 1; transform: none; }
.nv-rbar .labels { position: relative; height: 64px; margin-top: 12px; }
.nv-rbar .lab { position: absolute; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.nv-rbar .lab.end { grid-template-columns: auto auto; white-space: nowrap; }
.nv-rbar .lab.end { text-align: right; }
.nv-rbar .lab i { font: 400 14px/1 var(--glyph); font-style: normal; }
.nv-rbar .lab b { font: 700 var(--fs-text)/1.2 var(--mono); }
.nv-rbar .lab span { grid-column: 2; color: var(--mist); font: 400 var(--fs-label)/1.4 var(--mono); }
@media (max-width: 640px) {
  .nv-rbar .labels { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nv-rbar .lab, .nv-rbar .lab.end { position: static; width: auto !important; white-space: normal; text-align: left; grid-template-columns: auto minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .boot .nv-wm path { opacity: 1; }
}