/* Becoach Charts — tokens from the approved design ("Becoach Charts.dc.html").
   Dark mode is SELECTED, not an automatic flip. Light palette ships as approved
   (passed all six validator checks) and is untouched.

   Lightness-band fix (dark mode only), computed against the real surface #0B0E15:
   true OkLab L of the shipped dark steps: c1 .660 / c2 .713 / c3 .719 / c4 .669 / c5 .688.
   The flagged trio (c2, c3, c5) sat above the ~0.68 band top; hue and chroma preserved,
   gamut-fitted, darkened to L <= .671. Tritan separation floor unchanged (worst pair
   c1-c4, dE76 20.1 before and after). Contrast on the real surface: 5.9:1 - 8.1:1. */

:root {
  --bg: #0B0E15; --panel: #10141F; --card: #141A28; --card2: #101625;
  --tx: #EEF1F8; --tx2: #98A1B3; --tx3: #67718A;
  --line: #222B3D; --linesoft: #1A2233;
  --c1: #5E8DF6;
  --c2: #12AF7E;   /* was #2EBD8B — lightness-band fix */
  --c3: #DF733C;   /* was #F0824C — lightness-band fix */
  --c4: #9D7BF4;
  --c5: #DD65A2;   /* was #E36BA8 — lightness-band fix */
  --c1s: rgba(94,141,246,.13); --c2s: rgba(18,175,126,.13); --c3s: rgba(223,115,60,.13);
  --c4s: rgba(157,123,244,.13); --c5s: rgba(221,101,162,.13);
  --shadow: 0 8px 28px rgba(0,0,0,.32); --chip: #182032;
}
[data-lite="1"] {
  --bg: #F5F6FA; --panel: #FFFFFF; --card: #FFFFFF; --card2: #F0F3F9;
  --tx: #151A26; --tx2: #5A6375; --tx3: #8A92A4;
  --line: #E3E7F0; --linesoft: #EAEDF4;
  --c1: #2F66E8; --c2: #0E9D6E; --c3: #DE6526; --c4: #7B57E8; --c5: #C94A8C;
  --c1s: rgba(47,102,232,.09); --c2s: rgba(14,157,110,.10); --c3s: rgba(222,101,38,.10);
  --c4s: rgba(123,87,232,.10); --c5s: rgba(201,74,140,.10);
  --shadow: 0 8px 24px rgba(21,26,38,.07); --chip: #EDF0F8;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--tx);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  transition: background .25s, color .25s;
}
a { color: var(--c1); text-decoration: none; }
a:hover { color: #84A9F8; text-decoration: underline; }
input { font-family: inherit; }
input:focus { outline: none; border-color: var(--c1) !important; }
.mono { font-family: "IBM Plex Mono", monospace; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen { animation: rise .45s ease both; }

button { cursor: pointer; }
.navbtn {
  border: none; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; transition: all .15s;
  background: transparent; color: var(--tx2);
}
.navbtn.on { background: var(--c1s); color: var(--c1); }

.chip {
  border: 1px solid var(--line); background: transparent; color: var(--tx2);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; transition: all .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--c1); color: var(--c1); }
.chip.on { border-color: var(--c1); background: var(--c1s); color: var(--c1); }
.chip.ghost { color: var(--tx3); font-style: italic; cursor: default; }
.chip.ghost:hover { border-color: var(--line); color: var(--tx3); }

.seg { border: none; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; background: transparent; color: var(--tx2); white-space: nowrap; }
.seg.on { background: var(--card); color: var(--tx); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.card-hover { transition: transform .15s; }
.card-hover:hover { transform: translateY(-3px); }
.section-card-hover:hover { border-color: var(--c1); }

.hoverwrap { position: relative; }
.hoverwrap svg { width: 100%; display: block; }
.tip {
  position: absolute; top: 10px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; pointer-events: none; min-width: 200px;
  box-shadow: var(--shadow); z-index: 5;
}

/* direct labels: text wears text tokens; a small coloured tick carries identity */
.endlabel { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }

input[type="range"] { accent-color: var(--c1); }
input[type="text"], input[type="search"] { font-family: inherit; }

@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr !important; }
  .side250 { display: none; }
}