/* WattsOptimal (a Power of Light project)
   Skins: console (cassette futurism) · poster (roadtrip) · trail (topo) · neon (synthwave)
   Each skin defines the same variable set; components below only read variables. */

/* ---------- CLASSIC (default fallback) ---------- */
:root {
  --amber: #0070c0; --amber-dark: #005a9c;
  --ink: #1a1d24; --paper: #f7f9fc; --card: #ffffff;
  --line: #dfe5ee; --muted: #6b7280; --accent-red: #ff0000;
  --header-bg: #0070c0; --header-ink: #ffffff; --header-sub: rgba(255,255,255,.85);
  --header-border: #ff0000; --pill-bg: #ffffff; --pill-ink: #0070c0;
  --chart-bg: #ffffff; --chart-ink: var(--ink); --chart-line: var(--line); --chart-muted: var(--muted);
  --trace-main: #0070c0; --trace-alt: #005a9c;
  --surf-lo: #0070c0; --surf-mid: #eaf2fa; --surf-hi: #ff0000;
  --font-head: system-ui, sans-serif; --font-label: system-ui, sans-serif;
  --label-case: none; --card-border-w: 0.5px; --chart-border: var(--line);
}
html[data-theme="dark"] {
  --amber: #2f95e8; --amber-dark: #66b3ff;
  --ink: #e8eaf0; --paper: #0f1115; --card: #1a1d24;
  --line: #303645; --muted: #98a0ad; --accent-red: #ff4d4d;
  --header-bg: #0f2f4d; --header-ink: #ffffff; --header-sub: rgba(255,255,255,.8);
  --chart-bg: #1a1d24; --chart-ink: var(--ink); --chart-line: var(--line); --chart-muted: var(--muted);
}

/* ---------- CONSOLE — cassette futurism ---------- */
html[data-skin="console"] {
  --btn-ink: var(--paper);
  --amber: #b85c1e; --amber-dark: #8a4517;
  --ink: #2a2620; --paper: #ede3cc; --card: #f2ead8;
  --line: #cbbf9f; --muted: #8a7f68; --accent-red: #e33d2e;
  --header-bg: #e9dfc8; --header-ink: #2a2620; --header-sub: #8a7f68;
  --header-border: #c8b989; --pill-bg: #2a2620; --pill-ink: #f2ead8;
  --chart-bg: #14120d; --chart-ink: #e8d9b0; --chart-line: #3a3222; --chart-muted: #8c7b55;
  --trace-main: #ffb000; --trace-alt: #2a9d8f;
  --surf-lo: #2a9d8f; --surf-mid: #ffb000; --surf-hi: #e33d2e;
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", monospace;
  --label-case: uppercase; --card-border-w: 1px; --chart-border: #cbbf9f;
}
html[data-skin="console"][data-theme="dark"] {
  --amber: #f5c86b; --amber-dark: #ffb000;
  --ink: #e8d9b0; --paper: #12100c; --card: #1e1a13;
  --line: #3a3222; --muted: #8c7b55; --accent-red: #ff6b5e;
  --header-bg: #191611; --header-ink: #f5c86b; --header-sub: #8c7b55;
  --header-border: #7a4a1e; --pill-bg: #f5c86b; --pill-ink: #191611;
  --chart-bg: #0b0a07; --chart-ink: #e8d9b0; --chart-line: #3a3222; --chart-muted: #8c7b55;
  --chart-border: #3a3222;
}
html[data-skin="console"] select, html[data-skin="console"] input[type=number] {
  background: var(--card); color: var(--ink); border-color: var(--line);
  font-family: var(--font-label); }

/* ---------- POSTER — roadtrip print ---------- */
html[data-skin="poster"] {
  --btn-ink: var(--paper);
  --amber: #0070c0; --amber-dark: #12283c;
  --ink: #12283c; --paper: #fff8ec; --card: #ffffff;
  --line: #12283c; --muted: #6e7b87; --accent-red: #e02020;
  --header-bg: #0070c0; --header-ink: #fff8ec; --header-sub: #bfe0f8;
  --header-border: #12283c; --pill-bg: #fff8ec; --pill-ink: #0070c0;
  --chart-bg: #ffffff; --chart-ink: #12283c; --chart-line: #d8dfe6; --chart-muted: #6e7b87;
  --trace-main: #0070c0; --trace-alt: #12283c;
  --surf-lo: #0070c0; --surf-mid: #fff3d9; --surf-hi: #e02020;
  --font-head: "Jost", system-ui, sans-serif; --font-label: "Jost", system-ui, sans-serif;
  --label-case: none; --card-border-w: 1.5px; --chart-border: #12283c;
}
html[data-skin="poster"][data-theme="dark"] {
  --amber: #4d9fe0; --amber-dark: #8fc3ee;
  --ink: #f2e9d8; --paper: #0f1b29; --card: #16273a;
  --line: #2c4258; --muted: #8fa1b3; --accent-red: #ff5a4d;
  --header-bg: #16273a; --header-ink: #f2e9d8; --header-sub: #8fa1b3;
  --header-border: #ff5a4d; --pill-bg: #f2e9d8; --pill-ink: #16273a;
  --chart-bg: #16273a; --chart-ink: #f2e9d8; --chart-line: #2c4258; --chart-muted: #8fa1b3;
  --trace-main: #4d9fe0; --trace-alt: #ffc46b;
  --chart-border: #2c4258;
}
html[data-skin="poster"] select, html[data-skin="poster"] input[type=number] {
  background: var(--card); color: var(--ink); border-color: var(--line); }


