/*
 * terminal.css: the project-inquiry terminal (js/terminal.js builds the DOM).
 *
 * Skins: this file owns every --term-* token (Amendment 1). Public tokens:
 *   --term-bg --term-ink --term-dim --term-accent --term-error --term-frame --term-frame-ink --term-glow --term-font
 * Private helpers (also per theme): --term-hi (bright text), --term-ok, --term-bezel (housing
 * background), --term-bezel-edge, --term-screen-rim, --term-plate-bg/-ink, --term-lamp-1..3, --term-scan.
 *   diner    mint/seafoam phosphor, polished chrome bezel, cherry enamel badge
 *   forest   green phosphor, dark-wood bezel, brass plate
 *   airfield amber phosphor, brushed-aluminium bezel with rivets, navy plate
 */

/* ---- neutral fallbacks (no theme / unknown theme) ---- */
:root {
  --term-bg: #0b100f;
  --term-ink: #cfe6de;
  --term-hi: #f4fffb;
  --term-dim: #86a39a;
  --term-accent: #f2b43a;
  --term-ok: #9ff0c4;
  --term-error: #ff7f7f;
  --term-frame: #2a3033;
  --term-frame-ink: #e9eef0;
  --term-glow: rgb(170 230 210 / 0.28);
  --term-font: 'VT323', 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --term-bezel: linear-gradient(180deg, #3a4246, #22282b);
  --term-bezel-edge: #111618;
  --term-bezel-hi: rgb(255 255 255 / 0.18);
  --term-screen-rim: #050707;
  --term-plate-bg: #151a1c;
  --term-plate-ink: #cfd8dc;
  --term-lamp-1: #e0584a;
  --term-lamp-2: #f2b43a;
  --term-lamp-3: #5cc39a;
  --term-scan: 0.16;
  --term-backdrop: rgb(8 16 22 / 0.62);
}

/* ---- diner (default): mint phosphor in a chrome bezel ---- */
:root[data-theme="diner"] {
  --term-bg: #041210;
  --term-ink: #9ff3da;
  --term-hi: #e6fff7;
  --term-dim: #62a897;
  --term-accent: #f7c64f;
  --term-ok: #b4ffdc;
  --term-error: #ff7d74;
  --term-frame: #c9d1d6;
  --term-frame-ink: #0c2c3c;
  --term-glow: rgb(110 240 200 / 0.42);
  --term-bezel:
    linear-gradient(180deg, rgb(255 255 255 / 0.75) 0, rgb(255 255 255 / 0) 2px),
    linear-gradient(172deg, #fdfefe 0%, #dfe5e9 16%, #aab4bb 40%, #eef2f4 50%, #c2cad0 66%, #eef1f3 84%, #8c979f 100%);
  --term-bezel-edge: #6b767d;
  --term-bezel-hi: rgb(255 255 255 / 0.9);
  --term-screen-rim: #11181b;
  --term-plate-bg: #c8202f;
  --term-plate-ink: #f7eedc;
  --term-lamp-1: #c8202f;
  --term-lamp-2: #f2b43a;
  --term-lamp-3: #3fb8af;
  --term-scan: 0.17;
  --term-backdrop: rgb(12 44 60 / 0.55);
}

/* ---- forest: green phosphor in a dark-wood bezel ---- */
:root[data-theme="forest"] {
  --term-bg: #06110a;
  --term-ink: #8cf295;
  --term-hi: #dcffd8;
  --term-dim: #5f9f65;
  --term-accent: #f2c867;
  --term-ok: #b9ffb4;
  --term-error: #ff9270;
  --term-frame: #4a3020;
  --term-frame-ink: #f1e6cc;
  --term-glow: rgb(90 235 110 / 0.4);
  --term-bezel:
    linear-gradient(180deg, rgb(255 225 180 / 0.22) 0, rgb(255 225 180 / 0) 2px),
    repeating-linear-gradient(93deg, rgb(255 230 190 / 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(87deg, rgb(0 0 0 / 0.09) 0 1px, transparent 1px 13px),
    radial-gradient(ellipse 60% 20% at 30% 70%, rgb(0 0 0 / 0.14), transparent 70%),
    linear-gradient(180deg, #6b4a2b 0%, #4c311c 45%, #3a2414 100%);
  --term-bezel-edge: #1f130a;
  --term-bezel-hi: rgb(255 214 160 / 0.28);
  --term-screen-rim: #120b05;
  --term-plate-bg: linear-gradient(180deg, #d9b45c, #a8822f);
  --term-plate-ink: #2a1a0e;
  --term-lamp-1: #c4502a;
  --term-lamp-2: #f2c867;
  --term-lamp-3: #6e9a48;
  --term-scan: 0.2;
  --term-backdrop: rgb(10 26 14 / 0.6);
}

/* ---- airfield: amber phosphor in a brushed-aluminium bezel ---- */
:root[data-theme="airfield"] {
  --term-bg: #130b03;
  --term-ink: #ffb74a;
  --term-hi: #ffe6bd;
  --term-dim: #bd8436;
  --term-accent: #ffdc8f;
  --term-ok: #ffe9a8;
  --term-error: #ff7456;
  --term-frame: #b9c0c6;
  --term-frame-ink: #0c2c3c;
  --term-glow: rgb(255 168 60 / 0.42);
  --term-bezel:
    linear-gradient(180deg, rgb(255 255 255 / 0.85) 0, rgb(255 255 255 / 0) 2px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, rgb(0 0 0 / 0.035) 1px 2px, rgb(255 255 255 / 0.06) 2px 4px),
    linear-gradient(180deg, #e6eaed 0%, #c3c9ce 45%, #a9b0b6 100%);
  --term-bezel-edge: #6f777e;
  --term-bezel-hi: rgb(255 255 255 / 0.9);
  --term-screen-rim: #1b1510;
  --term-plate-bg: #0c2c3c;
  --term-plate-ink: #f3ead6;
  --term-lamp-1: #c4452a;
  --term-lamp-2: #b6701b;
  --term-lamp-3: #2f6e8e;
  --term-scan: 0.19;
  --term-backdrop: rgb(12 44 60 / 0.6);
}

/* ---- page state while open ---- */
html.term-open { overflow: hidden; }
html.term-open body { overflow: hidden; }

/* ---- the dialog ---- */
.term {
  --t-fs: clamp(1.2rem, 1.02rem + 0.42vw, 1.6rem);
  --t-pad: clamp(10px, 1.4vw, 22px);
  --t-radius: clamp(14px, 1.8vw, 26px);
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(calc(100vw - 32px), clamp(56rem, 58vw, 78rem));
  height: min(calc(var(--term-vvh, 100dvh) - 32px), clamp(36rem, 84vh, 58rem));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--term-ink);
  overflow: visible;
}
.term[open] { display: flex; }
.term *, .term *::before, .term *::after { box-sizing: border-box; }
.term::backdrop {
  background: var(--term-backdrop, rgb(8 16 22 / 0.62));
  -webkit-backdrop-filter: blur(3px) saturate(0.85);
  backdrop-filter: blur(3px) saturate(0.85);
}
.term ::selection { background: var(--term-ink); color: var(--term-bg); text-shadow: none; }

/* ---- housing ---- */
.term__bezel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
  padding: calc(var(--t-pad) * 0.6) var(--t-pad) calc(var(--t-pad) * 0.7);
  border-radius: var(--t-radius);
  background: var(--term-bezel);
  color: var(--term-frame-ink);
  box-shadow:
    inset 0 1px 0 var(--term-bezel-hi),
    inset 0 -3px 6px rgb(0 0 0 / 0.22),
    0 0 0 1px var(--term-bezel-edge),
    0 2px 0 1px rgb(0 0 0 / 0.18),
    0 34px 90px -20px rgb(0 0 0 / 0.65);
}

/* title bar */
.term__bar {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
  min-height: 40px;
}
.term__lamps { display: flex; gap: 6px; flex: none; }
.term__lamps i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--term-lamp-1);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.35), inset 0 2px 2px rgb(255 255 255 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.28);
}
.term__lamps i:nth-child(2) { background: var(--term-lamp-2); }
.term__lamps i:nth-child(3) { background: var(--term-lamp-3); }
.term__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'Space Mono', ui-monospace, Consolas, monospace;
  font-size: clamp(0.72rem, 0.64rem + 0.28vw, 0.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-align: center;
  text-shadow: 0 1px 0 var(--term-bezel-hi);
}
.term__actions { display: flex; gap: 6px; flex: none; }
.term__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: clamp(40px, 2.2vw, 48px);
  min-height: clamp(40px, 2.2vw, 48px);
  padding: 0 clamp(12px, 0.8vw, 16px);
  border: 1px solid rgb(0 0 0 / 0.28);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 2px rgb(0 0 0 / 0.2);
  color: inherit;
  font-family: 'Space Mono', ui-monospace, Consolas, monospace;
  font-size: clamp(0.76rem, 0.62rem + 0.2vw, 0.95rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.term__btn:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.18)); }
