/* SeBa online – base.css, version 17 – simulator pages, restyled to match the Sterrenstrijd / Battle of the Stars main page.
   Drop-in replacement for base.css (no HTML changes needed). The colours follow the visitor's system light/dark setting. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap");

:root {
  --bg:#f5f7fa; --surface:#fff; --ink:#14213d; --muted:#5b667d; --line:#dbe1ea;
  --hero:#0f1b3d; --hero-ink:#f2f5fb; --accent:#1f9d8f; --accent-ink:#fff;
  --edge:#2b4a9e; --band:#eef2f9; --turq:#3dc1b2;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c1224; --surface:#141c33; --ink:#e8ecf5; --muted:#9aa5bd; --line:#26314d;
    --hero:#070c1a; --accent:#3dc1b2; --accent-ink:#06201d; --edge:#5b7fd6; --band:#141c33; color-scheme:dark;
  }
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.65 var(--sans); }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
h1, h2 { font-family:var(--serif); line-height:1.15; margin:0 0 .5em; }
h2 { font-size:clamp(1.6rem,3.5vw,2.1rem); }
p { max-width:68ch; }

/* Required by base.js (it swaps these two classes) */
.visible { display:block; }
.invisible { display:none !important; }

/* Hidden labels (base.js shows the ones for the chosen language) */
[hidden] { display:none !important; }

/* Top bar: same as the main page */
#header { display:contents; }
#nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px; padding:0 max(24px, calc((100% - 1080px) / 2 + 24px)); background:var(--hero); color:var(--hero-ink); }
.brand { display:flex; flex-direction:column; font:600 1.25rem/1.15 var(--serif); color:var(--hero-ink); text-decoration:none; white-space:nowrap; }
.brand-sub { font:400 .72rem var(--sans); letter-spacing:.02em; opacity:.7; }
#menu { min-width:0; }
#menu ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; overflow-x:auto; }
#menu a { color:var(--hero-ink); font-size:.95rem; white-space:nowrap; text-decoration:none; opacity:.8; }
#menu a:hover, #menu a:focus-visible { opacity:1; }
.lang { display:flex; gap:6px; }
.lang button { font:inherit; font-size:.85rem; font-weight:600; padding:5px 12px; border-radius:6px; cursor:pointer;
  color:var(--hero-ink); background:transparent; border:1px solid rgba(255,255,255,.3); }
.lang button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
@media (max-width:820px) { #nav { flex-wrap:wrap; padding-block:8px; } #menu { order:3; width:100%; } }

/* Hero: flat navy like the main page */
#banner { position:relative; overflow:hidden; background:var(--hero); color:var(--hero-ink); padding:clamp(40px,7vw,72px) max(24px, calc((100% - 1080px) / 2 + 24px)); }
#banner h1 { position:relative; margin:0; color:var(--hero-ink); font-size:clamp(2.6rem,8vw,5rem); letter-spacing:-.02em; }
/* the picture in the banner (same pieces as on the main page): the single star or the binary + planets */
.banner-art { position:absolute; top:0; right:0; height:100%; width:min(64%,960px); pointer-events:none; }
#banner[data-variant="single"] .ba-binary, #banner[data-variant="binary"] .ba-single { display:none; }
@media (max-width:820px) { .banner-art { width:100%; opacity:.45; } }

/* Room for a GIF at the top of step 2 (replace this box by the animation later) */
#gif-space { min-height:200px; margin-bottom:20px; padding:16px; display:grid; place-items:center; text-align:center;
  color:var(--muted); font-size:.9rem; border:2px dashed var(--line); border-radius:12px; }
#gif-space img { max-width:100%; height:auto; border-radius:12px; }
#introduction-star, #introduction-binary { border-top:0; }