/* ---------- TRAIL — topo map expedition ---------- */
html[data-skin="trail"] {
  --btn-ink: var(--paper);
  --amber: #d9541e; --amber-dark: #9c3b12;
  --ink: #2f3a2c; --paper: #f1eddc; --card: #faf7ea;
  --line: #cdc6a5; --muted: #7c8271; --accent-red: #c42d1c;
  --header-bg: #3e5c42; --header-ink: #f5f0dc; --header-sub: #c2cda8;
  --header-border: #d9541e; --pill-bg: #f5f0dc; --pill-ink: #3e5c42;
  --chart-bg: #f7f3e2; --chart-ink: #2f3a2c; --chart-line: #d8d1b0; --chart-muted: #8b9078;
  --trace-main: #3e7ca6; --trace-alt: #a67b5b;
  --surf-lo: #5f8757; --surf-mid: #e5d9a0; --surf-hi: #a14e22;
  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", monospace;
  --label-case: uppercase; --card-border-w: 1px; --chart-border: #a67b5b;
}
html[data-skin="trail"][data-theme="dark"] {
  --amber: #e89b4b; --amber-dark: #f2b369;
  --ink: #ddd6b8; --paper: #14180f; --card: #1d2416;
  --line: #39412c; --muted: #909678; --accent-red: #ff6b4a;
  --header-bg: #1a2415; --header-ink: #ddd6b8; --header-sub: #909678;
  --header-border: #d9541e; --pill-bg: #ddd6b8; --pill-ink: #1a2415;
  --chart-bg: #10140c; --chart-ink: #ddd6b8; --chart-line: #39412c; --chart-muted: #909678;
  --trace-main: #6fa8cc; --trace-alt: #c99b6e;
  --chart-border: #39412c;
}
html[data-skin="trail"] select, html[data-skin="trail"] input[type=number] {
  background: var(--card); color: var(--ink); border-color: var(--line); }


/* ---------- NEON — synthwave grid ---------- */
html[data-skin="neon"] {
  --btn-ink: #ffffff;
  --amber: #7a1fd0; --amber-dark: #5c14a5;
  --ink: #241b3a; --paper: #f3f0fa; --card: #ffffff;
  --line: #d9d0ee; --muted: #7b7494; --accent-red: #e6007a;
  --header-bg: #1b1033; --header-ink: #6ef2ff; --header-sub: #b8a8e8;
  --header-border: #ff2fd6; --pill-bg: #ffffff; --pill-ink: #1b1033;
  --chart-bg: #120b22; --chart-ink: #e6dcff; --chart-line: #2e2350; --chart-muted: #8d80b8;
  --trace-main: #00e5ff; --trace-alt: #b14aed;
  --surf-lo: #00e5ff; --surf-mid: #8a2be2; --surf-hi: #ff2fd6;
  --font-head: "Orbitron", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", monospace;
  --label-case: uppercase; --card-border-w: 1px; --chart-border: #b14aed;
}
html[data-skin="neon"][data-theme="dark"] {
  --btn-ink: #061018;
  --amber: #00e5ff; --amber-dark: #6ef2ff;
  --ink: #e6dcff; --paper: #0a0714; --card: #140e26;
  --line: #2e2350; --muted: #8d80b8; --accent-red: #ff2fd6;
  --header-bg: #0d0920; --header-ink: #6ef2ff; --header-sub: #8d80b8;
  --header-border: #ff2fd6; --pill-bg: #ffffff; --pill-ink: #1b1033;
  --chart-bg: #0a0716; --chart-ink: #e6dcff; --chart-line: #251c40; --chart-muted: #8d80b8;
  --chart-border: #ff2fd6;
}
html[data-skin="neon"] select, html[data-skin="neon"] input[type=number] {
  background: var(--card); color: var(--ink); border-color: var(--line);
  font-family: var(--font-label); }
