.ch-wrap { max-width:1280px; }
.ch-grid { margin-bottom:14px; }

.ch-chart-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 6px 8px; }
#ch-symbols select, #ch-tfs select { padding:6px 8px; min-width:0; width:auto; font-size:12px; cursor:pointer; }
#ch-symbols select { max-width:120px; }
#ch-tfs select { max-width:72px; }
.ch-otype { margin-bottom:12px !important; }
.ch-otype .tr-tf { padding:10px; text-align:center; font-size:13px; }
.ch-otype .tr-tf.on { background:var(--mint); border-color:var(--mint); color:#06170f; }
.ch-gauge { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:10px 0 14px; }
@media (max-width:820px){ .ch-gauge{ grid-template-columns:repeat(2,1fr);} }
.ch-metric { background:var(--ink-panel); border:1px solid var(--ink-line); border-radius:var(--radius-md); padding:12px 14px; }
.ch-metric-num { font-family:var(--font-mono); font-size:13px; margin-top:6px; color:var(--ink-text-soft); }
.tv-bar i.warn { background:var(--gold); }
.tv-bar i.warn[style*="width:0%"] { background:var(--mint); }

.ch-positions { margin-top:14px; }
.ch-positions h3 { margin:0 0 12px; font-family:var(--font-display); font-size:16px; }
.ch-pos { display:grid; grid-template-columns:1fr auto auto auto; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--ink-line); font-size:13.5px; }
.ch-pos:last-child { border-bottom:none; }
.ch-pos-num { color:var(--ink-text-soft); }
.ch-pos-num.mint { color:var(--mint); }
.ch-pos-num.ember { color:var(--ember); }
.ch-pos[data-toggle]:hover { background:var(--ink-panel-2); }
.ch-pos-detail { padding:2px 0 14px; }
.ch-pos-detail div { font-size:12.5px; }
/* .ch-pos-detail also carries .tr-facts (trainer.css: display:grid, unconditional) --
   an author rule always beats the browser's default [hidden]{display:none}, so without
   this the detail card would show right away and the toggle would do nothing (same bug
   class as the account-menu dropdown -- see docs/RULES.md). */
.ch-pos-detail[hidden] { display:none; }
.ch-pos-close { padding:6px 12px !important; font-size:12.5px !important; }
.ch-pos-reason { color:var(--ink-text-faint); font-size:12px; }
@media (max-width:600px){ .ch-pos{ grid-template-columns:1fr 1fr; row-gap:4px; } }