/* VOLURR — the Intelligence box: sections, thread, drawings ledger. Institutional pass.
 *
 * LESSON, measured in a real browser: this file's own header once contained the characters
 * star-slash inside a wildcard example, which TERMINATED the comment early — the rest of the prose
 * became a garbage selector that swallowed the .vtab-bar rule, and the tab strip rendered as a
 * vertical stack of unstyled buttons. The stylesheet loaded 20 of its 21 rules and no tool noticed.
 * Never write a wildcard followed by a slash inside a CSS comment; the shell-reach gate now parses
 * every agi stylesheet and fails on a stray comment terminator.
 *
 * DESIGN LANGUAGE (shared by every box surface):
 *   - hairlines from var(--line), one radius scale (7/9/11), an 8px rhythm
 *   - microlabels: 9px, weight 800, uppercase, letter-spacing .08em, muted
 *   - amber = the machine's accent. green/red appear ONLY on direction values, never on chrome
 *   - icons are inline SVG at currentColor — no emoji anywhere in the box
 *   - numerals tabular and LTR-embedded so prices never jitter or flip in RTL
 */

/* ── the segmented control ────────────────────────────────────────────────────────────────────── */
.vtab-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 0;
  padding: 3px;
  margin-bottom: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 11px;
  background: var(--bg2, rgba(0, 0, 0, .18));
}