html[data-skin="neon"] .card { box-shadow: 0 0 14px rgba(122,31,208,.22); }
html[data-skin="neon"][data-theme="dark"] .card {
  box-shadow: 0 0 18px rgba(255,47,214,.18), 0 0 5px rgba(0,229,255,.25); }
html[data-skin="neon"] h1 { text-shadow: 0 0 12px rgba(0,229,255,.75); }
html[data-skin="neon"] .statgroup .gt { text-shadow: 0 0 8px rgba(122,31,208,.5); }
html[data-skin="neon"][data-theme="dark"] .stat .v { text-shadow: 0 0 9px rgba(0,229,255,.45); }
html[data-skin="neon"][data-theme="dark"] button { box-shadow: 0 0 10px rgba(0,229,255,.5); }
html[data-skin="neon"] button.ghost { box-shadow: none !important; }

html[data-theme="dark"] select, html[data-theme="dark"] input[type=number] {
  background: var(--card); color: var(--ink); border-color: var(--line);
}

/* ---------- components (skin-agnostic, variable-driven) ---------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
       color: var(--ink); background: var(--paper); }

header { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px; border-bottom: 4px solid var(--header-border);
  background: var(--header-bg); color: var(--header-ink); }
.brand { display: flex; gap: 14px; align-items: center; }
a.brand, a.brand:hover { color: inherit; text-decoration: none; }
.sun { width: 48px; height: 48px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
h1 { margin: 0; font-size: 22px; letter-spacing: 2px; color: var(--header-ink);
  font-weight: 800; font-family: var(--font-head); }
h1 .appname { font-weight: 500; opacity: .85; letter-spacing: 1px; }
.sub { margin: 2px 0 0; font-size: 13px; color: var(--header-sub);
  font-family: var(--font-label); }
nav { display: flex; align-items: center; gap: 16px; }
nav a { color: var(--header-ink); text-decoration: none; font-weight: 700; }
nav a.yt { display: flex; align-items: center; gap: 6px; background: #fff;
  color: #212121; padding: 6px 14px; border-radius: 18px; font-weight: 600;
  font-family: system-ui, sans-serif; }
nav a.support { background: transparent; color: var(--header-ink);
  border: 1px solid var(--header-ink); padding: 5px 12px; border-radius: 18px;
  font-weight: 600; font-size: 14px; }
nav a.support:hover { background: rgba(255,255,255,.12); }

.themeBtn, .skinSel { margin-right: 0; font-size: 14px; padding: 5px 10px;
  background: transparent; color: var(--header-ink);
  border: 1px solid var(--header-ink); border-radius: 6px; }
.skinSel { font-family: var(--font-label); }

main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.card { background: var(--card); border: var(--card-border-w) solid var(--line);
  border-radius: 10px; padding: 16px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04); }

.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
select, input[type=number] { padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 14px; background: #fff; }
#vehicleSel { min-width: 300px; font-weight: 600; }
button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--amber); color: var(--paper); font-weight: 600; font-size: 14px; }
button { color: var(--btn-ink, #fff); }
button.ghost { background: transparent !important; color: var(--amber-dark) !important;
  border: 1px solid var(--amber); }
button.ghost { background: transparent; color: var(--amber-dark);
  border: 1px solid var(--amber); }
button:hover { filter: brightness(1.06); }

#customPanel, #condPanel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
#customPanel h3, #condPanel h3 { margin: 0 0 10px; font-size: 15px; font-family: var(--font-head); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 10px; margin-bottom: 10px; }
.grid label { display: flex; flex-direction: column; font-size: 13px;
  color: var(--muted); gap: 3px; font-family: var(--font-label); }
.grid input, .grid select { width: 100%; }
details summary { cursor: pointer; color: var(--amber-dark); font-weight: 600;
  margin: 8px 0; }
.hidden { display: none; }

/* controls stay pinned once the header scrolls away; page scrolls underneath.
   Desktop only: on phones the stacked card is too tall to pin. */
@media (min-width: 761px) {
  .controls { position: sticky; top: 0; z-index: 1002; }
  .controls.stuck { box-shadow: 0 6px 18px rgba(0,0,0,.18); border-top-left-radius: 0; border-top-right-radius: 0; }
  /* Customize / Trip conditions can make the card taller than a 720px-high laptop screen;
     pinned, it would cover the page. Open panel = park the card and let the page scroll. */
  .controls.panelOpen { position: static; }
}

.sliders { margin-top: 12px; font-size: 14px; display: grid; gap: 8px 22px;
  grid-template-columns: 1fr; }  /* stacked: arrive, stop, driving speed, charger detour (DOM order) */
