/* ==========================================================================
   EnergyFutures - design layer on top of Bootstrap 5
   Replaces Material Design Lite (code.getmdl.io, offline since ~2023).

   The amber brand mark is kept, but as an accent rather than a full amber
   header bar: a white surface with an amber rule reads more current and gives
   the navigation text far better contrast than dark-on-amber did.
   ========================================================================== */

:root {
  /* Brand */
  --ef-amber:        #E8A32B;
  --ef-amber-strong: #C4831A;
  --ef-amber-tint:   #FDF3E0;
  --ef-blue:         #0E6FA8;
  --ef-blue-strong:  #0A567F;
  --ef-blue-tint:    #EAF3F9;

  /* Neutrals - very slightly warm, so the amber does not read as dirty */
  --ef-ink:          #14181c;
  --ef-ink-soft:     #3d454d;
  --ef-ink-muted:    #6b7480;
  --ef-canvas:       #f6f6f4;
  --ef-panel:        #ffffff;
  --ef-line:         #e3e4e2;
  --ef-line-soft:    #eeefed;

  /* Elevation - shallow and tight rather than Material's deep drops */
  --ef-shadow-sm: 0 1px 2px rgba(20, 24, 28, .06);
  --ef-shadow:    0 1px 3px rgba(20, 24, 28, .07), 0 6px 16px -6px rgba(20, 24, 28, .10);
  --ef-shadow-lg: 0 2px 6px rgba(20, 24, 28, .08), 0 18px 40px -12px rgba(20, 24, 28, .18);

  --ef-radius:    10px;
  --ef-radius-sm: 6px;

  /* Re-point Bootstrap's tokens so stock components inherit the theme */
  --bs-primary:          #0E6FA8;
  --bs-primary-rgb:      14, 111, 168;
  --bs-link-color:       #0E6FA8;
  --bs-link-color-rgb:   14, 111, 168;
  --bs-link-hover-color: #0A567F;
  --bs-body-color:       #3d454d;
  --bs-body-bg:          #f6f6f4;
  --bs-border-color:     #e3e4e2;
  --bs-emphasis-color:   #14181c;
  --bs-body-font-size:   1rem;
  --bs-body-line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background-color: var(--ef-canvas);
  color: var(--ef-ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 3.75rem;          /* clears the fixed header */
}

body.ef-has-tabs { padding-top: 6.5rem; }

main { flex: 1 0 auto; }

/* Figures line up in columns wherever they appear */
.ef-table,
.ef-num,
#tooltip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--ef-amber-tint); color: var(--ef-ink); }

:focus-visible {
  outline: 2px solid var(--ef-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Header (was mdl-layout__header / __drawer)
   -------------------------------------------------------------------------- */

.ef-navbar {
  background-color: var(--ef-panel);
  border-bottom: 1px solid var(--ef-line);
  /* the brand stripe */
  box-shadow: inset 0 3px 0 var(--ef-amber), var(--ef-shadow-sm);
  padding-top: .35rem;
  padding-bottom: .35rem;
  min-height: 3.75rem;
}

.ef-navbar .navbar-brand {
  color: var(--ef-ink);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.ef-navbar .nav-link {
  color: var(--ef-ink-muted);
  font-weight: 500;
  font-size: .9375rem;
  padding: .4rem .7rem;
  border-radius: var(--ef-radius-sm);
}

.ef-navbar .nav-link:hover,
.ef-navbar .nav-link:focus {
  color: var(--ef-ink);
  background-color: var(--ef-line-soft);
}

.ef-navbar .nav-link.active {
  color: var(--ef-ink);
  font-weight: 600;
  background-color: transparent;
  box-shadow: inset 0 -2px 0 var(--ef-amber);
  border-radius: 0;
}

.ef-navbar .navbar-toggler {
  color: var(--ef-ink);
  border-color: var(--ef-line);
  padding: .3rem .55rem;
}

.ef-navbar .ef-icon-btn {
  color: var(--ef-ink-muted);
  background: none;
  border: 0;
  padding: .35rem .5rem;
  line-height: 1;
  border-radius: var(--ef-radius-sm);
}

.ef-navbar .ef-icon-btn:hover { color: var(--ef-ink); background: var(--ef-line-soft); }

.dropdown-menu {
  border-color: var(--ef-line);
  border-radius: var(--ef-radius-sm);
  box-shadow: var(--ef-shadow);
  font-size: .9375rem;
  padding: .35rem;
}

.dropdown-item { border-radius: 4px; padding: .45rem .7rem; }
.dropdown-item:active { background-color: var(--ef-blue); }

/* Tab bar, second row of the header (was mdl-layout__tab-bar) */
.ef-tabbar {
  background-color: var(--ef-panel);
  border-bottom: 1px solid var(--ef-line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.ef-tabbar .nav-link {
  color: var(--ef-ink-muted);
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .01em;
  padding: .7rem .9rem;
}

.ef-tabbar .nav-link:hover { color: var(--ef-ink); background-color: var(--ef-line-soft); }

.ef-tabbar .nav-link.active {
  color: var(--ef-ink);
  background-color: transparent;
  box-shadow: inset 0 -2px 0 var(--ef-blue);
}

/* --------------------------------------------------------------------------
   Content panel (was .en-content + mdl-color--white + mdl-shadow--6dp)
   -------------------------------------------------------------------------- */

.ef-content {
  background-color: var(--ef-panel);
  color: var(--ef-ink-soft);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow);
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .ef-content { padding: 1.75rem 2.25rem 2.25rem; }
}

/* Type scale */
.ef-content h1, .ef-content h2, .ef-content h3,
.ef-content h4, .ef-content h5, .ef-content h6 {
  color: var(--ef-ink);
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.25;
  margin-bottom: .5rem;
}

.ef-content h3 { font-size: 1.5rem;    margin-top: 1.75rem; }
.ef-content h4 { font-size: 1.1875rem; margin-top: 1.75rem; }
.ef-content h5 { font-size: 1rem;      margin-top: 1.25rem; }
.ef-content h6 { font-size: .9375rem;  margin-top: 1rem; color: var(--ef-ink-soft); }

.ef-content > h3:first-child,
.ef-content > h4:first-child { margin-top: .25rem; }

/* A subheading directly under a heading belongs to it */
.ef-content h3 + h4 { margin-top: .25rem; color: var(--ef-ink-muted); font-weight: 500; }

.ef-content p { margin-bottom: 1rem; }

.ef-content hr {
  border-top: 1px solid var(--ef-line);
  opacity: 1;
  margin: 1.75rem 0;
}

.ef-content a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Cards (was mdl-card)
   -------------------------------------------------------------------------- */

.ef-card {
  height: 100%;
  background-color: var(--ef-panel);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-sm);
  border-top: 3px solid var(--ef-amber);
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}

.ef-card:hover { box-shadow: var(--ef-shadow); transform: translateY(-1px); }

.ef-card .card-header {
  background-color: transparent;
  border-bottom: 0;
  padding: 1.125rem 1.25rem .25rem;
}

.ef-card .card-header h2 {
  color: var(--ef-ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0;
}

.ef-card .card-body {
  color: var(--ef-ink-muted);
  font-size: .9375rem;
  padding: .5rem 1.25rem 1.125rem;
  flex: 1 1 auto;
}

.ef-card .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--ef-line-soft);
  padding: .75rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Data tables (was mdl-data-table)
   Numbers right-aligned, labels left-aligned - the convention that
   mdl-data-table__cell--non-numeric encoded.
   -------------------------------------------------------------------------- */

.ef-table {
  width: auto;
  margin: 0 auto 1rem;
  background-color: var(--ef-panel);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: .9375rem;
}

.ef-table > :not(caption) > * > * {
  padding: .55rem 1rem;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid var(--ef-line-soft);
  background-color: transparent;
}

.ef-table thead th {
  background-color: #fafaf9;
  border-bottom: 1px solid var(--ef-line);
  color: var(--ef-ink-muted);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ef-table tbody tr:last-child > * { border-bottom: 0; }
.ef-table tbody tr:hover > * { background-color: #fafaf9; }

.ef-table .ef-text,
.ef-table th.ef-text,
.ef-table td.ef-text {
  text-align: left;
  color: var(--ef-ink);
  font-weight: 500;
}

/* Total / summary rows carry the visual weight the old table had */
.ef-table tbody tr:last-child > *,
.ef-table tbody tr.ef-total > * {
  font-weight: 600;
  color: var(--ef-ink);
  background-color: #fafaf9;
}

.ef-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.ef-slider { width: 100%; }

.ef-slider::-webkit-slider-runnable-track {
  height: .3rem; border-radius: 1rem; background-color: var(--ef-line);
}
.ef-slider::-moz-range-track {
  height: .3rem; border-radius: 1rem; background-color: var(--ef-line);
}

.ef-slider::-webkit-slider-thumb {
  background-color: var(--ef-blue);
  box-shadow: 0 1px 3px rgba(20, 24, 28, .25);
  margin-top: -.35rem;
}
.ef-slider::-moz-range-thumb {
  background-color: var(--ef-blue); border: 0;
  box-shadow: 0 1px 3px rgba(20, 24, 28, .25);
}

.ef-slider:disabled::-webkit-slider-thumb { background-color: var(--ef-ink-muted); }
.ef-slider:disabled::-moz-range-thumb     { background-color: var(--ef-ink-muted); }
.ef-slider:disabled { opacity: .75; }

/* Radio groups (was mdl-radio) */
.ef-radio { padding-left: 1.6rem; margin-bottom: .35rem; }
.ef-radio .form-check-input { margin-left: -1.6rem; margin-top: .3rem; }

.ef-radio .form-check-input:checked {
  background-color: var(--ef-blue);
  border-color: var(--ef-blue);
}

.ef-radio .form-check-input:focus {
  border-color: var(--ef-blue);
  box-shadow: 0 0 0 .2rem rgba(14, 111, 168, .2);
}

.ef-radio .form-check-label {
  cursor: pointer;
  color: var(--ef-ink-soft);
  font-size: .9375rem;
}

.ef-radio .form-check-input:checked ~ .form-check-label {
  color: var(--ef-ink);
  font-weight: 500;
}

/* A labelled group of controls */
.ef-content h5 + .row { margin-top: .25rem; }

/* The period / visualisation radios are short enough to sit side by side even
   on a phone; stacking them pushed the chart a screen and a half down. */
@media (max-width: 767.98px) {
  .ef-content h5 + .row { --bs-gutter-y: .25rem; }
  .ef-content h5 + .row > [class*="col-"] { flex: 0 0 auto; width: 50%; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--ef-radius-sm);
  font-weight: 500;
  font-size: .9375rem;
  padding: .45rem .9rem;
}

.btn-accent {
  color: var(--ef-blue);
  background-color: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: .5rem;
}

.btn-accent:hover,
.btn-accent:focus { color: var(--ef-blue-strong); background-color: transparent; text-decoration: underline; }

.btn-amber {
  color: var(--ef-ink);
  background-color: var(--ef-amber);
  border-color: var(--ef-amber);
}

.btn-amber:hover,
.btn-amber:focus {
  color: var(--ef-ink);
  background-color: var(--ef-amber-strong);
  border-color: var(--ef-amber-strong);
}

.btn-outline-primary {
  --bs-btn-color: var(--ef-blue);
  --bs-btn-border-color: #cfd8de;
  --bs-btn-hover-bg: var(--ef-blue);
  --bs-btn-hover-border-color: var(--ef-blue);
}

.btn-secondary {
  --bs-btn-bg: var(--ef-ink-soft);
  --bs-btn-border-color: var(--ef-ink-soft);
  --bs-btn-hover-bg: var(--ef-ink);
  --bs-btn-hover-border-color: var(--ef-ink);
}

/* --------------------------------------------------------------------------
   Treemap tiles
   The old 1px black outline made a grid of hairlines; a light inset seam
   separates neighbours without adding visual weight.
   -------------------------------------------------------------------------- */

.node,
.nodewhite {
  position: absolute;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  padding: .3rem .45rem;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter .12s ease, box-shadow .12s ease;
}

.node:hover,
.nodewhite:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75),
              0 2px 8px rgba(20, 24, 28, .25);
  z-index: 2;
}

@media (min-width: 641px)  { .node, .nodewhite { font-size: .875rem; } }
@media (min-width: 961px)  { .node, .nodewhite { font-size: .9375rem; } }
@media (min-width: 1281px) { .node, .nodewhite { font-size: 1rem; } }

/* A tile the treemap gave no area to - the model emits a zero-sized
   "Reduced Energy" node in the base year. It stays in the layout, so it can
   still animate to and from a real size without leaving a hole, but it draws
   nothing and cannot be hovered or clicked. Zeroing the padding matters: with
   box-sizing: border-box a width of 0 still renders as wide as the padding. */
.node--empty,
.nodewhite.node--empty {
  padding: 0;
  box-shadow: none;
  pointer-events: none;
}

/* Last resort before dropping the label: reclaim the vertical padding and
   tighten the line so one line still fits a flat strip. Type size is
   deliberately left alone. */
.node--tight,
.nodewhite.node--tight {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* Separator in the one-line label variant that visFitLabel() falls back to */
.node-sep {
  opacity: .6;
  margin: 0 .35em;
}

/* The "reduced energy / emissions" tile is the saving, drawn as a void */
.node[style*="rgb(255, 255, 255)"],
.nodewhite[style*="rgb(255, 255, 255)"] {
  box-shadow: inset 0 0 0 1px var(--ef-line);
}

/* --------------------------------------------------------------------------
   Bar charts next to the sliders
   Base year is the reference (neutral), target year is what the slider
   changes (brand amber) - the old pair was two near-identical yellows.
   -------------------------------------------------------------------------- */

.barBase { fill: #C2C8CE; }
.barProg { fill: var(--ef-amber); }

.barTextBase,
.barTextProg { fill: var(--ef-ink); font-size: .8125rem; font-weight: 500; }

svg text { font-family: inherit; }
svg text:not([class]) { fill: var(--ef-ink-muted); font-size: .75rem; }

.center-wrapper { text-align: center; }
.center-wrapper * { margin: 0 auto; }

#tooltip {
  position: absolute;
  width: 220px;
  padding: .625rem .75rem;
  background-color: var(--ef-panel);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius-sm);
  box-shadow: var(--ef-shadow);
  pointer-events: none;
  z-index: 1080;
  font-size: .875rem;
}

#tooltip.hidden { display: none; }
#tooltip p { margin: 0; line-height: 1.4; }

/* The d3/nvd3 charts need a width to measure against */
#visoptdiff,
#difflowTempHeat, #diffhighTempHeat,
#diffstatEngines, #diffmobileEngines,
#difflightingAndElectronics, #diffnonenergetic,
#functionalityvis, #productivityvis,
#coalvis, #oilvis, #gasvis,
#renewablesvis, #electricityvis, #heatvis {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ef-radius-sm);
}

/* The two overview treemaps are generated SVG (see
   tools/generate-overview-treemaps.py) and share one area scale, so they only
   compare correctly while they are the same size on screen. */
.ef-illustration {
  width: 100%;
  border: 1px solid var(--ef-line);
  background-color: var(--ef-panel);
}

/* nvd3 - vendored stylesheet plus theme touch-ups */
.nvd3 text { fill: var(--ef-ink-muted); }
.nvd3 .nv-axis line { stroke: var(--ef-line); }
.nvd3 .nv-axis path.domain { stroke: var(--ef-line); }

/* --------------------------------------------------------------------------
   Legend for the treemaps
   -------------------------------------------------------------------------- */

.ef-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: .75rem 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--ef-ink-muted);
}

.ef-legend li { display: flex; align-items: center; gap: .4rem; }

.ef-legend .ef-swatch {
  width: .7rem;
  height: .7rem;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(20, 24, 28, .12);
}

/* --------------------------------------------------------------------------
   Status message - used by the scenario reset, which otherwise changes
   nothing visible on the page and so looked like it had not run.
   -------------------------------------------------------------------------- */

.ef-status {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--ef-radius-sm);
  border: 1px solid var(--ef-line);
  background-color: #fafaf9;
  color: var(--ef-ink-soft);
  font-size: .9375rem;
  max-width: 68ch;
}

