.admin.board { max-width: 1560px; }
.board .boardbar .row { align-items: end; }
.board .spacer { flex: 1; }
.board .note.ok { color: var(--pos); border-color: var(--pos); background: color-mix(in srgb, var(--pos) 9%, var(--surface)); }
.board .groups { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.board .group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.board .group .sel, .board .whead .sel { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.board .group select, .board .whead select { display: inline-block; margin: 0; padding: 3px 6px; font-size: 12px; }

.board-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 12px; }
.board-grid[hidden] { display: none; }
.widget {
  grid-column: calc(var(--x) + 1) / span var(--w);
  grid-row: calc(var(--y) + 1) / span var(--h);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow);
  padding: 10px 14px 12px;
}
.widget { position: relative; }
.widget.editing { outline: 1px dashed var(--accent); outline-offset: -3px; }
.widget.dragging { z-index: 5; opacity: 0.85; outline: 2px solid var(--accent); }
.whead h2.drag { cursor: move; touch-action: none; user-select: none; }
.widget .resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-radius: 0 0 4px 0; }
.whead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.whead h2 { font-size: 14px; font-weight: 650; margin: 0; flex: 1 1 auto; min-width: 120px; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tools .tool { min-width: 28px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.tools .tool:focus-visible, .tools select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tools select { padding: 2px 4px; font-size: 12px; }
.wbody { flex: 1 1 0; min-height: 0; overflow: auto; }
.wbody .wchart { display: block; width: 100%; }
.wbody .legend { font-size: 12px; margin: 6px 0 0; max-height: 2.9em; overflow: hidden; } /* two lines; the whole text opens when the pointer is over it */
.wbody .legend:hover { max-height: none; }
.wbody .kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wbody .kpi { box-shadow: none; padding: 8px 12px; }
.wbody .kpi .value { font-size: 20px; margin-top: 1px; }
.wbody .kpi .label { font-size: 10.5px; }
.wbody .kpi .note { font-size: 11.5px; line-height: 1.3; }
.wbody h3 { font-size: 13px; margin: 0; }
.wbody .lead { margin: 0 0 6px; }
.wbody .chips { margin: 6px 0; }
.wbody .chips .small { margin: 0 4px 4px 0; }
.wbody table { margin-bottom: 8px; }
.wbody .card-head { margin: 8px 0 4px; }
.wbody .figures { margin-bottom: 8px; }
.wbody .alerts { max-height: none; }
.slide { display: inline-flex; align-items: center; gap: 4px; }
.slide input[type="range"] { width: 120px; margin: 0; padding: 0; }
.slide-value { font-variant-numeric: tabular-nums; min-width: 3.2em; }
.whead input[type="date"] { display: inline-block; margin: 0; padding: 3px 6px; font-size: 12px; }
.wbody tr.pick { cursor: pointer; }
.wbody tr.pick:hover, .wbody tr.picked { background: color-mix(in srgb, var(--accent) 12%, transparent); }
table.chain { font-size: 12px; font-variant-numeric: tabular-nums; }
table.chain th, table.chain td { padding: 3px 6px; text-align: right; white-space: nowrap; }
table.chain td.strike, table.chain th.strike { text-align: center; }
table.chain td.itm { background: color-mix(in srgb, var(--accent) 9%, transparent); }
table.chain tr.pick { cursor: pointer; }
table.chain tr.pick:hover td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
table.chain tr.atm td.strike { outline: 2px solid var(--spot, var(--accent)); outline-offset: -2px; }
table.chain tr.picked td { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.news-item { padding-left: 8px; border-left: 3px solid var(--line); }
.news-item.tier-3 { border-left-color: var(--neg-bar); }
.news-item.tier-2 { border-left-color: var(--accent); }
.news-item .imp { display: inline-block; min-width: 16px; text-align: center; padding: 0 4px; border-radius: 8px; font-weight: 700; font-size: 11px; background: var(--line); color: var(--text); }
.news-item .imp-3 { background: var(--neg-bar); color: var(--on-accent); }
.news-item .imp-2 { background: var(--accent); color: var(--on-accent); }
.banner { margin: 0 0 6px; padding: 5px 9px; border: 1px solid var(--warn); border-radius: 6px; color: var(--warn); font-size: 12px; }
.keys { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 6px 0 0; font-size: 12px; }
.keys li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; background: var(--key, currentColor); }
.keys .k-lc { --key: var(--pos-bar); }
.keys .k-lp { --key: var(--spot); }
.keys .k-sc { --key: var(--warn); }
.keys .k-sp { --key: var(--neg-bar); }
.notes summary { cursor: pointer; font-weight: 600; }
.notes ul { margin: 8px 0 0; padding-left: 18px; }
.notes li { margin: 6px 0; }
.tip { position: fixed; }

svg .picked { fill: var(--accent); opacity: 0.16; }
svg .picked-outline { fill: none; stroke: var(--text); stroke-width: 1.5; pointer-events: none; }
svg .cell { stroke: none; }
svg .p-lc { fill: var(--pos-bar); }
svg .p-lp { fill: var(--spot); }
svg .p-sc { fill: var(--warn); }
svg .p-sp { fill: var(--neg-bar); }
svg.wchart { cursor: crosshair; }

@media (max-width: 760px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .widget { grid-column: 1; grid-row: auto; min-height: 340px; }
}
.tools select { display: inline-block; margin: 0; }
.wbody th, .wbody td { text-align: right; }
.wbody th:first-child, .wbody td:first-child { text-align: left; }
.wbody .kpi .note { border: 0; padding: 0; background: none; color: var(--muted); }
svg .trace { fill: none; stroke-width: 1.6; }
svg .trace.bar-call { stroke: var(--pos-bar); }
svg .trace.bar-put { stroke: var(--neg-bar); }
svg .trace.lv-spot { stroke: var(--text); stroke-width: 2; }
svg .trace.lv-flip { stroke: var(--flip); stroke-dasharray: 5 4; }
svg .trace.lv-call { stroke: var(--neg-bar); stroke-dasharray: 2 4; }
svg .trace.lv-put { stroke: var(--pos-bar); stroke-dasharray: 2 4; }
svg .trace.avg-fast { stroke: var(--accent); }
svg .trace.avg-slow { stroke: var(--warn); }
svg .candle-wick { stroke-width: 1; }
svg .candle.up, svg .candle-wick.up { fill: var(--pos-bar); stroke: var(--pos-bar); }
svg .candle.down, svg .candle-wick.down { fill: var(--neg-bar); stroke: var(--neg-bar); }
.keys .k-avg-fast::before { height: 0; border-top: 2px solid var(--accent); }
.keys .k-avg-slow::before { height: 0; border-top: 2px solid var(--warn); }
svg .trace.lv-gex { stroke: var(--muted); stroke-dasharray: 1 3; }
svg .trace.ec-est { stroke: var(--accent); stroke-width: 2; }
svg .trace.ec-pain { stroke: var(--warn); stroke-dasharray: 4 4; }
svg .ec-band { fill: var(--accent); opacity: 0.12; stroke: none; }
svg .ec-dot { fill: var(--accent); }
svg .trace.ec-cal { stroke: var(--pos); stroke-width: 2; stroke-dasharray: 6 3; }
.keys .k-ec-cal::before { height: 0; border-top: 2px dashed var(--pos); }
svg .ec-close { fill: var(--text); }
.keys .k-ec-est { --key: var(--accent); }
.keys .k-ec-band::before { opacity: 0.3; background: var(--accent); }
.keys .k-ec-pain { --key: var(--warn); }
.ec-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 4px; }
.ec-facts .kpi { display: flex; flex-direction: column; }
.ec-facts .kpi .k { font-size: 12px; color: var(--muted); }
.ec-facts .kpi b { font-size: 18px; }
.ec-facts .kpi .note { font-size: 12px; color: var(--muted); }
.keys .k-spot { --key: var(--text); }
.keys .k-flip { --key: var(--flip); }
.keys .k-call { --key: var(--neg-bar); }
.keys .k-put { --key: var(--pos-bar); }
.keys .k-gex { --key: var(--muted); }
svg .trace.net-line { stroke: var(--text); stroke-width: 2; }

/* The minute chart with the extended hours (docs/backfill.md): a faint band behind each session outside the regular one, its name in the corner, and fainter candles there */
svg .band { stroke: none; pointer-events: none; }
svg .band-pre { fill: color-mix(in srgb, var(--warn) 11%, transparent); }
svg .band-post { fill: color-mix(in srgb, var(--accent) 11%, transparent); }
svg .band-overnight { fill: color-mix(in srgb, var(--muted) 18%, transparent); }
svg .band-label { fill: var(--muted); font-size: 10px; pointer-events: none; }
svg .candle.ext, svg .candle-wick.ext { opacity: 0.6; }

/* Zoomable charts (docs/board.md): the day's implied move, the heatmap's column names that stay while it scrolls, and the reset button */
svg .m-move { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 4; pointer-events: none; }
.wbody .heat-head { position: sticky; top: 0; z-index: 1; height: 22px; background: var(--surface); cursor: default; }
.wbody .reset-zoom { margin: 6px 0 0; }