.term__btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.25); }
.term__btn:focus-visible { outline: 3px solid var(--focus, var(--term-accent)); outline-offset: 2px; }
.term__close { padding: 0; width: clamp(40px, 2.2vw, 48px); font-size: 1rem; }
/* sound on/off (sound.js toggles it; the icon follows html.sound-off, like the header button) */
.term__sound { padding: 0; width: clamp(40px, 2.2vw, 48px); }
.term__sound .icon { width: 1.15rem; height: 1.15rem; }
html.no-audio .term__sound { display: none; }
.term__mode-box {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  flex: none;
}
.term__mode[aria-pressed="true"] .term__mode-box {
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--term-frame, #ccc);
}
:root[data-theme="forest"] .term__btn {
  border-color: rgb(0 0 0 / 0.5);
  background: linear-gradient(180deg, rgb(255 230 190 / 0.16), rgb(0 0 0 / 0.12));
  box-shadow: inset 0 1px 0 rgb(255 225 180 / 0.2), 0 1px 2px rgb(0 0 0 / 0.4);
}
:root[data-theme="forest"] .term__btn:hover { background: linear-gradient(180deg, rgb(255 230 190 / 0.26), rgb(0 0 0 / 0.05)); }
:root[data-theme="forest"] .term__title { text-shadow: 0 1px 0 rgb(0 0 0 / 0.6); }
:root[data-theme="forest"] .term__mode[aria-pressed="true"] .term__mode-box { box-shadow: inset 0 0 0 2px #4c311c; }

/* ---- the CRT ---- */
.term__screen {
  position: relative;
  min-height: 0;
  display: grid;
  overflow: hidden;
  border-radius: calc(var(--t-radius) * 0.75) / calc(var(--t-radius) * 0.9);
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%, color-mix(in srgb, var(--term-ink) 7%, var(--term-bg)) 0%, var(--term-bg) 72%);
  box-shadow:
    0 0 0 clamp(3px, 0.45vw, 6px) var(--term-screen-rim),
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 1px) rgb(0 0 0 / 0.35),
    inset 0 0 0 1px rgb(0 0 0 / 0.7);
  color: var(--term-ink);
  isolation: isolate;
}
.term__body,
.term__plain {
  grid-area: 1 / 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--term-ink) 45%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}
