/* SFC Tool. Design language lifted from the Decarbonizer stylesheet:
   Poppins, navy, hairline rules, square corners everywhere except slider
   thumbs and the round tooltip markers, round-thumb sliders with a plain
   track, white header closed by the band rule, bordered italic i for
   tooltips. Only the rules this page uses are carried over.

   The two chart colours (#aab2c2 and #c00000, the Decarbonizer's --grey
   and --rust) live as string literals in app.js: Chart.js takes colours as
   strings, so a token here would have nothing to draw. */

:root {
  --navy: #0A1543;
  --line: #e6e9f0;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --label: #41506f;
  /* Table rows and block borders: fine faint. */
  --rule2: rgba(10, 21, 67, .12);
  /* Structural seams - the header rule and the seam above the readout.
     Deliberately a separate token: those are fine faint, these have to be
     seen. One value to dial if the page wants more or less structure. */
  --rule-band: rgba(10, 21, 67, .38);
  /* Width of a parameter's value column, the sandbox's own number. */
  --param-w: 218px;
}

* { box-sizing: border-box }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  background: #fff;
  margin: 0;
  font-size: 14px;
  line-height: 1.55
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px }
#tool { font-family: 'Poppins', sans-serif; color: var(--ink); padding-bottom: 40px }

/* ===== header: white, navy wordmark, band rule inset to the content column ===== */
#tool .dz-header {
  background: #fff;
  color: var(--ink);
  padding: 19px 0;
  margin: 0 0 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between
}
/* The rule is drawn by ::after rather than as a border-bottom on the header:
   a border spans the whole border box. The header sits INSIDE .wrap, whose
   26px padding already insets it to the content column, so left/right are 0
   here where the sandbox needs 26px. Same line on screen. */
#tool .dz-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--rule-band) }
#tool .dz-left { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
#tool .dz-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
#tool .dz-mark { font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--navy) }
#tool .dz-product { font-size: .9rem; color: var(--ink-soft) }
#tool .dz-product strong { color: var(--navy); font-weight: 600 }

/* ===== the one view =====
   De-boxed, as the sandbox de-boxes its subsections: no frame, no panel
   fill, no padding. The content flows on the page and spacing separates it.
   The page carries two horizontal lines in total - the header rule and the
   seam above the readout. */
#tool .view {
  margin-top: 26px
}

/* selectors: label above control, three across; a hidden field leaves the grid */
#tool .fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-bottom: 20px }
#tool .field { display: grid; gap: 6px }
#tool .field.hidden { display: none }
#tool .field label { font-size: 12.5px; color: var(--label); display: flex; align-items: center; white-space: nowrap }

#tool select {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule2);
  border-radius: 0;
  padding: 6px 8px;
  width: 100%;
  max-width: var(--param-w);
  text-align: left;
  cursor: pointer
}
#tool select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }

/* chart */
#tool .chartbox { position: relative; height: 380px }

/* readout: engine load left, the resulting SFC right, closed off above by
   the page's one content seam. Named readout, not foot: .foot in the shared
   language is the page footer. */
#tool .readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 26px 0 0;
  margin-top: 26px;
  border-top: 1px solid var(--rule-band)
}
#tool .readout.hidden { display: none }

/* The sandbox's shared row grid: label | control | value, so the label
   column has a floor and the value never rides on the track. */
#tool .slider-row {
  display: grid;
  grid-template-columns: minmax(150px, 205px) minmax(0, 1fr) 52px;
  gap: 14px;
  align-items: center;
  min-height: 34px;
  font-size: 12.5px
}
#tool .slider-row label { color: var(--label); display: flex; align-items: center; white-space: nowrap }
#tool .rng-val { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink) }

/* The one headline figure, in the sandbox's summary-metric shape: a white
   card with a navy edge, the label small and muted above the value. */
#tool .metric {
  background: #fff;
  border: 1px solid var(--rule2);
  border-left: 3px solid var(--navy);
  padding: 12px 15px
}
#tool .metric .k {
  display: block;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 5px
}
#tool .metric .v {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums
}
#tool .metric .unit { font-size: 12.5px; color: var(--ink-soft); font-weight: 400 }

/* Explanatory copy is italic and justified throughout. */
#tool .note {
  grid-column: 1 / -1;
  font-size: 12px;
  font-style: italic;
  text-align: justify;
  color: var(--ink-muted);
  min-height: 0
}
#tool .note:empty { display: none }

/* sliders: thin neutral track, round navy thumb, no coloured fill */
#tool input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 14px; background: transparent; margin: 0; cursor: pointer; vertical-align: middle }
#tool input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--line) }
#tool input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line) }
#tool input[type=range]::-moz-range-progress { height: 3px; background: var(--line) }
#tool input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: none; margin-top: -5.5px }
#tool input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: none }
#tool input[type=range]:focus { outline: none }
#tool input[type=range]:focus-visible { outline: 1px solid var(--navy) }

/* tooltip marker: small bordered italic i. Round - one of the few deliberate
   exceptions to the square-corner house rule. Squared off it reads as a tiny
   button rather than as the "there is more here" dot it is. */
#tool .ii {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--rule2);
  background: transparent;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  margin-left: 8px;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0
}

@media (max-width: 880px) {
  #tool .fields { grid-template-columns: minmax(0, 1fr) }
  #tool select { max-width: none }
  #tool .readout { grid-template-columns: minmax(0, 1fr) }
  #tool .slider-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px }
  #tool .chartbox { height: 300px }
}

@media (prefers-reduced-motion: reduce) {
  #tool * { transition: none !important }
}

@media print {
  #tool .view { break-inside: avoid }
}