/* Hallmark · shape: Map / Diagram · genre: modern-minimal · theme: Console (deal 1/3, seed weirflow-open-source-add-on-beside-6be2·58589e5e·2026-10-29·r0) · job: try · draw: 522653
 * hero: Counter · nav: edge-aligned · footer: letter close · imagery: screenshots 5 (3 by capture.mjs, 2 supplied by the owner), no empty slots · signature: a real syslog line turned into fields by a five-line VRL program, output pasted from the engine · console: graphite
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S/E until the captures landed, then the hero shows real engine output and real product captures, not a mock */
/* Hallmark · answered F18 · no slot script ships, the page has no JS beyond the copy buttons, so a static file replaces each placeholder */
/* Hallmark · ai section added after the screens, reusing .head--split and .rows from the folders section, so no new CSS · copy checked against the UI repository's assistant (query, VRL, help chat) */
/* Hallmark · correlation section added after the ai section, reusing the map classes and .map-list for the phone view, plus one rule (.node--alarm) that outlines the alarm in the accent colour · the example follows the engine's multi-source-correlation workflow (alert, ask each source, join, verdict), ids are MITRE ATT&CK techniques · the page was already over the 450 word budget with the ai section, this adds about 110 words, the diagram text counted twice with its phone list · gap: owner to trim copy elsewhere */
/* Hallmark · nodes section added after the screens, reusing .head--split and .rows, so no new CSS · copy from the UI repository's node reference · adds about 150 words on top of the earlier overrun · gap: owner to trim copy elsewhere to get back to 450 */
/* Hallmark · waive 81 (no longer needed, both placeholders were replaced by captures) · two data-slot frames hold a placeholder SVG with visible text (screen name, 2880 by 1800 px, the data it needs) instead of a screen, which also departs from the imagery rule against visible placeholder labels · the user asked for visible labelled placeholders for the query results and telemetry screens, which need Elasticsearch data, and will supply the PNGs */
/* Hallmark · waive 44c · Counter posture, the command panel is the hero's action and sits inside the text column, so both columns are vertically centred on each other · the check stops the text block at the first Copy button and reads the signature panel as off-centre */
/* Hallmark · dismissed 58 · the window holds the API panel, whose curl call and JSON response count as about 17 words but read as four lines of code · the 550-word static total also counts the map twice, as the diagram and as the phone list, and the rendered page shows 446 words at 1440 and 425 at 375 */
/* Hallmark · dismissed F1 · the straight quotes are JSON string delimiters in the engine output, pasted verbatim from the real API response, so they are data and not prose */
/* Hallmark · hero-review: in-thread · 2 findings · 1 resolved (labels moved out of the hero text blocks), 1 partial (the 70 character VRL line scrolls inside its well below 1440px wide) ; finish-review: in-thread · 3 findings · 1 resolved (switcher tabs aligned to the grid), 2 answered (API tile has spare room under its sentence, node hover kept on the diagram) · gap: two screen slots wait for the owner's captures */
/* Hallmark · telemetry section added after the correlation section, screens section moved after it and its tabs reordered (Workflows, Telemetry, Parser simulator, Query results) · a process tree of radio inputs and :has(), no script, arrow keys step through the attack · example follows the correlation section's chain plus a recon step (T1595) · video slot is 1866 by 1030, shown at 1.4x speed · adds about 170 words on top of the earlier overrun · gap: owner to trim copy elsewhere */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Host Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/host-grotesk-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Host Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/host-grotesk-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/atkinson-hyperlegible-mono-latin-400.woff2") format("woff2"); }

/* ---- shared ---- */
body { color: var(--color-muted); font-synthesis: none; }
a { text-decoration-color: var(--color-rule-2); }
a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
a:active { color: var(--color-ink); }
h1, h2, h3 { color: var(--color-ink); }
.lead { color: var(--color-ink-2); }
pre, code, .mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums slashed-zero; }
.mono { color: var(--color-ink-2); }
.mono--cool { color: var(--color-cool); }
pre { margin: 0; }
small, .fine, figcaption, th { font-size: var(--text-sm); }

