:root { --bg:#0f1115; --fg:#e8e8e8; --muted:#a5a5a5; --card:#161a22; --accent:#8fb3ff; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.site-header,.site-footer{padding:16px 20px;border-bottom:1px solid #222}
.site-footer{border-top:1px solid #222;border-bottom:none;color:var(--muted)}
.container{max-width:980px;margin:0 auto;padding:24px 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px}
.card h2{margin:0 0 8px}
.btn{display:inline-block;margin-top:8px;padding:8px 12px;border-radius:10px;border:1px solid #2a3346;color:var(--fg);text-decoration:none}
.btn:hover{border-color:var(--accent)}

.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.section-divider{border:0;border-top:1px solid #2b2f3a;margin:24px 0}
.loc-panel{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px;margin:0 0 16px 0}
.panel-header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel-header h2{margin:0}
.forecast-slot{display:block}
.extras{margin-top:12px;opacity:0.9}

/* Slider (Starfront <—> Silverton) */
.switch{display:flex;align-items:center;gap:10px}
.toggle{position:relative;width:56px;height:28px}
.toggle input{display:none}
.toggle .slider{
  position:absolute;inset:0;border-radius:999px;border:1px solid #2a3346;
  background:#1a2230;transition:background .2s ease;
}
.toggle .slider::before{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#e8e8e8;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s ease;
}
.toggle input:checked + .slider{background:var(--accent)}
.toggle input:checked + .slider::before{transform:translateX(28px)}

/* Controls row above embed */
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.active-chip{color:var(--muted)}

/* Slider (Starfront <—> Silverton) */
.switch{display:flex;align-items:center;gap:10px}
.toggle{position:relative;width:56px;height:28px}
.toggle input{display:none}
.toggle .slider{
  position:absolute;inset:0;border-radius:999px;border:1px solid #2a3346;
  background:#1a2230;transition:background .2s ease;
}
.toggle .slider::before{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#e8e8e8;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s ease;
}
.toggle input:checked + .slider{background:var(--accent)}
.toggle input:checked + .slider::before{transform:translateX(28px)}

/* Location content blocks (no headers). Show only the active one. */
.loc-content{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px;margin:0 0 16px 0;display:none}
.loc-content.active{display:block}

/* Chart panel fits dark theme; canvas already inherits background */
#nightTimeline { width: 100%; }

/* Content blocks (only one visible) */
.loc-content{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px;margin:0 0 16px 0;display:none}
.loc-content.active{display:block}

/* Fixed-height wrapper to prevent resize loops */
.chart-wrap{height:320px; position:relative}

/* Let Chart.js fill the wrapper height */
#nightTimeline{width:100%; height:100% !important; display:block}

.chart-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px 0}
.chart-head h3{margin:0;font-size:1.25rem}
.illum-pill{background:#1b2230;border:1px solid #2a3347;border-radius:999px;padding:6px 10px;color:var(--fg)}
.chart-foot{display:flex;justify-content:flex-end;margin-top:6px}

/* Ensure the canvas has a stable height */
.chart-wrap{position:relative;height:320px}
#nightTimeline{width:100%;height:100%}

.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chart-head h3{margin:0;font-size:18px}
.illum-chip{background:#1e2330;border:1px solid #2a3142;border-radius:999px;padding:6px 10px;font-size:13px;color:#dfe6f3}
.illum-chip #illum-val{font-weight:700;margin-right:6px}
.chart-wrap{position:relative;height:320px}
.chart-foot{display:flex;justify-content:flex-end;margin-top:4px}
.chart-caption{color:var(--muted)}

/* Chart area must have an explicit height; canvas fills it */
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chart-head h3{margin:0;font-size:18px}
.illum-chip{background:#1e2330;border:1px solid #2a3142;border-radius:999px;padding:6px 10px;font-size:13px;color:#dfe6f3}
.illum-chip #illum-val{font-weight:700;margin-right:6px}
.chart-wrap{position:relative;height:340px}
#nightTimeline{display:block;width:100%;height:100%}
.chart-foot{display:flex;justify-content:flex-end;margin-top:4px}
.chart-caption{color:var(--muted)}

/* Slider control (basic) */
.switch{display:flex;align-items:center;gap:10px}
.toggle{position:relative;display:inline-block;width:52px;height:28px}
.toggle input{display:none}
.toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2a3142;border-radius:999px;transition:.2s}
.toggle .slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}
.toggle input:checked + .slider{background:#4b7cff}
.toggle input:checked + .slider:before{transform:translateX(24px)}

/* Content blocks only show active */
.loc-content{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px;margin:0 0 16px 0;display:none}
.loc-content.active{display:block}

/* Ensure canvas and sections don’t auto-grow */
section.loc-panel{background:var(--card);border:1px solid #232836;border-radius:14px;padding:16px;margin-bottom:16px}
canvas{display:block}
/* === ECN Accessibility Patch (2025-09-12) ===============================
   - High-contrast, colorblind-friendly defaults
   - Minimal, additive; safe to append
   ====================================================================== */
:root{
  --bg: #F9F9F9;
  --ink: #42474c;        /* primary text */
  --ink-strong:#262b5f;  /* headings / accents */
  --muted:#6b7280;
  --card:#ffffff;
  --grid: rgba(66,71,76,0.20);

  /* Okabe–Ito palette for lines (CVD-safe) */
  --line-1:#0072B2;  /* blue */
  --line-2:#D55E00;  /* vermillion */
  --line-3:#009E73;  /* green */

  /* Time-of-day fills */
  --day-fill:      rgba(240,228, 66, 0.18); /* yellow */
  --twilight-fill: rgba( 86,180,233, 0.15); /* sky blue */
  --night-fill:    rgba( 38, 43, 95, 0.16); /* deep indigo */
}
html, body {
  background: var(--bg);
  color: var(--ink);
}
h1, h2, h3, h4 { color: var(--ink-strong); }
a { color: var(--ink-strong); text-decoration-thickness: .12em; }
a:hover { text-decoration: underline; }

.ecn-card, .card, .panel, .chart-card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 1rem;
}

/* Chart container helpers (non-breaking) */
.chart-wrap { inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; }
.chart-wrap canvas { display: block; inline-size: 100%; block-size: 360px; }

/* Focus visibility */
:focus-visible { outline: 3px solid #262b5f; outline-offset: 2px; }

/* Optional legend chips */
.legend-chip { inline-size: 12px; block-size: 12px; border-radius: 50%; display:inline-block; margin-right:.5rem; vertical-align: middle; }
.legend-blue   { background: var(--line-1); }
.legend-orange { background: var(--line-2); }
.legend-green  { background: var(--line-3); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ECN: hide unused active chip (2025-09-12) */
.active-chip { display: none !important; }
/* ECN: chart actions */
.chart-actions{display:flex;gap:.6rem;margin:.8rem 0 0}
.chart-actions .btn{padding:.4rem .7rem;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:var(--card,#fff);color:var(--ink,#333);cursor:pointer}
.chart-actions .btn:hover{filter:brightness(0.98)}
/* === ECN Button Theme (2025-09-12) =============================== */
:root{
  --accent: var(--line-1, #0072B2);
  --accent-600: #005a8d;  /* darker hover for #0072B2 */
  --accent-ring: rgba(0,114,178,0.28);
  --btn-fg: #ffffff;
  --btn-muted-fg: var(--ink-strong, #262b5f);
  --btn-muted-border: rgba(0,0,0,0.18);
}

/* container already exists; keep it but tighten margin a touch */
.chart-actions{display:flex;gap:.6rem;margin:.8rem 0 0}

/* base button */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font: inherit; line-height: 1; white-space:nowrap;
  padding:.48rem .8rem; border-radius:10px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; user-select:none; -webkit-user-select:none;
  transition:transform .06s ease, filter .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* primary (filled) */
.btn-primary{
  background: var(--accent);
  color: var(--btn-fg);
  border-color: transparent;
}
.btn-primary:hover{ filter: brightness(.98); background: var(--accent-600); }

/* ghost (subtle outline) */
.btn-ghost{
  background: transparent;
  color: var(--btn-muted-fg);
  border-color: var(--btn-muted-border);
}
.btn-ghost:hover{ filter: brightness(.98); background: rgba(0,0,0,0.03); }
/* ECN: chart foot actions (bottom-right) */
.chart-foot{ position:relative; display:flex; align-items:center; gap:.6rem; margin-top:.6rem; }
/* push the actions to the right end of the foot row */
.chart-foot #ecn-chart-actions{ margin-left:auto; }
/* hide the caption text line only (keeps DOM for scripts) */
.chart-foot #chart-caption{ display:none; }

/* Button theme (uses your existing palette variables) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;line-height:1;white-space:nowrap;
  padding:.48rem .8rem;border-radius:10px;border:1px solid transparent;
  cursor:pointer;user-select:none;transition:transform .06s ease, filter .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--line-1,#0072B2);color:#fff}
.btn-primary:hover{filter:brightness(.98)}
.btn-ghost{background:transparent;color:var(--ink-strong,#262b5f);border-color:rgba(0,0,0,.18)}
.btn-ghost:hover{background:rgba(0,0,0,.03)}
.chart-actions{display:flex;gap:.6rem}
/* ECN: band hover tooltip */
#ecn-band-hover{
  position:fixed; pointer-events:none;
  padding:.35rem .55rem; font-size:.85rem;
  background:rgba(0,0,0,.75); color:#fff;
  border-radius:6px; transform:translate(-50%,-120%);
  opacity:0; transition:opacity .12s ease; z-index:9999;
}