/* utility-protocol / dashboard-console
   An operations console at night: near-black glass panels tinted by the brand, a
   blueprint grid under a vignette, condensed uppercase display type, mono telemetry,
   the art as a surveillance feed with a sweeping radar, every section a framed panel
   with a status header, figures glowing in the brand accent. */

:root {
  --v-bg: color-mix(in srgb, var(--wl-bg) 22%, #05070b);
  --v-fg: #e7ecf6;
  --v-soft: #aab3c5;
  --v-faint: #707a8f;
  --v-accent: var(--wl-accent-on-dark);
  --v-accent-text: var(--wl-accent-on-dark);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary-on-dark);
  --v-surface: color-mix(in srgb, var(--wl-accent) 5%, #0b0f17);
  --v-surface-2: color-mix(in srgb, var(--wl-accent) 9%, #121826);
  --v-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--wl-accent) 7%, #0d121c), #0a0e16);
  --v-line: color-mix(in srgb, var(--wl-accent-on-dark) 18%, transparent);
  --v-line-strong: color-mix(in srgb, var(--wl-accent-on-dark) 40%, transparent);
  --v-border: 1px solid var(--v-line);
  --v-seg-1: var(--wl-accent-on-dark);
  --v-seg-2: var(--wl-secondary-on-dark);
  --v-seg-3: color-mix(in srgb, var(--wl-accent-on-dark) 55%, #ffffff);
  --v-seg-4: color-mix(in srgb, var(--wl-secondary-on-dark) 50%, #0b0f17);
  --v-font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --v-font-display: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --v-font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --v-display-weight: 700;
  --v-display-tracking: 0.01em;
  --v-display-case: uppercase;
  --v-display-lh: 0.92;
  --v-title-size: clamp(2rem, 4.4vw, 3.6rem);
  --v-radius: 6px;
  --v-radius-sm: 4px;
  --v-radius-lg: 10px;
  --v-shadow: 0 0 0 1px color-mix(in srgb, var(--wl-accent-on-dark) 10%, transparent), 0 24px 60px -30px #000;
  --v-maxw: 1320px;
  --v-sec-gap: clamp(56px, 7vw, 100px);

  --wl-label-lore: "Briefing";
  --wl-label-features: "Modules";
  --wl-label-supply: "Supply telemetry";
  --wl-label-flow: "Pipeline";
  --wl-label-timeline: "Event log";
  --wl-label-comparison: "Benchmarks";
  --wl-label-tweet: "Intercepted";
  --wl-label-facts: "Checks passed";
  --wl-label-faq: "Runbook";
  --wl-label-access: "Access node";
}

body {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--wl-accent) 16%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in srgb, var(--wl-accent-on-dark) 6%, transparent) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, color-mix(in srgb, var(--wl-accent-on-dark) 6%, transparent) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--v-bg);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px);
}

.up-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
.up-side { display: none; }

/* status bar */
.up-top { background: rgb(4 6 10 / 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--v-line); font-family: var(--v-font-mono); }
.up-brand__mark { border-radius: 4px; box-shadow: 0 0 0 1px var(--v-line-strong); }
.up-brand__name { font-family: var(--v-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.15rem; }
.up-brand__tick { color: var(--v-accent-text); opacity: 1; }
.up-top__nav .wl-nav__link { color: var(--v-faint); font-family: var(--v-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.up-top__nav .wl-nav__link:hover, .up-top__nav .wl-nav__link.is-active { color: var(--v-fg); border-bottom-color: var(--v-accent); }
.up-top__status { color: var(--v-secondary); padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--wl-secondary-on-dark) 40%, transparent); border-radius: 3px; }

/* hero: the console */
:root {
  --up-hero-cols: minmax(0, 0.95fr) minmax(0, 1.05fr);
  /* condensed caps carry more words per line than the docs face */
  --up-h1: clamp(3rem, 7.2vw, 7rem);
  --up-h1-l: clamp(2.6rem, 5vw, 4.9rem);
  --up-h1-xl: clamp(2.2rem, 4vw, 3.9rem);
}
.up-hero__grid { background: radial-gradient(circle at 75% 45%, color-mix(in srgb, var(--wl-accent) 20%, transparent), transparent 55%); }
.up-chip { border-radius: 3px; padding: 6px 12px; font-family: var(--v-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-accent-text); border: 1px solid var(--v-line-strong); background: color-mix(in srgb, var(--wl-accent) 8%, transparent); }
.up-chip::before { content: "//"; opacity: 0.6; }
.up-chip__dot { display: none; }
.up-hero__headline { text-shadow: 0 0 40px color-mix(in srgb, var(--wl-accent) 35%, transparent); }
.up-hero__headline .wl-w:last-child { color: var(--v-accent-text); }
.up-hero__subhead { color: var(--v-soft); font-family: var(--v-font-mono); font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.7; border-left: 2px solid var(--v-accent); padding-left: 18px; }
.up-hero__cta .wl-btn { border-radius: 3px; font-family: var(--v-font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; border-color: var(--v-line-strong); background: rgb(255 255 255 / 0.02); }
.up-hero__cta .wl-btn--primary { background: var(--v-accent); color: var(--v-on-accent); box-shadow: 0 0 30px -4px var(--v-accent); }
.up-telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--v-line); border: 1px solid var(--v-line); border-radius: var(--v-radius); overflow: hidden; }
.up-tele { border-radius: 0; background: #080b12; padding: 14px 16px; }
.up-tele dt { color: var(--v-faint); }
.up-tele dd { color: var(--v-fg); font-size: 0.95rem; }
.up-tele:first-child dd::before { content: "●"; margin-right: 8px; color: var(--v-secondary); }

.up-panel { border: 1px solid var(--v-line-strong); background: #05070c; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 0 80px -20px color-mix(in srgb, var(--wl-accent) 55%, transparent); color: var(--v-accent-text); }
.up-panel__bar { color: var(--v-faint); background: #080b12; border-bottom: 1px solid var(--v-line); }
.up-dots i { background: color-mix(in srgb, var(--wl-accent-on-dark) 35%, transparent); border-radius: 2px; }
.up-panel__title::before { content: "CAM-01 · "; color: var(--v-accent-text); }
.up-panel__live { color: #ff5b52; }
.up-media { aspect-ratio: 16 / 11; }
.up-media .wl-hero-img { filter: saturate(1.15) contrast(1.05); }
.up-media::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55)); pointer-events: none; }
.up-radar { color: var(--v-accent-text); filter: drop-shadow(0 0 6px currentColor); }
.up-corner { color: var(--v-accent-text); }

.up-ticker { background: #05070c; border-block: 1px solid var(--v-line); font-family: var(--v-font-mono); font-size: 0.8rem; color: var(--v-soft); letter-spacing: 0.04em; }
.up-ticker .wl-marquee__item::before { content: "> "; color: var(--v-secondary); }

/* sections as framed panels */
.wl-sec__inner {
  position: relative;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.025), rgb(255 255 255 / 0.005));
}
.wl-sec__inner::before, .wl-sec__inner::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--v-accent); }
.wl-sec__inner::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.wl-sec__inner::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.wl-kicker { color: var(--v-accent-text); font-size: 0.72rem; }
.wl-kicker .wl-ord::before { content: "["; }
.wl-kicker .wl-ord::after { content: "]"; }
.wl-kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--v-line-strong), transparent); }
.wl-sec__title { text-shadow: 0 0 30px color-mix(in srgb, var(--wl-accent) 25%, transparent); }
.wl-lore__lead { font-family: var(--v-font-mono); font-size: clamp(1.02rem, 1.5vw, 1.25rem); line-height: 1.7; font-weight: 400; color: var(--v-fg); }
.wl-lore__p { font-family: var(--v-font-mono); font-size: 0.95rem; }