.ef-status--busy { color: var(--ef-ink-muted); }

.ef-status--done {
  border-color: #bfd8c6;
  background-color: #f1f8f3;
  color: #1f5130;
}

.ef-status--done strong { color: #16371f; }

.ef-status--done::before,
.ef-status--error::before {
  font-weight: 700;
  margin-right: .45rem;
}

.ef-status--done::before { content: "\2713"; }

.ef-status a { color: inherit; font-weight: 500; }

/* --------------------------------------------------------------------------
   Scenario page: summary, and the save / load pair
   -------------------------------------------------------------------------- */

.ef-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.5rem;
  margin: .25rem 0 1.25rem;
}

.ef-facts dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ef-ink-muted);
}

.ef-facts dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ef-ink);
  font-variant-numeric: tabular-nums;
}

.ef-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0;
}

/* A file input styled as a button: the input itself cannot be, so the label
   carries the look and the input stays reachable for keyboard and screen
   readers rather than being display:none. */
.ef-file { position: relative; display: inline-flex; }

.ef-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ef-file input[type="file"]:focus-visible + label,
.ef-file label:focus-visible {
  outline: 2px solid var(--ef-blue);
  outline-offset: 2px;
}

.ef-status--error {
  border-color: #e3c0bd;
  background-color: #fdf4f3;
  color: #7c2a22;
}

