/* Fuel Cost Calculator styles. Same design language as the Decarbonizer:
   Poppins, navy #0A1543, hairline rules, square corners everywhere except
   slider thumbs, white tables with a rule beneath the header. */

:root {
  --navy: #0A1543;
  --green: #2f9e6f;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --ets: #c00000;
  --paper: transparent;
  --paper-warm: #f4f5f8;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  /* Structural seams: the header rule and the rule closing the summary
     band. Deliberately a separate token from --rule2, which draws table
     rows and block borders: those are fine faint, these have to be seen. */
  --rule-band: rgba(10, 21, 67, .38);
  /* The single gap that governs the summary band, above and below the
     seam, so the band keeps one rhythm. */
  --band-gap: 31px;
  /* Breathing room at the top of every subsection body, so a subsection is
     not lopsided: content sits as far below its own header as the previous
     subsection's content sits above it.
         below  20px (.acc-body padding-bottom)
              + 30px (.acc margin-bottom)
              +  7px (next .acc-head padding-top)   = 57px
         above   7px (this .acc-head padding-bottom)
              + 50px (this token)                   = 57px
     Change this one number to retune the whole tool. */
  --sub-top: 50px;
  /* The two fixed columns of a key/value row. A field spans both and
     positions its unit ghost off them, so these are the only two numbers
     that place a unit anywhere in the tool. */
  --kv-val: 148px;
  --kv-unit: 92px;
}

* { box-sizing: border-box }

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

h3 { font-weight: 600; margin: 0 }
a { color: var(--navy); text-decoration: none }
.hidden { display: none !important }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px }

/* ===== header: white, navy wordmark. The rule is drawn by ::after, inset
   to the gutter: a border-bottom spans the whole 1180px border box and
   would sit 26px proud of the content column at each end. One hairline in
   the seam tone, as the Decarbonizer draws it. ===== */
.dz-header {
  background: #fff;
  color: var(--ink);
  padding: 19px 26px;
  margin: 0 -26px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dz-header::after { content: ''; position: absolute; left: 26px; right: 26px; bottom: 0; border-bottom: 1px solid var(--rule-band) }
.dz-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.dz-mark { font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--navy) }
.dz-product { font-size: .9rem; color: var(--ink-soft) }
.dz-product strong { color: var(--navy); font-weight: 600 }

/* ===== tool ===== */
#tool { font-family: 'Poppins', sans-serif; color: var(--ink); padding-bottom: 40px }
#tool p, #tool .note, #tool figcaption { font-style: italic; text-align: justify }

.intro { margin-bottom: 26px }

/* ===== summary band: the three headline figures as blocks, closed off by
   a seam, then the inputs that move them. Same construction as the
   Decarbonizer's block band: cards on a grid, then a rule. ===== */
.blk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0 }
.blk {
  border: 1px solid var(--rule2); background: #fff; padding: 12px 13px 11px;
  min-height: 118px; display: flex; flex-direction: column; transition: border-color .14s;
}
.blk:hover { border-color: var(--navy) }
.blk-lab { font-size: 10.5px; color: var(--ink-muted); font-weight: 500 }
.blk-lab-t { display: block; white-space: nowrap }
.blk-val {
  font-size: 23px; font-weight: 600; line-height: 1.15; margin-top: auto;
  color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.blk-sub { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px }

/* A rule marking a seam, not a frame. Equal air above and below from one
   token, so the band keeps its rhythm. */
.bandseam { height: 0; border-top: 1px solid var(--rule-band); margin: var(--band-gap) 0 }

/* two columns on one row rhythm */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch }
.grid2 > * { min-width: 0 }
@media (max-width: 880px) { .grid2, .blk3 { grid-template-columns: 1fr } }

/* ===== accordions =====
   De-boxed. No frame, no panel fill, no rule under the head bar. A
   subsection is a bare label plus its toggle pills, with content flowing
   on the page; spacing does the separating. */