.wl-feature { background: var(--v-card-bg); border-top: 2px solid var(--v-accent); }
.wl-feature:hover { box-shadow: 0 0 40px -12px var(--v-accent); }
.wl-feature__icon { border-radius: 4px; background: transparent; border: 1px solid var(--v-line-strong); color: var(--v-accent-text); box-shadow: inset 0 0 20px color-mix(in srgb, var(--wl-accent) 25%, transparent); }
.wl-feature__title { font-family: var(--v-font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.35rem; }
.wl-feature .wl-ord { color: var(--v-accent-text); }

.wl-donut__svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--wl-accent) 45%, transparent)); }
.wl-donut__track { stroke: rgb(255 255 255 / 0.05); }
.wl-donut__ticks line { stroke: color-mix(in srgb, var(--wl-accent-on-dark) 45%, transparent); }
.wl-donut__value, .wl-ring__value, .wl-stat__value { color: var(--v-accent-text); text-shadow: 0 0 24px color-mix(in srgb, var(--wl-accent) 45%, transparent); }
.wl-ring__track { stroke: rgb(255 255 255 / 0.06); }
.wl-ring__fill { filter: drop-shadow(0 0 6px var(--v-accent)); }
.wl-legend__item { border-bottom-color: var(--v-line); font-family: var(--v-font-mono); font-size: 0.9rem; }
.wl-stats { border-color: var(--v-line); background: var(--v-line); border-radius: var(--v-radius); }
.wl-stat { background: #080b12; }
.wl-stat__value { font-family: var(--v-font-display); }

.wl-node__card { background: #080b12; }
.wl-node__card .wl-ord { border-radius: 3px; box-shadow: 0 0 18px -2px var(--v-accent); }
.wl-node__title { font-family: var(--v-font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.wl-edge__line, .wl-edge__head { stroke: var(--v-accent-text); filter: drop-shadow(0 0 4px var(--v-accent)); }
.wl-ms__ring { fill: #080b12; }
.wl-ms__title { font-family: var(--v-font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.wl-milestones::before { background: linear-gradient(var(--v-accent), transparent); }

.wl-fact { background: #080b12; font-family: var(--v-font-mono); font-size: 0.95rem; }
.wl-fact__mark { border-radius: 3px; background: transparent; border: 1px solid var(--v-secondary); color: var(--v-secondary); }
.wl-qa { background: #080b12; }
.wl-qa__q { font-family: var(--v-font-mono); font-size: 0.95rem; font-weight: 600; }
.wl-qa__q::before { content: "$"; color: var(--v-secondary); margin-right: 4px; }
.wl-qa__a { font-family: var(--v-font-mono); font-size: 0.9rem; }
.wl-post { background: #080b12; }

.wl-ca { background: #05070c; border-color: var(--v-line-strong); }
.wl-ca__value { color: var(--v-accent-text); }
.wl-ca__value::before { content: "> "; color: var(--v-secondary); }
.wl-copy { border-radius: 3px; font-family: var(--v-font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
.wl-link { border-radius: 3px; background: #080b12; font-family: var(--v-font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.wl-link:hover { border-color: var(--v-accent); box-shadow: 0 0 24px -8px var(--v-accent); }

.up-footer { color: var(--v-faint); font-family: var(--v-font-mono); font-size: 0.8rem; border-top: 1px solid var(--v-line); }
.wl-foot__name { font-family: var(--v-font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--v-fg); }