/* Terminal — the instrument panel.
 *
 * The rest of alphapinelab.com is light, airy and Apple-adjacent. This page
 * deliberately is not. A trading terminal earns trust through density: hairline
 * rules instead of cards, monospaced tabular figures instead of a display face,
 * uppercase micro-labels, and a dark ground so that colour means something
 * rather than decorating. The dark shell sits inside the ordinary site chrome,
 * which is what makes it read as an instrument rather than a different website.
 *
 * Colour carries exactly three meanings and never more:
 *   green   the model reads bullish
 *   red     the model reads bearish
 *   amber   caution — thin sample, stale data, a gate that is not satisfied
 * Everything else is neutral. Anything the model cannot support is rendered in
 * the muted tone with an em dash, never as a confident zero.
 */

/* Both themes are defined as the same token set, so every rule below — and the
   canvas, which reads these same custom properties at draw time — is written
   once and themed once. Adding a third theme would mean adding one block here
   and nothing else.

   The text ramp carries three steps and only three: `text` for values, `muted`
   for the labels that name them, `faint` for units and qualifiers. Each step is
   held above 4.5:1 against its own ground so the 9px micro-labels stay legible
   rather than merely present, which is where the first dark pass fell short. */
.terminal-page {
  --t-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.terminal-shell[data-theme="dark"] {
  --t-bg: #090b0e;
  --t-shell: #0d1014;
  --t-panel: #11151b;
  --t-panel-raised: #171d26;
  --t-line: rgba(255, 255, 255, 0.08);
  --t-line-strong: rgba(255, 255, 255, 0.16);
  --t-text: #edf0f5;
  --t-muted: #9aa4b2;
  --t-faint: #808a99;
  --t-amber: #efad4a;
  --t-cyan: #63b2e4;
  --t-long: #2bc482;
  --t-short: #ec6058;

  --tc-grid: rgba(255, 255, 255, 0.055);
  --tc-axis: rgba(255, 255, 255, 0.13);
  --tc-band-fill: rgba(99, 178, 228, 0.075);
  --tc-band-line: rgba(99, 178, 228, 0.34);
  --tc-basis: rgba(237, 240, 245, 0.3);
  --tc-fast: rgba(239, 173, 74, 0.85);
  --tc-slow: rgba(154, 164, 178, 0.62);
  --tc-vol-up: rgba(43, 196, 130, 0.55);
  --tc-vol-down: rgba(236, 96, 88, 0.55);
  --tc-lane: rgba(255, 255, 255, 0.03);
  --tc-crosshair: rgba(237, 240, 245, 0.4);
  --tc-plate: rgba(9, 11, 14, 0.86);
  --tc-tag-ink: #090b0e;
  --tc-ladder-fill: rgba(154, 164, 178, 0.09);
  --tc-ladder-line: rgba(237, 240, 245, 0.2);
  --tc-pulse-up: rgba(43, 196, 130, 0.22);
  --tc-pulse-down: rgba(236, 96, 88, 0.22);

  --t-hairline: rgba(255, 255, 255, 0.045);
  --t-track: rgba(255, 255, 255, 0.07);
  --t-overlay: rgba(23, 29, 38, 0.94);
  --t-drop-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --t-accent-soft: rgba(239, 173, 74, 0.1);
  --t-accent-wash: rgba(239, 173, 74, 0.045);
  --t-accent-ring: rgba(239, 173, 74, 0.34);
  --t-accent-halo: rgba(239, 173, 74, 0.16);
  --t-long-ring: rgba(43, 196, 130, 0.42);
}

/* Not an inversion of the dark palette. Saturated greens and reds that read
   correctly on near-black go muddy on near-white, so the directional pair is
   darkened rather than lightened, and the band fill is warmed to keep it from
   disappearing into the page. */
.terminal-shell[data-theme="light"] {
  --t-bg: #f7f8fa;
  --t-shell: #eef0f4;
  --t-panel: #ffffff;
  --t-panel-raised: #f0f2f6;
  --t-line: rgba(18, 22, 28, 0.1);
  --t-line-strong: rgba(18, 22, 28, 0.2);
  --t-text: #12161c;
  --t-muted: #545d6a;
  --t-faint: #656d7a;
  --t-amber: #a56a09;
  --t-cyan: #1f6fa8;
  --t-long: #0b7d4d;
  --t-short: #c2352d;

  --tc-grid: rgba(18, 22, 28, 0.07);
  --tc-axis: rgba(18, 22, 28, 0.18);
  --tc-band-fill: rgba(31, 111, 168, 0.07);
  --tc-band-line: rgba(31, 111, 168, 0.32);
  --tc-basis: rgba(18, 22, 28, 0.34);
  --tc-fast: rgba(165, 106, 9, 0.9);
  --tc-slow: rgba(84, 93, 106, 0.6);
  --tc-vol-up: rgba(11, 125, 77, 0.5);
  --tc-vol-down: rgba(194, 53, 45, 0.5);
  --tc-lane: rgba(18, 22, 28, 0.028);
  --tc-crosshair: rgba(18, 22, 28, 0.45);
  --tc-plate: rgba(247, 248, 250, 0.9);
  --tc-tag-ink: #ffffff;
  --tc-ladder-fill: rgba(84, 93, 106, 0.1);
  --tc-ladder-line: rgba(18, 22, 28, 0.24);
  --tc-pulse-up: rgba(11, 125, 77, 0.18);
  --tc-pulse-down: rgba(194, 53, 45, 0.18);

  --t-hairline: rgba(18, 22, 28, 0.075);
  --t-track: rgba(18, 22, 28, 0.09);
  --t-overlay: rgba(255, 255, 255, 0.95);
  --t-drop-shadow: 0 18px 44px rgba(18, 22, 28, 0.16);
  --t-accent-soft: rgba(165, 106, 9, 0.11);
  --t-accent-wash: rgba(165, 106, 9, 0.05);
  --t-accent-ring: rgba(165, 106, 9, 0.4);
  --t-accent-halo: rgba(165, 106, 9, 0.18);
  --t-long-ring: rgba(11, 125, 77, 0.45);
}

/* The stylesheet carries no screen-reader utility of its own, so the Terminal
   defines the one it needs rather than shipping an unlabelled search field. */
.terminal-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Page intro (stays in the site's light language) --------------------- */

.terminal-intro {
  padding: 64px 0 8px;
  text-align: center;
}

.terminal-intro h1 {
  margin: 18px 0 14px;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.terminal-intro p {
  max-width: 660px;
  margin: 0 auto;
  font-size: 1.02rem;
}

.terminal-intro .eyebrow-pill {
  margin: 0 auto;
}

/* --- Shell --------------------------------------------------------------- */

/* The terminal opens the page and spans the window edge to edge. A centred
   card with margins either side reads as a screenshot of a product; filling
   the viewport reads as the product. The rounded corners and side borders go
   with the margins — there is nothing left for them to sit against. */
.terminal-stage {
  width: 100%;
}

.terminal-shell {
  overflow: hidden;
  border-bottom: 1px solid var(--t-line);
  background: var(--t-bg);
  color: var(--t-text);
  font-family: var(--t-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.terminal-shell p {
  color: var(--t-muted);
}

/* --- Command bar --------------------------------------------------------- */

.terminal-command {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--t-line);
  background: var(--t-shell);
}

.terminal-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--t-line);
  color: var(--t-amber);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.terminal-mark span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-amber);
  box-shadow: 0 0 0 3px var(--t-accent-halo);
}

.terminal-search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.terminal-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--t-line-strong);
  border-radius: 6px;
  background: var(--t-panel);
  color: var(--t-text);
  font: inherit;
  letter-spacing: 0.02em;
}