.term__body {
  padding: clamp(14px, 2vw, 30px) clamp(14px, 2.4vw, 38px) clamp(18px, 2.4vw, 34px);
  font-family: var(--term-font);
  font-size: var(--t-fs);
  line-height: 1.22;
  color: var(--term-ink);
  text-shadow: 0 0 0.3em var(--term-glow), 0 0 1px color-mix(in srgb, var(--term-ink) 60%, transparent);
  /* keep the monospace grid exact so the drawn cursor lines up with the real caret */
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
  cursor: text;
}
.term__body[hidden], .term__plain[hidden] { display: none; }
.term__body:focus { outline: none; }

/* scanlines, vignette and glass glare: decoration only */
.term__glass {
  grid-area: 1 / 1;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 34%),
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 58%, rgb(0 0 0 / 0.55) 100%),
    repeating-linear-gradient(180deg, rgb(0 0 0 / var(--term-scan)) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 clamp(24px, 4vw, 60px) rgb(0 0 0 / 0.65);
  animation: term-flicker 7s steps(1) infinite;
}
.term__screen.is-plain .term__glass {
  background: radial-gradient(ellipse 130% 120% at 50% 50%, transparent 70%, rgb(0 0 0 / 0.35) 100%);
  animation: none;
}
@keyframes term-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.93; }
  42% { opacity: 1; }
  77% { opacity: 0.96; }
  78% { opacity: 1; }
}

/* bezel foot: maker's plate and power LED */
.term__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
  padding: 0 4px;
}
.term__plate {
  padding: 3px 10px 2px;
  border-radius: 999px;
  background: var(--term-plate-bg);
  color: var(--term-plate-ink);
  font-family: 'Space Mono', ui-monospace, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 1px rgb(0 0 0 / 0.3);
}
.term__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--term-ink);
  box-shadow: 0 0 6px 1px var(--term-glow), inset 0 1px 1px rgb(255 255 255 / 0.6);
}
:root[data-theme="airfield"] .term__plate { border-radius: 3px; letter-spacing: 0.2em; }

