/* ══════════════════════════════════════════════════════════════════
   This tool's own token names, mapped onto the dashboard's palette.
   The values live in qe-theme.css, lifted from the dashboard itself, so
   every surface renders identically and a palette change happens once.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --surface:var(--card); --sunken:var(--inner); --overlay:var(--panel);
  --fg:var(--t1); --fg-soft:var(--t2); --fg-mute:var(--t3); --fg-faint:var(--t4);
  --line-soft:var(--border2);
  --accent:var(--green); --accent-fg:#04130d; --accent-soft:color-mix(in srgb, var(--green) 14%, transparent);
  --ok:var(--green); --ok-soft:color-mix(in srgb, var(--green) 12%, transparent);
  --warn:var(--gold); --warn-soft:color-mix(in srgb, var(--gold) 12%, transparent);
  --bad:var(--red); --bad-soft:color-mix(in srgb, var(--red) 12%, transparent);
  --info:var(--blue); --info-soft:color-mix(in srgb, var(--blue) 12%, transparent);
  --radius:var(--r); --radius-sm:var(--r-sm);
  --fs-xs:11.5px; --fs-sm:13px; --fs-base:14.5px; --fs-lg:17px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:40px;
  --gap-lg:24px; --pad:18px; --ctrl-h:var(--ctrl);
}

*,*::before,*::after { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:400 var(--fs-base)/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.015em; }
h1 { font-size:var(--fs-2xl); }
h2 { font-size:var(--fs-xl); }
h3 { font-size:var(--fs-lg); }
p  { margin:0; }
a  { color:var(--accent); }
.num { font-variant-numeric: tabular-nums; font-family:var(--font-mono); }
.hide { display:none !important; }

/* ── layout ───────────────────────────────────────────────────────── */
.shell { max-width:1080px; margin:0 auto; padding:26px 20px 80px;
         display:flex; flex-direction:column; gap:var(--gap-lg); }
.topbar { display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap;
          padding-bottom:14px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:-.02em; font-size:var(--fs-lg); }
.brand span { color:var(--accent); }
.grow { flex:1; }
.eyebrow { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.12em;
           text-transform:uppercase; color:var(--fg-mute); }

.card { background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); }
.stack { display:flex; flex-direction:column; gap:var(--gap); }
.row   { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
         gap:var(--gap); }