.terminal-search input::placeholder {
  color: var(--t-faint);
}

/* Escape already clears the field, and the native control does not match the
   panel's type. */
.terminal-search input::-webkit-search-cancel-button {
  display: none;
}

.terminal-search input:focus {
  border-color: var(--t-accent-ring);
  outline: none;
  box-shadow: 0 0 0 3px var(--t-accent-soft);
}

.terminal-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 13px;
  height: 13px;
  color: var(--t-faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.terminal-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--t-line-strong);
  border-radius: 8px;
  background: var(--t-panel-raised);
  box-shadow: var(--t-drop-shadow);
}

.terminal-results:empty,
.terminal-results[hidden] {
  display: none;
}

.terminal-result {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr auto;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  border-bottom: 1px solid var(--t-line);
  background: none;
  color: var(--t-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.terminal-result:last-child {
  border-bottom: 0;
}

.terminal-result:hover,
.terminal-result[aria-selected="true"] {
  background: var(--t-accent-soft);
}

.terminal-result b {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.terminal-result i {
  overflow: hidden;
  color: var(--t-muted);
  font-style: normal;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.terminal-result em {
  color: var(--t-faint);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.terminal-timeframes {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--t-line);
  border-radius: 6px;
  background: var(--t-panel);
}

.terminal-timeframes button {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--t-muted);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.terminal-timeframes button:hover {
  color: var(--t-text);
}

.terminal-timeframes button:disabled {
  color: var(--t-faint);
  cursor: not-allowed;
  opacity: 0.42;
}

.terminal-timeframes button:disabled:hover {
  color: var(--t-faint);
}

.terminal-timeframes button[aria-pressed="true"] {
  background: var(--t-panel-raised);
  color: var(--t-amber);
  box-shadow: inset 0 0 0 1px var(--t-accent-ring);
}

/* A pill of three: match system, force light, force dark. The active choice
   takes a filled disc rather than a rounded rectangle, so the control reads as
   one switch with a position instead of three separate buttons. */
.terminal-theme {
  display: flex;
  flex-shrink: 0;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  background: var(--t-panel);
}

.terminal-theme button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--t-faint);
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.terminal-theme button:hover {
  color: var(--t-text);
}

.terminal-theme button:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 1px;
}

.terminal-theme button[aria-pressed="true"] {
  background: var(--t-panel-raised);
  color: var(--t-amber);
  box-shadow: inset 0 0 0 1px var(--t-accent-ring);
}

.terminal-theme svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

/* --- Ticker strip -------------------------------------------------------- */

.terminal-ticker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--t-line);
  background: linear-gradient(180deg, var(--t-accent-wash), transparent);
}

/* Identity stacks: the ticker and its long name on top, the provenance tags
   underneath. Inline, the exchange tag alone ran to 189px and pushed a third
   of the OHLC strip onto a second row; stacked, it costs height the price
   block already occupies and costs nothing horizontally. */
