/*
  vt2600, the instrument.
  mynoc tokens (colors, type, the line), with the web allowed to move.
  Dark is the scope. Light is a chart recorder on paper.
*/

@font-face { font-family: "Inter mynoc"; src: url("fonts/InterMynoc.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Saira mynoc"; src: url("fonts/SairaMynoc-w80.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark light;
  --font-heading: "Saira mynoc", "Barlow Semi Condensed", system-ui, sans-serif;
  --font-body: "Inter mynoc", Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --space-xs: 0.375rem; --space-s: 0.75rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3rem;
  --gutter: clamp(0.75rem, 2vw, 1.5rem);
  --radius-xs: 2px; --radius-s: 4px; --radius-m: 6px;

  --surface-0:      light-dark(#ecf1f5, #121518);
  --surface-1:      light-dark(#e0e5ea, #1a1d20);
  --surface-2:      light-dark(#d5dade, #222629);
  --surface-float:  light-dark(#f7fcff, #222629);
  --screen:         light-dark(#f7fcff, #0a0e11);
  --grid:           light-dark(#b3b8bc, #33373b);
  --text:           light-dark(#191816, #e9e8e2);
  --text-secondary: light-dark(#4e4d4a, #bfbeb9);
  --text-muted:     light-dark(#646360, #979793);
  --border:         light-dark(#a8adb1, #464a4d);
  --border-strong:  light-dark(#7e8286, #6c7175);
  --primary:        light-dark(#1d60bc, #74b2ff);
  --primary-subtle: light-dark(#dae9ff, #1b2c44);
  --copper:         light-dark(#b43900, #ee6f3c);
  --copper-mark:    #d95c27;
  --ch1:            light-dark(#905a00, #ffb100); /* phosphor, scope channel 1 */
  --ch2:            light-dark(#00707c, #36dcec); /* cyan, scope channel 2 */
  --beam-core:      light-dark(#191816, #f4f2ea);
  --green:          light-dark(#006724, #6cf098);
  --green-subtle:   light-dark(#d8efdd, #16321f);
  --red:            light-dark(#c71f2d, #ff847e);
  --shadow:         light-dark(rgba(16, 22, 30, 0.24), rgba(0, 0, 0, 0.55));
}

/* A host that sets data-theme overrides the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { block-size: 100%; }
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  block-size: 100dvh;
  overflow: hidden;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5rem;
  -webkit-text-size-adjust: 100%;
}
p, h1, h2, h3, ol, address { margin: 0; }
a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* Top strip: the instrument's status line. */
.top {
  display: flex; align-items: center; gap: var(--space-s) var(--space-l);
  padding: var(--space-xs) var(--gutter);
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.wordmark { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--text); font-family: var(--font-heading); font-weight: 600; font-size: 1.5625rem; text-decoration: none; }
.cursor { display: inline-block; inline-size: 0.5em; block-size: 1em; margin-inline-start: 0.08em; background: var(--copper); }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase; }
.state { padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--radius-xs); line-height: 1; font-weight: 600; color: var(--text-muted); }
.state[data-state="run"] { color: var(--green); }
.venue { margin-inline-start: auto; color: var(--text-muted); }

/* Bezel: screen plus soft keys, like the front of the instrument. */
.bezel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s);
  min-block-size: 0;
  padding-inline: var(--gutter);
}
.screen {
  anchor-name: --scope-display;
  position: relative; min-block-size: 0; overflow: hidden;
  container-type: size;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 10% 12.5%,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 10% 12.5%,
    var(--screen); /* the graticule, for anyone without JavaScript */
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.scope { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.scope:active { cursor: grabbing; }
.scope:focus-visible { outline-offset: -3px; }
canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.headline {
  position: absolute; inset-inline: clamp(1rem, 3vw, 2.5rem); inset-block-end: clamp(1rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--space-xs);
  pointer-events: none;
}
.eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
h1 {
  font-family: var(--font-heading);
  font-size: min(10.5cqw, 14cqh, 9.5rem); /* sized by the screen, not the window */
  line-height: 0.92;
  font-weight: var(--weight, 600); /* set from the time left: thin a month out, heavy on the night */
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 span { display: block; }
.hl2 { color: var(--text-secondary); }
.sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-s); max-inline-size: 48rem; color: var(--text-secondary); }
.sub .mono { color: var(--text); }
.headline a { pointer-events: auto; }

.tip {
  position: absolute; z-index: 1; max-inline-size: min(22rem, 70%);
  padding: var(--space-xs) var(--space-s);
  background: var(--surface-float); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  box-shadow: 0 2px 6px var(--shadow), 0 12px 24px var(--shadow);
  font-size: 0.875rem; line-height: 1.3125rem;
  pointer-events: none;
}
.tip .d { display: block; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }

/* Soft keys */
.keys { display: flex; flex-direction: column; gap: var(--space-xs); inline-size: 7rem; overflow-y: auto; }
.group { margin-block-start: var(--space-xs); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.group:first-child { margin-block-start: 0; }
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-block-size: 2.75rem; padding-inline: var(--space-s);
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  background: var(--surface-1); color: var(--text);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.key:hover { background: var(--surface-2); }
.key:active { transform: translateY(1px); }
:root:has(#p-about:popover-open) .key[popovertarget="p-about"],
:root:has(#p-where:popover-open) .key[popovertarget="p-where"],
:root:has(#p-rules:popover-open) .key[popovertarget="p-rules"],
:root:has(#p-log:popover-open) .key[popovertarget="p-log"] { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary); }
#run[aria-pressed="true"] { background: var(--green-subtle); color: var(--green); border-color: var(--green); }
.lamp { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--text-muted); opacity: 0.35; }
#run[aria-pressed="true"] .lamp { background: var(--green); opacity: 1; }

/* Measurements strip */
.meas {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l);
  padding: var(--space-xs) var(--gutter) max(var(--space-xs), env(safe-area-inset-bottom));
  font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums slashed-zero;
  color: var(--text-secondary);
}
.m { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.dim { color: var(--text-muted); }
.ch { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; border: 1px solid currentColor; border-radius: var(--radius-xs); font-weight: 600; line-height: 1; }
.ch1 { color: var(--ch1); }
.ch2 { color: var(--ch2); }

/* Native popovers share the instrument display, including without JavaScript. */
.menu {
  position: fixed; inset: auto;
  position-anchor: --scope-display;
  top: anchor(top); left: anchor(left);
  inline-size: anchor-size(width);
  block-size: anchor-size(height);
  margin: 0; padding: var(--space-m);
  overflow: auto; overscroll-behavior: contain;
  background: var(--screen); color: var(--text);
  font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.65;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
  border: 1px solid var(--border); border-radius: var(--radius-m);
}
.menu > * + * { margin-block-start: var(--space-s); }
.menu header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.menu h2 { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ch2); }
.menu h3 { margin-block-start: var(--space-m); font-family: var(--font-mono); font-weight: 600; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ch2); }
.menu p, .menu li { max-inline-size: 62ch; }
.close { min-block-size: 2.75rem; padding-inline: var(--space-s); border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.close:hover { color: var(--text); background: var(--surface-1); }
address { font-style: normal; font-size: 1.25rem; line-height: 1.875rem; color: var(--text-secondary); }
address strong { color: var(--text); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
.links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.small { font-size: 0.8125rem; color: var(--text-muted); }

/* Local USGS contour geometry, drawn as a restrained single-color scope trace. */
.location {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: var(--space-l); min-block-size: clamp(24rem, 52vh, 34rem);
  padding: clamp(0.75rem, 2vw, 2rem);
  border: 1px solid var(--grid); border-radius: var(--radius-xs);
  background: var(--screen);
}
.location::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--ch2);
  mask: url('venue-topo.svg') center / cover no-repeat;
  opacity: 0.7; pointer-events: none;
}
.location::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--ch1);
  mask: url('venue-roads.svg') center / cover no-repeat;
  pointer-events: none;
}
.location-copy {
  position: relative; z-index: 1; max-inline-size: min(100%, 43ch);
  padding: var(--space-s);
  background: color-mix(in srgb, var(--screen) 92%, transparent);
  border-inline-start: 2px solid var(--ch2);
}
.location-copy > * + * { margin-block-start: var(--space-s); }
.location-label { color: var(--ch2); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.location address { font-size: clamp(1rem, 1.7vw, 1.375rem); line-height: 1.5; }
.location .links { gap: 0 var(--space-s); font-size: 0.8125rem; }
.map-coordinates {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap;
  gap: 0 var(--space-m); padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--screen) 92%, transparent);
  color: var(--text-secondary); font-size: 0.75rem;
}
.map-credit { max-inline-size: 80ch; }
.map-legend { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-s); }
.terrain-key { color: var(--ch2); }
.road-key { color: var(--ch1); }

.numbered { list-style: none; padding: 0; counter-reset: n; display: grid; gap: var(--space-m); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--space-s); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.875rem; color: var(--copper); }

.log { list-style: none; padding: 0; display: grid; }
.log li { display: grid; gap: 0.125rem; padding-block: var(--space-s); border-block-start: 1px solid var(--border); scroll-margin-block: var(--space-m); }
.log time { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
.log h3 { margin: 0; font-size: 1rem; }
.log p { color: var(--text-secondary); }
.log li.hit { background: var(--primary-subtle); margin-inline: calc(-1 * var(--space-s)); padding-inline: var(--space-s); border-radius: var(--radius-s); }
.log li.hit time { color: var(--primary); }

/* Narrow screens: keys become a row under the screen. */
@media (width < 48rem) {
  .venue { display: none; }
  .bezel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: auto; overflow: visible; }
  .key { padding-inline: var(--space-xs); }
  .group { display: none; }
  .menu { padding: var(--space-s); }
  .meas { gap: 0 var(--space-m); }
  .meas .after { display: none; }
  .top { gap: var(--space-xs) var(--space-s); }
  .trig { display: none; }
  h1 { font-size: min(14.5cqw, 11cqh); }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

@media (forced-colors: active) {
  .cursor, .lamp { forced-color-adjust: none; background: CanvasText; }
}