/* ── controls ─────────────────────────────────────────────────────── */
label.fld { display:flex; flex-direction:column; gap:5px; font-size:var(--fs-sm);
            color:var(--fg-mute); min-width:0; }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea {
  width:100%; height:var(--ctrl-h); padding:0 10px;
  background:var(--sunken); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font:400 var(--fs-base)/1.4 var(--font-ui);
}
textarea { height:auto; min-height:96px; padding:9px 11px; resize:vertical; }
input:disabled,select:disabled { opacity:.45; cursor:not-allowed; }
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
button {
  height:var(--ctrl-h); padding:0 15px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--fg);
  font:600 var(--fs-base)/1 var(--font-ui); cursor:pointer;
}
button:hover:not(:disabled) { border-color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
button.ghost   { background:transparent; }
button.small   { height:28px; padding:0 10px; font-size:var(--fs-sm); }
/* a question's answer buttons (spec.question_choices): a stand-in rule is a sentence, so it wraps inside its button */
button.qChoice { height:auto; min-height:var(--ctrl-h); padding:8px 15px; line-height:1.3; text-align:left;
                 max-width:100%; overflow-wrap:anywhere; }

/* ── parameter rows: the tri-state "From strategy" pattern ────────── */
.param { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px;
         align-items:start; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.param:last-child { border-bottom:0; padding-bottom:0; }
.param-head { display:flex; align-items:center; gap:7px; }
.param-name { font-weight:600; font-size:var(--fs-base); }
.param-body { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.param.locked .param-body { opacity:.5; pointer-events:none; }
.param.off { opacity:.42; }
.param.off .param-body { pointer-events:none; }

.fromstrat { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm);
             color:var(--fg-mute); white-space:nowrap; cursor:pointer; }
.fromstrat.disabled { opacity:.4; cursor:not-allowed; }
.fromstrat input { width:14px; height:14px; accent-color:var(--accent); }

.info { width:16px; height:16px; border-radius:50%; flex:none; cursor:help;
        border:1px solid var(--line); background:var(--sunken);
        color:var(--fg-mute); font:600 10px/14px var(--font-ui); text-align:center;
        position:relative; }
.info:hover, .info:focus-visible { border-color:var(--accent); color:var(--accent); }
.info::after {
  content:attr(data-tip); position:absolute; left:0; top:22px; width:250px;
  background:var(--overlay); color:var(--fg-soft); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 11px; font:400 var(--fs-sm)/1.45 var(--font-ui);
  text-align:left; box-shadow:var(--shadow); z-index:40; display:none;
}
.info:hover::after, .info:focus-visible::after { display:block; }

.adv { border:0; padding:0; margin:8px 0 0; }
.adv summary { cursor:pointer; font-size:var(--fs-sm); color:var(--accent);
               list-style:none; }
.adv summary::-webkit-details-marker { display:none; }
.adv summary::before { content:"▸ "; }
.adv[open] summary::before { content:"▾ "; }
/* typed answers: one box per option, with how it was read underneath */
.typed input { width:100%; max-width:460px; }
.typed-fb { font-size:var(--fs-sm); min-height:18px; margin-top:3px; color:var(--fg-faint); }
.typed-fb.ok { color:var(--ok); }
.typed-fb.bad { color:var(--bad); }
.typed-fb.pending { color:var(--warn); }
.old-rules { background:var(--warn-soft, rgba(196,140,0,.14)); color:var(--warn, #9a6b00);
             padding:2px 7px; border-radius:3px; cursor:help; }
.how ul { margin:8px 0 0; padding-left:18px; display:grid; gap:4px;
          font-size:var(--fs-sm); line-height:1.45; }
.how b { font-weight:600; }
.adv-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
            gap:10px; padding:10px 0 2px; }

/* ── messages ─────────────────────────────────────────────────────── */
.msg { display:flex; gap:10px; padding:11px 13px; border-radius:var(--radius-sm);
       font-size:var(--fs-sm); line-height:1.5; border:1px solid; }
.msg .tag { font:500 var(--fs-xs)/1.5 var(--font-mono); letter-spacing:.08em;
            text-transform:uppercase; flex:none; }
.msg .fix { display:block; color:var(--fg-mute); margin-top:3px; }
.msg.block { background:var(--bad-soft);  border-color:var(--bad);  color:var(--bad); }
.msg.warn  { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.msg.info-m{ background:var(--info-soft); border-color:var(--info); color:var(--info); }
.msg.ok    { background:var(--ok-soft);   border-color:var(--ok);   color:var(--ok); }
.msg strong { color:inherit; }

/* ── stats + tables ───────────────────────────────────────────────── */
/* Separators are painted by each cell into the gap beside it. Letting a darker
   grid background show through leaves a slab of raw border colour wherever the
   last row does not fill its columns. */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
         gap:1px; background:var(--surface); border:1px solid var(--line);
         border-radius:var(--radius); overflow:hidden; }
.tile { background:var(--surface); padding:13px 15px; display:flex;
        flex-direction:column; gap:4px;
        box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); }
.tile .k { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.09em;
           text-transform:uppercase; color:var(--fg-mute); }
.tile .v { font:600 var(--fs-xl)/1.1 var(--font-mono); font-variant-numeric:tabular-nums; }
.tile .v.pos { color:var(--ok); } .tile .v.neg { color:var(--bad); }

.scroll { overflow-x:auto; border:1px solid var(--line);
          border-radius:var(--radius); background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:var(--fs-sm); }
th,td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-soft);
        white-space:nowrap; }
thead th { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.08em;
           text-transform:uppercase; color:var(--fg-mute); background:var(--sunken); }
tbody tr:last-child td { border-bottom:0; }
td.n { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
td.pos { color:var(--ok); } td.neg { color:var(--bad); }

/* ── progress ─────────────────────────────────────────────────────── */
.bar { height:6px; background:var(--sunken); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--accent); width:0;
           transition:width .4s ease; }
@media (prefers-reduced-motion:reduce) { .bar > i { transition:none; } }

/* ── history ──────────────────────────────────────────────────────── */
.hist { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
        gap:var(--gap); }
.hist .card { display:flex; flex-direction:column; gap:9px; }
.hist .files { display:flex; flex-wrap:wrap; gap:6px; }

@media (max-width:600px) {
  .shell { padding:18px 14px 60px; }
  .param { grid-template-columns:minmax(0,1fr); }
  /* phones: answer boxes fit the screen (they have a fixed desktop width) */
  .typed-ctl { display:block; max-width:100%; }
  .typed-ctl input, .param-body input, .param-body select { max-width:100%; }
  /* fingers, not a mouse: bigger tick boxes and buttons */
  .fromstrat { font-size:var(--fs-base); }
  .fromstrat input { width:20px; height:20px; }
  button.small { height:36px; }
  /* the "i" tips open on a tap and stay on the screen */
  .info::after { position:fixed; left:14px; right:14px; top:auto; bottom:18px; width:auto; }
  .info:focus::after { display:block; }
  /* a long trade list shows 20 rows until asked for the rest */
  #resTWrap.clip tbody tr:nth-child(n+21) { display:none; }
  #resTWrap.clip #resTMore { display:inline-flex; align-items:center; }
}
#resTMore { display:none; align-self:flex-start; }