.section { padding-block: var(--section-gap); }
.section > .container > * + * { margin-top: var(--space-xl); }
.head { display: grid; gap: var(--space-md); }
.head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: end; }
.head--split .lead { max-width: 40ch; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.btn:active { background: var(--color-paper); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); color: var(--color-accent-ink); }
.btn--primary:active { background: color-mix(in oklab, var(--color-accent) 76%, var(--color-paper)); }
.btn--quiet { background: var(--color-paper-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---- nav ---- */
.nav__bar { height: 64px; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.wordmark { color: var(--color-ink); font: 500 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.wordmark:hover { color: var(--color-ink); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__link { color: var(--color-ink-2); }

/* ---- command panel (hero and close) ---- */
.cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cap act" "pre pre" "note note"; align-items: center; gap: var(--space-sm) var(--space-md); margin: 0; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.cmd figcaption { grid-area: cap; color: var(--color-muted); }
.cmd__actions { grid-area: act; display: flex; align-items: center; gap: var(--space-sm); }
.cmd__note { grid-area: note; font-size: var(--text-sm); max-width: none; }
.cmd__status { color: var(--color-ink-2); font-size: var(--text-sm); }
.cmd pre { grid-area: pre; overflow-x: auto; padding: var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.6; }
.well { overflow-x: auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.6; }
/* the signature wells keep their lines; the raw line wraps at spaces */
.sig .well { font-size: var(--text-xs); }
.well--wrap { white-space: pre-wrap; }
pre[tabindex]:focus-visible { outline-offset: 2px; }

/* ---- hero (Counter) ---- */
.hero { display: flex; align-items: center; min-height: calc(100dvh - 64px); padding-block: var(--space-md) var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-md); justify-items: start; }
.hero__text > * { max-width: 100%; }
.hero h1 { font-size: var(--text-display-s); max-width: 12ch; }
.hero__text .cmd { width: 100%; margin-top: var(--space-xs); }

/* the signature panel: one surface, three rows */
.sig { display: grid; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; min-width: 0; }
.sig__row { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.sig__row:first-child { border-top: 0; }
.sig__name { font-size: var(--text-sm); color: var(--color-muted); }
.out { width: 100%; border-collapse: collapse; }
.out th { padding: var(--space-3xs) var(--space-md) var(--space-3xs) 0; font-weight: 400; text-align: left; color: var(--color-ink-2); }
.out td { padding: var(--space-3xs) 0; font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums slashed-zero; color: var(--color-cool); }

/* ---- map ---- */
.system-map { width: 100%; height: auto; }
.system-map .node rect { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
.system-map .node:hover rect { stroke: var(--color-rule-2); }
.system-map .node rect.inner { fill: var(--color-paper-3); }
.system-map .node--alarm rect { stroke: var(--color-accent); stroke-width: 2; }
.system-map .node--dashed rect { fill: none; stroke-dasharray: 6 5; stroke: var(--color-rule-2); }
.system-map .edges line { stroke: var(--color-rule-2); stroke-width: 1; marker-end: url(#ah); }
.system-map line.seam { stroke: var(--color-rule); stroke-width: 1; }
.system-map marker path { fill: var(--color-rule-2); }
.system-map text { font-family: var(--font-body); font-size: 17px; fill: var(--color-ink-2); }
.system-map .t-title { font-size: 21px; font-weight: 500; fill: var(--color-ink); }
.system-map .t-muted { fill: var(--color-muted); }
.system-map .t-mono { font-family: var(--font-outlier); fill: var(--color-cool); font-variant-numeric: tabular-nums slashed-zero; }
.map-list { display: none; margin: 0; padding-left: var(--space-lg); gap: var(--space-sm); }
.map-list li { max-width: 52ch; padding-left: var(--space-2xs); }

/* ---- switcher ---- */
.switcher { display: grid; gap: var(--space-lg); }
.seg { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; border: 0; min-width: 0; }
.seg input { appearance: none; width: 0; height: 0; margin: 0 calc(-1 * var(--space-lg)) 0 0; border: 0; opacity: 0; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--color-muted); font-weight: 500; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.seg label:hover { color: var(--color-ink); }
.seg input:checked + label { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .seg label { transition: none; } }
.frames figure { display: none; margin: 0; }
.switcher:has(#sw1:checked) #fr1, .switcher:has(#sw2:checked) #fr2, .switcher:has(#sw3:checked) #fr3, .switcher:has(#sw4:checked) #fr4 { display: block; }
@supports not selector(:has(*)) { .frames figure { display: block; } .frames figure + figure { margin-top: var(--space-xl); } }
.frames figcaption { margin-top: var(--space-md); max-width: 70ch; color: var(--color-ink-2); }

/* frames: product captures keep their colour; the base photo treatment is for photographs */
.frame { aspect-ratio: 16 / 10; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); min-width: 0; }
.frame[data-slot]:has(> img) { background: var(--color-paper-3); outline: 0; }
.frame[data-slot] > img { filter: none; mix-blend-mode: normal; }
.frame[data-slot]:has(> img)::before { display: none; }
#fr3 .frame { aspect-ratio: 1917 / 986; }
#fr4 .frame { aspect-ratio: 1862 / 1031; }
.frame--tree { aspect-ratio: 864 / 588; width: 100%; max-width: 27rem; justify-self: center; }

/* ---- process tree (telemetry) ---- */
.ptree { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.ptree__tree { margin: 0; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.ptree ul { margin: 0; padding: 0; list-style: none; }
.ptree ul ul { margin-left: var(--space-md); padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule-2); }
.ptree li { position: relative; }
.ptree input { appearance: none; position: absolute; width: 0; height: 0; margin: 0; border: 0; opacity: 0; }
.ptree label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); min-height: 44px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.ptree label:hover { background: var(--color-paper-3); }
.ptree input:checked + label { background: var(--color-paper-3); box-shadow: inset 2px 0 0 var(--color-accent); color: var(--color-ink); }
.ptree input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.step__name { font-family: var(--font-outlier); font-size: var(--text-sm); }
.step__tag { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.ptree__detail { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.ptree__detail > div { display: none; gap: var(--space-sm); }
.ptree__detail p:not(.mono) { color: var(--color-ink-2); }
.ptree__detail .mono { color: var(--color-cool); font-size: var(--text-sm); }
.ptree:has(#pt1:checked) #pd1, .ptree:has(#pt2:checked) #pd2, .ptree:has(#pt3:checked) #pd3, .ptree:has(#pt4:checked) #pd4, .ptree:has(#pt5:checked) #pd5, .ptree:has(#pt6:checked) #pd6 { display: grid; }
@supports not selector(:has(*)) { .ptree__detail > div { display: grid; } }
@media (prefers-reduced-motion: reduce) { .ptree label { transition: none; } }
.video { margin: 0; }
.frame--video { aspect-ratio: 1866 / 1030; overflow: hidden; background: var(--color-paper-3); }
.frame--video video { width: 100%; height: 100%; object-fit: contain; }
.video figcaption { margin-top: var(--space-md); max-width: 70ch; color: var(--color-ink-2); }

/* ---- rows ---- */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows p { max-width: 52ch; color: var(--color-ink-2); }

/* ---- panels (bento cut from one surface) ---- */
.panels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--rule-hair); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-rule); color: var(--color-muted); overflow: hidden; }
.panel { grid-column: span 4; display: grid; align-content: start; gap: var(--space-sm); min-width: 0; padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-muted); }
.panel--lead { grid-column: span 8; grid-row: span 3; gap: var(--space-md); padding: var(--space-xl); }
.panel p { color: var(--color-ink-2); }

/* ---- close band ---- */
.band { padding-block: var(--section-gap-s); background: var(--color-paper-3); color: var(--color-muted); }
.band__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.band__text { display: grid; gap: var(--space-lg); justify-items: start; }
.band__text .cmd { width: 100%; }
.links { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.band .cmd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pre" "act"; background: var(--color-paper-2); color: var(--color-muted); }
.band .cmd__actions { justify-self: end; }

/* ---- footer (letter close) ---- */
.foot { padding-block: var(--space-3xl); }
.foot .container { display: grid; gap: var(--space-lg); justify-items: start; }
.foot__sign { max-width: 28ch; color: var(--color-ink); font: 500 var(--text-lead)/1.3 var(--font-display); letter-spacing: var(--tracking-display); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.fine { max-width: 70ch; font-size: var(--text-sm); }

/* ---- narrow ---- */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-lg) var(--space-2xl); }
  .hero__grid, .head--split, .band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head--split { gap: var(--space-md); }
  .hero h1 { max-width: 14ch; }
  .system-map { display: none; }
  .map-list { display: grid; }
  .ptree { grid-template-columns: minmax(0, 1fr); }
  .ptree ul ul { margin-left: var(--space-2xs); padding-left: var(--space-sm); }
  .step__tag { margin-left: 0; flex-basis: 100%; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel, .panel--lead { grid-column: auto; grid-row: auto; }
  .panel--lead { padding: var(--space-lg); }
  .sig__row { padding: var(--space-md); }
}