.ef-status--error::before { content: "\26A0"; }   /* margin shared above */
.ef-status--error strong { color: #5f1f18; }

.ef-status code {
  font-size: .875em;
  color: inherit;
  background: rgba(20, 24, 28, .06);
  padding: .1em .35em;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Back link on a drill-down page
   -------------------------------------------------------------------------- */

.ef-back {
  margin: 0 0 .5rem;
  font-size: .875rem;
}

.ef-back a {
  color: var(--ef-ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.ef-back a:hover { color: var(--ef-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ef-footer {
  flex: 0 0 auto;
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ef-line);
  background-color: var(--ef-panel);
  color: var(--ef-ink-muted);
  font-size: .8125rem;
}

.ef-footer a { color: var(--ef-ink-muted); text-decoration: none; }
.ef-footer a:hover { color: var(--ef-ink); text-decoration: underline; }

.ef-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
}

.ef-footer-links { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }

/* --------------------------------------------------------------------------
   Remodal dialogs
   -------------------------------------------------------------------------- */

.remodal {
  border-radius: var(--ef-radius);
  padding: 1.5rem;
  box-shadow: var(--ef-shadow-lg);
  max-width: 32rem;
}

.remodal h4 {
  color: var(--ef-ink);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.remodal .ef-table { margin-bottom: 1.25rem; }
.remodal hr { border-top: 1px solid var(--ef-line); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ef-card, .node, .nodewhite { transition: none; }
  .ef-card:hover { transform: none; }
}