.acc { border: 0; background: #fff; margin-bottom: 30px }
/* A closed subsection is one line of a list, so consecutive closed ones
   press together. The 30px above stays for open ones, whose content needs
   separating from the next label. */
.acc.closed { margin-bottom: 8px }
.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; cursor: pointer; user-select: none;
}
/* With no box, the label itself has to answer the mouse. */
.acc-head:hover h3 { opacity: .78 }
.acc-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }
.acc-toggle { display: flex; gap: 6px }
/* Pills: a deliberate exception to the square-corner house rule, like the
   round slider thumbs. Elongated, wider than tall. */
.acc-toggle button {
  width: 42px; height: 26px; border: 1px solid var(--rule2); background: #fff;
  cursor: pointer; color: var(--ink-muted); font-size: 10px; border-radius: 999px; font-family: inherit;
}
.acc-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy) }
.acc-body { border-top: 0; padding: var(--sub-top) 0 20px; overflow: visible }
.acc.closed .acc-body { display: none }

/* ===== section captions =====
   Left-aligned to the column, like everything else in the Decarbonizer:
   nothing floats centred. .band is the caption of a block, .sub the
   quieter divider inside one. */
.band { font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 0 10px }
.sub {
  font-size: 11px; font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 8px;
}
.sub:first-child { margin-top: 0 }

/* ===== key / value rows: label | value | unit | marker =====
   One uniform rhythm, no rules between rows and no spacer between groups:
   the shared row height and label column carry the alignment, the lines
   only add noise. The tooltip marker sits in its own column at the end of
   the row, so every marker lines up however long the label is; rows
   without one leave the column empty.

   The two fixed columns are tokens because a field spans BOTH of them and
   positions its own unit ghost off them. One pair of numbers, so the unit
   inside a field and the unit beside a read-only value can never drift
   apart. */
.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kv-val) var(--kv-unit) 16px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  min-height: 34px;
  font-size: 12.5px;
}
.kv > .k { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px }
.kv > .v { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--navy) }
.kv > .u { font-size: 12px; color: var(--ink-soft); text-align: left }
/* -2 / -1 is the last column, so the marker rule does not care how many
   columns the row happens to have. */
.kv > .ii { grid-column: -2 / -1; margin-left: 0; justify-self: end }
.kv.hl > .k, .kv.hl > .v, .kv.hl > .u { font-weight: 600; color: var(--navy) }

/* Units live inside the field and step aside while editing, as in the
   Decarbonizer. The field spans the value and unit columns, and the ghost
   sits on the line where the unit column starts, so an editable row and a
   read-only row show their units at the same x. */
.kv > .f { grid-column: 2 / 4; position: relative; display: block }
.kv > .f > .u {
  position: absolute; left: calc(var(--kv-val) + 10px); top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 400; color: var(--ink-soft);
  pointer-events: none; white-space: nowrap; transition: opacity .12s;
}
.kv > .f input:focus ~ .u { opacity: 0 }

.kv input[type=number], .kv input[type=text], .kv select {
  width: 100%; height: 30px; font-family: inherit; font-size: 13px; color: var(--navy);
  text-align: left; border: 1px solid #c8ccd4; border-radius: 0; padding: 4px 8px;
  background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); transition: border-color .15s;
}
/* Room reserved for the unit sitting inside the field. Rows without one
   are unaffected: .f only pads when it carries a .u. */
.kv > .f:has(> .u) input, .kv > .f:has(> .u) select { padding-right: calc(var(--kv-unit) + 12px) }
.kv input:focus, .kv select:focus { outline: 0; border-color: var(--navy) }
input[type=number] { -moz-appearance: textfield; appearance: textfield }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }

/* Sliders: thin neutral track, round navy thumb, no coloured fill. The
   thumb is the one rounded thing in the tool. */
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 14px; background: transparent; cursor: pointer; margin: 0 }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--line) }
input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line) }
input[type=range]::-moz-range-progress { height: 3px; background: var(--line) }
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 }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: none }
input[type=range]:focus { outline: none }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(10, 21, 67, .2) }

