/* Site theme. Bootstrap supplies the grid and form controls, the rules below give the site its look. */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --ink: #14233A;
  --muted: #56627A;
  --line: #E4E8EE;
  --accent: #1F3D73;
  --accent-soft: #E3E9F3;
  --surface: #ffffff;
  --soft: #3A4860;
  --track: #F2F4F7;
  --seg-op: #1F3D73; --seg-co: #6E86B3; --seg-an: #B7C4DC; --seg-pr: #DCE3EF;
  --on-accent: #ffffff;
  --chart-bg: #ffffff;
  --chart-grid: #EEF0F4;
  --chart-text: #14233A;

  --bs-body-color: var(--ink);
  --bs-body-bg: #ffffff;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-primary: #1F3D73;
  --bs-primary-rgb: 31, 61, 115;
  --bs-link-color: #1F3D73;
  --bs-link-color-rgb: 31, 61, 115;
  --bs-link-hover-color: #14233A;
  --bs-link-hover-color-rgb: 20, 35, 58;
  --bs-border-radius: 8px;
  --bs-card-border-radius: 10px;
}

body, body * { font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif !important; }
body { background: var(--bs-body-bg); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body h1, body .serif { font-family: "Newsreader", Georgia, "Times New Roman", serif !important; }
h1, .h1 { font-weight: 400; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(2rem, 4.5vw, 3rem); }
h2, h3, h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 1.15rem; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }


/* Dark theme, switched with the button in the header */
[data-theme="dark"] {
  --ink: #E4E9F1;
  --muted: #9AA6BA;
  --line: #273246;
  --accent: #A9C1EE;
  --accent-soft: #1C2940;
  --surface: #0E1520;
  --soft: #C3CCDA;
  --track: #1A2333;
  --seg-op: #A9C1EE; --seg-co: #6D88BC; --seg-an: #3D5078; --seg-pr: #2A3550;
  --on-accent: #0E1520;
  --chart-bg: #0E1520;
  --chart-grid: #222C3D;
  --chart-text: #E4E9F1;
  --bs-body-color: #E4E9F1;
  --bs-body-bg: #0E1520;
  --bs-emphasis-color: #E4E9F1;
  --bs-secondary-color: #9AA6BA;
  --bs-border-color: #273246;
  --bs-primary: #A9C1EE;
  --bs-primary-rgb: 169, 193, 238;
  --bs-link-color: #A9C1EE;
  --bs-link-color-rgb: 169, 193, 238;
  --bs-link-hover-color: #ffffff;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: #151E2C;
  --bs-secondary-bg: #151E2C;
  color-scheme: dark;
}
[data-theme="dark"] .btn-primary { --bs-btn-bg: #A9C1EE; --bs-btn-border-color: #A9C1EE; --bs-btn-color: #0E1520; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: #0E1520; --bs-btn-active-bg: #ffffff; --bs-btn-active-color: #0E1520; }
[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #A9C1EE; --bs-btn-border-color: #3D5078; --bs-btn-hover-bg: #A9C1EE; --bs-btn-hover-color: #0E1520; --bs-btn-hover-border-color: #A9C1EE; --bs-btn-active-bg: #A9C1EE; --bs-btn-active-color: #0E1520; }
[data-theme="dark"] .nav-pills { --bs-nav-pills-link-active-bg: #A9C1EE; --bs-nav-pills-link-active-color: #0E1520; }
[data-theme="dark"] .form-range::-webkit-slider-thumb, [data-theme="dark"] .form-range::-moz-range-thumb { background: #A9C1EE; }
[data-theme="dark"] .hero img { filter: brightness(.92); }

.theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); padding: 0; cursor: pointer; }
.theme-toggle:hover { border-color: var(--muted); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Header shared by every page */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.site-header .brand { font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 500; padding: .5rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 480px) { .site-nav { gap: 1rem; } .site-header .brand { font-size: 1rem; } }

/* Bootstrap components in the site palette */
.btn-primary { --bs-btn-bg: #1F3D73; --bs-btn-border-color: #1F3D73; --bs-btn-hover-bg: #14233A; --bs-btn-hover-border-color: #14233A; --bs-btn-active-bg: #14233A; --bs-btn-active-border-color: #14233A; }
.btn-outline-primary { --bs-btn-color: #1F3D73; --bs-btn-border-color: #C3CDDC; --bs-btn-hover-bg: #1F3D73; --bs-btn-hover-border-color: #1F3D73; --bs-btn-active-bg: #1F3D73; --bs-btn-active-border-color: #1F3D73; }
.btn { border-radius: 8px; font-weight: 500; }
.card { border: 1px solid var(--line); border-radius: 10px; box-shadow: none !important; }
.card-header { background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 600; }
.nav-pills { --bs-nav-pills-link-active-bg: #1F3D73; }
.nav-pills .nav-link { color: var(--muted); }
.form-select, .form-control { border-color: var(--line); border-radius: 8px; }
.form-select:focus, .form-control:focus { border-color: #1F3D73; box-shadow: 0 0 0 3px var(--accent-soft); }
.form-range::-webkit-slider-thumb { background: #1F3D73; }
.form-range::-moz-range-thumb { background: #1F3D73; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }
.table { --bs-table-border-color: var(--line); }
footer { color: var(--muted); }
.site-header + main.py-4 { padding-top: 2.5rem !important; }

/* Chart sizes used by the NEM pages */
#status { border-left: 4px solid var(--bs-danger); padding-left: .75rem; }
#status.ok { border-left-color: var(--bs-success); }
#gen-chart { height: 460px; }
#level-chart { height: 220px; }
.sens-chart { height: 300px; }
@media (min-width: 992px) { .sticky-lg { position: sticky; top: 1rem; } }
@media (max-width: 575.98px) { #gen-chart { height: 360px; } }