/* airfield rivets */
:root[data-theme="airfield"] .term__bezel::before,
:root[data-theme="airfield"] .term__bezel::after {
  content: '';
  position: absolute;
  left: calc(var(--t-radius) * 0.45);
  right: calc(var(--t-radius) * 0.45);
  height: 8px;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 35%, #ffffff 0 1px, #c9cfd4 1.6px, #7d868d 3px, rgb(0 0 0 / 0.25) 3.6px, transparent 4px) left / 8px 8px no-repeat,
    radial-gradient(circle at 40% 35%, #ffffff 0 1px, #c9cfd4 1.6px, #7d868d 3px, rgb(0 0 0 / 0.25) 3.6px, transparent 4px) right / 8px 8px no-repeat;
}
:root[data-theme="airfield"] .term__bezel::before { top: calc(var(--t-radius) * 0.45); }
:root[data-theme="airfield"] .term__bezel::after { bottom: calc(var(--t-radius) * 0.45); }

/* diner: a cherry pinstripe under the chrome title bar */
:root[data-theme="diner"] .term__bar { box-shadow: 0 1px 0 rgb(255 255 255 / 0.7); padding-bottom: 2px; }
:root[data-theme="diner"] .term__screen {
  box-shadow:
    0 0 0 clamp(3px, 0.45vw, 6px) var(--term-screen-rim),
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 2px) #c8202f,
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 3px) rgb(0 0 0 / 0.25),
    inset 0 0 0 1px rgb(0 0 0 / 0.7);
}
/* forest: a brass trim ring */
:root[data-theme="forest"] .term__screen {
  box-shadow:
    0 0 0 clamp(3px, 0.45vw, 6px) var(--term-screen-rim),
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 2px) #a8822f,
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 3px) rgb(0 0 0 / 0.5),
    inset 0 0 0 1px rgb(0 0 0 / 0.7);
}

/* power-on */
.term.is-opening .term__bezel { animation: term-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.term.is-opening .term__body,
.term.is-opening .term__plain { animation: term-on 0.42s ease-out both; }
@keyframes term-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes term-on {
  0% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.6); }
  55% { clip-path: inset(0 0 0 0); filter: brightness(1.5); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}

/* ---- log lines ---- */
.term__log { display: flex; flex-direction: column; align-items: stretch; container-type: inline-size; }
.t-line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-gap { height: 0.55em; flex: none; }
.t-dim { color: var(--term-dim); }
.t-strong { color: var(--term-hi); }
.t-key { color: var(--term-accent); }
.t-ok { color: var(--term-ok); }
.t-big { color: var(--term-ok); font-size: 1.08em; }
.t-err {
  color: var(--term-error);
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--term-error) 45%, transparent);
}
.t-remind { font-size: 0.92em; }
.t-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.t-link {
  color: var(--term-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  border-radius: 2px;
  overflow-wrap: anywhere;
}
.t-link:hover { color: var(--term-hi); }
.t-link:focus-visible, .t-opt:focus-visible, .term__send:focus-visible {
  outline: 2px solid var(--term-accent);
  outline-offset: 2px;
}

.t-banner {
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 0.55em;
  padding: 0.18em 0.8em 0.12em;
  border: 4px double var(--term-accent);
  color: var(--term-accent);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 0 0.35em color-mix(in srgb, var(--term-accent) 55%, transparent);
}

/* questions */
.t-q { color: var(--term-hi); }
.t-q__n {
  display: inline-block;
  margin-right: 0.55em;
  padding: 0 0.3em;
  border: 1px solid color-mix(in srgb, var(--term-dim) 80%, transparent);
  color: var(--term-dim);
  font-size: 0.8em;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.t-q__text { min-width: 0; }
.t-q__opt { margin-left: 0.5em; color: var(--term-dim); font-size: 0.8em; }
.t-q__opt::before { content: '('; }
.t-q__opt::after { content: ')'; }

/* echoed answers */
.t-echo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  color: var(--term-hi);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.t-echo__ps { color: var(--term-accent); flex: none; }
.t-echo__text { min-width: 0; max-width: 100%; }
.t-echo__note { color: var(--term-dim); }

/* numbered menus */
.t-menu {
  list-style: none;
  margin: 0.2em 0 0.3em;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.t-menu--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); column-gap: 1.2em; }
.t-menu__item { min-width: 0; }
.t-opt {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1.1ch minmax(0, 1fr);
  column-gap: 0.45em;
  align-items: baseline;
  width: calc(100% + 0.6em);
  margin: 0 -0.3em;
  padding: 0.04em 0.3em;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--term-ink);
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-shadow: inherit;
  text-rendering: inherit;
  font-kerning: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.t-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--term-ink) 13%, transparent); }
