/* ═══════════════════════════════════════════════════════════════
   HEADER VARIANT A — "the terminal"
   A machine you can open. The header carries a jade terminal key;
   it lifts a small piece of hardware over the document, and the
   menu of commands is CLICKABLE — a command types itself and runs.

   Colour contract unchanged: jade = the machine, gold = the
   document. No new hues. Everything motion-bearing is off under
   prefers-reduced-motion; structure and function are identical.
   ═══════════════════════════════════════════════════════════════ */

:root { --term-ink: #cfe8e5; }

/* ── the header key ──────────────────────────────────────────────────────── */
.term-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 38px; padding: .4rem .75rem;
  border: 1px solid var(--instr-a40); border-radius: var(--radius-sm);
  background: var(--instr-a10);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--instr);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast),
              background var(--fast), box-shadow var(--fast);
}
.term-btn__glyph { font-weight: 600; letter-spacing: 0; }
.term-btn:hover,
.term-btn[aria-expanded="true"] {
  border-color: var(--instr-a70);
  background: var(--instr-a22);
  color: #7fd6cf;
  box-shadow: 0 0 22px -8px rgba(46,169,161,.65);
}
.term-btn:focus-visible { outline: 2px solid var(--instr); outline-offset: 2px; }

/* the glyph blinks its underscore the way a tty does — but only at rest */
@media (prefers-reduced-motion: no-preference) {
  .term-btn__glyph { animation: termKey 2.4s steps(1) infinite; }
  @keyframes termKey { 0%, 60% { opacity: 1; } 61%, 78% { opacity: .35; } 79%, 100% { opacity: 1; } }
}

/* the right cluster carries one more control than v1 — the chip must not
   collapse into two lines to make room for it */
.nav__right .chip { flex: none; white-space: nowrap; }
/* v1 gives .btn width:100% below 460px and relies on flex-shrink to claw it
   back. With a fourth control in the cluster that is too tight to trust —
   the CTA sizes to its own text instead. */
.nav__right .btn--gold { width: auto; }

/* the terminal is the primary key here, so the index key stands down to its
   glyph. It keeps its aria-label, its aria-expanded and its 38px target. */
.nav__right .menu-btn__text { display: none; }
.nav__right .menu-btn { min-width: 38px; justify-content: center; padding-inline: .6rem; }

/* ── the window ──────────────────────────────────────────────────────────── */
.term {
  position: fixed; inset: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 4vh, 3rem) var(--gutter);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.term[hidden] { display: none; }
.term.is-open { opacity: 1; }

.term__backdrop {
  position: absolute; inset: 0;
  background: rgba(4,6,7,.82);
  backdrop-filter: blur(10px) saturate(.9);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
}