/* Tooltip marker: small bordered italic i. Round, deliberately: squared
   off it reads as a tiny button rather than as the "there is more here"
   dot it is. */
.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;
}

/* ===== tables =====
   De-framed: the row rules carry the structure. Header cells are muted and
   closed by a --rule2 hairline; body rows take the fainter --rule2-soft.
   No vertical rules, ever. */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; background: #fff; border: 0 }
th, td { text-align: right; padding: 6px 9px; border-bottom: 1px solid var(--rule2-soft) }
th:first-child, td:first-child { text-align: left }
thead th { font-weight: 600; color: var(--ink-muted); font-size: 12.5px; padding-bottom: 8px; border-bottom: 1px solid var(--rule2) }
thead tr.units th { font-weight: 400; padding-top: 0; padding-bottom: 8px }
thead tr:first-child th { border-bottom: none; padding-bottom: 2px }
tbody tr:last-child td { border-bottom: none }
td.y { font-weight: 600; color: var(--navy) }
th input[type=checkbox] { accent-color: var(--navy); margin: 0; vertical-align: middle }

/* ===== notes and captions ===== */
.note {
  font-size: 11px; color: #8a93a8; font-style: italic; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 9px; white-space: pre-line;
}
/* The workbook's footnotes read as note copy, not as a table: one rule
   closing them off from the figures above, none between them. */
.notes { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px }
.notes div { font-size: 11px; color: #8a93a8; font-style: italic; padding: 2px 0 }

/* ===== buttons ===== */
.btn { background: var(--navy); color: #fff; border: 0; padding: 12px 22px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-block }
.btn:hover { background: #16224f }
.guide { text-align: center; margin-top: 26px }
.guide .cap { font-size: 12px; color: var(--ink-muted); margin-top: 8px }

/* ===== formulas (Annex I, compliance balance, penalty) =====
   De-framed with the other tables: horizontal rules only, no outer border
   and no vertical rules. The equation itself stays centred in its cell,
   which is what an equation wants; the block sits in the column like
   everything else rather than floating centred on the page. */
.formula { margin-top: 26px; font-size: 12.5px; color: var(--ink) }
.formula .ftitle { font-weight: 600; margin-bottom: 4px }
.formula .fsub { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px }
.formula .fintro { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px }
.formula td, .formula th {
  text-align: left; vertical-align: middle; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--rule2-soft); font-size: 12.5px; color: var(--ink);
}
.formula tr:last-child td, .formula tr:last-child th { border-bottom: 0 }
.formula td.sym { width: 200px; color: var(--ink-soft) }
.formula td.eq { text-align: center }
.formula + .formula { margin-top: 14px }
.formula .where { margin: 12px 0 8px; font-weight: 500 }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px }
.frac > span { display: block; padding: 0 4px; line-height: 1.3 }
.frac > span:first-child { border-bottom: 1px solid var(--ink) }
sub, sup { font-size: .7em }

/* ===== chart ===== */
.chartbox { position: relative; height: 340px; margin-top: 18px }

/* pathway values: three columns beside the fuel selectors. Fixed layout so
   long text ("No biofuel chosen") wraps inside its cell instead of pushing
   the table past the column; the unit sits under the value. */
.pathvals { table-layout: fixed; width: 100% }
.pathvals th, .pathvals td { text-align: center; overflow-wrap: anywhere }
.pathvals th:first-child, .pathvals td:first-child { text-align: center }
.pathvals th .ii { margin-left: 4px }
.pathvals td { padding: 12px 8px; font-weight: 500; color: var(--navy); vertical-align: top }
.pathvals td .u { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12px; margin-top: 2px }

/* ===== square corners across the whole tool =====
   Five deliberate exceptions: tooltip markers, the accordion toggle pills
   and the slider thumbs. The thumbs are pseudo-elements, so the blanket
   rule never reaches them; the other two are restored here. Scoped to
   #tool so a later specific rule can still win on its own merits. */
#tool * { border-radius: 0 }
#tool .ii { border-radius: 50% }
#tool .acc-toggle button { border-radius: 999px }