.t-opt__n { color: var(--term-accent); }
.t-opt__mark { color: var(--term-accent); }
.t-opt.is-on .t-opt__mark::before { content: '\2713'; }
.t-opt__text { min-width: 0; }
.t-opt.is-on .t-opt__label { color: var(--term-hi); }
.t-opt__hint { color: var(--term-dim); font-size: 0.86em; }
.t-opt__hint::before { content: '\2014  '; }
.t-menu.is-done .t-opt { cursor: default; color: var(--term-dim); }
.t-menu.is-done .t-opt__n, .t-menu.is-done .t-opt__mark { color: var(--term-dim); }
.t-menu.is-done .t-opt.is-on .t-opt__label { color: var(--term-ink); }
.t-menu.is-done .t-opt__hint { display: none; }

/* receipts: estimate, review, rates, help */
.t-receipt {
  position: relative;
  max-width: 48em;
  margin: 0.4em 0 0.5em;
  padding: 0.6em 0.9em 0.75em;
  border: 1px dashed color-mix(in srgb, var(--term-ink) 45%, transparent);
  background: color-mix(in srgb, var(--term-ink) 4%, transparent);
}
.t-receipt__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.3em;
  color: var(--term-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.t-receipt__head::after {
  content: '';
  flex: 1;
  border-top: 1px dashed color-mix(in srgb, var(--term-accent) 50%, transparent);
}
.t-receipt__none, .t-receipt__foot { margin: 0.25em 0 0; }
.t-receipt__foot { color: var(--term-hi); }
.t-row {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
}
.t-row__label { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.t-row__dots {
  flex: 1 1 1.5em;
  min-width: 1.2em;
  align-self: stretch;
  background: radial-gradient(circle, color-mix(in srgb, var(--term-ink) 45%, transparent) 0 1px, transparent 1.5px) 0 72% / 0.5em 0.5em repeat-x;
}
.t-row__val {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 70%;
  text-align: right;
  color: var(--term-hi);
  overflow-wrap: anywhere;
}
.t-row.is-empty .t-row__val { color: var(--term-dim); }
.t-row:not(.t-row--mid):not(.t-row--long) .t-row__val { white-space: nowrap; }
.t-row--long { flex-wrap: wrap; }
.t-row--long .t-row__dots { display: none; }
.t-row--long .t-row__val { flex: 1 1 100%; max-width: none; padding-left: 0.9em; text-align: left; }
.t-receipt { container-type: inline-size; }
@container (max-width: 520px) {
  .t-row--mid { flex-wrap: wrap; }
  .t-row--mid .t-row__dots { display: none; }
  .t-row--mid .t-row__val { flex: 1 1 100%; max-width: none; padding-left: 0.9em; text-align: left; }
}
.t-row--total { margin-top: 0.1em; color: var(--term-hi); }
.t-row--total .t-row__val { color: var(--term-accent); }
.t-row__sub { color: var(--term-dim); font-size: 0.88em; margin: -0.05em 0 0.2em; }
.t-rule {
  height: 0;
  margin: 0.4em 0;
  border-top: 1px dashed color-mix(in srgb, var(--term-ink) 40%, transparent);
}
.t-help {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.05em 1.4em;
  max-width: 44em;
  margin: 0.3em 0 0.4em;
  padding: 0.45em 0.8em;
  border-left: 2px solid color-mix(in srgb, var(--term-accent) 60%, transparent);
}
.t-help__cmd { color: var(--term-accent); }
.t-help__desc { color: var(--term-ink); }
@container (max-width: 360px) { .t-help { grid-template-columns: 1fr; } .t-help__desc { padding-left: 1em; margin-bottom: 0.15em; } }

.t-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
  gap: 0.6em;
  margin-top: 0.6em;
}
.t-plan {
  min-width: 0;
  padding: 0.45em 0.7em 0.55em;
  border: 1px solid color-mix(in srgb, var(--term-ink) 32%, transparent);
}
.t-plan.is-chosen {
  border-color: var(--term-accent);
  box-shadow: inset 0 0 0 1px var(--term-accent), 0 0 0.9em -0.2em color-mix(in srgb, var(--term-accent) 60%, transparent);
}
.t-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.55em;
  color: var(--term-hi);
}
.t-plan__badge {
  padding: 0 0.35em;
  background: var(--term-accent);
  color: var(--term-bg);
  font-size: 0.82em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}
