/* Stock monitor — Control Room instrument.
 * Layers on top of wallie.css: it owns the tokens, nav, buttons, .dochead hero,
 * .reveal, .qa accordion, .term terminal, footer.site and .grid3/.card steps.
 * This file styles only the console (controls, budget meter, stock cards, ledger). */

.small{font-size:13px;line-height:1.55}

/* ===== console shell ===== */
.console{margin-top:34px;background:var(--panel);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden}
.console[aria-busy=true]{cursor:progress}
.console .bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--mut)}
.console .bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.console .bar .dot.g{background:var(--acc)}
.console .bar .sess{margin-left:auto;letter-spacing:.04em}
.console .body{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0}
@media(max-width:860px){.console .body{grid-template-columns:minmax(0,1fr)}}

/* ===== controls ===== */
.controls{padding:26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:22px;margin:0;border-width:0 1px 0 0;min-width:0}
.controls>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.controls{border-right:0;border-bottom:1px solid var(--line)}}
.grp label.h,.grp .h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  display:block;margin-bottom:10px;font-weight:600}
.budgetnum{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.budgetnum small{font-size:13px;color:var(--mut);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin-top:14px;
  background:linear-gradient(90deg,var(--acc) var(--pct,40%),var(--line2) var(--pct,40%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--panel);border:2px solid var(--acc);box-shadow:var(--shadow-sm);transition:transform .2s var(--bounce)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--panel);border:2px solid var(--acc)}
input[type=range]:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.hint{font-size:12px;color:var(--mut);line-height:1.5;margin:10px 0 0}

/* segmented source control */
.seg{display:inline-flex;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;position:relative;width:100%}
.seg button{flex:1;font-size:13px;font-weight:600;color:var(--mut);padding:8px 0;border-radius:99px;z-index:1;transition:color .25s var(--ease)}
.seg button[aria-pressed=true]{color:var(--ink)}
.seg .ind{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:99px;background:var(--panel);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.seg[data-on=live] .ind{transform:translateX(100%)}

/* watchlist chips (real checkboxes) */
.chips{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-inline-size:0}
.chips>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);cursor:pointer;transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);user-select:none}
.chip:hover{border-color:var(--line2);transform:translateX(2px)}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip .tick{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;
  font-size:12px;color:var(--acc-ink);transition:.3s var(--bounce);flex:none}
.chip:has(input:checked){border-color:color-mix(in srgb,var(--acc) 45%,var(--line));background:var(--soft)}
.chip:has(input:checked) .tick{background:var(--acc);border-color:var(--acc)}
.chip:has(input:checked) .tick::after{content:'\2713'}
.chip:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.chip .sym{font-family:var(--mono);font-weight:600;font-size:14px}
.chip .nm{color:var(--mut);font-size:12.5px;margin-left:auto}
.runbtn{justify-content:center;width:100%}

/* ===== stage ===== */
.stage{padding:26px 26px 30px;min-height:420px;min-width:0}
.statusline{font-family:var(--mono);font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:9px;
  margin:0 0 20px;flex-wrap:wrap}
.statusline .src{margin-left:auto;border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:11px;letter-spacing:.05em}
.form-error{color:var(--bad);font-size:13.5px;margin:0 0 16px;font-weight:600}

/* budget meter */
.meter{margin-bottom:22px}
.meter .rail{height:44px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;
  display:flex;position:relative}
.meter .spent{background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 70%,var(--acc2)));
  width:0;transition:width 1s var(--ease)}
.meter .ceilmark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--warn);opacity:.85}
.meter .ceilmark::after{content:'ceiling';position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--warn);white-space:nowrap}
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media(max-width:560px){.mstats{grid-template-columns:1fr 1fr}}
.mstat .n{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mstat .n.hold{color:var(--lock)}.mstat .n.rem{color:var(--acc)}
.mstat .c{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:5px}

/* stock cards */
.stockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
@media(max-width:720px){.stockgrid{grid-template-columns:1fr}}
.scard{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel);position:relative;overflow:hidden}
html.js .scard.anim{opacity:0;transform:translateY(14px);animation:cardin .6s var(--ease) forwards}
@keyframes cardin{to{opacity:1;transform:none}}
.scard .top{display:flex;align-items:baseline;gap:8px}
.scard .sym{font-family:var(--mono);font-weight:600;font-size:15px}
.scard .nm{font-size:11.5px;color:var(--mut);margin-left:auto}
.scard .price{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums}
.scard .ch{font-family:var(--mono);font-size:13px;font-weight:600;margin-top:2px}
.scard .ch.up{color:var(--ok)}.scard .ch.down{color:var(--bad)}.scard .ch.flat{color:var(--mut)}
.scard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:14px 0 0;font-size:12.5px}
.scard dt{color:var(--mut)}.scard dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.scard .alerts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
.pill.watch{color:var(--warn);background:color-mix(in srgb,var(--warn) 11%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pill.data{color:var(--mut);background:var(--panel2);border-color:var(--line)}
.pill.calm{color:var(--acc);background:var(--soft);border-color:color-mix(in srgb,var(--acc) 26%,transparent)}
.scard .srcpool{margin-top:12px;font-size:11.5px}
.scard .srcpool a{color:var(--acc2);text-decoration:underline;text-underline-offset:2px}
.scard .mintline{margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--mut);word-break:break-all}
.scard.empty{display:flex;align-items:center;color:var(--mut);font-size:13px}

/* ledger */
.ledgerwrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.ledgerwrap .lh{padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px}
.ledgerwrap .lh .cap{font-weight:400;color:var(--mut);font-size:11.5px;margin-left:auto}
.ledger-scroll{overflow-x:auto}
.ledgerwrap table{width:100%;border-collapse:collapse;font-size:13px}
.ledgerwrap caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ledgerwrap th{color:var(--mut);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:right;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:400}
.ledgerwrap th:first-child,.ledgerwrap th:nth-child(3){text-align:left}
.ledgerwrap td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--mut)}
.ledgerwrap td:first-child,.ledgerwrap td:nth-child(3){text-align:left}
.ledgerwrap td.sym{color:var(--ink)}
.ledgerwrap tbody tr:last-child td{border-bottom:0}
html.js .ledgerwrap tbody tr.anim{opacity:0;transform:translateY(6px);animation:rowin .4s var(--ease) forwards}
@keyframes rowin{to{opacity:1;transform:none}}
.ledgerwrap tbody tr.blocked td,.ledgerwrap tbody tr.unavailable td{background:color-mix(in srgb,var(--bad) 7%,transparent)}
.rtag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;display:inline-block;text-transform:capitalize}
.rtag.paid{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.rtag.blocked{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.rtag.unavailable{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.stopline{margin-top:16px;font-size:13.5px;color:var(--mut);display:flex;gap:10px;align-items:flex-start;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.stopline b{color:var(--ink)}
.stopline .mk{color:var(--acc)}

/* running state */
.console.running .runbtn{opacity:.7;pointer-events:none}
.console.running .spent{animation:pulsebar 1.1s var(--ease) infinite}
@keyframes pulsebar{0%,100%{opacity:1}50%{opacity:.5}}

@media(prefers-reduced-motion:reduce){
  html.js .scard.anim,html.js .ledgerwrap tbody tr.anim{opacity:1;transform:none;animation:none}
  .console.running .spent{animation:none}
  .meter .spent,.seg .ind{transition:none}
}