.terminal-ticker-id {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.terminal-ticker-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.terminal-ticker-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.terminal-ticker-id strong {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.terminal-ticker-name span {
  overflow: hidden;
  max-width: 34ch;
  color: var(--t-muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The measured strip, packed to the right so it reads as one block against
   the identity and price on the left. Below roughly 1450px the last cells
   wrap; right-packing keeps both lines flush to the same edge. Spreading them
   with space-between instead looked even on a full row but flung the two
   leftovers to opposite margins the moment it wrapped. */
.terminal-ticker-stats {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 22px;
}

.terminal-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.terminal-price b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.terminal-price i {
  font-style: normal;
  font-size: 13px;
}

.terminal-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.terminal-stat u {
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.terminal-stat b {
  font-weight: 500;
  font-size: 12px;
}

.terminal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--t-line-strong);
  border-radius: 4px;
  color: var(--t-muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.terminal-tag[data-tone="warn"] {
  border-color: var(--t-accent-ring);
  color: var(--t-amber);
}

.terminal-tag[data-tone="live"] {
  border-color: var(--t-long-ring);
  color: var(--t-long);
}

.terminal-tag[data-tone="info"] {
  border-color: rgba(67, 149, 210, 0.4);
  color: #70b7e8;
}

/* --- Layout grid --------------------------------------------------------- */

.terminal-body {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.terminal-verdict {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--t-line);
}

.terminal-chartwrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.terminal-modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--t-line);
}

/* --- Module chrome ------------------------------------------------------- */

.tm {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 16px;
  border-right: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  background: var(--t-bg);
}

.tm[data-span="2"] { grid-column: span 2; }
.tm[data-span="4"] { grid-column: 1 / -1; }

.tm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-line);
}

.tm-head h3 {
  margin: 0;
  color: var(--t-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tm-head span {
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}

.tm-row + .tm-row {
  border-top: 1px solid var(--t-hairline);
}

.tm-row dt {
  min-width: 0;
  overflow: hidden;
  color: var(--t-muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tm-row dd {
  margin: 0;
  color: var(--t-text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

.tm-row dd small {
  display: block;
  margin-top: 1px;
  color: var(--t-faint);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.tm dl {
  margin: 0;
}

.tm-note {
  margin: 12px 0 0;
  color: var(--t-faint);
  font-size: 10px;
  line-height: 1.5;
}

/* Scoped to the shell so these outrank `.tm-row dd`, which sets its own colour
   and would otherwise win on specificity and neutralise every tone. */
.terminal-shell .pos { color: var(--t-long); }
.terminal-shell .neg { color: var(--t-short); }
.terminal-shell .warn { color: var(--t-amber); }
.terminal-shell .mute { color: var(--t-faint); }

/* --- Verdict column ------------------------------------------------------ */

.terminal-verdict-main {
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--t-line);
}

.terminal-verdict-label {
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.terminal-verdict-state {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.terminal-verdict-sub {
  color: var(--t-muted);
  font-size: 11px;
}

/* Signed meter: the zero line is fixed at the centre so a glance at where the
   bar starts tells you the sign before you read the number. */
.meter-wrap {
  position: relative;
  margin: 14px 0 8px;
}

.meter-graphic {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
  stroke: none;
}

.meter-value {
  fill: var(--t-muted);
  stroke: none;
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.meter-track {
  fill: var(--t-track);
  stroke: none;
}

.meter-zero {
  stroke: var(--t-line-strong);
  stroke-width: 1;
}

.meter-positive { fill: var(--t-long); }
.meter-negative { fill: var(--t-short); }
.meter-neutral { fill: var(--t-faint); }

.meter-scale {
  display: flex;
  justify-content: space-between;
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.terminal-verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--t-line);
}

.terminal-verdict-grid > div {
  padding: 12px 16px;
  border-right: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
}

.terminal-verdict-grid > div:nth-child(2n) { border-right: 0; }
.terminal-verdict-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }

.terminal-verdict-grid u {
  display: block;
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.terminal-verdict-grid b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
}

.terminal-verdict-grid small {
  color: var(--t-faint);
  font-size: 9.5px;
}

/* Grade checklist: a pass/fail column reads faster than six sentences. */
.grade-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 10px;
}

.grade-letter {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.grade-meta {
  color: var(--t-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grade-list {
  margin: 0;
  padding: 0 18px 18px;
  list-style: none;
}

.grade-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  border-top: 1px solid var(--t-hairline);
  font-size: 11px;
}

.grade-list li span:first-child {
  font-weight: 600;
}

.grade-list li em {
  color: var(--t-faint);
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
}

/* The verdict column is shorter than the chart beside it. Rather than leave a
   dead gap, its tail carries the parameter set every number above was computed
   with — the one piece of context a trader would otherwise have to take on
   trust. `margin-top: auto` pins it to the bottom at any column height. */
.terminal-inputs {
  margin-top: auto;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--t-line);
}

.terminal-inputs u {
  display: block;
  margin-bottom: 8px;
  color: var(--t-faint);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.terminal-inputs dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 0;
}

.terminal-inputs div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
}

/* Labels recede, values carry the ink — the two columns read apart at a
   glance instead of blurring into one grey block. */
/* The bridge to the journal, wearing the journal's blue so the two products
   read as siblings: the Terminal answers "what does the chart say", this
   button starts "what did I do about it". */
.terminal-logread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px 16px;
  padding: 8px 12px;
  border: 1px solid var(--t-cyan);
  border-radius: 7px;
  color: var(--t-cyan);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.terminal-logread i { font-style: normal; }

.terminal-logread:hover,
.terminal-logread:focus-visible {
  background: rgba(99, 178, 228, 0.1);
}

.terminal-inputs dt { color: var(--t-faint); }
.terminal-inputs dd { margin: 0; color: var(--t-text); }

/* --- Chart --------------------------------------------------------------- */

.terminal-chart {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  /* Fills whatever height the verdict column beside it sets, with a floor so
     it never collapses when that column is short. */
  min-height: 460px;
}

.terminal-chart canvas {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  touch-action: pan-y;
  cursor: crosshair;
}

.terminal-chart canvas.is-panning {
  cursor: grabbing;
}

.terminal-legend {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  /* Reserve the top-right corner for the Chart key button (~100px + margins). */
  max-width: calc(100% - 132px);
  color: var(--t-muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.terminal-legend b {
  color: var(--t-text);
  font-weight: 500;
}

.terminal-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.terminal-legend-key::before {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.legend-ema-fast { color: var(--t-amber); }
.legend-ema-slow { color: var(--t-muted); }
.legend-band { color: var(--t-cyan); }

/* Appears only when the chart has been panned off the newest bar — a control
   that is always visible is a control that is usually pointless. */
.terminal-reset {
  position: absolute;
  z-index: 3;
  right: 74px;
  bottom: 30px;
  padding: 5px 11px;
  border: 1px solid var(--t-line-strong);
  border-radius: 5px;
  background: var(--t-overlay);
  color: var(--t-muted);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.terminal-reset:hover {
  border-color: var(--t-accent-ring);
  color: var(--t-amber);
}

/* --- Signal tape --------------------------------------------------------- */

.tape {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.tape th {
  padding: 0 10px 7px 0;
  color: var(--t-faint);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.tape td {
  padding: 5px 10px 5px 0;
  border-top: 1px solid var(--t-hairline);
  white-space: nowrap;
}

.tape td:nth-child(3) {
  width: 99%;
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tape td:first-child {
  color: var(--t-faint);
}

.tape-code {
  display: inline-block;
  min-width: 54px;
  padding: 1px 6px;
  border: 1px solid var(--t-line-strong);
  border-radius: 3px;
  color: var(--t-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: center;
}

.tape tr[data-tone="long"] .tape-code { border-color: rgba(35, 184, 119, 0.45); color: var(--t-long); }
.tape tr[data-tone="short"] .tape-code { border-color: rgba(226, 86, 79, 0.45); color: var(--t-short); }
.tape tr[data-tone="warn"] .tape-code { border-color: rgba(232, 163, 61, 0.45); color: var(--t-amber); }

/* --- States -------------------------------------------------------------- */

.terminal-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 40px 24px;
  text-align: center;
}

.terminal-state h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.terminal-state p {
  max-width: 46ch;
  margin: 0;
  font-size: 12px;
}

.terminal-state button {
  margin-top: 6px;
  padding: 8px 18px;
  border: 1px solid var(--t-line-strong);
  border-radius: 6px;
  background: var(--t-panel-raised);
  color: var(--t-text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.terminal-state button:hover {
  border-color: var(--t-accent-ring);
  color: var(--t-amber);
}

.terminal-loading {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: var(--t-accent-halo);
}

.terminal-loading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  background: var(--t-amber);
  animation: terminal-scan 1.05s ease-in-out infinite;
}

@keyframes terminal-scan {
  0% { left: -34%; }
  100% { left: 100%; }
}

/* --- Foot ---------------------------------------------------------------- */

.terminal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--t-line);
  background: var(--t-shell);
  color: var(--t-faint);
  font-size: 10px;
  line-height: 1.6;
}

.terminal-foot strong {
  color: var(--t-muted);
  font-weight: 500;
}

.terminal-foot a {
  color: var(--t-muted);
  text-decoration: underline;
  text-decoration-color: var(--t-line-strong);
  text-underline-offset: 2px;
}

.terminal-foot a:hover {
  color: var(--t-amber);
}

/* --- Methodology (light again) ------------------------------------------- */

/* The methodology reads as one continuous argument, so the layout is built to
   pace it: a rail of eight numbered steps stays pinned while each step's
   explanation scrolls past at reading length. Native scrolling only — the rail
   follows the reader, the page never hijacks the wheel. */

.terminal-method {
  padding: 8px 0 88px;
}

.method-head {
  max-width: 700px;
}

.method-head .eyebrow-pill {
  margin-bottom: 16px;
}

.method-head p {
  font-size: 0.98rem;
}

.method-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
  margin-top: 40px;
}

/* Defensive clipping for wide formulas/canvas interactions. `clip` avoids
   creating a scroll container that would break the sticky methodology rail. */
body { overflow-x: clip; }

.method-rail {
  position: sticky;
  top: 92px;
  /* Above the methodology figures and their shadows. */
  z-index: 4;
}

.method-rail ol {
  margin: 0;
  padding: 10px 16px 10px 10px;
  list-style: none;
  border-left: 1px solid var(--line);
  border-radius: 0 14px 14px 0;
  /* Frosted plate keeps the numbered rail legible over a long reading page. */
  background: rgba(255, 255, 255, 0.82);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.method-rail a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
  margin-left: -1.5px;
  color: inherit;
  font-size: 0.86rem;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.method-rail a i {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.method-rail li.is-active a {
  border-left-color: var(--teal-deep);
  opacity: 1;
  font-weight: 600;
}

.method-rail a:hover { opacity: 1; }

.method-step {
  /* Reading length per step: tall enough that one step owns the viewport
     while it is being read, short enough that no step demands empty scroll. */
  min-height: 46vh;
  padding: 34px 0 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
  max-width: 640px;
}

.method-step:first-child { border-top: 0; padding-top: 6px; }

.method-step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 1.18rem;
}

.method-step h3 i {
  color: var(--teal-deep);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.1em;
}

.method-step p {
  margin: 0 0 14px;
  font-size: 0.94rem;
}

.method-formula {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  overflow-x: auto;
  white-space: nowrap;
}

.method-formula small {
  display: block;
  margin-top: 8px;
  font-family: inherit;
  font-size: 0.72rem;
  opacity: 0.65;
  white-space: normal;
}

/* The limits box: what none of the mathematics above should be read as
   claiming. Styled like a formula plate so it reads as part of the method,
   not as small print. */
.method-limits {
  margin-top: 48px;
  padding: 18px 24px 20px;
  border-left: 3px solid var(--teal-deep);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.method-limits h3 {
  margin: 0 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.method-limits ul {
  margin: 0;
  padding-left: 18px;
}

.method-limits li {
  margin: 6px 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Methodology figures --------------------------------------------------
   Alternating editorial figures with a real bleed: a right figure anchors to
   the page and its outer edge runs slightly past the viewport; a left figure
   overhangs the content column's margin and loses a sliver past its cut edge.
   The captures carry a sacrificial background zone on exactly that edge, so
   the bleed hides padding, never a label or a control — the cut look without
   the cut cost.

   --page-gap is the distance from the .section-shell content edge to the
   viewport edge: the shell is min(1180px, 100% - 48px) centred, so the gap
   is 24px until the cap engages and half the remainder after. 28px is how
   far past the viewport a right figure is allowed to disappear. */
.method-step.has-figure {
  display: grid;
  /* Wider than the 380px the bleeding layout used: these figures are now
     cropped UI panels read for their numbers, not decorative slivers. */
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 10px 44px;
  /* Top-aligned, not centred: a figure beside a long paragraph was floating
     halfway down its own column with the heading it illustrates far above
     it. */
  align-items: start;
  max-width: none;
}

.method-step.figure-left { grid-template-columns: 480px minmax(0, 1fr); }

.method-step.has-figure .method-copy {
  min-width: 0;
  max-width: 640px;
}

.method-figure {
  margin: 0;
  min-width: 0;
}

.method-step.figure-left .method-figure { order: -1; }

/* No bleed. The figures used to run past the content column — the right ones
   past the viewport itself, which put a 28px horizontal scrollbar on the page
   at 1440px. Each figure now sits in its grid column like anything else. */

/* The image's window: the clip that makes a cut edge possible without losing
   the shadow (overflow on the window clips its content, never its own
   shadow). */
.method-shot {
  overflow: clip;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(2, 24, 18, 0.18);
}

/* Each figure is already a crop of one panel, so nothing here crops it
   again: object-fit: cover with a max-height was cutting the bottom off
   panels the caption underneath then described. `contain` bounds the tallest
   figure without removing anything from any of them, and the window's
   background is the Terminal's own so the letterbox reads as the panel's
   surround rather than as a gap. */
.method-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  background: #0b0f14;
}

.method-figure figcaption {
  margin-top: 10px;
  font-size: 0.72rem;
  line-height: 1.5;
  opacity: 0.6;
}



@media (max-width: 900px) {
  /* One column: the figure follows its text full-width; no bleed — a cut
     edge needs a wide page to read as intentional. */
  .method-step.has-figure,
  .method-step.figure-left { grid-template-columns: minmax(0, 1fr); }
  .method-step.figure-left .method-figure { order: 0; }
  .method-step.has-figure .method-figure { margin: 6px 0 0; }
  .method-step.has-figure .method-figure figcaption { margin: 8px 0 0; }
  .method-step.figure-left .method-shot { border-radius: 14px; }
  .method-step.figure-left .method-figure img { width: 100%; margin-left: 0; }
}

@media (max-width: 900px) {
  /* minmax(0,…), not bare 1fr: a bare fr keeps min-width:auto, which lets a
     nowrap formula set the column minimum and push the whole document wider
     than the viewport instead of scrolling inside its own box. */
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .method-rail {
    top: 64px;
    z-index: 5;
    padding: 8px 0;
    background: var(--bg, #fff);
  }
  .method-rail ol {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-left: 0;
  }
  .method-rail a { padding: 6px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .method-rail a span { display: none; }
  .method-rail li.is-active a { border-bottom-color: var(--teal-deep); }
  .method-step { min-height: 0; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  /* On a narrow screen the chart is the trader's primary workspace. Flatten
     the verdict wrapper so its compact headline can stay above the chart
     while the checklist and model inputs follow below it. */
  .terminal-body {
    display: flex;
    flex-direction: column;
  }
  .terminal-verdict { display: contents; }
  .terminal-verdict-main { order: 1; }
  .terminal-chartwrap {
    order: 2;
    border-bottom: 1px solid var(--t-line);
  }
  .terminal-verdict-grid { order: 3; }
  .grade-head { order: 4; }
  .grade-list { order: 5; }
  .terminal-inputs { order: 6; margin-top: 0; }
  .terminal-logread { order: 7; }
  .terminal-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm[data-span="4"] { grid-column: 1 / -1; }
  .terminal-chart { min-height: 400px; }
}

@media (max-width: 720px) {
  .terminal-command { flex-wrap: wrap; }
  .terminal-search { order: 3; flex-basis: 100%; }
  .terminal-timeframes { margin-left: auto; }
  /* The mark's divider separates it from the timeframes, which wrap away on
     narrow screens and would leave the rule pointing at nothing. */
  .terminal-mark { border-right: 0; padding-right: 0; }
  .terminal-modules { grid-template-columns: 1fr; }
  .tm[data-span="2"], .tm[data-span="4"] { grid-column: 1 / -1; }
  .tm { border-right: 0; }
  .terminal-chart { min-height: 380px; }

  /* Floating over the plot costs four wrapped lines here and buries the top of
     the chart. Below this width the legend stops overlaying and becomes a
     strip above the canvas, which the flex column then sizes around. The
     right padding reserves the corner for the absolutely-placed Chart key
     button, which would otherwise sit on top of the legend values. */
  .terminal-legend {
    position: static;
    max-width: none;
    padding: 9px 116px 9px 12px;
    border-bottom: 1px solid var(--t-line);
  }

  /* The colour key is legible from the chart itself and is the first thing to
     go when the strip has to earn its height. */
  .terminal-legend .terminal-legend-key { display: none; }
  .terminal-shell { border-radius: 10px; font-size: 12px; }
  .terminal-price b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-loading::after { animation-duration: 3s; }
}

/* --- Account & sign-in ---------------------------------------------------- */

/* Quota and account share one pill, styled to sit beside the theme switch as
   its sibling: same border, same radius, same disc-shaped buttons. */
.terminal-account {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  background: var(--t-panel);
}

.terminal-account > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--t-faint);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.terminal-account > button:hover {
  color: var(--t-text);
}

.terminal-account > button:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 1px;
}

/* Signed in reads like the active theme position: a filled amber disc. */
.terminal-account > button[data-signed-in] {
  background: var(--t-panel-raised);
  color: var(--t-amber);
  box-shadow: inset 0 0 0 1px var(--t-accent-ring);
}

.terminal-account svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

/* The click-open account menu: who is signed in, and the one action. */
.terminal-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  padding: 12px;
  border: 1px solid var(--t-line-strong);
  border-radius: 9px;
  background: var(--t-panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-family: var(--t-mono);
}

.terminal-account-email {
  overflow: hidden;
  color: var(--t-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-account-menu button {
  padding: 8px 10px;
  border: 1px solid var(--t-line);
  border-radius: 7px;
  background: var(--t-panel-raised);
  color: var(--t-text);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.terminal-account-menu button:hover,
.terminal-account-menu button:focus-visible {
  border-color: var(--t-amber);
  color: var(--t-amber);
}

/* The journal entry reads as a menu row, not a label: ruled off above and
   below, arrowed, and wearing the journal's light blue — three separate
   signals that this is a place you can go. */
.terminal-account-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border-top: 1px solid var(--t-line);
  border-bottom: 1px solid var(--t-line);
  color: var(--t-cyan);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.terminal-account-link i {
  font-style: normal;
  transition: transform 0.15s ease;
}

.terminal-account-link:hover,
.terminal-account-link:focus-visible {
  border-color: var(--t-cyan);
}

.terminal-account-link:hover i,
.terminal-account-link:focus-visible i {
  transform: translateX(3px);
}

.terminal-auth {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 9, 0.62);
  backdrop-filter: blur(3px);
}

.terminal-auth-card {
  position: relative;
  width: min(420px, 100%);
  padding: 26px 26px 22px;
  border: 1px solid var(--t-line-strong);
  border-radius: 10px;
  background: var(--t-panel);
  color: var(--t-text);
  font-family: var(--t-mono);
}

.terminal-auth-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.terminal-auth-sub {
  margin: 0 0 18px;
  color: var(--t-muted);
  font-size: 12px;
  line-height: 1.6;
}

.terminal-auth-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terminal-auth-card input {
  padding: 10px 12px;
  border: 1px solid var(--t-line);
  border-radius: 7px;
  background: var(--t-panel-raised);
  color: var(--t-text);
  font-family: var(--t-mono);
  font-size: 13px;
}

.terminal-auth-card input:focus-visible {
  outline: none;
  border-color: var(--t-amber);
}

.terminal-auth-card button[type="submit"] {
  padding: 10px 12px;
  border: 1px solid var(--t-amber);
  border-radius: 7px;
  background: transparent;
  color: var(--t-amber);
  font-family: var(--t-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.terminal-auth-card button[type="submit"]:hover:not(:disabled) {
  background: var(--t-amber);
  color: var(--t-bg);
}

.terminal-auth-card button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: wait;
}

.terminal-auth-note {
  margin: 14px 0 0;
  color: var(--t-long);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.terminal-auth-note.is-error {
  color: var(--t-short);
}

.terminal-auth-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  color: var(--t-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.terminal-auth-close:hover { color: var(--t-text); }

/* --- Quota chip & the pricing wall ---------------------------------------- */

/* Lives inside the account pill, to the left of the person icon. */
.terminal-quota {
  padding: 0 6px 0 10px;
  color: var(--t-muted);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 28px;
  white-space: nowrap;
  cursor: default;
}

/* The last reading turns the count amber — the wall should never be a surprise. */
.terminal-quota.is-full {
  color: var(--t-amber);
}

.terminal-wall-card {
  width: min(560px, 100%);
}

/* One membership, one card. This was a two-column comparison while a
   Terminal-only tier existed; that tier is retired and a lone card in a
   two-column grid would sit half-width against the wall. */
.terminal-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.terminal-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 16px;
  border: 1px solid var(--t-line);
  border-radius: 9px;
  background: var(--t-panel-raised);
}

.terminal-plan.is-featured {
  border-color: var(--t-amber);
}

/* Plan name. */
.terminal-plan > u {
  color: var(--t-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Price line. */
.terminal-plan > b {
  color: var(--t-text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.terminal-plan > b span {
  color: var(--t-faint);
  font-size: 12px;
  font-weight: 400;
}

.terminal-plan ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--t-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.terminal-plan ul li::before {
  content: "› ";
  color: var(--t-amber);
}

.terminal-plan > a,
.terminal-plan > button {
  padding: 9px 12px;
  border: 1px solid var(--t-amber);
  border-radius: 7px;
  background: transparent;
  color: var(--t-amber);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.terminal-plan > a:hover,
.terminal-plan > a:focus-visible {
  background: var(--t-amber);
  color: var(--t-bg);
}

.terminal-plan.is-featured > a {
  background: var(--t-amber);
  color: var(--t-bg);
}

.terminal-plan.is-featured > a:hover,
.terminal-plan.is-featured > a:focus-visible {
  filter: brightness(1.12);
}

.terminal-plan > button:disabled {
  border-color: var(--t-line);
  color: var(--t-faint);
  cursor: default;
}

/* --- Reading settings ("tune") --------------------------------------------- */

.terminal-tune {
  position: relative;
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  background: var(--t-panel);
}

.terminal-tune > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--t-faint);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.terminal-tune > button:hover { color: var(--t-text); }

.terminal-tune > button:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 1px;
}

/* Non-default settings read like an active theme position: the amber disc
   says "this reading is tuned" before a single module is scanned. */
.terminal-tune > button.is-tuned {
  background: var(--t-panel-raised);
  color: var(--t-amber);
  box-shadow: inset 0 0 0 1px var(--t-accent-ring);
}

.terminal-tune svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

.terminal-tune-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 280px;
  padding: 14px;
  border: 1px solid var(--t-line-strong);
  border-radius: 9px;
  background: var(--t-panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-family: var(--t-mono);
}

.tune-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tune-field label {
  color: var(--t-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tune-field select,
.tune-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--t-line);
  border-radius: 7px;
  background: var(--t-panel-raised);
  color: var(--t-text);
  font-family: var(--t-mono);
  font-size: 12px;
}

.tune-field select:focus-visible,
.tune-field input:focus-visible {
  outline: none;
  border-color: var(--t-amber);
}

.tune-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* Bottom-aligned so the two inputs stay level even if one label wraps. */
  align-items: end;
}

.tune-note {
  margin: 0;
  color: var(--t-faint);
  font-size: 10.5px;
  line-height: 1.55;
}

#tuneReset {
  padding: 8px 10px;
  border: 1px solid var(--t-line);
  border-radius: 7px;
  background: none;
  color: var(--t-muted);
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

#tuneReset:hover,
#tuneReset:focus-visible {
  border-color: var(--t-amber);
  color: var(--t-amber);
}

.terminal-wall-note {
  margin: 14px 0 0;
  color: var(--t-faint);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* --- Chart key ------------------------------------------------------------- */

/* Lives in the chart's top pad (the empty strip above the plot, opposite the
   legend) so it never collides with the time axis or the Latest pill below. */
.terminal-keybtn {
  position: absolute;
  right: 10px;
  top: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  background: var(--t-overlay);
  color: var(--t-muted);
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* The info mark was drawn on its own 16-unit grid with filled parts: at 12px
   the dot came out 1.5px across and the stem 1.05x3.3px, so the "i" merged
   into one soft blob. Same geometry and weight as every other Terminal icon
   now — stroked, on the 24 grid, 14px x 1.6. */
.terminal-keybtn svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}

.terminal-keybtn:hover,
.terminal-keybtn:focus-visible {
  border-color: var(--t-amber);
  color: var(--t-amber);
}

.terminal-key-card {
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
}

.key-note {
  margin: 16px 0 0;
  color: var(--t-muted);
  font-size: 12px;
  line-height: 1.6;
}

.key-section {
  margin: 18px 0 8px;
  color: var(--t-amber);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.key-section small {
  color: var(--t-faint);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

.key-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--t-hairline);
}

.key-swatch {
  flex-shrink: 0;
  width: 44px;
  height: 20px;
  margin-top: 2px;
  border-radius: 3px;
  background: var(--t-panel-raised);
}

.key-row b {
  display: block;
  color: var(--t-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.key-row span {
  display: block;
  margin-top: 2px;
  color: var(--t-muted);
  font-size: 11px;
  line-height: 1.55;
}

.key-link {
  color: var(--t-amber);
}


/* ---- Phone header controls ------------------------------------------------
   Appended deliberately: .terminal-tune and .terminal-account declare
   `position: relative` further up the file, so an earlier media block loses to
   them on source order and the anchoring below silently does nothing.

   On a 390px screen the command bar wraps and the controls landed on the left.
   Their menus are anchored `right: 0` to the button, so the 280px reading-
   settings panel opened leftwards to x -229 — half of it off the screen and
   unreachable. The menus now anchor to the command bar itself, which spans the
   viewport, so their right edge is always just inside it however the bar wraps;
   and the three controls ride the right edge together as one cluster. */
@media (max-width: 720px) {
  .terminal-command { position: relative; }

  .terminal-tune,
  .terminal-account { position: static; }

  .terminal-tune-menu,
  .terminal-account-menu {
    top: calc(100% - 4px);
    right: 12px;
    left: auto;
    width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  /* Search shares the controls' row rather than taking one of its own: its
     results list drops below the bar, so the field itself does not need the
     full width to show a long instrument name. */
  .terminal-search {
    order: 3;
    flex: 1 1 130px;
    min-width: 0;
    flex-basis: 130px;
  }

  /* `auto` keeps the cluster on the right whether it shares the row with the
     search field or wraps onto one of its own. With search flexing, there is
     no spare space for it to eat on a shared row. */
  /* The field is narrow now, but the results list is not bound by it: it drops
     below the bar and takes the bar's width, so a long instrument name stays
     readable. Anchored left of the field, which sits at the row's start. */
  .terminal-results {
    right: auto;
    left: 0;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  /* Wrapped flex left the figures ragged: labels floated over values of
     different widths and the row was right-aligned, so the block never lined
     up with anything. On phones it becomes a fixed 12-column grid instead —
     OHLC in four equal columns, then the bar's own facts sharing the second
     row, each in a column wide enough for its value. Everything is
     left-aligned to a shared edge, so the numbers read down as well as across. */
  .terminal-ticker-stats {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 9px 10px;
    width: 100%;
  }

  .terminal-stat {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
  }

  .terminal-stat b {
    font-size: 11px;
    white-space: nowrap;
  }

  .terminal-stat u { font-size: 8.5px; }

  .terminal-stat[data-stat="open"],
  .terminal-stat[data-stat="high"],
  .terminal-stat[data-stat="low"],
  .terminal-stat[data-stat="close"] { grid-column: span 3; }

  .terminal-stat[data-stat="range"] { grid-column: span 5; }
  .terminal-stat[data-stat="volume"] { grid-column: span 2; }
  .terminal-stat[data-stat="barclose"] { grid-column: span 5; }

  .terminal-tune { order: 4; margin-left: auto; }
  .terminal-theme { order: 5; }
  .terminal-account { order: 6; }
}

/* Account menu: the plan line under the email. Paid plans carry no quota
   chip, so this is where "unlimited" is said out loud. */
.terminal-account-plan {
  display: block;
  color: var(--t-accent, #d9a441);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Loading: a spinner where the chart will appear, a dimmed chart while a
   new one is fetched. The 2px scan bar alone read as "nothing happening"
   from an Unavailable state. --- */
.terminal-state.is-loading::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 16px;
  border: 2px solid var(--t-line-strong);
  border-top-color: var(--t-amber);
  border-radius: 50%;
  animation: terminal-spin 0.8s linear infinite;
}
@keyframes terminal-spin { to { transform: rotate(360deg); } }
#terminalPanels.is-loading { opacity: 0.45; transition: opacity 0.2s ease; pointer-events: none; }
.terminal-state button.is-accent {
  margin-left: 8px;
  border-color: var(--t-amber);
  color: var(--t-amber);
}

/* --- Search: the request row at the foot of the results --- */
.terminal-result-request { border-top: 1px solid var(--t-line-strong); }
.terminal-result-request b { color: var(--t-cyan); }
.terminal-result-request em { color: var(--t-cyan); }

/* --- Instrument request form --- */
.terminal-request-form { display: grid; gap: 6px; }
.terminal-request-form label {
  margin-top: 6px;
  color: var(--t-muted);
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.terminal-request-form label span { text-transform: none; letter-spacing: 0; }
.terminal-request-form input,
.terminal-request-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--t-line-strong);
  border-radius: 8px;
  background: var(--t-panel-raised);
  color: var(--t-text);
  font: inherit;
  font-size: 14px;
}
.terminal-request-form textarea { resize: vertical; min-height: 56px; }
.terminal-request-form input:focus,
.terminal-request-form textarea:focus { outline: 2px solid var(--t-accent-ring); outline-offset: 1px; border-color: var(--t-amber); }
.terminal-request-form button[type="submit"] {
  margin-top: 10px;
  min-height: 44px;
  border: 1px solid var(--t-amber);
  border-radius: 8px;
  background: var(--t-amber);
  color: #17120a;
  font-family: var(--t-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.terminal-request-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }

/* ---- Method figures arriving from their own side --------------------------
   A right-hand figure comes in from the right edge, a left-hand one from the
   left: the motion says which side of the page the illustration belongs to
   before the reader's eye gets there.

   The hidden state hangs off .is-observed, which terminal.js adds only once
   the observer is running. Without the module — or with reduced motion, where
   the function returns before adding it — every figure is simply visible
   where the layout puts it. An illustration that needs JavaScript to appear
   at all is a worse trade than no animation.

   .method-grid clips the horizontal travel so the entrance cannot widen the
   page. `overflow-x: clip` rather than `hidden`: clip leaves the other axis
   genuinely visible, so the pinned rail still sticks and no shadow is cut. */

.method-grid {
  overflow-x: clip;
}

.method-steps.is-observed .method-step.has-figure .method-figure {
  opacity: 0;
  transform: translate3d(var(--method-enter, 0), 0, 0);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.method-steps.is-observed .method-step.figure-right .method-figure { --method-enter: 72px; }
.method-steps.is-observed .method-step.figure-left .method-figure { --method-enter: -72px; }

.method-steps.is-observed .method-step.is-shown .method-figure {
  opacity: 1;
  transform: none;
  will-change: auto;
}