:root{
  --bg:#ffffff; --card:#ffffff; --ink:#0b1222; --ink-dim:#475569; --ink-strong:#0f172a; --ring:#334155;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.page{max-width:1200px;margin:0 auto;padding:24px}
.header h1{font-size:18px;margin:0 0 16px;color:var(--ink-strong)}

.card{
  background:var(--card); border:1px solid #e5e7eb; border-radius:12px;
  padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.02) inset, 0 8px 20px rgba(0,0,0,.06);
  margin-bottom:24px;
}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.title{font-weight:800;margin:0;color:var(--ink-strong)}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;
  background:#f1f5f9;color:#0b1222;font-size:12px;cursor:pointer;border:none;
  transition:opacity .18s ease, transform .12s ease, box-shadow .12s ease;
}
.badge:hover{opacity:.9;transform:translateY(-1px)}
.badge[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(2,6,23,.18) inset}

.chart{position:relative;width:100%;height:min(60vh, 420px);border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}

/* HTML legend styling (shows dash + shape) */
.html-legend {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.html-legend .legend-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px; background:#f1f5f9; color:#0b1222; font-size:12px;
  cursor:pointer; border:1px solid #e5e7eb;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.html-legend .legend-pill:hover{ transform: translateY(-1px); }
.html-legend .legend-pill.active{ box-shadow:0 0 0 2px rgba(2,6,23,.18) inset; }
.legend-swatch { width:44px; height:16px; display:inline-block; }
.legend-line { fill:none; stroke-width:2.6; }
.legend-marker { stroke:#111827; stroke-width:1.4; fill:#fff; }

/* Accessibly strong focus */
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}

/* Gray out non-selected legend pills */
.html-legend .legend-pill.muted { opacity: .35; }
/* Keep wheel/pinch/drag events on the canvas (don’t bubble to page scroll) */
.chart canvas { touch-action: none; overscroll-behavior: contain; }

/* Brand primary */
:root { --primary:#0055AA; }

/* Make Reset buttons solid primary with white text */



/* Selected legend pill: show a primary stroke/border */
.html-legend .legend-pill.active{
  border: 2px solid var(--primary);
  box-shadow: none;
}

/* (keeps earlier behavior) muted = gray */
.html-legend .legend-pill.muted{ opacity: .35; }

/* Brand primary */
:root { --primary: #0055AA; }

/* Legend "Reset graph" button — solid brand with white text */
.html-legend .legend-pill.reset{
  background: var(--primary);
  color: #fff;
  border: 1px solid #004080;
}
.html-legend .legend-pill.reset:hover{ filter: brightness(1.05); }
.html-legend .legend-pill.reset:focus-visible{
  outline: 3px solid #003a73;
  outline-offset: 3px;
}

/* Optional: ensure the tiny swatch, if any, stays visible on brand bg */
.html-legend .legend-pill.reset .legend-line{ stroke: #fff; }