.t-plan__pick { margin-left: auto; color: var(--term-accent); font-size: 0.86em; }
.t-plan__cost {
  margin: 0.05em 0 0.15em;
  color: var(--term-accent);
  font-size: 1.32em;
  line-height: 1.1;
  text-shadow: 0 0 0.35em color-mix(in srgb, var(--term-accent) 50%, transparent);
}
.t-plan__facts { margin: 0.2em 0 0; }
.t-plan__facts dt { margin: 0.25em 0 0; color: var(--term-dim); font-size: 0.86em; line-height: 1.1; }
.t-plan__facts dd { margin: 0; color: var(--term-hi); }
.t-plan__facts dd.t-plan__sub { color: var(--term-dim); font-size: 0.86em; line-height: 1.1; }
.t-plan__hint { margin-top: 0.15em; color: var(--term-dim); font-size: 0.9em; }
.t-notes {
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
  color: var(--term-dim);
  font-size: 0.8em;
  line-height: 1.12;
}
.t-notes li { position: relative; padding-left: 1.5ch; margin-top: 0.15em; }
.t-notes li::before { content: '*'; position: absolute; left: 0; }

.t-block { margin-top: 0.4em; }
.t-block__label { color: var(--term-ink); }
.t-block__text {
  margin-top: 0.1em;
  padding-left: 0.7em;
  border-left: 2px solid color-mix(in srgb, var(--term-ink) 40%, transparent);
  color: var(--term-hi);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.t-block__text.is-empty { color: var(--term-dim); }

.t-progress__bar { color: var(--term-accent); letter-spacing: -0.04em; }
.t-progress__pct { color: var(--term-dim); }
.t-progress.is-failed .t-progress__bar { color: var(--term-error); }
.t-progress.is-failed .t-progress__pct { color: var(--term-error); }

/* ---- the prompt: a real input, drawn as a terminal line with a block cursor ---- */
.term__prompt {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-top: 0.15em;
}
.term__prompt[hidden], .term__assist[hidden] { display: none; }
.term__ps1 { flex: none; color: var(--term-accent); }
.term__field { position: relative; flex: 1 1 auto; min-width: 0; }
.term__input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 1.22em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--term-hi);
  caret-color: transparent;
  font: inherit;
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
  font-size: max(16px, 1em);
  line-height: 1.22;
  letter-spacing: inherit;
  text-shadow: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.term__input[hidden] { display: none; }
.term__input:-webkit-autofill,
.term__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--term-hi);
  -webkit-box-shadow: 0 0 0 100px var(--term-bg) inset;
  transition: background-color 9999s;
}
.term__textarea {
  height: auto;
  min-height: 1.22em;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term__mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  font: inherit;
  font-size: max(16px, 1em);
  line-height: 1.22;
}
.term__mirror.is-long { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1ch;
  min-width: 0.4em;
  height: 1.22em;
  font-size: max(16px, 1em);
  line-height: 1.22;
  background: var(--term-ink);
  color: var(--term-bg);
  text-shadow: none;
  box-shadow: 0 0 0.5em var(--term-glow);
  pointer-events: none;
  will-change: transform;
}
.term__cursor[hidden] { display: none; }
.term__cursor.is-blink { animation: term-blink 1.05s steps(1) 0.45s infinite; }
.term__prompt:not(.is-focused) .term__cursor {
  background: transparent;
  color: inherit;
  outline: 1px solid var(--term-ink);
  outline-offset: -1px;
  animation: none;
}
.term__prompt.is-busy .term__input { color: var(--term-dim); }
@keyframes term-blink { 50% { opacity: 0; } }

.term__assist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em 1em;
  margin-top: 0.35em;
  padding-left: 1.1em;
  color: var(--term-dim);
  font-size: 0.82em;
}
.term__send {
  min-height: 44px;
  padding: 0.1em 0.9em;
  border: 1px solid var(--term-accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--term-accent) 14%, transparent);
  color: var(--term-accent);
  font: inherit;
  font-size: 1.15em;
  text-shadow: inherit;
  cursor: pointer;
}
.term__send[hidden] { display: none; }
.term__send:active { background: color-mix(in srgb, var(--term-accent) 30%, transparent); }

