/* positions.php -- live chart per open position (same tokens as style.css) */
.nav-link { color: var(--text-muted); text-decoration: none; font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--hairline); padding: 3px 8px; border-radius: var(--radius); }
.nav-link:hover { color: var(--text-primary); border-color: var(--text-faint); }

.pos-list { display: flex; flex-direction: column; gap: 16px; }
.pos-empty { color: var(--text-muted); padding: 40px 16px; text-align: center; font-family: var(--font-mono); }

.pos-card { background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.pos-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 14px 8px; }
.pos-sym { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.pos-setup { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--hairline); padding: 1px 6px; border-radius: var(--radius); }
.pos-pl { font-family: var(--font-mono); font-size: 20px; font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.pos-pl.up { color: var(--green); } .pos-pl.down { color: var(--red); }

.pos-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1px;
  background: var(--hairline-soft); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.pos-stat { background: var(--bg-panel); padding: 7px 12px; }
.pos-stat-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.pos-stat-value { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }

.pos-chart { width: 100%; height: 360px; }
@media (max-width: 640px) { .pos-chart { height: 300px; } .pos-sym { font-size: 20px; } .pos-pl { font-size: 18px; } }

.pos-status { padding: 8px 14px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 3px; }
.pos-status b { color: var(--text-primary); font-weight: 600; }
.pos-status .warn { color: var(--amber); }

.pos-legend { margin-top: 18px; color: var(--text-muted); font-size: 13px; }
.pos-legend summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; }
.pos-legend ul { list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 4px; }
.sw { display: inline-block; width: 18px; height: 0; border-top: 2px solid; margin-right: 8px; vertical-align: middle; }
.sw-entry { border-color: #5B8DEF; } .sw-stop { border-color: #F0555A; } .sw-target { border-color: #34C77B; border-top-style: dashed; }
.sw-vwap { border-color: #B57CF0; } .sw-tick { border-color: #E8EAF0; } .sw-gb { border-color: #E0A93A; }
.sw-ceil { border-color: #D66BD0; border-top-style: dashed; } .sw-open { border-color: #7C8394; border-top-style: dotted; }
.sw-level { border-color: #4A5063; border-top-style: dotted; }
.sw-five { border-color: #3FA7B5; border-top-style: dashed; }