@media (min-width: 990px) {      /* two-up: left = arrive + stop, right = detour + driving speed */
  .sliders { grid-template-columns: 1fr 1fr; }
  .sliders .s-arrive { order: 1; }
  .sliders .s-detour { order: 2; }
  .sliders .s-stop   { order: 3; }
  .sliders .s-drive  { order: 4; }
}
/* identical internal columns per slider, so wrapped/stacked rows line up */
.sliders .srow { display: grid; grid-template-columns: 222px 1fr 64px 46px; align-items: center; gap: 8px; }
.sliders .sunit { white-space: nowrap; }
.stopBestBtn { font-size: 12px; font-weight: 600; padding: 2px 9px; margin-left: 6px; border-radius: 10px;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.stopBestBtn[hidden] { display: none; }
.whyLink { font-size: 12px; font-weight: 600; margin-left: 6px; color: inherit; opacity: .7; text-decoration: underline dotted; }
.whyLink:hover { opacity: 1; }
.approach { font-size: 13px; color: var(--muted); font-style: italic; }
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0; font-style: italic; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 18px; }
.stats .statgroup { padding: 14px 18px 16px; }
.stats .gcells { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.stat .v { white-space: nowrap; }
#stats3:not(:empty) { margin-bottom: 18px; }
#stats2 { margin-bottom: 18px; }
.statgroup { background: var(--card); border: var(--card-border-w) solid var(--line);
  border-radius: 10px; padding: 10px 12px 12px; }
.statgroup .gt { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--amber-dark); margin-bottom: 8px;
  font-family: var(--font-label); }
.statgroup .gcells { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat { border-left: 3px solid var(--amber); padding: 2px 0 2px 10px; }
/* time-per-cycle strip: segments color-keyed to the cells beneath them */
.cycbar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin: 2px 0 12px; }
.cycbar .seg { min-width: 4px; }
.cycbar .segDrive { background: var(--trace-main); }
.cycbar .segDetour { background: var(--muted); }
.cycbar .segCharge { background: var(--accent-red); }
.stat.bDrive { border-left-color: var(--trace-main); }
.stat.bDetour { border-left-color: var(--muted); }
.stat.bCharge { border-left-color: var(--accent-red); }
.stat .v { font-size: 20px; font-weight: 700; font-family: var(--font-label); }
.stat .l { font-size: 13px; color: var(--muted); margin-top: 2px;
  font-family: var(--font-label); text-transform: var(--label-case); }
.numIn { width: 64px; padding: 4px 6px; }
.densityBox { border: 1px dashed var(--line); border-radius: 8px; margin: 10px 0; padding: 8px 12px 12px; }
.densityBox legend { font-size: 12px; color: var(--muted); padding: 0 6px; text-transform: var(--label-case); }
#condLbl { color: var(--accent-red); font-weight: 600; }
/* phone-only escape hatch back to the simple version (shown by app.js on coarse-pointer phones) */
.simpleBtn { background: var(--pill-bg); color: var(--pill-ink); font-weight: 700;
  padding: 8px 16px; border-radius: 18px; text-decoration: none; font-size: 15px; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.charts .card { background: var(--chart-bg, var(--card));
  border: 3px solid var(--chart-border); }
html:not([data-skin]) .charts .card, html[data-skin="poster"] .charts .card,
html[data-skin="trail"] .charts .card { border-width: 2px; }
.plot { width: 100%; height: 430px; }
.plot.huge { height: 680px; }
.charts .card.wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }

footer { max-width: 1200px; margin: 10px auto 30px; padding: 0 20px;
  font-size: 12px; color: var(--muted); }
footer a { color: var(--amber-dark); }

/* ---------- small screens (phones) ---------- */
header, nav { flex-wrap: wrap; }
@media (max-width: 760px) {
  header { padding: 12px 14px; gap: 10px; }
  nav { gap: 10px; row-gap: 8px; }
  h1 { font-size: 18px; letter-spacing: 1px; }
  h1 .appname { display: block; }        /* stack the tool name under the brand */
  h1 .appname .dash { display: none; }   /* dash only makes sense on one line */
  .sub { display: none; }                /* tool name replaces the tagline on phones */
  .sun { width: 38px; height: 38px; }
  main { padding: 12px; }
  .card { padding: 12px; }
  #vehicleSel { min-width: 0; flex: 1 1 100%; width: 100%; }
  .sliders { grid-template-columns: 1fr; }
  .sliders .srow { grid-template-columns: 1fr 64px 46px; }  /* text gets its own row */
  .sliders .slbl { grid-column: 1 / -1; }
  select, input[type=number] { font-size: 16px; }  /* stops iOS focus auto-zoom */
  .plot { height: 340px; }
  .plot.huge { height: 440px; }
  .charts { gap: 12px; }
}