/* ---- plain form ---- */
.term__plain {
  padding: clamp(16px, 2.2vw, 32px) clamp(14px, 2.6vw, 40px) clamp(20px, 2.6vw, 36px);
  font-family: var(--font-body, 'Jost', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--term-hi);
  background: color-mix(in srgb, var(--term-bg) 92%, #fff);
}
.tf { max-width: 60rem; margin: 0 auto; }
.tf[hidden], .tf__done[hidden], .tf__status[hidden], .tf__err[hidden] { display: none; }
.tf__head { margin-bottom: 1rem; }
.tf__title {
  margin: 0 0 0.2rem;
  font-family: var(--term-font);
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--term-accent);
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--term-accent) 40%, transparent);
}
.tf__title:focus { outline: none; }
.tf__intro { margin: 0; color: var(--term-dim); }
.tf__group {
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0.75rem clamp(0.75rem, 1.5vw, 1.1rem) 1rem;
  border: 1px solid color-mix(in srgb, var(--term-ink) 26%, transparent);
  border-radius: 10px;
}
.tf__group.is-invalid { border-color: var(--term-error); }
.tf__legend {
  padding: 0 0.4rem;
  font-family: 'Space Mono', ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--term-accent);
}
.tf__req { color: var(--term-error); }
.tf__opt { color: var(--term-dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--font-body, 'Jost', system-ui, sans-serif); font-size: 0.9em; }
.tf__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.9rem 1rem;
}
.tf__cols--pair { gap: 0 1rem; align-items: start; }
.tf__field { min-width: 0; }
.tf__field + .tf__field { margin-top: 0.9rem; }
.tf__cols > .tf__field + .tf__field { margin-top: 0; }
.tf__label { display: block; margin-bottom: 0.3rem; font-weight: 500; color: var(--term-hi); }
.tf__input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--term-ink) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--term-bg) 80%, #000);
  color: var(--term-hi);
  font: inherit;
  font-size: max(16px, 1rem);
  line-height: 1.4;
}
.tf__input:focus { outline: 2px solid var(--term-accent); outline-offset: 1px; border-color: var(--term-accent); }
.tf__input:-webkit-autofill { -webkit-text-fill-color: var(--term-hi); -webkit-box-shadow: 0 0 0 100px color-mix(in srgb, var(--term-bg) 80%, #000) inset; }
.tf__textarea { resize: vertical; min-height: 6.5rem; }
.is-invalid > .tf__input { border-color: var(--term-error); }
.tf__hint { margin: 0.3rem 0 0; color: var(--term-dim); font-size: 0.88rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.tf__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.tf__err { margin: 0.35rem 0 0; color: var(--term-error); font-size: 0.92rem; font-weight: 500; }

.tf__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.5rem;
}
.tf__choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--term-ink) 26%, transparent);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tf__choice:hover { border-color: color-mix(in srgb, var(--term-ink) 55%, transparent); }
.tf__choice:has(.tf__check:checked) {
  border-color: var(--term-accent);
  background: color-mix(in srgb, var(--term-accent) 11%, transparent);
}
.tf__check {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.tf__box {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  border: 2px solid color-mix(in srgb, var(--term-ink) 75%, transparent);
  border-radius: 4px;
}
.tf__choices--radio .tf__box { border-radius: 50%; }
.tf__check:checked + .tf__box {
  border-color: var(--term-accent);
  background: var(--term-accent);
  box-shadow: inset 0 0 0 3px var(--term-bg);
}
.tf__check:focus-visible + .tf__box { outline: 2px solid var(--term-accent); outline-offset: 3px; }
.tf__choice-text { min-width: 0; }
.tf__choice-label { display: block; color: var(--term-hi); }
.tf__choice-hint { display: block; color: var(--term-dim); font-size: 0.86rem; line-height: 1.3; }
/* --term-dim on the checked tint falls under 4.5:1; the body ink keeps it readable. */
.tf__choice:has(.tf__check:checked) .tf__choice-hint { color: var(--term-ink); }

.tf__estimate { margin: 0 0 1rem; font-family: var(--term-font); font-size: clamp(1.15rem, 1rem + 0.3vw, 1.35rem); line-height: 1.2; color: var(--term-ink); }
.tf__estimate .t-receipt { max-width: none; margin: 0; }

.tf__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 0.4rem; }
.tf__submit, .tf__secondary {
  min-height: 48px;
  padding: 0.35rem 1.5rem 0.25rem;
  border: 2px solid var(--term-accent);
  border-radius: 8px;
  background: var(--term-accent);
  color: var(--term-bg);
  font-family: var(--term-font);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.tf__secondary { background: transparent; color: var(--term-accent); }
.tf__submit:hover { filter: brightness(1.08); }
.tf__submit:disabled { opacity: 0.6; cursor: progress; }
.tf__submit:focus-visible, .tf__secondary:focus-visible, .tf__mail:focus-visible, .tf__status a:focus-visible { outline: 3px solid var(--term-hi); outline-offset: 2px; }
.tf__mail, .tf__status a { color: var(--term-accent); text-underline-offset: 0.15em; }

.tf__status {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--term-ink) 40%, transparent);
  border-radius: 8px;
}
.tf__status.is-error, .tf__status.is-fail { border-color: var(--term-error); background: color-mix(in srgb, var(--term-error) 10%, transparent); }
.tf__status-text { margin: 0; font-weight: 600; }
.tf__status.is-error .tf__status-text, .tf__status.is-fail .tf__status-text { color: var(--term-error); }
.tf__status-more { margin: 0.3rem 0 0; }
.tf__done {
  max-width: 44rem;
  margin: clamp(1rem, 6vh, 4rem) auto 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--term-ok);
  border-radius: 10px;
  outline: none;
}
.tf__done-title { margin: 0 0 0.5rem; color: var(--term-ok); font-size: 1.15rem; font-weight: 600; }
.tf__done-text { margin: 0 0 0.3rem; color: var(--term-hi); }
.tf__done-est { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0.6rem 0; }
.tf__done-est dt { color: var(--term-dim); }
.tf__done-est dd { margin: 0; color: var(--term-hi); font-weight: 600; }
@media (max-width: 480px) { .tf__done-est { grid-template-columns: 1fr; } .tf__done-est dd { margin-bottom: 0.3rem; } }
.tf__done .tf__actions { margin-top: 1rem; }