.term__win {
  position: relative;
  width: 100%; max-width: 820px;
  height: min(560px, 76vh);
  display: flex; flex-direction: column;
  border: 1px solid var(--instr-a40);
  border-radius: 12px;
  background: linear-gradient(180deg, #071012 0%, #050a0b 100%);
  box-shadow:
    0 0 0 1px rgba(46,169,161,.10),
    0 60px 140px -40px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(46,169,161,.18),
    inset 0 0 80px rgba(46,169,161,.045);
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  transition: transform var(--base) var(--ease);
}
.term.is-open .term__win { transform: none; }

/* ── title bar: the bezel ────────────────────────────────────────────────── */
.term__bar {
  flex: none;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem .55rem .875rem;
  border-bottom: 1px solid rgba(46,169,161,.22);
  background: linear-gradient(180deg, rgba(46,169,161,.10), rgba(46,169,161,.02));
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
}
.term__dots { display: inline-flex; gap: 5px; flex: none; }
.term__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(46,169,161,.22);
  box-shadow: inset 0 0 0 1px rgba(46,169,161,.45);
}
.term__dots i:first-child { background: rgba(196,168,98,.30); box-shadow: inset 0 0 0 1px rgba(196,168,98,.55); }
.term__title { color: var(--instr); font-weight: 500; }
.term__meta { margin-left: auto; color: var(--text-faint); letter-spacing: .08em; }
.term__x {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 30px; padding: .25rem .5rem;
  border: 1px solid rgba(46,169,161,.28); border-radius: 6px;
  background: transparent; cursor: pointer;
  font: inherit; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.term__x svg { width: 13px; height: 13px; }
.term__x:hover { color: var(--instr); border-color: var(--instr-a70); background: var(--instr-a10); }
.term__x:focus-visible { outline: 2px solid var(--instr); outline-offset: 2px; }

/* ── body: screen + command rail ─────────────────────────────────────────── */
.term__body { flex: 1 1 auto; display: flex; min-height: 0; }

.term__screen {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  padding: .875rem 1rem .75rem;
  overflow: hidden;
  /* the phosphor layer blends in SCREEN — without its own stacking context
     that blend escapes and tints the whole viewport (measured). */
  isolation: isolate;
}
.term__out {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.75;
  color: var(--text-secondary);
  scrollbar-width: thin;
}
.term__out::-webkit-scrollbar { width: 6px; }
.term__out::-webkit-scrollbar-thumb { background: rgba(46,169,161,.28); border-radius: 3px; }

/* phosphor texture — decorative, and it never animates under reduced motion */
.term__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    180deg, rgba(46,169,161,.055) 0 1px, transparent 1px 3px);
  opacity: .7;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .term__scan { animation: termScan 9s linear infinite; }
  @keyframes termScan { from { background-position-y: 0; } to { background-position-y: 60px; } }
}

/* ── output blocks ───────────────────────────────────────────────────────── */
.term__block { padding-block: .25rem .625rem; }
.term__block + .term__block { border-top: 1px dashed rgba(46,169,161,.14); padding-top: .625rem; }
.term__boot { color: var(--text-faint); }
.term__boot p { margin: 0; }
.term__echo { color: var(--term-ink); margin: 0 0 .25rem; }
.term__echo b { color: var(--instr); font-weight: 400; }
.term__res { color: var(--text-secondary); }
.term__res p { margin: 0; }
.term__res .k { color: var(--instr); }
.term__res .v { color: var(--gold); }
.term__res .dim { color: var(--text-faint); }