/* ── prompt to algo: the checklist ─────────────────────────────────── */
.checklist h3 { margin:0; }
/* the algo laid out row by row; a highlighted row is an essential still to fill in */
.algo { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.algo-row { display:grid; grid-template-columns:170px minmax(0,1fr); gap:6px 14px; padding:9px 12px;
            border-top:1px solid var(--line); align-items:start; }
.algo-row:first-child { border-top:0; }
.algo-row .k { font:500 var(--fs-xs)/1.6 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
               color:var(--fg-mute); padding-top:2px; }
.algo-row .v { font-size:var(--fs-sm); min-width:0; display:flex; flex-direction:column; gap:4px; }
.algo-row .v input { width:100%; max-width:460px; }
.algo-row.need { background:var(--warn-soft); }
.algo-row.need .k { color:var(--warn); }
.algo-row .na { color:var(--fg-faint); font-style:italic; }
.algo .eyebrow.algo-more { padding:10px 12px 4px; border-top:1px solid var(--line); background:var(--sunken); }
/* the questions, as a short conversation; the algo in plain sentences */
.qa { display:flex; flex-direction:column; gap:8px; }
.qa .q, .qa .a { font-size:var(--fs-sm); line-height:1.5; padding:9px 12px; border-radius:12px; max-width:62ch; }
.qa .q { align-self:flex-start; background:var(--sunken); border:1px solid var(--line); border-bottom-left-radius:4px; }
.qa .a { align-self:flex-end; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
         border-bottom-right-radius:4px; }
.story { margin:0; font-size:var(--fs-base); line-height:1.6; padding:12px 14px; border-left:3px solid var(--accent);
         background:var(--sunken); border-radius:var(--radius-sm); }
.msg.tip { background:var(--sunken); border-color:var(--line); color:var(--fg); }
.msg.tip .tag { color:var(--info); }
@media (max-width:600px) { .algo-row { grid-template-columns:1fr; } }
.muted { color:var(--fg-mute); margin:0; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.fact { display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:var(--radius-sm);
        background:var(--sunken); border:1px solid var(--line); min-width:0; }
.fact .k { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
           color:var(--fg-mute); }
.fact .v { font-size:var(--fs-sm); color:var(--fg); overflow-wrap:anywhere; }
ul.rules { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
ul.rules li { font-size:var(--fs-sm); line-height:1.5; }
ul.rules li .badge { margin-left:8px; font:500 var(--fs-xs)/1.6 var(--font-mono); padding:1px 7px;
                     border-radius:999px; border:1px solid; white-space:nowrap; }
.badge.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.badge.no { color:var(--bad); border-color:var(--bad); background:var(--bad-soft); }
pre.code { max-height:260px; overflow:auto; background:var(--sunken); border:1px solid var(--line);
           border-radius:var(--radius-sm); padding:10px; font:400 var(--fs-sm)/1.5 var(--font-mono); }

/* ── paper runs (simulated) ─────────────────────────────────────────
   Same tokens as the rest of the tool. The SIMULATED chip is on every paper
   view; the equity line is one series in the accent colour, 2px, with a
   recessive baseline at the starting capital and a crosshair on hover. */
.chip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px;
        border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--sunken);
        font:500 var(--fs-sm)/1.4 var(--font-mono); color:var(--fg-soft); }
.chip .sim { color:var(--warn); letter-spacing:.1em; font-weight:600; }
.chip .tag { padding:1px 7px; border-radius:3px; background:var(--accent-soft); color:var(--accent);
             font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
        font:500 var(--fs-xs)/1.6 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
        color:var(--fg-mute); white-space:nowrap; }
.pill.run  { color:var(--ok);   border-color:color-mix(in srgb, var(--ok) 45%, transparent);   background:var(--ok-soft); }
.pill.wait { color:var(--info); border-color:color-mix(in srgb, var(--info) 45%, transparent); background:var(--info-soft); }
.pill.warn { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); background:var(--warn-soft); }
.pill.bad  { color:var(--bad);  border-color:var(--bad);  background:var(--bad-soft); }
.ptiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
          background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ptiles .tile .v { font-size:var(--fs-lg); }
.ptiles .tile .s { font-size:var(--fs-xs); color:var(--fg-mute); }
.eq { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:12px 14px 8px; }
.eq svg { display:block; width:100%; height:180px; overflow:visible; }
.eq .line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.eq .base { stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.eq .cross { stroke:var(--fg-mute); stroke-width:1; stroke-dasharray:2 3; }
.eq .dot { fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.eq .axis { font:400 var(--fs-xs)/1 var(--font-mono); fill:var(--fg-mute); }
.eq .tip { position:absolute; pointer-events:none; padding:6px 9px; border-radius:var(--radius-sm);
           background:var(--overlay); border:1px solid var(--line); box-shadow:var(--shadow);
           font:400 var(--fs-xs)/1.5 var(--font-mono); color:var(--fg); white-space:nowrap; display:none; }
.eq .empty { color:var(--fg-mute); font-size:var(--fs-sm); padding:28px 0; text-align:center; }
.paper-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.paper-form label.fld input, .paper-form label.fld select { width:100%; }
.paper-form .wide { grid-column:1 / -1; }
.fine { font-size:var(--fs-sm); color:var(--fg-mute); line-height:1.5; }
@media (max-width:480px) {
  .ptiles { grid-template-columns:repeat(2,1fr); }
  .chip { font-size:var(--fs-xs); }
}