/* ---- touch devices: bigger targets ---- */
@media (pointer: coarse) {
  .term__btn { min-height: 44px; min-width: 44px; }
  .term__close,
  .term__sound { width: 44px; }
  .t-menu { gap: 0.15em 1.4em; }
  .t-opt { min-height: 2.1em; padding-top: 0.2em; padding-bottom: 0.2em; }
  .t-menu.is-done .t-opt { min-height: 0; padding-top: 0.04em; padding-bottom: 0.04em; }
  .t-link { display: inline-block; padding: 0.15em 0; }
}

/* ---- phones and short screens: the terminal takes the whole (visual) viewport ---- */
@media (max-width: 640px), (max-height: 520px) {
  .term {
    inset: var(--term-vvt, 0px) 0 auto 0;
    width: 100%;
    height: var(--term-vvh, 100dvh);
    margin: 0;
  }
  .term__bezel {
    border-radius: 0;
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    box-shadow: inset 0 1px 0 var(--term-bezel-hi), inset 0 -3px 6px rgb(0 0 0 / 0.22);
  }
  .term__foot { display: none; }
  .term__screen { border-radius: 10px / 12px; }
  :root[data-theme="airfield"] .term__bezel::before,
  :root[data-theme="airfield"] .term__bezel::after { display: none; }
}
@media (max-width: 640px) {
  .term { --t-fs: clamp(1.2rem, 1.05rem + 0.8vw, 1.35rem); }
  .term__bar { gap: 8px; min-height: 44px; }
  .term__title { text-align: left; font-size: 0.72rem; }
  .term__lamps { display: none; }
  .term__body { padding: 12px 12px 16px; }
  .term__plain { padding: 14px 12px 20px; }
  .t-receipt { padding: 0.5em 0.6em 0.6em; }
  .t-row__val { max-width: 62%; }
}
@media (max-width: 380px) {
  .term__mode { padding: 0 9px; }
  .term__mode-text { font-size: 0.72rem; }
  .term__title { font-size: 0.66rem; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .term__body { padding-top: 10px; padding-bottom: 12px; }
  .term__bar { min-height: 36px; }
}

/* ---- big screens: a touch more room ---- */
@media (min-width: 1800px) {
  .term { --t-fs: clamp(1.45rem, 0.9rem + 0.5vw, 1.75rem); }
}

/* ---- reduced motion: no flicker, no blink, no power-on ---- */
@media (prefers-reduced-motion: reduce) {
  .term__glass,
  .term__cursor.is-blink,
  .term.is-opening .term__bezel,
  .term.is-opening .term__body,
  .term.is-opening .term__plain { animation: none !important; }
}

/* ---- forced colours (Windows high contrast) ---- */
@media (forced-colors: active) {
  .term__glass { display: none; }
  .term__cursor { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .t-plan.is-chosen { outline: 2px solid Highlight; }
}