.term__rows { display: grid; gap: .125rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.term__rows a {
  display: grid; grid-template-columns: 2.25rem 8.5rem 1fr;
  gap: .5rem; align-items: baseline;
  padding: .25rem .375rem; border-radius: 4px;
  color: var(--text-secondary);
  transition: background var(--fast), color var(--fast);
}
.term__rows a:hover, .term__rows a:focus-visible {
  background: var(--instr-a10); color: var(--term-ink); outline: none;
}
.term__rows a:focus-visible { box-shadow: inset 0 0 0 1px var(--instr-a70); }
.term__rows .n { color: var(--instr); }
.term__rows .nm { color: var(--term-ink); }
.term__rows .ds { color: var(--text-faint); font-size: .6875rem; }

.term__copy {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .375rem; padding: .3rem .6rem;
  border: 1px solid rgba(46,169,161,.32); border-radius: 5px;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--instr);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.term__copy:hover { background: var(--instr-a10); border-color: var(--instr-a70); color: #7fd6cf; }
.term__copy:focus-visible { outline: 2px solid var(--instr); outline-offset: 2px; }
.term__addr { color: var(--gold); word-break: break-all; }

/* ── prompt line ─────────────────────────────────────────────────────────── */
.term__prompt {
  flex: none; position: relative; z-index: 4;
  display: flex; align-items: center; gap: .5rem;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid rgba(46,169,161,.18);
  font-family: var(--font-mono); font-size: .75rem;
}
.term__ps1 { flex: none; color: var(--text-muted); letter-spacing: .12em; }
.term__ps1 b { color: var(--instr); font-weight: 400; }
.term__in {
  /* field-sizing keeps the box on the text, so the caret sits where the
     cursor belongs instead of parked at the right edge of the window.
     Where it is unsupported the input simply fills the line, as before. */
  field-sizing: content;
  flex: 0 1 auto; min-width: 4ch; max-width: 100%;
  border: 0; background: transparent; outline: none;
  font: inherit; letter-spacing: .06em;
  color: var(--term-ink);
  caret-color: var(--instr);
}
.term__in::placeholder { color: var(--text-faint); }
/* the rest of the line is a click target for the prompt, nothing more */
.term__fill { flex: 1 1 auto; align-self: stretch; }

/* ── command rail ────────────────────────────────────────────────────────── */
.term__rail {
  flex: none; width: 12.5rem;
  display: flex; flex-direction: column;
  padding: .875rem .75rem .75rem;
  border-left: 1px solid rgba(46,169,161,.18);
  background: rgba(46,169,161,.035);
}
.term__railhead {
  margin: 0 0 .5rem;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
}
.term__cmds { display: grid; gap: .25rem; }
.term__cmd {
  display: block; width: 100%; text-align: left;
  padding: .4rem .5rem;
  border: 1px solid transparent; border-left: 2px solid rgba(46,169,161,.25);
  border-radius: 4px; background: rgba(46,169,161,.04);
  cursor: pointer;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--text-secondary);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.term__cmd:hover { background: var(--instr-a10); color: var(--term-ink); border-left-color: var(--instr); }
.term__cmd:focus-visible { outline: 2px solid var(--instr); outline-offset: 1px; }
.term__cmd.is-run { border-left-color: var(--gold); color: var(--gold); }
.term__foot {
  margin: auto 0 0;
  font-family: var(--font-mono); font-size: .625rem; line-height: 1.6;
  letter-spacing: .06em; color: var(--text-faint);
}

/* ── phone: a sheet, not a floating window ───────────────────────────────── */
@media (max-width: 720px) {
  .term { padding: 0; }
  .term__win {
    height: 100%; max-width: none; border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .term__body { flex-direction: column; }
  .term__meta { display: none; }
  .term__rail {
    width: auto; order: 2;
    border-left: 0; border-top: 1px solid rgba(46,169,161,.18);
    padding: .625rem .75rem .875rem;
  }
  /* two wrapped columns, not a horizontal scroller: every command stays
     visible and tappable, and nothing extends past the viewport */
  .term__cmds { grid-template-columns: 1fr 1fr; gap: .375rem; }
  .term__cmd {
    min-height: 38px; display: flex; align-items: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .term__foot { display: none; }
  .term__railhead { margin-bottom: .375rem; }
  /* the review switcher sits bottom-right — keep the last command clear of it */
  .term__rail { padding-bottom: 3.25rem; }
  .term__rows a { grid-template-columns: 2rem 1fr; }
  .term__rows .ds { grid-column: 2; color: var(--text-faint); }

  /* four controls in the right cluster at 360px: the terminal key is the
     primary one, so the index key gives up its label and the terminal keeps
     a glyph-only footprint too. Measured clean at 360 and 390. */
  .term-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: .4rem; }
  .term-btn__text { display: none; }
}
@media (max-width: 420px) {
  /* the gold CTA keeps its room by shortening — nothing overflows at 360px */
  .nav__right { gap: .375rem; }
  .btn--sm { padding-inline: .75rem; }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .term, .term__win { transition: none; }
  .term__win { transform: none; }
}


/* ── operator 2026-09-11: the terminal runs hotter than the rest of the
   instrument ──
   --instr (#2ea9a1) is shared by the rail, the status bar and this window.
   Rather than brighten all of it, the bright variant is scoped to the
   terminal and its trigger: the ambient chrome stays calm, the live surface
   reads as phosphor. The value is the brand's own dark-face cyan
   (#36d8ca, 11.3:1 on the near-black ground) rather than an invented green,
   so it stays inside the palette it belongs to. Custom properties cascade,
   so every var(--instr*) inside #term resolves to these without touching a
   single rule below. */
#term,
.term-btn {
  --instr:     #36d8ca;
  --instr-a10: rgba(54,216,202,.10);
  --instr-a22: rgba(54,216,202,.22);
  --instr-a40: rgba(54,216,202,.40);
  --instr-a70: rgba(54,216,202,.70);
  --term-ink:  #d6f6f1;
}