/* The star movie (single-star simulator) */
#star-movie { margin-bottom: 20px; }
#star-canvas { display:block; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-radius:12px; }
.movie-controls { display:flex; align-items:center; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.movie-controls button { padding:8px 16px; }
.movie-controls input[type="range"] { flex:1; min-width:140px; accent-color:var(--accent); cursor:pointer; }
.movie-actions { margin:10px 0 0; }
.movie-caption { margin:10px 0 0; color:var(--muted); font-size:.9rem; }

/* Content */
main { max-width:1080px; margin:0 auto; padding:24px; }
main > section { padding:40px 0; border-top:1px solid var(--line); }
main > section:first-child { border-top:0; }

/* Small labels above the section titles (language follows <html lang>) */
#introduction h2:first-of-type::before, #introduction-star h2:first-of-type::before, #introduction-binary h2:first-of-type::before,
#controls h2:first-of-type::before, #graph h2:first-of-type::before, #data-section h2:first-of-type::before {
  display:block; margin-bottom:10px; font:600 .8rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
#introduction h2:first-of-type::before, #introduction-star h2:first-of-type::before, #introduction-binary h2:first-of-type::before { content:"About"; }
#controls h2:first-of-type::before { content:"Step 1"; }
#graph h2:first-of-type::before { content:"Step 2"; }
#data-section h2:first-of-type::before { content:"Step 3"; }
html:lang(nl) #introduction h2:first-of-type::before, html:lang(nl) #introduction-star h2:first-of-type::before, html:lang(nl) #introduction-binary h2:first-of-type::before { content:"Intro"; }
html:lang(nl) #controls h2:first-of-type::before { content:"Stap 1"; }
html:lang(nl) #graph h2:first-of-type::before { content:"Stap 2"; }
html:lang(nl) #data-section h2:first-of-type::before { content:"Stap 3"; }

/* Parameters */
#user-input { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px 28px; margin-bottom:1.2rem; }
/* binary simulator on a wide screen (three columns): the two masses, then separation with eccentricity,
   then time with metallicity, each pair above each other. Narrower screens keep the normal order. */
@media (min-width:1004px) {
  #user-input:has(#mass2-control) { grid-template-columns:repeat(3,1fr); }
  #mass1-control { grid-column:1; grid-row:1; }
  #mass2-control { grid-column:1; grid-row:2; }
  #sep-control { grid-column:2; grid-row:1; }
  #ecc-control { grid-column:2; grid-row:2; }
  #user-input:has(#mass2-control) #time-control { grid-column:3; grid-row:1; }
  #user-input:has(#mass2-control) #metal-control { grid-column:3; grid-row:2; }
}
.control { display:grid; grid-template-columns:1fr 110px auto; align-items:center; gap:6px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.control label { grid-column:1/-1; grid-row:1; font-weight:500; font-size:.93rem; }
.control input[type="range"] { width:100%; accent-color:var(--accent); cursor:pointer; }
/* binary simulator: is the companion a star or a planet? (switch at the top of the card of star 2) */
.companion { grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.companion-label { font-size:.85rem; color:var(--muted); font-weight:600; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { font:inherit; font-size:.85rem; font-weight:600; padding:5px 14px; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.seg button + button { border-left:1px solid var(--line); }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.seg button:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
#mass2-control label, #sep-control label { grid-row:2; }
.unit-hint { grid-column:1/-1; margin:0; font-size:.82rem; color:var(--muted); }
input[type="number"] { width:100%; padding:6px 8px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; }
input[type="checkbox"] { accent-color:var(--accent); }

/* Info balloons: same style as the pop-ups */
.tooltip { position:relative; display:inline-block; cursor:help; color:var(--muted); }
.tooltip .tooltiptext { visibility:hidden; position:absolute; z-index:5; bottom:125%; left:50%; transform:translateX(-50%);
  width:max-content; max-width:260px; padding:10px 12px; border-radius:8px; font-size:.85rem; line-height:1.45; text-align:left;
  background:#0f1b3d; color:#f2f5fb; border:1.5px solid var(--turq); box-shadow:0 8px 24px rgba(7,12,26,.35); }
.tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext { visibility:visible; }

/* Buttons */
button { font:inherit; font-weight:600; cursor:pointer; border-radius:8px; padding:11px 24px; border:0; background:var(--accent); color:var(--accent-ink); }
button:hover:not(:disabled) { filter:brightness(1.08); }
button:disabled { opacity:.45; cursor:not-allowed; }
#start-button { margin-right:14px; }
#status { color:var(--muted); min-height:1.6em; }

/* Graph */
#plotly-graph { width:100%; min-height:420px; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.axis-options { display:grid; grid-template-columns:max-content minmax(0,380px); gap:8px 12px; align-items:center; margin:0 0 14px; }
.axis-options .graph-style, .axis-options .axis-column { display:contents; }
.graph-style, .axis-column { display:flex; flex-direction:column; gap:4px; }
.graph-style label, .axis-column label { font-size:.88rem; color:var(--muted); }
select { font:inherit; padding:7px 8px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; }
select:disabled { opacity:.5; cursor:not-allowed; }

.graph-actions { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin:14px 0 12px; }
.graph-actions button { padding:8px 16px; }

/* Results */
#data-section > button { margin-right:10px; }
#data-section { overflow-x:auto; }
#data-table { border-collapse:collapse; width:100%; margin-top:16px; font-size:.9rem; font-variant-numeric:tabular-nums; }
#data-table th, #data-table td { padding:8px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
#data-table th { position:sticky; top:0; background:var(--surface); color:var(--muted); font-weight:600; }

/* Program log: expands like the accordions on the main page */
#program-log summary { list-style:none; cursor:pointer; padding:12px 0; border-top:1px solid var(--line);
  font:600 1.1rem var(--serif); display:flex; justify-content:space-between; align-items:center; }
#program-log summary::-webkit-details-marker { display:none; }
#program-log summary::after { content:"+"; color:var(--accent); font:600 1.4rem var(--sans); }
#program-log[open] summary::after { content:"–"; }
#program-log output { display:block; margin-top:10px; padding:14px; border-radius:10px; white-space:pre-wrap; max-height:400px; overflow-y:auto;
  font:.85rem/1.5 ui-monospace,Menlo,Consolas,monospace; background:var(--surface); border:1px solid var(--line); color:var(--muted); }

@media (max-width:600px) { #nav { padding:8px 16px; } main { padding:16px; } .control { grid-template-columns:1fr 90px auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Footer: same as the main page */
footer { background:var(--hero); color:var(--hero-ink); padding:48px 0; font-size:.92rem; margin-top:40px; }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; max-width:1080px; margin:0 auto; padding:0 24px; }
footer a { color:var(--hero-ink); opacity:.8; margin-right:16px; }