/* Report-wide layout.
   One card style for every floating panel (simulator inputs, Quarto
   TOC), plus CSS-only responsive fixed positioning. No runtime JS. */

:root {
  /* Content column stays at --content-w on every page. Sidebars take
     the full remaining gutter: max() handles narrow viewports where
     the gutter would round below --side-min. No ceiling; at wider
     viewports the gutter is wide, so the sidebars are wide, which is
     exactly the "fill the space" behaviour we want. */
  --content-w: 900px;
  --side-min: 220px;
  --side-offset: 0.75rem;
  --side-inside-gap: 1.25rem;
  --side-w: max(
    var(--side-min),
    calc((100vw - var(--content-w)) / 2 - var(--side-offset) - var(--side-inside-gap))
  );
  --side-top: 5rem;
}

/* --- Shared card chrome -------------------------------------------------- */

.side-panel,
nav#TOC {
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.6rem 0.85rem 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #222;
}

.side-panel h3 {
  font-size: 0.7rem;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0;
  padding: 0.1rem 0;
}
.side-panel > h3:first-child,
.side-panel section:first-child > h3 { margin-top: 0; }

.side-panel p { margin: 0.35rem 0; color: #333; }

/* Quarto TOC heading (rendered as <h2 id="toc-title">) matched to the
   side-panel h3 weight. */
nav#TOC > #toc-title {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #333;
  margin: 0 0 0.3rem;
}
nav#TOC > ul { font-size: 0.78rem; }

/* --- Floating behaviour -------------------------------------------------- */

/* Quarto auto-decorates every top-level block inside main.content with
   .page-columns .page-full, and its body-scoped rules
   (e.g. body.fullcontent:not(.floating):not(.docked) .page-columns) land
   at specificity 0,4,1, higher than any realistic class-based selector
   we can add here. !important is the cleanest way to reclaim control of
   display / grid / position for our own wrappers. */
.side-panel-left {
  display: block !important;
  grid-column: body-content-start / body-content-end !important;
  grid-template-columns: none !important;
  overflow: visible;
}
.side-panel-left > * {
  grid-column: auto !important;
}

/* Wide viewports: park each side-panel beside the centred body column and
   let it stick while scrolling. position: sticky preserves the panel's
   natural flow position (so a .side-panel-left declared next to the
   section it controls lands beside that section on first paint, instead
   of jumping to the top of the viewport) and then pins it at
   --side-top once that threshold scrolls past. Because the panel lives
   inside main.content (max-width: --content-w, margin-inline: auto),
   `calc(var(--side-offset) - 50vw + 50%)` offsets from main.content's
   centred left edge to the viewport edge: the same position the old
   `left: var(--side-offset)` produced under position: fixed. Floating
   removes the panel from block flow so the next in-flow section (the
   one it's meant to sit beside) starts at the panel's own top rather
   than below it.

   Reserve equal padding on both sides of #quarto-content, unconditionally,
   so the centred main column is the same width on every page, whether it
   carries a .side-panel-left, Quarto's TOC sidebar, or nothing at all. */
