@import url("./onchain-card-shared.css");

:root {
  --profit: #2ea043;
  --loss: #e5534b;
  --reset: #f2cc60;
  --sopr: #58a6ff;
  --asopr: #f7931a;
  --sth: #d2a8ff;
  --lth: #3fb950;
}
html.light, body.light {
  --profit: #1a7f37;
  --loss: #cf222e;
  --reset: #9a6700;
  --sopr: #0969da;
  --asopr: #bc5c00;
  --sth: #8250df;
  --lth: #1a7f37;
}

.state { padding: 18px; margin-bottom: 12px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.state-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.state-kicker { color: var(--muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.state-value { font-size: 38px; line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; }
.state-mode { font-size: 15px; font-weight: 750; }
.state.profit .state-value, .state.profit .state-mode { color: var(--profit); }
.state.loss .state-value, .state.loss .state-mode { color: var(--loss); }
.state.reset .state-value, .state.reset .state-mode { color: var(--reset); }
.state-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.baseline { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 9px;
  margin-top: 14px; border-radius: 999px; overflow: visible;
  background: linear-gradient(90deg, var(--loss), var(--reset) 50%, var(--profit)); }
.baseline::after { content: "1"; position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%); color: var(--muted); font-size: 11px; }
.baseline-mark { position: absolute; top: -5px; width: 3px; height: 19px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 0 2px var(--panel); }
.baseline-mark.out { width: 10px; height: 10px; top: -1px; transform: rotate(45deg);
  background: var(--loss); }

.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { padding: 12px; }
.tile-label { font-weight: 700; text-transform: none; }
.tile-value { font-size: 22px; font-variant-numeric: tabular-nums; }
.tile-hint { font-size: 11px; line-height: 1.35; }
.tile.missing { border-style: dashed; }
.tile.missing .tile-value { font-size: 14px; color: var(--muted); }

.chart-box { padding: 12px 10px 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px;
  color: var(--muted); font-size: 12px; }
.legend-item { border: 0; padding: 2px 0; background: none; color: inherit;
  font: inherit; cursor: pointer; }
.legend-item.off { opacity: .35; text-decoration: line-through; }
.legend-item:focus-visible, [data-hit]:focus-visible { outline: 2px solid var(--sopr); outline-offset: 3px; }
.legend-item i { display: inline-block; width: 12px; height: 3px; margin-right: 5px;
  vertical-align: 3px; border-radius: 2px; }
.chart-host { position: relative; min-height: 320px; }
.baseline-line { stroke: var(--reset); stroke-width: 1.5; stroke-dasharray: 5 4; }
.baseline-label { fill: var(--reset); font-size: 11px; font-weight: 800; }
.clip-mark { fill: none; stroke-width: 1.4; }
.chart-tip { position: absolute; z-index: 3; top: 10px; min-width: 190px; padding: 9px 11px;
  pointer-events: none; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); box-shadow: var(--shadow); font-size: 12px; line-height: 1.5; }
.chart-tip[hidden] { display: none; }
.tip-row { display: flex; justify-content: space-between; gap: 16px; }
.tip-row span { color: var(--muted); }

.regime-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.regime { padding: 12px; border-radius: 10px; background: var(--panel-2); }
.regime b { display: block; margin-bottom: 5px; }
.regime p, #aboutHost p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.regime.profit b { color: var(--profit); }
.regime.loss b { color: var(--loss); }
.regime.reset b { color: var(--reset); }
#aboutHost { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
#aboutHost b { color: var(--text); }
.empty { min-height: 280px; }

.sopr-card .onchain-card-mode { font-size: 11px; }
.sopr-card .onchain-card-value { margin-top: 9px; font-size: 28px; }
.sopr-card .onchain-card-spark { min-height: 32px; margin-top: 6px; }

@media (max-width: 760px) {
  .wrap { padding-bottom: 20px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .regime-grid, #aboutHost { grid-template-columns: 1fr; }
  .chart-host { min-height: 260px; }
  .state-value { font-size: 30px; }
}