/* ============================================================================
   ForexSight — base II
   A clean base, built beside the old one rather than on top of it.

   Two rules this stylesheet exists to enforce, both of them lessons from the
   old base rather than taste:

   1. EVERY BOX THAT LOADS LATE RESERVES ITS HEIGHT UP FRONT.
      The old base shifted on every refresh because thirteen header cards grew
      from 0px to their real height as data arrived. Heights here are declared,
      not discovered.

   2. NO ELEMENT IS STYLED BY SCRIPT AFTER RENDER.
      The old base's worst bug was a MutationObserver that reacted to its own
      writes and rebuilt a panel eight times a second, forever. The new base
      renders once from state; there is nothing to observe and nothing to patch.
   ========================================================================== */

:root {
  --ink:            #070a12;
  --ink-raised:     #0d1220;
  --ink-card:       #121829;
  --ink-hover:      #18203450;
  --line:           #1f2942;
  --line-soft:      #18203a;

  --text:           #eef2fb;
  --text-dim:       #9aa6c2;
  --text-faint:     #64708d;

  --up:             #2fd98a;
  --up-soft:        #2fd98a18;
  --down:           #ff5f6d;
  --down-soft:      #ff5f6d18;
  --warn:           #ffb63d;
  --warn-soft:      #ffb63d18;
  --accent:         #6b8cff;
  --accent-soft:    #6b8cff18;
  --neutral:        #7f8aa6;

  --r-sm: 8px;
  --r:    13px;
  --r-lg: 20px;

  --pad:  18px;
  --gap:  14px;

  --shadow:    0 1px 2px #0006, 0 8px 28px -12px #000a;
  --shadow-lg: 0 2px 6px #0008, 0 24px 60px -20px #000c;

  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Reserved heights — rule 1 above. */
  --h-voice:   128px;
  --h-strip:    74px;
  --h-record:  104px;
  --h-card:    252px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { background: var(--ink); }

body {
  font-family: var(--sans);
  background:
    radial-gradient(1100px 560px at 12% -10%, #16203c 0%, transparent 62%),
    radial-gradient(900px 480px at 92% 2%,  #1a1733 0%, transparent 58%),
    var(--ink);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 0 0 72px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─────────────────────────── shell ─────────────────────────── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

header.top {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  background: #070a12e8;
  border-bottom: 1px solid var(--line-soft);
}
.top-in {
  max-width: 1120px; margin: 0 auto; padding: 13px 16px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: baseline; gap: 9px; font-weight: 680; letter-spacing: -.025em; font-size: 17px; }
.brand .ii {
  font: 600 10px/1 var(--mono); letter-spacing: .14em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid #6b8cff35; border-radius: 5px; padding: 4px 6px;
  text-transform: uppercase; align-self: center;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: 0 0 auto; }
.dot.live { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.dot.stale { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.dead { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.top-meta { margin-left: auto; font: 500 11.5px/1.35 var(--mono); color: var(--text-faint); text-align: right; }

h2.sec {
  font-size: 11px; font-weight: 660; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint); margin: 30px 0 12px; display: flex; align-items: center; gap: 9px;
}
h2.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ─────────────────────── market voice ─────────────────────── */
.voice {
  min-height: var(--h-voice); contain: layout;
  margin-top: 20px; padding: var(--pad);
  background: linear-gradient(145deg, #141b31, #0e1322 70%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.voice::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, #6b8cff55 30%, #6b8cff55 70%, transparent);
}
.voice-label { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 11px; }
.voice-head { font-size: 19px; font-weight: 600; letter-spacing: -.022em; line-height: 1.35; margin-bottom: 14px; }
.voice-reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 13px; }
.vr { background: #0a0e1a90; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; min-height: 62px; }
.vr-k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.vr-v { font: 620 17px/1.15 var(--mono); margin: 6px 0 3px; letter-spacing: -.02em; }
.vr-s { font-size: 11.5px; color: var(--text-dim); line-height: 1.3; }
.voice-honest {
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  padding: 11px 13px; background: var(--warn-soft);
  border-left: 2px solid var(--warn); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.voice-honest.proven { background: var(--up-soft); border-left-color: var(--up); }

/* ───────────────────────── strips ────────────────────────── */
.strip { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); margin-top: 14px; }
.tile {
  min-height: var(--h-strip); contain: layout;
  background: var(--ink-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; box-shadow: var(--shadow);
}
.tile-k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.tile-v { font: 620 21px/1.1 var(--mono); margin-top: 8px; letter-spacing: -.028em; }
.tile-n { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.35; }

/* ───────────────────────── record ───────────────────────── */
.record {
  min-height: var(--h-record); contain: layout;
  background: var(--ink-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--pad); box-shadow: var(--shadow); margin-top: 14px;
}
.rec-row { display: flex; flex-wrap: wrap; gap: 26px; align-items: baseline; }
.rec-i .k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.rec-i .v { font: 620 24px/1.1 var(--mono); margin-top: 7px; letter-spacing: -.03em; }
.rec-note { font-size: 12.5px; color: var(--text-dim); margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line-soft); line-height: 1.55; }

/* ──────────────────────── signals ──────────────────────── */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(336px, 1fr)); margin-top: 14px; }
.card {
  background: var(--ink-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: #2b3a5e; transform: translateY(-1px); }
.card.buy  { border-top: 2px solid var(--up); }
.card.sell { border-top: 2px solid var(--down); }

.c-head { padding: 15px var(--pad) 13px; display: flex; align-items: flex-start; gap: 11px; }
.c-pair { font-size: 19px; font-weight: 660; letter-spacing: -.028em; }
.c-sub { font: 500 11px/1.35 var(--mono); color: var(--text-faint); margin-top: 3px; }
.c-dir {
  margin-left: auto; font: 680 10.5px/1 var(--mono); letter-spacing: .1em;
  padding: 7px 10px; border-radius: 6px; text-transform: uppercase; flex: 0 0 auto;
}
.c-dir.buy  { color: var(--up);   background: var(--up-soft);   border: 1px solid #2fd98a40; }
.c-dir.sell { color: var(--down); background: var(--down-soft); border: 1px solid #ff5f6d40; }

.c-levels { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.lvl { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line-soft); }
.lvl:last-child { border-right: 0; }
.lvl-k { font: 600 9px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.lvl-v { font: 600 13px/1.2 var(--mono); margin-top: 6px; letter-spacing: -.02em; }
.lvl-d { font: 500 9.5px/1 var(--mono); color: var(--text-faint); margin-top: 3px; }
.lvl.sl .lvl-v { color: var(--down); }
.lvl.tp .lvl-v { color: var(--up); }

.c-body { padding: 13px var(--pad) var(--pad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.chip {
  font: 600 10px/1 var(--mono); letter-spacing: .05em; padding: 5px 8px;
  border-radius: 5px; background: #0a0e1a; border: 1px solid var(--line-soft); color: var(--text-dim);
}
.chip.ok   { color: var(--up);   background: var(--up-soft);   border-color: #2fd98a35; }
.chip.bad  { color: var(--down); background: var(--down-soft); border-color: #ff5f6d35; }
.chip.warn { color: var(--warn); background: var(--warn-soft); border-color: #ffb63d35; }
.chip.info { color: var(--accent); background: var(--accent-soft); border-color: #6b8cff35; }
.c-why { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }

/* collapsible detail — <details>, so state belongs to the browser, not to a
   re-render. The old base lost every open section whenever innerHTML ran. */
details.fold { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 11px; }
details.fold > summary {
  cursor: pointer; list-style: none; font: 600 10.5px/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: 7px; padding: 3px 0; user-select: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▸'; font-size: 9px; transition: transform .16s ease; color: var(--accent); }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { color: var(--text-dim); }
.fold-in { padding-top: 11px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font: 500 11.5px/1.5 var(--mono); }
.kv dt { color: var(--text-faint); }
.kv dd { color: var(--text); text-align: right; }

/* ──────────────────────── history ──────────────────────── */
.hist { margin-top: 14px; }
.hrow {
  background: var(--ink-card); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 8px; overflow: hidden;
}
.hrow > summary {
  cursor: pointer; list-style: none; padding: 13px 15px;
  display: flex; align-items: center; gap: 12px; user-select: none;
}
.hrow > summary::-webkit-details-marker { display: none; }
.hrow > summary:hover { background: var(--ink-hover); }
.h-res { font: 680 10.5px/1 var(--mono); letter-spacing: .08em; padding: 6px 9px; border-radius: 5px; flex: 0 0 auto; }
.h-res.win  { color: var(--up);   background: var(--up-soft);   border: 1px solid #2fd98a40; }
.h-res.loss { color: var(--down); background: var(--down-soft); border: 1px solid #ff5f6d40; }
.h-res.open { color: var(--warn); background: var(--warn-soft); border: 1px solid #ffb63d40; }
.h-pair { font-weight: 620; font-size: 14.5px; letter-spacing: -.02em; }
.h-when { font: 500 11px/1 var(--mono); color: var(--text-faint); }
.h-r { margin-left: auto; font: 640 15px/1 var(--mono); letter-spacing: -.02em; }
.h-r.pos { color: var(--up); } .h-r.neg { color: var(--down); }
.h-caret { font-size: 9px; color: var(--accent); transition: transform .16s ease; }
.hrow[open] .h-caret { transform: rotate(90deg); }
.h-body { padding: 0 15px 15px; border-top: 1px solid var(--line-soft); padding-top: 13px; }

/* ──────────────────────── misc ──────────────────────── */
.empty {
  background: var(--ink-card); border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: 34px var(--pad); text-align: center; color: var(--text-dim); font-size: 13.5px; line-height: 1.6;
}
.empty strong { display: block; color: var(--text); font-size: 15px; font-weight: 620; margin-bottom: 7px; letter-spacing: -.02em; }

.skel { background: linear-gradient(90deg, #141a2c 25%, #1b2238 50%, #141a2c 75%); background-size: 200% 100%; animation: sh 1.5s ease-in-out infinite; border-radius: 6px; }
@keyframes sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

footer.foot { margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--text-faint); line-height: 1.7; }
footer.foot a { color: var(--accent); text-decoration: none; }
footer.foot code { font: 500 10.5px var(--mono); color: var(--text-dim); }

@media (max-width: 620px) {
  :root { --pad: 15px; --gap: 11px; --h-voice: 168px; }
  body { font-size: 14.5px; }
  .wrap, .top-in { padding-left: 13px; padding-right: 13px; }
  .voice-reads { grid-template-columns: 1fr; }
  .vr { min-height: 0; }
  .voice-head { font-size: 16.5px; }
  .cards { grid-template-columns: 1fr; }
  .rec-row { gap: 18px; }
  .rec-i .v { font-size: 20px; }
  .top-meta { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ─────────────────────── the order bar ───────────────────────
   Sits directly under the header because it is the primary control, not a
   preference buried in a menu. Reserved height like everything else. */
.cmd { margin-top: 18px; min-height: 52px; contain: layout; }
#cmd-form {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 4px 6px 4px 14px; box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#cmd-form:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
.cmd-caret { font: 700 17px/1 var(--mono); color: var(--accent); flex: 0 0 auto; }
#cmd-input {
  flex: 1; background: none; border: 0; outline: none; color: var(--text);
  font: 500 14px/1.4 var(--mono); padding: 11px 0; min-width: 0;
}
#cmd-input::placeholder { color: var(--text-faint); }
.cmd-go {
  flex: 0 0 auto; cursor: pointer; font: 650 11px/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid #6b8cff40; border-radius: 7px; padding: 10px 14px;
  transition: background .15s ease;
}
.cmd-go:hover { background: #6b8cff28; }

.cmd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cmd-chips-k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
.cmd-chip {
  cursor: pointer; font: 600 10.5px/1 var(--mono); color: var(--accent);
  background: var(--accent-soft); border: 1px solid #6b8cff35; border-radius: 5px;
  padding: 6px 9px; display: inline-flex; align-items: center; gap: 6px;
}
.cmd-chip span { color: var(--text-faint); font-size: 12px; }
.cmd-chip:hover { background: #6b8cff28; }
.cmd-chip:hover span { color: var(--down); }
.cmd-chip.clear-all { color: var(--text-dim); background: #0a0e1a; border-color: var(--line-soft); }

.cmd-msg {
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--up-soft); border-left: 2px solid var(--up);
  font: 500 12px/1.6 var(--mono); color: var(--text-dim);
  white-space: pre-wrap; overflow-x: auto;
}
.cmd-msg.bad { background: var(--warn-soft); border-left-color: var(--warn); }

/* compact density, set by the `compact` order */
body[data-density="compact"] { --pad: 12px; --gap: 9px; --h-card: 210px; }
body[data-density="compact"] .c-head { padding: 11px var(--pad) 9px; }
body[data-density="compact"] .c-body { padding: 10px var(--pad) var(--pad); }
body[data-density="compact"] .c-pair { font-size: 17px; }
body[data-density="compact"] .lvl { padding: 8px 6px; }
body[data-density="compact"] .cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

@media (max-width: 620px) {
  .cmd-go { padding: 10px 11px; font-size: 10px; }
  #cmd-input { font-size: 13px; }
}

/* strategy trials table */
.trial-head, .trial-row {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 10px;
  padding: 9px 0; align-items: baseline;
}
.trial-head { font: 600 9px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--line-soft); }
.trial-row { border-bottom: 1px solid var(--line-soft); font: 500 11.5px/1.4 var(--mono); }
.trial-row:last-child { border-bottom: 0; }
.tr-name { color: var(--text); }
.tr-n { color: var(--text-dim); }
.tr-n.pos { color: var(--up); } .tr-n.neg { color: var(--down); }
.tr-n i { font-style: normal; color: var(--text-faint); font-size: 10px; }
@media (max-width: 700px) {
  .trial-head { display: none; }
  .trial-row { grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 11px 0; }
  .tr-name { grid-column: 1 / -1; font-weight: 600; }
}

/* tap a level to copy it */
.lvl.copyable { cursor: pointer; position: relative; transition: background .14s ease; -webkit-user-select: none; user-select: none; }
.lvl.copyable:hover { background: var(--ink-hover); }
.lvl.copyable:active { background: #1b2440; }
.lvl.copyable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lvl.copyable::after {
  content: '⧉'; position: absolute; top: 5px; right: 6px; font-size: 9px;
  color: var(--text-faint); opacity: 0; transition: opacity .14s ease;
}
.lvl.copyable:hover::after { opacity: .75; }
@media (hover: none) { .lvl.copyable::after { opacity: .45; } }
.lvl.copied   { background: var(--up-soft)   !important; animation: popc .45s ease; }
.lvl.copyfail { background: var(--warn-soft) !important; }
.lvl.copied .lvl-v { color: var(--up) !important; }
@keyframes popc { 0% { transform: scale(1); } 40% { transform: scale(1.055); } 100% { transform: scale(1); } }

.copy-tip {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--ink-raised); border: 1px solid var(--up); color: var(--text);
  font: 600 12.5px/1 var(--mono); padding: 11px 16px; border-radius: 999px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .18s ease, transform .18s ease; white-space: nowrap; max-width: 92vw; overflow: hidden;
}
.copy-tip.show { opacity: 1; transform: translate(-50%, 0); }
.copy-tip.bad { border-color: var(--warn); }

/* five levels across: entry, stop and all three targets, each tap-to-copy */
.c-levels.five { grid-template-columns: repeat(5, 1fr); }
.c-levels.five .lvl { padding: 11px 4px; }
.c-levels.five .lvl-v { font-size: 11.5px; letter-spacing: -.03em; }
.c-levels.five .lvl-k { font-size: 8.5px; }
@media (max-width: 460px) {
  .c-levels.five { grid-template-columns: repeat(3, 1fr); }
  .c-levels.five .lvl:nth-child(1), .c-levels.five .lvl:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .c-levels.five .lvl:nth-child(2) { grid-column: span 2; }
  .c-levels.five .lvl-v { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM PASS
   Depth, hierarchy and restraint rather than more colour. Everything here is
   additive, so if a rule is dropped the layout still holds — and nothing
   animates on a loop, because a page that never settles reads as cheap and
   was the original glitch complaint.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --glass: linear-gradient(160deg, #161d33cc, #0f1526e8);
  --hair:  linear-gradient(90deg, transparent, #2b3a5e, transparent);
}

body {
  background:
    radial-gradient(1200px 620px at 10% -12%, #19244422 0%, transparent 60%),
    radial-gradient(1000px 520px at 95% 0%,  #1d183a22 0%, transparent 56%),
    radial-gradient(760px 420px at 50% 108%, #10203a1a 0%, transparent 60%),
    var(--ink);
}

/* refined typography */
.voice-head { font-weight: 620; letter-spacing: -.028em; }
.c-pair, .rec-i .v, .tile-v { font-feature-settings: 'tnum' 1, 'cv01' 1; }
.lvl-v, .h-r, .rec-i .v, .vr-v { font-variant-numeric: tabular-nums; }

/* cards: real depth, and a hairline that reads as craft */
.card {
  background: var(--glass);
  border-color: #1d2742;
  box-shadow: 0 1px 1px #0005, 0 10px 30px -14px #000b, inset 0 1px 0 #ffffff07;
}
.card:hover { box-shadow: 0 1px 1px #0006, 0 18px 44px -16px #000d, inset 0 1px 0 #ffffff0b; }
.card.buy  { border-top-color: transparent; background-image: linear-gradient(var(--up), var(--up)), var(--glass); }
.card.sell { border-top-color: transparent; background-image: linear-gradient(var(--down), var(--down)), var(--glass); }
.card.buy, .card.sell { background-repeat: no-repeat; background-size: 100% 2px, auto; background-position: top left, center; }

.c-head { position: relative; }
.c-head::after { content: ''; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: var(--hair); }

/* direction badge: quieter, more deliberate */
.c-dir { box-shadow: inset 0 1px 0 #ffffff12; letter-spacing: .12em; }

/* levels read as a precision instrument */
.c-levels { background: #080c1680; }
.lvl-k { color: #5c6884; }
.lvl-v { font-weight: 620; }

/* the voice panel earns its place at the top */
.voice { background: var(--glass); box-shadow: 0 1px 1px #0005, 0 20px 56px -22px #000c, inset 0 1px 0 #ffffff08; }
.vr { background: #080c1670; box-shadow: inset 0 1px 0 #ffffff05; }

/* tiles and record match the card language */
.tile, .record, #cmd-form {
  background: var(--glass);
  box-shadow: 0 1px 1px #0005, 0 10px 28px -16px #000a, inset 0 1px 0 #ffffff06;
}

/* section rules: finer */
h2.sec::after { background: var(--hair); }

/* chips: less shouty, better aligned */
.chip { box-shadow: inset 0 1px 0 #ffffff07; letter-spacing: .055em; }

/* history rows gain the same depth */
.hrow { background: var(--glass); box-shadow: 0 1px 1px #0004, inset 0 1px 0 #ffffff05; }

/* header: a touch more presence */
header.top { box-shadow: 0 1px 0 #ffffff06, 0 6px 24px -12px #000a; }
.brand .ii { box-shadow: inset 0 1px 0 #ffffff14; }

/* a single, one-shot entrance — it settles and then stops */
@media (prefers-reduced-motion: no-preference) {
  .card, .tile, .voice, .record { animation: rise .42s cubic-bezier(.22,.9,.3,1) both; }
  .cards .card:nth-child(2) { animation-delay: .05s; }
  .cards .card:nth-child(3) { animation-delay: .1s; }
  .cards .card:nth-child(n+4) { animation-delay: .14s; }
  @keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}

/* focus states worth having */
:where(button, [role="button"], input, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px;
}

/* selection */
::selection { background: #6b8cff35; color: var(--text); }

/* scrollbar, where it is drawn by the page */
* { scrollbar-width: thin; scrollbar-color: #2b3a5e transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #223052; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #2d3e68; background-clip: content-box; }

/* ─────────────────────── Research ─────────────────────── */
.rs-btn {
  margin-left: auto; cursor: pointer; font: 650 10.5px/1 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid #6b8cff40; border-radius: 7px; padding: 9px 13px;
  box-shadow: inset 0 1px 0 #ffffff12; transition: background .15s ease, transform .12s ease;
}
.rs-btn:hover { background: #6b8cff28; }
.rs-btn:active { transform: translateY(1px); }
.top-meta { margin-left: 14px; }

.rs { position: fixed; inset: 0; z-index: 100; display: none; }
.rs.open { display: block; }
.rs-back { position: absolute; inset: 0; background: #04060ccc; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rs-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #161d33, #0d1322 72%);
  border: 1px solid #28344f; border-radius: var(--r-lg);
  box-shadow: 0 2px 8px #0009, 0 40px 100px -24px #000e, inset 0 1px 0 #ffffff0c;
  overflow: hidden;
}
.rs-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
#rs-q { flex: 1; background: #080c16; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font: 500 14px/1.4 var(--sans); padding: 12px 14px; outline: none; min-width: 0; }
#rs-q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#rs-q::placeholder { color: var(--text-faint); }
.rs-x { cursor: pointer; background: none; border: 0; color: var(--text-faint); font-size: 26px; line-height: 1; padding: 0 6px; }
.rs-x:hover { color: var(--text); }
.rs-body { overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; }
.rs-lead { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }

.rs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rs-chip { cursor: pointer; text-align: left; font: 500 12px/1.35 var(--sans); color: var(--text-dim);
  background: #0a0e1a; border: 1px solid var(--line-soft); border-radius: 7px; padding: 9px 11px; }
.rs-chip:hover { color: var(--text); border-color: #2b3a5e; background: #0d1322; }

.rs-ans h3 { font-size: 17px; font-weight: 620; letter-spacing: -.022em; margin: 10px 0 12px; }
.rs-ans p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 11px; }
.rs-ans strong { color: var(--text); font-weight: 620; }
.rs-ans code { font: 500 12px var(--mono); background: #0a0e1a; border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 2px 5px; color: var(--accent); }
.rs-kind { display: inline-block; font: 650 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 5px; }
.rs-measured   { color: var(--up);     background: var(--up-soft);     border: 1px solid #2fd98a35; }
.rs-mechanical { color: var(--accent); background: var(--accent-soft); border: 1px solid #6b8cff35; }
.rs-refusal    { color: var(--warn);   background: var(--warn-soft);   border: 1px solid #ffb63d35; }

.kb-t { width: 100%; border-collapse: collapse; margin: 6px 0 13px; font: 500 12px/1.5 var(--mono); }
.kb-t th { text-align: left; font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.kb-t td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.kb-t td:first-child { color: var(--text); }
.kb-l { margin: 0 0 12px 17px; }
.kb-l li { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 7px; }
.kb-eq { font: 600 13px/1.6 var(--mono) !important; background: #080c16; border-left: 2px solid var(--accent);
  padding: 11px 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text) !important; }
.kb-warn { background: var(--warn-soft); border-left: 2px solid var(--warn);
  padding: 11px 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rs-src { font: 500 11px/1.5 var(--mono); color: var(--text-faint); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rs-more { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rs-more > span { display: block; font: 600 9.5px/1 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; }

@media (max-width: 620px) {
  .rs-panel { width: 100vw; height: 100vh; max-height: none; border-radius: 0; top: 0; left: 0; transform: none; }
  .rs-btn { padding: 8px 10px; font-size: 9.5px; }
  .top-meta { display: none; }
}

/* ─────────────────── the signal ledger ─────────────────── */
.lg-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lg-rate .k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.lg-rate .v { font: 620 34px/1 var(--mono); letter-spacing: -.035em; margin: 9px 0 10px; }
.lg-bar { height: 5px; background: #080c16; border-radius: 3px; overflow: hidden; border: 1px solid var(--line-soft); }
.lg-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6b8cff, #2fd98a); }
.lg-sub { font: 500 11.5px/1.45 var(--mono); color: var(--text-dim); margin-top: 9px; }
.lg-def { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; line-height: 1.45; }

.lg-tbl { margin-bottom: 20px; }
.lg-tbl td.pos { color: var(--up); } .lg-tbl td.neg { color: var(--down); }
.lg-tbl th:not(:first-child), .lg-tbl td:not(:first-child) { text-align: right; }

.lg-head, .lg-row { display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; gap: 10px; padding: 9px 0; align-items: baseline; }
.lg-head { font: 600 9px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink-card); }
.lg-row { border-bottom: 1px solid var(--line-soft); font: 500 11.5px/1.4 var(--mono); }
.lg-row:last-child { border-bottom: 0; }
.lg-p b { color: var(--text); font-weight: 620; }
.lg-p i { font-style: normal; color: var(--text-faint); font-size: 10px; }
.lg-t { color: var(--text-faint); }
.lg-r { text-align: right; font-weight: 620; }
.lg-r.win { color: var(--up); } .lg-r.loss { color: var(--down); } .lg-r.open { color: var(--warn); }

@media (max-width: 620px) {
  .lg-rates { grid-template-columns: 1fr; gap: 22px; }
  .lg-rate .v { font-size: 28px; }
  .lg-head, .lg-row { grid-template-columns: 1.6fr 1fr .8fr; }
  .lg-head span:nth-child(3), .lg-row span:nth-child(3) { display: none; }
}

/* ─────────────────────────── tabs ─────────────────────────── */
.tabs { border-top: 1px solid var(--line-soft); background: #070a12d0; }
.tabs-in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.tabs-in::-webkit-scrollbar { display: none; }
.tab {
  position: relative; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  background: none; border: 0; color: var(--text-faint);
  font: 620 12px/1 var(--sans); letter-spacing: -.01em;
  padding: 14px 15px; display: flex; align-items: center; gap: 7px;
  transition: color .15s ease;
}
.tab:hover { color: var(--text-dim); }
.tab.on { color: var(--text); }
.tab.on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), #2fd98a); border-radius: 2px 2px 0 0;
}
.tab-n {
  font: 650 9.5px/1 var(--mono); padding: 4px 6px; border-radius: 4px;
  background: #0f1526; border: 1px solid var(--line-soft); color: var(--text-faint);
}
.tab.on .tab-n { color: var(--accent); background: var(--accent-soft); border-color: #6b8cff35; }
.tab-n:empty { display: none; }

/* Panes are hidden, never unmounted — switching must not rebuild them or the
   open/closed state of every <details> inside would be lost. */
.pane { display: none; }
.pane.on { display: block; }
.pane > h2.sec:first-child { margin-top: 22px; }

@media (max-width: 620px) {
  .tabs-in { padding: 0 10px; }
  .tab { padding: 13px 11px; font-size: 11.5px; }
}

/* ───────────── per-signal money ───────────── */
.mny { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mny-k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.mny-two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mny-win, .mny-lose { padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid; }
.mny-win  { background: var(--up-soft);   border-color: #2fd98a35; }
.mny-lose { background: var(--down-soft); border-color: #ff5f6d35; }
.mny-win span, .mny-lose span { display: block; font-size: 10.5px; color: var(--text-dim); margin-bottom: 5px; }
.mny-win b  { font: 650 20px/1 var(--mono); color: var(--up);   letter-spacing: -.03em; }
.mny-lose b { font: 650 20px/1 var(--mono); color: var(--down); letter-spacing: -.03em; }
.mny-fold { border-top: 0; margin-top: 10px; padding-top: 0; }
.mny-d { font-style: normal; font-size: 10.5px; color: var(--text-faint); }
.mny-warn { font-size: 12px; color: var(--text-dim); background: var(--warn-soft);
  border-left: 2px solid var(--warn); padding: 10px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.5; }
.kb-t td.pos { color: var(--up); } .kb-t td.neg { color: var(--down); }

/* ───────────── the calculator ───────────── */
#calc-form { display: flex; align-items: center; gap: 10px; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--r); padding: 4px 6px 4px 14px; box-shadow: var(--shadow); }
#calc-form:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
#calc-in { flex: 1; background: none; border: 0; outline: none; color: var(--text);
  font: 500 14px/1.4 var(--mono); padding: 11px 0; min-width: 0; }
#calc-in::placeholder { color: var(--text-faint); }
.calc-ans { margin-top: 12px; background: var(--glass); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--r); padding: 15px 17px; }
.calc-t { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.calc-v { font: 650 30px/1.1 var(--mono); letter-spacing: -.035em; margin: 10px 0 13px; color: var(--text); }
.calc-w { margin: 0 0 0 17px; }
.calc-w li { font: 500 12.5px/1.75 var(--mono); color: var(--text-dim); }
@media (max-width: 620px) { .mny-two { grid-template-columns: 1fr; } .calc-v { font-size: 24px; } }

/* ───────────── editable account ───────────── */
.acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; align-items: end; }
.acct-f span { display: block; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; }
.acct-in { display: flex; align-items: center; gap: 6px; background: #080c16;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; }
.acct-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acct-in i { font-style: normal; font: 600 14px var(--mono); color: var(--text-faint); }
.acct-in input, .acct-in select {
  flex: 1; background: none; border: 0; outline: none; color: var(--text);
  font: 620 19px/1 var(--mono); padding: 12px 0; min-width: 0; letter-spacing: -.02em;
}
.acct-in select { cursor: pointer; }
.acct-in input::-webkit-outer-spin-button, .acct-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acct-in input[type=number] { -moz-appearance: textfield; }
.acct-r span { display: block; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; }
.acct-r b { display: block; font: 650 26px/1 var(--mono); color: var(--accent); letter-spacing: -.03em; }
.acct-r i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
#in-risk-range { width: 100%; margin-top: 18px; accent-color: var(--accent); cursor: pointer; }
.acct-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; line-height: 1.55; }

/* ───────────── dismissable answers ───────────── */
.ans-wrap { position: relative; }
.ans-x, .rs-clear { cursor: pointer; }
.ans-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: #0a0e1acc; border: 1px solid var(--line); color: var(--text-faint);
  width: 26px; height: 26px; border-radius: 6px; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ans-x:hover { color: var(--down); border-color: #ff5f6d40; background: var(--down-soft); }
.calc-ans { position: relative; }
.rs-clear {
  margin-top: 14px; background: #0a0e1a; border: 1px solid var(--line-soft);
  color: var(--text-faint); font: 600 10.5px/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; padding: 9px 12px; border-radius: 6px;
}
.rs-clear:hover { color: var(--text); border-color: #2b3a5e; }

/* per-signal balance + per-target money */
.mny-k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mny-edit { display: inline-flex; align-items: center; gap: 4px; background: #080c16;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; text-transform: none; letter-spacing: 0; }
.mny-edit:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mny-edit i { font-style: normal; font: 600 11px var(--mono); color: var(--text-faint); }
.mny-edit em { font-style: normal; font: 500 10px var(--mono); color: var(--text-faint); margin-left: 3px; }
.mny-bal { width: 74px; background: none; border: 0; outline: none; color: var(--text);
  font: 620 12.5px/1 var(--mono); padding: 5px 0; text-align: right; }
.mny-bal::-webkit-outer-spin-button, .mny-bal::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mny-bal { -moz-appearance: textfield; }

.mny-steps { margin-top: 11px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.mny-step { display: grid; grid-template-columns: 44px 1fr 1fr 1fr; gap: 8px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mny-step:last-of-type { border-bottom: 0; }
.ms-n { font: 650 11px/1 var(--mono); color: var(--up); }
.ms-p { font: 500 11px/1 var(--mono); color: var(--text-faint); }
.ms-b, .ms-r { font: 620 12.5px/1.3 var(--mono); text-align: right; }
.ms-b { color: var(--up); }
.ms-r { color: var(--text); }
.ms-b i, .ms-r i { display: block; font-style: normal; font: 500 9px var(--mono); color: var(--text-faint); margin-top: 3px; }
.mny-note { font-size: 11px; color: var(--text-faint); line-height: 1.5; margin-top: 9px; }
@media (max-width: 460px) { .mny-step { grid-template-columns: 38px 1fr 1fr; } .ms-p { display: none; } }

/* three editable fields per signal */
.mny-pct, .mny-amt { width: 56px; background: none; border: 0; outline: none; color: var(--text);
  font: 620 12.5px/1 var(--mono); padding: 5px 0; text-align: right; }
.mny-amt { width: 72px; }
.mny-pct::-webkit-outer-spin-button, .mny-pct::-webkit-inner-spin-button,
.mny-amt::-webkit-outer-spin-button, .mny-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mny-pct, .mny-amt { -moz-appearance: textfield; }
.mny-own { font-style: normal; font: 600 9px var(--mono); letter-spacing: .08em; color: var(--accent);
  background: var(--accent-soft); border: 1px solid #6b8cff35; border-radius: 4px; padding: 3px 6px; }
.mny-reset { cursor: pointer; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); background: #0a0e1a; border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px 8px; }
.mny-reset:hover { color: var(--down); border-color: #ff5f6d40; }

/* ═══════════════════════════════════════════════════════════════════════
   iOS / iPhone
   Written against a 17 Pro Max (440 x 956 CSS px, Dynamic Island, home
   indicator), but everything here is generic safe-area work.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. NO ZOOM ON FOCUS. iOS Safari zooms the entire page when a focused input
      has a font-size under 16px, and then leaves you scrolled sideways. Several
      inputs here were 12.5-14px. This is the single most noticeable iPhone bug
      a site like this can ship, and it is purely a font-size rule. */
/*    Gated on (pointer: coarse) rather than an iOS-only @supports query. The
      @supports form only matched real Safari, which meant the rule could not be
      verified anywhere else and silently did nothing in testing — the inputs
      were still 12.5-14px when measured. Any touch device gets 16px now, which
      is both correct and checkable. */
@media (pointer: coarse), (max-width: 620px) {
  #cmd-input, #calc-in, #rs-q,
  .mny-bal, .mny-pct, .mny-amt,
  .acct-in input, .acct-in select,
  input[type="text"], input[type="number"], input[type="search"], select, textarea {
    font-size: 16px !important;
  }
  /* Keep the visual weight by trimming padding rather than type size. */
  .mny-bal, .mny-pct, .mny-amt { padding: 4px 0; }
  .mny-bal { width: 92px; } .mny-pct { width: 64px; } .mny-amt { width: 88px; }
  .mny-edit em { font-size: 9.5px; }
}

/* 2. SAFE AREAS. Without these the header sits under the Dynamic Island and
      the last row hides behind the home indicator. */
header.top { padding-top: env(safe-area-inset-top, 0px); }
.top-in, .tabs-in, .wrap {
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.copy-tip { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
.rs-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 3. Touch targets. 44px is the floor Apple specifies and it is the right one. */
@media (pointer: coarse) {
  .tab { min-height: 48px; padding: 15px 14px; }
  .cmd-go, .rs-btn, .ans-x, .mny-reset, .cmd-chip, .rs-chip { min-height: 44px; }
  .ans-x { width: 44px; height: 44px; }
  .lvl.copyable { min-height: 56px; }
  details.fold > summary, .hrow > summary { min-height: 44px; }
  .mny-edit { min-height: 44px; }
}

/* 4. iOS text and scroll behaviour. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }         /* no rubber-band under the header */
.rs-body, .tabs-in { -webkit-overflow-scrolling: touch; }

/* 5. Standalone (added to Home Screen): no browser chrome, so the header needs
      to carry the full top inset itself. */
@media (display-mode: standalone) {
  header.top { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* 6. The large iPhones are ~430-440px wide. The 620px breakpoint already
      stacks things, but these are the details that read as unfinished on a
      phone: numbers wrapping mid-figure, and cramped money rows. */
@media (max-width: 460px) {
  .mny-k { gap: 7px; }
  .mny-edit { padding: 2px 8px; }
  .mny-two { gap: 8px; }
  .mny-win b, .mny-lose b { font-size: 22px; }
  .lvl-v { font-size: 12.5px; }
  .voice-head { font-size: 17px; }
  .rec-i .v { font-size: 21px; }
  .lg-rate .v { font-size: 30px; }
  .calc-v { font-size: 26px; }
  .acct { grid-template-columns: 1fr 1fr; }
  .acct-r { grid-column: 1 / -1; }
  h2.sec { margin: 24px 0 10px; }
}

/* 7. Numbers must never break across lines — a price split in two is unreadable
      and, on a trading page, genuinely misleading. */
.lvl-v, .mny-win b, .mny-lose b, .ms-b, .ms-r, .rec-i .v, .tile-v, .h-r, .calc-v, .lg-rate .v {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* shorter cards: the detail folds away */
.mny-at { font-style: normal; font: 500 10px var(--mono); color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.mny-edits { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.mny-fold { border-top: 1px solid var(--line-soft); margin-top: 11px; padding-top: 10px; }
.why-fold { border-top: 0; padding-top: 6px; margin-top: 6px; }
.why-fold > summary { font-size: 9.5px; }
.c-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─────────────────────── signal chart ─────────────────────── */
.c-chart { cursor: pointer; transition: background .14s ease; }
.c-chart:hover { background: var(--ink-hover); }
.c-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-chart-i { align-self: center; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid #6b8cff30;
  border-radius: 4px; padding: 5px 6px; flex: 0 0 auto; }
.c-chart:hover .c-chart-i { background: #6b8cff28; }

.ch { position: fixed; inset: 0; z-index: 110; display: none; }
.ch.open { display: block; }
.ch-back { position: absolute; inset: 0; background: #04060cdd; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ch-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1000px, 96vw); height: min(680px, 88vh); display: flex; flex-direction: column;
  background: linear-gradient(165deg, #141b31, #0b1020 72%);
  border: 1px solid #28344f; border-radius: var(--r-lg);
  box-shadow: 0 2px 8px #0009, 0 40px 100px -24px #000e, inset 0 1px 0 #ffffff0c; overflow: hidden;
}
.ch-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ch-pair { font: 650 17px/1.2 var(--sans); letter-spacing: -.025em; }
.ch-sub { font: 500 11px/1.4 var(--mono); color: var(--text-faint); margin-top: 4px; }
.ch-zoom { margin-left: auto; display: flex; gap: 3px; }
.ch-z { cursor: pointer; font: 600 10.5px/1 var(--mono); color: var(--text-faint);
  background: #0a0e1a; border: 1px solid var(--line-soft); border-radius: 5px; padding: 8px 10px; }
.ch-z.on { color: var(--accent); background: var(--accent-soft); border-color: #6b8cff40; }
.ch-readout { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 16px; min-height: 34px;
  font: 500 11px/1.4 var(--mono); color: var(--text-dim); border-bottom: 1px solid var(--line-soft); }
.ch-readout b { color: var(--text); font-weight: 620; }
.ch-readout .up { color: var(--up); } .ch-readout .dn { color: var(--down); }
.ch-wrap { flex: 1; min-height: 0; padding: 6px 10px 2px; }
#chart-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); flex: 0 0 auto; }
.ch-lg { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); color: var(--text-dim); }
.ch-lg i { width: 11px; height: 3px; border-radius: 2px; }
.ch-lg b { color: var(--text); font-weight: 620; }

@media (max-width: 620px) {
  .ch-panel { width: 100vw; height: 100vh; border-radius: 0; top: 0; left: 0; transform: none;
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-top: env(safe-area-inset-top, 0px); }
  .ch-zoom { width: 100%; order: 3; margin-left: 0; }
  .ch-top { flex-wrap: wrap; }
  .ch-legend { gap: 8px; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   OLED / high-density displays

   On an OLED panel a true black pixel is switched OFF: deeper contrast and
   less power. The base was #070a12 — nearly black, but every one of those
   pixels was still lit. These rules only apply where the display can benefit,
   so an LCD keeps the slightly-lifted background that stops it looking flat.
   ═══════════════════════════════════════════════════════════════════════ */
@media (dynamic-range: high), (color-gamut: p3) {
  :root {
    --ink: #000000;
    --ink-raised: #080c15;
    --ink-card: #0b1018;
    --line: #1c2740;
    --line-soft: #141c2e;
    /* P3 gives real headroom on these, so they read as vivid rather than neon */
    --up: color(display-p3 0.18 0.85 0.54);
    --down: color(display-p3 1 0.36 0.42);
    --accent: color(display-p3 0.42 0.55 1);
    --warn: color(display-p3 1 0.72 0.24);
  }
  body { background-color: #000; }
  .card, .tile, .record, .voice, #cmd-form, .hrow { background: linear-gradient(160deg, #0e1420e0, #05080fe8); }
}

/* Crisp type and edges on high-density panels. */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .lg-bar span, .tab.on::after, .ch-lg i { transform: translateZ(0); }
}

/* ── responsiveness ──────────────────────────────────────────────────────
   Containment stops a change inside one card forcing layout of the whole
   page, which is what makes a long list feel heavy to scroll and tap. */
.card, .tile, .hrow, .trial-row, .lg-row { contain: layout style; }
.cards, .hist { content-visibility: auto; contain-intrinsic-size: auto 400px; }

/* Taps must register immediately rather than waiting out the 300ms
   double-tap-to-zoom delay that some mobile browsers still apply. */
a, button, summary, .lvl.copyable, .tab, .cmd-chip, .rs-chip, .c-chart { touch-action: manipulation; }

/* Give the compositor warning only where something actually animates, and
   only while it does — a permanent will-change wastes memory. */
.card:hover, .ch-panel, .rs-panel { will-change: transform; }

/* Honour the system setting. Someone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .card, .tile, .voice, .record { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ─────────────────── drag to rearrange ─────────────────── */
.seg { position: relative; }
.seg-grip {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab; color: var(--text-faint); font-size: 13px; line-height: 1;
  margin-right: 9px; padding: 4px 3px; border-radius: 4px;
  letter-spacing: -2px; user-select: none; -webkit-user-select: none;
  transition: color .14s ease, background .14s ease;
}
.seg-grip:hover { color: var(--accent); background: var(--accent-soft); }
.seg-grip:active { cursor: grabbing; }
h2.sec { cursor: grab; }
h2.sec:active { cursor: grabbing; }

.ro-dragging { cursor: grabbing; }
.ro-dragging * { user-select: none !important; -webkit-user-select: none !important; }
.ro-item-drag {
  opacity: .92;
  box-shadow: 0 2px 10px #0008, 0 30px 70px -18px #000e !important;
  transform: scale(1.012);
  border-radius: var(--r) !important;
  transition: none !important;
}
.ro-placeholder {
  border: 1px dashed #6b8cff55; border-radius: var(--r);
  background: var(--accent-soft); margin: 0 0 var(--gap);
}
.tabs-in .ro-placeholder { margin: 0; border-radius: 6px; }

/* the grip needs to be a real target on a phone */
@media (pointer: coarse) {
  .seg-grip { padding: 10px 8px; margin-right: 6px; font-size: 15px; }
}

/* ─────────────── our chart / TradingView ─────────────── */
.ch-modes { display: flex; align-items: center; gap: 4px; padding: 10px 16px 0; flex: 0 0 auto; }
.ch-mode {
  cursor: pointer; font: 620 11px/1 var(--sans); letter-spacing: -.01em;
  color: var(--text-faint); background: #0a0e1a; border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 10px 13px; transition: color .14s ease, background .14s ease;
}
.ch-mode:hover { color: var(--text-dim); }
.ch-mode.on { color: var(--accent); background: var(--accent-soft); border-color: #6b8cff40; }
.ch-ext {
  margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none; padding: 10px 11px;
  border: 1px solid var(--line-soft); border-radius: 7px; white-space: nowrap;
}
.ch-ext:hover { color: var(--accent); border-color: #6b8cff40; background: var(--accent-soft); }

#tv-host { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 0; }
.tv-wrap { flex: 1; min-height: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
#tv-widget { width: 100%; height: 100%; }
.tv-note { font-size: 11px; color: var(--text-faint); line-height: 1.55; padding: 10px 2px; flex: 0 0 auto; }
.tv-note b { color: var(--text-dim); }
.tv-fail { padding: 28px 20px; text-align: center; color: var(--text-dim); }
.tv-fail strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 9px; }
.tv-fail p { font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
.tv-fail a { color: var(--accent); }

@media (max-width: 620px) {
  .ch-modes { flex-wrap: wrap; padding: 10px 12px 0; }
  .ch-ext { margin-left: 0; width: 100%; text-align: center; }
}

/* the chart is a direct-manipulation surface */
#chart-canvas { cursor: crosshair; touch-action: none; }
#chart-canvas:active { cursor: grabbing; }
.ch-hint { font-size: 10.5px; color: var(--text-faint); padding: 0 16px 8px; line-height: 1.5; }
.meta-stale { color: var(--warn); font-weight: 650; }

/* hold-to-drag: the wait has to be visible, or it reads as unresponsive */
.seg.ro-holding, .tab.ro-holding { position: relative; }
.seg.ro-holding::after, .tab.ro-holding::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), #2fd98a);
  border-radius: 2px; pointer-events: none;
  animation: ro-fill var(--ro-hold, 2000ms) linear forwards;
}
@keyframes ro-fill { from { width: 0; } to { width: 100%; } }

.seg.ro-armed, .tab.ro-armed {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  .seg.ro-holding::after, .tab.ro-holding::after { animation: none; width: 100%; opacity: .4; }
}

/* ─────────── live position tracker ─────────── */
.trk { margin-top: 12px; padding: 12px 13px; border-radius: var(--r-sm);
  background: #080c16a0; border: 1px solid var(--line-soft); }
.trk-none { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.trk-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.trk-state { font: 650 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 5px; background: #0f1526; border: 1px solid var(--line); color: var(--text-dim); }
.trk-state.up { color: var(--up); background: var(--up-soft); border-color: #2fd98a35; }
.trk-state.dn { color: var(--down); background: var(--down-soft); border-color: #ff5f6d35; }
.trk-px { margin-left: auto; font: 620 14px/1 var(--mono); letter-spacing: -.02em; text-align: right; }
.trk-px i { display: block; font-style: normal; font: 500 9.5px var(--mono); color: var(--text-faint); margin-top: 4px; }

.trk-bar { position: relative; height: 8px; border-radius: 4px; background: #0a0e1a;
  border: 1px solid var(--line-soft); overflow: visible; }
.trk-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
  background: linear-gradient(90deg, #ff5f6d55, #6b8cff66 45%, #2fd98a88); }
.trk-mark { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 1px; transform: translateX(-1px); }
.trk-sl { background: var(--down); } .trk-t1, .trk-t2, .trk-t3 { background: #2fd98a99; }
.trk-now { position: absolute; top: -5px; width: 3px; height: 18px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 0 2px #070a12, 0 0 10px #eef2fb66; transform: translateX(-1.5px); }

.trk-foot { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 11px; }
.trk-foot b { color: var(--text); }
.trk-alert { color: var(--warn) !important; }
.trk-near { border-color: #ffb63d55; background: #1a150a90; }
.trk-near .trk-now { background: var(--warn); box-shadow: 0 0 0 2px #070a12, 0 0 14px #ffb63daa; }
@media (prefers-reduced-motion: no-preference) {
  .trk-near .trk-now { animation: trk-pulse 1.4s ease-in-out infinite; }
  @keyframes trk-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
}