@media (min-width: 1400px) {
  .side-panel-left {
    position: sticky !important;
    top: var(--side-top);
    width: var(--side-w);
    max-height: calc(100vh - var(--side-top) - 1rem);
    overflow-y: auto;
    z-index: 500;
    float: left;
    margin-left: calc(var(--side-offset) - 50vw + 50%);
  }

  /* Quarto's margin sidebar, where `toc-location: right` puts the TOC
     (inside `nav#TOC`), is emitted as a grid sibling of main.content,
     not inline in markdown, so it can't use sticky-from-flow and stays
     on the fixed-to-viewport path. display/visibility overrides defeat
     Quarto's own hide-the-margin-sidebar rules at mid-range viewport
     widths, which would otherwise leave pages with a TOC blank here. */
  #quarto-margin-sidebar {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: var(--side-top);
    right: var(--side-offset);
    width: var(--side-w);
    max-height: calc(100vh - var(--side-top) - 1rem);
    overflow-y: auto;
    z-index: 500;
  }

  #quarto-content {
    padding-left: calc(var(--side-w) + var(--side-offset) + var(--side-inside-gap));
    padding-right: calc(var(--side-w) + var(--side-offset) + var(--side-inside-gap));
  }

  /* Pin the centred body column to --content-w regardless of which grid
     template Quarto picked for this page (toc-left, fullcontent, etc.).
     main.content normally sits in the narrow `body-content` track, which
     differs between article and toc-left templates; span every track so
     max-width and auto margins determine width and position instead. */
  main.content {
    grid-column: 1 / -1 !important;
    max-width: var(--content-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* main.content keeps its own inner page-columns grid; neutralise that
     too so descendant paragraphs fill the full centred column. */
  main.content {
    display: block !important;
    grid-template-columns: none !important;
  }
  main.content > * {
    grid-column: auto !important;
  }
}

/* Narrow viewports: drop the fix and let the panel render inline above
   the main content. */
@media (max-width: 1399px) {
  .side-panel-left {
    margin: 0 0 1rem;
  }
}

/* --- Inputs.table row-selection checkbox column ------------------------- */
/* Quarto bundles @observablehq/inputs ^0.10.4, which predates the
   `select: false` option (added in v0.11.0, observablehq/inputs#262). The
   table form is emitted with class `oi-<hash> oi-<hash>-table`, so we hide
   the leading checkbox cell of every header and body row directly. */
form[class*="-table"] table tr > :first-child {
  display: none;
}

/* --- Simulator / Findings input panel (slider rows) --------------------- */

.pc-controls form[class*="oi-"] { align-items: center; }
.pc-controls form[class*="oi-"] > label {
  width: 7.5rem !important;
  min-width: 7.5rem !important;
  max-width: 7.5rem !important;
  white-space: normal !important;
  line-height: 1.15;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.pc-controls form[class*="oi-"] { margin-block: 0.1rem; }
.pc-controls form[class*="oi-"] input[type="number"],
.pc-controls form[class*="oi-"] select { min-width: 4rem; }
.pc-controls form[class*="oi-"] input[type="range"] {
  min-width: 0;
  flex: 1 1 auto;
}

.pc-reset {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
}
.pc-reset button {
  width: 100%;
  padding: 0.3rem 0.6rem;
  border: 1px solid #888;
  background: #fff;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
}
.pc-reset button:hover { background: #eef; border-color: #555; }

/* --- Summary-card grid (derived-quantity readouts) ---------------------- */

.derived-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.derived-stats .card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: #fff;
}
.derived-stats .card .label { font-size: 0.8rem; color: #555; }
.derived-stats .card .value {
  font-family: ui-monospace, monospace;
  font-size: 1.1rem;
}

/* --- Collapsible sections ----------------------------------------------- */
/* Four landing-page sections (Price path, Carbon price, P&L along the path,
   Terminal P&L) are authored as `::: {.collapsible-section}` fenced divs and
   rewritten to `<details class="collapsible-section">` at load time by the
   inline <script> near the end of index.qmd. The section's first heading
   becomes the <summary>, so clicking the heading toggles the whole section.
   A chevron sits in the gutter to the left; the heading itself keeps its
   normal h3 typography. */

details.collapsible-section {
  margin: 0;
}

details.collapsible-section > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  position: relative;
}
details.collapsible-section > summary::-webkit-details-marker {
  display: none;
}

/* Anchor the marker to the heading rather than the summary so `em` units
   resolve against the heading's font-size: the arrow scales with the
   heading and sits on the heading's line-box instead of the summary's
   (smaller, body-inherited) one. */
details.collapsible-section > summary > :is(h1, h2, h3, h4, h5, h6) {
  display: inline-block;
  margin-right: 0.5rem;
  position: relative;
}

details.collapsible-section > summary > :is(h1, h2, h3, h4, h5, h6)::before {
  content: "▸";
  position: absolute;
  left: -1.1rem;
  top: 0.15em;
  font-size: 0.8em;
  color: #888;
  transition: transform 0.15s ease;
}
details.collapsible-section[open] > summary > :is(h1, h2, h3, h4, h5, h6)::before {
  transform: rotate(90deg);
}
details.collapsible-section > summary:hover > :is(h1, h2, h3, h4, h5, h6)::before {
  color: #222;
}

/* --- Switching palette --------------------------------------------------- */
/* Shared muted tones for anything describing the switching book across the
   report: threshold rules on plots, fee-mode overlays, sweep curves.
   Kept in one place so simulator / index / validation speak the same
   visual language. */

:root {
  --switch-accent: #a33b5b;      /* threshold / fee-mode marker */
  --switch-accent-soft: #f4e6eb; /* background tint for fee-mode bands */
}

/* Plot overlay: any Plot.rect / Plot.areaY marking a fee-mode
   sub-interval can use this class to inherit the shared palette instead
   of hardcoding colours inline. Non-interactive (pointer-events: none)
   so the band does not eat tooltips on top of it. */
.fee-band {
  fill: var(--switch-accent-soft);
  fill-opacity: 0.55;
  stroke: var(--switch-accent);
  stroke-opacity: 0.25;
  pointer-events: none;
}