.vtab-b {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;   /* Law D9 — the gate rejected the 40px this redesign first tried */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, rgba(160, 170, 185, .9));
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
  transition: background .12s, color .12s;
}
.vtab-b svg { width: 13px; height: 13px; flex: 0 0 auto; }
.vtab-b span { overflow: hidden; text-overflow: ellipsis; }
.vtab-b:hover, .vtab-b:focus-visible { color: var(--txt, #dde2ea); outline: none; }
.vtab-b.on {
  background: var(--card, rgba(255, 255, 255, .07));
  color: var(--vagi, #e8932a);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.vtab-n {
  font-size: 8.5px;
  font-weight: 900;
  min-width: 15px;
  text-align: center;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(232, 147, 42, .16);
  color: var(--vagi, #e8932a);
  font-variant-numeric: tabular-nums;
}
.vtab-n:empty { display: none; }

/* ── panes ────────────────────────────────────────────────────────────────────────────────────── */
.vtab-pane { display: none; }
.vtab-pane.on { display: block; animation: vtabIn .12s ease-out; }
@keyframes vtabIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vtab-pane.on { animation: none; } }

/* ── pane orientation: ownership + honest inventory ───────────────────────────────────────────── */
/* This is deliberately compact. It exposes facts already held by the box (binding, row count,
   thread count and drawing count) so a trader always knows WHAT this pane belongs to before using
   a command. It is not a signal card and therefore never uses directional green/red. */
.vintel-head {
  position: relative;
  margin: 0 0 9px;
  padding: 9px 10px 8px;
  overflow: hidden;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 11px;
  background:
    radial-gradient(circle at 100% 0, rgba(232, 147, 42, .09), transparent 42%),
    var(--bg2, rgba(0, 0, 0, .12));
}
.vintel-head::before {
  content: '';
  position: absolute;
  inset-block: 9px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--vagi, #e8932a);
  opacity: .72;
}
html[dir=rtl] .vintel-head::before, .app[dir=rtl] .vintel-head::before { border-radius: 2px 0 0 2px; }
.vintel-head-main { display: flex; align-items: flex-start; gap: 8px; }
.vintel-head-ic {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 147, 42, .25);
  border-radius: 8px;
  background: rgba(232, 147, 42, .08);
  color: var(--vagi, #e8932a);
}
.vintel-head-ic svg { width: 14px; height: 14px; }
.vintel-head-copy { min-width: 0; flex: 1 1 auto; }
.vintel-head-copy b, .vintel-head-copy small { display: block; }
.vintel-head-copy b {
  color: var(--txt, #dde2ea);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: .01em;
}
.vintel-head-copy small {
  margin-top: 2px;
  color: var(--muted, rgba(160, 170, 185, .9));
  font-size: 8.5px;
  line-height: 1.5;
}
.vintel-head-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .08));
  color: var(--muted, rgba(160, 170, 185, .88));
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vintel-head-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.vintel-head-meta strong {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(232, 147, 42, .1);
  color: var(--vagi, #e8932a);
  font: inherit;
}

/* The inherited reading surface used plain stacked text. Within this panel only, give each measured
   reading a quiet inspection boundary; the actual values and click behaviour remain untouched. */
.vtab-pane[data-pane="read"] > .pcai-row,
.vtab-pane[data-pane="read"] > .pcai-conf,
.vtab-pane[data-pane="read"] > .pcint-consensus {
  margin-bottom: 5px;
  padding: 8px 9px;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 9px;
  background: var(--bg2, rgba(0, 0, 0, .1));
}

/* ── the conversation: a ledger, not chat bubbles ─────────────────────────────────────────────── */
/* Each turn is a rule-marked row with a microlabel — the register of a terminal, not a messenger.
   The trader's rule is amber (their input drives the machine); the answer's rule is the hairline. */
.vta-log {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-bottom: 10px;
}
.vta-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 9px;
  padding: 11px;
  border: 1px dashed var(--line, rgba(255, 255, 255, .14));
  border-radius: 10px;
  background: var(--bg2, rgba(0, 0, 0, .08));
  color: var(--txt2, inherit);
}
.vta-empty-ic {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  border-radius: 8px;
  background: rgba(232, 147, 42, .09);
  color: var(--vagi, #e8932a);
}
.vta-empty-ic svg { width: 14px; height: 14px; }
.vta-empty b { font-size: 10.5px; line-height: 1.35; color: var(--txt, #dde2ea); }
.vta-empty > span:last-child {
  font-size: 9px;
  line-height: 1.6;
  color: var(--muted, rgba(160, 170, 185, .9));
}
.vta-q, .vta-a {
  font-size: 11px;
  line-height: 1.75;
  padding: 6px 10px 7px;
  margin-bottom: 7px;
  border-inline-start: 2px solid var(--line, rgba(255, 255, 255, .14));
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  color: var(--txt2, inherit);
}
.vta-q { border-inline-start-color: rgba(232, 147, 42, .55); }
.vta-q::before, .vta-a::before {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, rgba(160, 170, 185, .8));
  margin-bottom: 2px;
}
.vta-q::before { content: attr(data-who); }
.vta-a::before { content: 'VOLURR AGI'; }

.vta-dim {
  font-size: 10.5px;
  line-height: 1.7;
  opacity: .55;
  padding: 4px 2px;
}

/* ── the drawings ledger ──────────────────────────────────────────────────────────────────────── */
.vta-it {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
  font-size: 11px;
}
.vta-it:last-of-type { border-bottom: 0; }
.vta-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vta-sp {
  font-style: normal;
  opacity: .6;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
}
.vta-rv {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;   /* the 44px law — the review caught this at 34 */
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: transparent;
  color: var(--txt2, inherit);
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.vta-rv svg { width: 11px; height: 11px; }
.vta-rv:hover, .vta-rv:focus-visible {
  border-color: rgba(232, 147, 42, .45);
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .07);
  outline: none;
}

/* ── the chat composer ────────────────────────────────────────────────────────────────────────── */
/* Voice is a first-class control here — the ask was literally «تحكي على الذكاء». Mic and speaker
   are round 44px wells; Send is the one filled control in the pane. These rules exist because the
   tab module MOVES the ask line out of .pcz-wrap: same nodes, second home, same specificity. */
.vtab-pane .pcz-ask input {
  border-radius: 11px;
  background: var(--bg2, rgba(0, 0, 0, .14));
}
.vtab-pane .pcz-ask input:focus {
  border-color: rgba(232, 147, 42, .55);
  box-shadow: 0 0 0 3px rgba(232, 147, 42, .12);
}
.vtab-pane .pcz-tools { margin-top: 8px; }
.vtab-pane .pcz-mic, .vtab-pane .pcz-tts { border-radius: 999px; }
.vtab-pane .pcz-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: rgba(232, 147, 42, .5);
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .09);
}
.vtab-pane .pcz-send:hover, .vtab-pane .pcz-send:focus-visible { background: rgba(232, 147, 42, .16); }
.vtab-pane .pcz-send svg { margin-inline-end: 0; margin-inline-start: 2px; }
/* the send arrow points INTO the reading direction */
html[dir=rtl] .vtab-pane .pcz-send svg { transform: scaleX(-1); }

/* ── the named states, and the staged busy line ───────────────────────────────────────────────── */
/* A spinner alone says "something is happening". These say WHICH something, and every failure says
   which failure. The state chip is a WORD, never a colour alone — colour is not a label, and this
   panel is read in three languages and two directions. */
.pcz-state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10.5px;
  line-height: 1.7;
  padding: 8px 10px;
  margin: 8px 0;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-inline-start: 2px solid var(--line, rgba(255, 255, 255, .18));
  border-radius: 9px;
  background: var(--bg2, rgba(0, 0, 0, .14));
  color: var(--txt2, inherit);
}
.pcz-state .spin { flex: 0 0 auto; margin: 0; }
.pcz-busy { border-inline-start-color: rgba(232, 147, 42, .55); }
.pcz-stage { min-width: 0; }
.pcz-prog {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
  color: var(--vagi, #e8932a);
}
.pcz-stlbl {
  flex: 0 0 auto;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--muted, rgba(160, 170, 185, .9));
}
.pcz-sttx { flex: 1 1 140px; min-width: 0; }
.pcz-s-stale_context { border-inline-start-color: rgba(232, 147, 42, .7); }
.pcz-s-stale_context .pcz-stlbl { background: rgba(232, 147, 42, .16); color: var(--vagi, #e8932a); }
.pcz-s-offline .pcz-stlbl,
.pcz-s-rate_limited .pcz-stlbl,
.pcz-s-error_recoverable .pcz-stlbl { background: rgba(255, 255, 255, .1); }

/* ── review all drawings ──────────────────────────────────────────────────────────────────────── */
.vra-wrap { margin: 10px 0 4px; }
.vra-run {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 10px;
  border: 1px solid rgba(232, 147, 42, .42);
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .08);
  cursor: pointer;
  touch-action: manipulation;
}
.vra-run:hover, .vra-run:focus-visible { background: rgba(232, 147, 42, .15); outline: none; }
.vra-run svg { width: 13px; height: 13px; }

.vra-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vra-bind {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted, rgba(160, 170, 185, .85));
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
}
.vra-cancel {
  margin-inline-start: auto;
  min-height: 32px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  background: transparent;
  color: var(--txt2, inherit);
  cursor: pointer;
  touch-action: manipulation;
}
.vra-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin: 0 0 8px;
}
.vra-bar i { display: block; height: 100%; background: var(--vagi, #e8932a); transition: width .12s linear; }
@media (prefers-reduced-motion: reduce) { .vra-bar i { transition: none; } }

.vra-sum { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.vra-chip {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  color: var(--txt2, inherit);
  font-variant-numeric: tabular-nums;
}
/* Bucket colour stays on the machine's own amber scale plus neutrals — never the green/red the
   COLOR LAW reserves for price direction. A green "valid" chip an inch under a price chart reads
   as a buy call, and this product does not give trade calls. */
.vra-chip.vra-valid { border-color: rgba(232, 147, 42, .45); color: var(--vagi, #e8932a); }
.vra-chip.vra-adjust { border-color: rgba(232, 147, 42, .7); background: rgba(232, 147, 42, .12); color: var(--vagi, #e8932a); }
.vra-chip.vra-weak, .vra-chip.vra-invalid { opacity: .95; }
.vra-chip.vra-nodata, .vra-chip.vra-none, .vra-chip.vra-subjective { opacity: .6; }

.vra-list { display: block; }
.vra-row {
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
}
.vra-row:last-child { border-bottom: 0; }
.vra-r1 { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.vra-hd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vra-tag {
  flex: 0 0 auto;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--muted, rgba(160, 170, 185, .95));
  white-space: nowrap;
}
.vra-tag.vra-t-adjust { background: rgba(232, 147, 42, .16); color: var(--vagi, #e8932a); }
.vra-tag.vra-t-valid { color: var(--txt, #dde2ea); }
.vra-body { font-size: 10.5px; line-height: 1.75; opacity: .9; padding: 3px 0 2px; }
.vra-body .pcz-l { font-variant-numeric: tabular-nums; }
.vra-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.vra-b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;   /* Law D9 — every control in this box clears 44px */
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: transparent;
  color: var(--txt2, inherit);
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.vra-b:hover, .vra-b:focus-visible {
  border-color: rgba(232, 147, 42, .45);
  color: var(--vagi, #e8932a);
  outline: none;
}
.vra-b svg { width: 11px; height: 11px; }
/* The box is 16px because that is what a checkbox should look like; the TARGET is 44 because that
   is what a finger needs. Measured at 375px, the label was the box and nothing more. */
.vra-pick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: -10px;
  cursor: pointer;
  touch-action: manipulation;
}
.vra-pick input { width: 16px; height: 16px; accent-color: var(--vagi, #e8932a); margin: 0; }
.vra-more, .vra-acc {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  background: transparent;
  color: var(--txt2, inherit);
  cursor: pointer;
  touch-action: manipulation;
}
.vra-foot { position: sticky; bottom: 0; padding-bottom: 2px; }
.vra-foot .vra-acc {
  border-color: rgba(232, 147, 42, .5);
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── dynamic quick actions / chart command centre ─────────────────────────────────────────────── */
.vqa {
  margin-bottom: 12px;
  padding: 9px;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(232, 147, 42, .08), transparent 38%),
    var(--bg2, rgba(0, 0, 0, .12));
}
.vqa-top, .vqa-eyebrow, .vqa-gh, .vqa-legend, .vqa-key {
  display: flex;
  align-items: center;
}
.vqa-top { justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vqa-eyebrow {
  min-width: 0;
  gap: 6px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--txt, inherit);
}
.vqa-eyebrow svg { width: 13px; height: 13px; color: var(--vagi, #e8932a); }
.vqa-count {
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  color: var(--muted, inherit);
  background: var(--card, rgba(255, 255, 255, .04));
  font-size: 8.5px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vqa-market {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--muted, rgba(160, 170, 185, .86));
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.vqa-market b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt, inherit);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
}
.vqa-ctx {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, rgba(160, 170, 185, .85));
  border-radius: 8px;
  background: var(--card, rgba(255, 255, 255, .035));
  margin-bottom: 10px;
}
.vqa-ctx i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted, #7c8798);
  box-shadow: 0 0 0 3px rgba(124, 135, 152, .1);
}
.vqa-ctx.is-selected i {
  background: var(--vagi, #e8932a);
  box-shadow: 0 0 0 3px rgba(232, 147, 42, .14);
}
.vqa-start {
  margin: 0 0 8px;
  padding: 7px;
  border: 1px solid rgba(232, 147, 42, .24);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(232, 147, 42, .12), transparent 64%),
    var(--card, rgba(255, 255, 255, .035));
}
.vqa-start-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 0 2px 6px;
  color: var(--vagi, #e8932a);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.vqa-start-h em {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .05em;
  color: var(--muted, inherit);
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  background: var(--bg2, rgba(0, 0, 0, .12));
}
.vqa-start-h em.is-measured { color: var(--vagi, #e8932a); border-color: rgba(232, 147, 42, .24); }
.vqa-feature {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  color: var(--txt2, inherit);
  background: var(--bg2, rgba(0, 0, 0, .14));
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.vqa-feature-ic {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .11);
  border: 1px solid rgba(232, 147, 42, .19);
}
.vqa-feature-ic svg { width: 16px; height: 16px; }
.vqa-feature-copy { min-width: 0; }
.vqa-feature-copy b, .vqa-feature-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.vqa-feature-copy b {
  color: var(--txt, inherit);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}
.vqa-feature-copy small {
  margin-top: 3px;
  color: var(--muted, rgba(160, 170, 185, .88));
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.vqa-feature:hover, .vqa-feature:focus-visible {
  background: rgba(232, 147, 42, .08);
  box-shadow: inset 0 0 0 1px rgba(232, 147, 42, .28);
  outline: none;
}
.vqa-feature:focus-visible { box-shadow: 0 0 0 3px rgba(232, 147, 42, .14); }
.vqa-group {
  overflow: hidden;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 10px;
  background: var(--card, rgba(255, 255, 255, .025));
}
.vqa-group + .vqa-group { margin-top: 6px; }
.vqa-gh {
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 7px 8px;
  color: var(--muted, rgba(160, 170, 185, .86));
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.vqa-gh::-webkit-details-marker { display: none; }
.vqa-gh span { min-width: 0; flex: 1 1 auto; }
.vqa-gh small {
  min-width: 18px;
  color: var(--muted, inherit);
  font-size: 7.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vqa-fold { font-size: 15px; font-style: normal; line-height: 1; transition: transform .16s ease; }
.vqa-group[open] .vqa-fold { transform: rotate(90deg); }
html[dir=rtl] .vqa-fold, .app[dir=rtl] .vqa-fold { transform: scaleX(-1); }
html[dir=rtl] .vqa-group[open] .vqa-fold, .app[dir=rtl] .vqa-group[open] .vqa-fold { transform: scaleX(-1) rotate(90deg); }
.vqa-gh svg { width: 11px; height: 11px; color: var(--vagi, #e8932a); }
.vqa-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 0 5px 5px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .07));
}
.vqa-b {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  font: inherit;
  text-align: start;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  background: var(--card, rgba(255, 255, 255, .035));
  color: var(--txt2, inherit);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.vqa-ic {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted, rgba(160, 170, 185, .9));
  background: var(--bg2, rgba(0, 0, 0, .14));
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.vqa-ic svg { width: 14px; height: 14px; }
.vqa-copy { min-width: 0; display: block; }
.vqa-copy b, .vqa-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.vqa-copy b {
  color: var(--txt, inherit);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}
.vqa-copy small {
  margin-top: 2px;
  color: var(--muted, rgba(160, 170, 185, .85));
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.vqa-go {
  color: var(--muted, inherit);
  font-size: 18px;
  line-height: 1;
  opacity: .65;
}
html[dir=rtl] .vqa-go, .app[dir=rtl] .vqa-go { transform: scaleX(-1); }
.vqa-b:hover, .vqa-b:focus-visible {
  border-color: rgba(232, 147, 42, .42);
  background: rgba(232, 147, 42, .065);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
  outline: none;
}
.vqa-b:focus-visible { box-shadow: 0 0 0 3px rgba(232, 147, 42, .14); }
.vqa-b.vqa-m .vqa-ic {
  color: var(--vagi, #e8932a);
  background: rgba(232, 147, 42, .09);
  border-color: rgba(232, 147, 42, .18);
}
.vqa-group-now .vqa-b:first-child,
.vqa-group-selection .vqa-b:first-child {
  border-color: rgba(232, 147, 42, .28);
  background: linear-gradient(90deg, rgba(232, 147, 42, .09), transparent 72%), var(--card, rgba(255, 255, 255, .035));
}
.vqa-legend {
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .09));
  font-size: 8px;
  line-height: 1.4;
  color: var(--muted, inherit);
}
.vqa-key { gap: 5px; }
.vqa-key i { width: 6px; height: 6px; border-radius: 50%; }
.vqa-key-m i { background: var(--vagi, #e8932a); }
.vqa-key-q i { border: 1px solid var(--muted, #7c8798); }

@media (min-width: 1180px) {
  #pcSide.pcside { width: 296px; }
}
@media (prefers-reduced-motion: reduce) {
  .vqa-b, .vqa-fold { transition: none; }
}

/* ── the thread's chart-change rule ───────────────────────────────────────────────────────────── */
.vta-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, rgba(160, 170, 185, .8));
  font-variant-numeric: tabular-nums;
}
.vta-rule::before, .vta-rule::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, rgba(255, 255, 255, .12));
}
.vta-stage { display: inline-flex; align-items: center; gap: 7px; opacity: .8; }
.vta-stage .spin { margin: 0; }
.vta-a.vta-st { opacity: .78; }

/* ── PHONE: THE PANEL MUST NOT SWALLOW THE CHART ──────────────────────────────────────────────── */
/* Measured at 375x812: #pcSide was 373.6x755.4 at (0.8, 55.8) and covered 9 of 9 probe points of the
   plot rect — the chart was 100% occluded while the panel was open. The rule doing it is
   chart-plot.css:43, `@media(max-width:520px){.pcside.on{position:absolute;inset:0}}`, which is a
   reasonable default for the risk-calculator this panel used to be and is wrong for a panel whose
   whole job is to talk about the drawing underneath it. The owner's own requirement: «the panel must
   not swallow the chart · Accept/Reject reachable · panel scroll must not pan the chart».

   A bottom sheet, not a takeover. The chart keeps the top of the viewport, the sheet keeps its own
   scroll, and Accept/Reject stay inside a surface that is never taller than the space it was given.
   Specificity is id + two classes so this wins wherever the stylesheets land in the cascade.
   At 768px (tablet) the panel is already in-flow at 238px and covers nothing; that is untouched. */
@media (max-width: 520px) {
  #pcSide.pcside.on {
    inset: auto 0 0 0;
    /* 48vh, chosen by measurement rather than by taste: at 375x812 with a 62vh sheet the plot's
       centre row was still covered (6 of 9 probe points). At 48vh the top HALF of the chart — the
       part a trader is looking at when they ask about a drawing — stays visible. */
    height: min(48vh, 460px);
    max-height: 48vh;
    width: 100%;
    max-width: 100%;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .38);
    /* the sheet scrolls itself; a drag inside it must never reach the chart's pan handler */
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  /* Send / Accept / Reject are the controls that must always be reachable, so the composer is
     pinned to the bottom of the sheet rather than living at the end of a long scroll. */
  #pcSide.pcside.on .pcz-ask { position: sticky; bottom: 0; z-index: 2;
    background: var(--cardgrad); padding-block: 6px; }
}

/* ── iOS ZOOMS THE WHOLE PAGE WHEN A SUB-16px FIELD TAKES FOCUS ───────────────────────────────── */
/* #pcZQ computed 12px at both phone widths, so tapping the composer on an iPhone scaled the page —
   and a zoomed page is a chart the user then has to fix before they can read the answer they asked
   for. 16px is the documented threshold, applied only where a coarse pointer can trigger it so the
   desktop panel's density is unchanged. */
@media (max-width: 520px), (pointer: coarse) {
  #pczQ, .vtab-pane .pcz-ask input { font-size: 16px; line-height: 1.35; }
}

/* ══ THE ANALYSIS SCHOOL CARDS ════════════════════════════════════════════════════════════════════
   Three surfaces, and they are deliberately not styled alike: the EVIDENCE reads as a measurement
   (dense, monospaced numbers, muted), the CANDIDATES read as a set of opinions (bordered, equal
   weight, none highlighted), and a PROPOSAL reads as a decision the trader has to make (amber
   left edge, its own buttons, one card per decision). The amber is --vagi, the machine's colour —
   never green or red, because on a price chart those two mean direction and this project's COLOR
   LAW does not let a proposal borrow them.
*/
.vta-sch { margin: 8px 0; }
.vsch {
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  border-radius: 11px;
  background: var(--bg2, rgba(0, 0, 0, .12));
  padding: 9px 10px;
  font-size: 10.5px;
  line-height: 1.65;
}
.vsch-state { opacity: .8; font-weight: 600; }
.vsch-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 11px; font-weight: 800; color: var(--vagi, #e8932a);
  padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.vsch-sym { font-size: 9px; font-weight: 700; opacity: .7; color: var(--txt2, inherit); font-variant-numeric: tabular-nums; }
.vsch-kind {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14)); color: var(--muted, rgba(160, 170, 185, .9));
}
.vsch-sec {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted, rgba(160, 170, 185, .85)); margin: 9px 0 5px;
}
.vsch-dq {
  font-size: 9px; line-height: 1.75; opacity: .72;
  display: flex; flex-wrap: wrap; gap: 0 5px;
}
.vsch-sep { opacity: .4; }
.vsch-ev, .vsch-cand, .vsch-p {
  border-radius: 8px; padding: 6px 8px; margin-bottom: 5px;
  background: var(--card2, rgba(255, 255, 255, .028));
}
.vsch-ev.dim { opacity: .58; }
.vsch-ev.amb { border-inline-start: 2px solid rgba(160, 170, 185, .5); }
.vsch-cand { border: 1px solid var(--line, rgba(255, 255, 255, .1)); }
.vsch-cn {
  font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  opacity: .55; margin-bottom: 2px;
}
.vsch-hl { font-weight: 650; }
.vsch-sup { font-size: 9px; font-weight: 700; opacity: .65; }
.vsch-terms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.vsch-t {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px;
  font-size: 9px; padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  font-variant-numeric: tabular-nums;
}
.vsch-t b { font-weight: 750; opacity: .8; }
.vsch-t i { font-style: normal; opacity: .6; }
/* The SOURCE of a number, always shown — a value with no stated origin is the thing this panel exists to stop. */
.vsch-t em { font-style: normal; font-size: 8px; opacity: .5; width: 100%; }
.vsch-notes { margin-top: 7px; }
.vsch-note { font-size: 9px; line-height: 1.7; opacity: .68; margin-bottom: 3px; }
.vsch-code {
  font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .05em;
  padding: 0 4px; border-radius: 4px; margin-inline-end: 4px;
  background: rgba(232, 147, 42, .12); color: var(--vagi, #e8932a);
}
.vsch-ref {
  border-inline-start: 2px solid rgba(232, 147, 42, .6);
  background: rgba(232, 147, 42, .06);
  border-radius: 8px; padding: 7px 9px; margin-bottom: 7px; font-weight: 600;
}
.vsch-inv {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 8px; margin-bottom: 4px;
  background: var(--card2, rgba(255, 255, 255, .028)); opacity: .62;
}
.vsch-inv.ok { opacity: 1; border-inline-start: 2px solid rgba(232, 147, 42, .5); }
.vsch-inv b { font-size: 10.5px; font-weight: 750; }
.vsch-inv span { font-size: 9px; line-height: 1.65; }

.vsch-p { border-inline-start: 2px solid rgba(232, 147, 42, .55); }
.vsch-p-applied { border-inline-start-color: rgba(232, 147, 42, .9); }
.vsch-p-rejected, .vsch-p-undone { opacity: .55; border-inline-start-color: var(--line, rgba(255, 255, 255, .16)); }
.vsch-why { font-size: 9.5px; line-height: 1.7; opacity: .82; margin-top: 3px; }
.vsch-inv2 { font-size: 9px; line-height: 1.7; opacity: .66; margin-top: 4px; }
.vsch-pnote { font-size: 9px; line-height: 1.7; margin-top: 5px; opacity: .8; }
.vsch-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vsch-b {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 5px 10px;
  font: inherit; font-size: 10px; font-weight: 700;
  border-radius: 8px; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: var(--bg2, rgba(0, 0, 0, .14)); color: var(--txt2, inherit);
}
.vsch-b svg { width: 12px; height: 12px; flex: 0 0 auto; }
.vsch-b:hover, .vsch-b:focus-visible { border-color: rgba(232, 147, 42, .45); color: var(--vagi, #e8932a); outline: none; }
.vsch-b.vsch-ok { border-color: rgba(232, 147, 42, .5); color: var(--vagi, #e8932a); }
.vsch-b.vsch-no { opacity: .8; }
.vsch-foot { font-size: 9px; line-height: 1.7; opacity: .55; margin-top: 7px; }

/* A decision must stay tappable on a phone: 34px buttons become full-width rows rather than
   shrinking below the touch target. */
@media (max-width: 520px), (pointer: coarse) {
  .vsch-btns { gap: 6px; }
  .vsch-b { min-height: 44px; flex: 1 1 auto; justify-content: center; }
}

/* ── THE PROPOSAL SURFACE · card ↔ ghost ──────────────────────────────────────────────────────
   The count is in the section header, the identity is on the card, and the focused card is the one
   whose drawing is lit on the chart. The focus ring is amber like every other AGI-owned surface —
   never green, never red: those two colours mean direction on this platform and nothing else. */
.vsch-sec { display: flex; align-items: center; gap: 6px; }
.vsch-count {
  font-size: 9px; font-weight: 800; letter-spacing: 0;
  min-width: 16px; padding: 0 5px; border-radius: 999px; text-align: center;
  background: rgba(232, 147, 42, .14); color: var(--vagi, #e8932a);
  font-variant-numeric: tabular-nums;
}
.vsch-cnt { font-size: 9px; line-height: 1.7; opacity: .78; margin-bottom: 5px; }
.vsch-cnt.dim { opacity: .5; }

.vsch-p { cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease; }
.vsch-p-focus {
  background: rgba(232, 147, 42, .07);
  box-shadow: 0 0 0 1px rgba(232, 147, 42, .45);
}
/* A proposal the translator cannot place carries no preview control at all — the card says so and
   reads as inert rather than as something waiting to be pressed. */
.vsch-p-norender { opacity: .62; border-inline-start-color: var(--line, rgba(255, 255, 255, .16)); cursor: default; }
.vsch-pid {
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  padding: 0 5px; border-radius: 5px; margin-inline-end: 4px;
  background: rgba(232, 147, 42, .13); color: var(--vagi, #e8932a);
  font-variant-numeric: tabular-nums;
}
.vsch-dist { font-size: 9px; line-height: 1.7; opacity: .62; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* The chosen set. There is deliberately no «select all» control here — see agi-box-tabs.js. */
.vsch-pick {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  font-size: 10px; font-weight: 700;
  border: 1px dashed var(--line, rgba(255, 255, 255, .16));
}
.vsch-pick input { accent-color: var(--vagi, #e8932a); width: 14px; height: 14px; margin: 0; }
.vsch-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .1));
}
.vsch-bulkn { font-size: 9px; font-weight: 800; opacity: .7; font-variant-numeric: tabular-nums; }
.vsch-bulk .vsch-b[disabled] { opacity: .38; cursor: not-allowed; }

/* A follow-up answer: the code it resolved to, the proposal id it landed on, and the sentence. */
.vsch-fu { border-inline-start: 2px solid rgba(232, 147, 42, .5); }
.vsch-fuh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vsch-fut { font-size: 10px; line-height: 1.75; margin-top: 4px; }

/* Progress that names its stage. A finished stage keeps its number on screen — the reader can see
   what each step actually produced instead of a bar that reached the end. */
.vta-stages { display: flex; flex-direction: column; gap: 3px; }
.vta-stages .vta-stage { opacity: 1; }
.vta-stages .vta-stage.done { opacity: .55; }
.vta-stages .vta-stage svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--vagi, #e8932a); }
.vta-stages .vta-stage i {
  font-style: normal; font-size: 9px; opacity: .72; font-variant-numeric: tabular-nums;
}

@media (max-width: 520px), (pointer: coarse) {
  .vsch-pick { min-height: 44px; flex: 1 1 auto; justify-content: center; }
}