/* FuelEU Pool Tool. Design language lifted from the Decarbonizer stylesheet:
   Poppins, navy, hairline rules, square corners everywhere except slider
   thumbs, white table headers with a rule beneath, round-thumb sliders with
   a plain track, white header with a 3px navy rule. Only the rules this
   page uses are carried over. */

/* Poppins is served with the tool rather than fetched from a font CDN, so the
   type is identical whether or not the embedding page can reach one. Both
   faces already ship in public/fonts. */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0A1543;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --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. Deliberately a separate token from
     --rule2, which draws table rows: those are fine faint, this has to be
     seen. */
  --rule-band: rgba(10, 21, 67, .38);
  /* The air above every subsection body, so a subsection is not lopsided:
     content sits as far below its own label as the section above sits above
     the next one.
         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;
  --fuel: #AFACAC;          /* MODEL_PARAMETERS "Fuel color" */
  --ets: #c00000;           /* MODEL_PARAMETERS "ETS color" */
  --fueleu: #0A1543;        /* MODEL_PARAMETERS "FuelEU color" */
}

* { box-sizing: border-box }

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

h3 { font-weight: 600; margin: 0 }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px }
/* Tables are sized to fit the 1180px column, but a wide one scrolls rather
   than spilling into the page: the pool table carries thirteen columns now
   and overflow:visible pushed the last of them off the right edge with no
   way to reach them. */
.xscroll { overflow-x: auto }
#tool { font-family: 'Poppins', sans-serif; color: var(--ink); padding-bottom: 40px }

/* ===== header: white, navy wordmark, 3px navy rule inset to the content
   column, one outlined action on the right ===== */
#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
}
/* A seam, not a bar. One hairline in the band tone rather than a 3px navy
   rule, which read as a second brand element under the wordmark. The header
   already sits inside .wrap, so left/right 0 land level with the content
   column: the Decarbonizer insets by 26px only because its header sits
   outside the padded column. Same result, different route. */
#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 }
/* Reset beside Save case, on one line. */
#tool .dz-right { display: flex; align-items: center; gap: 10px }

/* The three scenario slots sit between the brand and the actions. */
/* The three scenario slots sit above the chart and the table, pushed right,
   so they read as what you do before comparing rather than an afterthought
   underneath it. */
#tool .dz-cases {
  display: grid;
  gap: 8px;
  justify-content: end;
  margin: 0 0 26px
}
#tool .dz-cases .case-row { grid-template-columns: minmax(0, 180px) auto }

/* the Decarbonizer's outlined button: white card, inverts to navy when active */
#tool .dz-btn2 {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--rule2);
  padding: 8px 14px;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap
}
#tool .dz-btn2:hover { border-color: var(--navy); background: rgba(10, 21, 67, .04) }

/* The Decarbonizer's primary header control. It opens the menu rather than
   acting on its own, so the actions it holds can grow without the header
   growing with them. */
#tool .dz-save {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap
}
#tool .dz-save:hover { background: #16224f }

/* The menu hangs off the button, right-aligned so it cannot run off the page
   edge, and above everything below it. */
#tool .dz-dd { position: relative }
#tool .dz-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--rule2);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(10, 21, 67, .12);
  min-width: 190px;
  z-index: 20;
  overflow: hidden
}
#tool .dz-menu a {
  display: block;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--rule2-soft);
  white-space: nowrap
}
#tool .dz-menu a:last-child { border-bottom: 0 }
#tool .dz-menu a:hover { background: #f4f5f8; color: var(--navy) }
#tool .hidden { display: none !important }

/* ===== panels and accordions (the Decarbonizer .acc anatomy) =====
   De-boxed: a section is a bare label with its toggle pills, and its content
   flows on the page. No frame, no panel fill, no rule under the head bar.
   Spacing does the separating. */
#tool .panel,
#tool .acc {
  border: 0;
  background: #fff;
  margin-bottom: 30px
}
/* With no frame the content sits flush with the page edge rather than inset
   inside a box that is no longer drawn. */
#tool .panel { padding: 0 }

/* A CLOSED section 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. */
#tool .acc.closed { margin-bottom: 8px }

#tool .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  cursor: pointer
}
#tool .acc-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }
#tool .acc-toggle { display: flex; gap: 6px }
#tool .acc-toggle button {
  width: 42px;
  height: 26px;
  border: 1px solid var(--rule2);
  background: #fff;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 10px;
  font-family: inherit;
  /* One of the deliberate exceptions to the square-corner rule. */
  border-radius: 999px;
  padding: 0
}
#tool .acc-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy) }
#tool .acc-body { border-top: 0; padding: var(--sub-top) 0 20px }
#tool .acc.closed .acc-body { display: none }

/* ===== scenario panel ===== */
/* The chart view selector sits above the chart it changes. */
#tool .selrow { display: flex; margin: 0 0 10px; font-size: 12.5px }
#tool .selrow select { min-width: 200px; max-width: none; padding: 5px 8px; font-size: 12.5px }

/* The cost lines and what each case costs. No frame: the row rules carry it. */
#tool .scentab { margin-bottom: 18px }
#tool .scentab td.ck-cell { width: 26px; padding-right: 0 }
#tool .scentab thead th { text-align: right }
#tool .scentab thead th.l { text-align: left }

/* The model toggles. One per line, the box on the left, as the sheet has
   them; a grid rather than flex so the labels align down the column. */
#tool .toggles { display: grid; gap: 8px; margin: 0 0 20px }
#tool .ck-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer
}

/* The square check, the tool's own control vocabulary. */
#tool input[type=checkbox].ck {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c8ccd4;
  background: #fff;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex: none;
  margin: 0
}
#tool input[type=checkbox].ck:checked { background: var(--navy); border-color: var(--navy) }
#tool input[type=checkbox].ck:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}
#tool input[type=checkbox].ck:focus-visible { outline: 1px solid var(--navy); outline-offset: 1px }

#tool .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
/* The chart and the table it explains take half the column each. A fixed
   300px right column squeezed the five cost lines and three scenarios into
   a strip the numbers would not fit. */
#tool .grid2.viz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
#tool .chartbox { position: relative; height: 240px }
#tool .cases { display: grid; gap: 10px; padding-top: 6px }
#tool .case-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center }
#tool .case-row input[type=text] { width: 100%; font-size: 12.5px; padding: 5px 8px }
#tool .dz-btn2.save { padding: 6px 16px }

/* Section copy: the sheet's own prose, under the section it describes.
   Italic and justified, like every note in the Decarbonizer. */
#tool .sec-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  text-align: justify;
  line-height: 1.9;
  margin: 26px 0 0;
  max-width: none
}
#tool .acc-body h4 {
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  margin: 30px 0 0
}
#tool .acc-body h4:first-of-type { margin-top: 26px }

/* Fleet input: the fleet-wide controls above the per-ship table. */
#tool .fleet-ctl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  margin-bottom: 22px
}
#tool .fleet-ctl select { max-width: none; width: 100%; padding: 5px 8px; font-size: 12.5px }

/* The indexation slider sits in the price cell with its read-out beside it,
   the same shape the pool table's blend control uses. */
#tool .pricetab td.pidx { min-width: 150px }
#tool td.pidx .rng { display: inline-flex; align-items: center; gap: 8px; width: 100% }
#tool td.pidx input[type=range] { width: 100% }
#tool td.pidx .rng-val { min-width: 38px; text-align: right; display: inline-block }

/* ===== more info =====
   A reveal, not a section: the handful of assumptions worth reaching without
   opening an accordion, and the paragraph that says what the tool does. */
#tool .moreinfo { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--rule2) }
#tool .mi-sliders { display: grid; gap: 14px; align-content: start }
#tool .mi-selects { display: grid; gap: 6px; align-content: start }
#tool .mi-selects select { max-width: none; width: 100%; padding: 5px 8px; font-size: 12.5px }
#tool .mi-selects .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
#tool .mi-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  text-align: justify;
  line-height: 1.9;
  margin: 26px 0 0
}

/* ===== pool table foot: reporting year slider and the surplus figure ===== */
#tool .pool-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 12px 0 14px;
  border-top: 1px solid var(--rule2)
}
#tool .slider-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 34px;
  font-size: 12.5px
}
#tool .slider-row label { color: #41506f; display: flex; align-items: center; white-space: nowrap }
/* A row is a grid, not a flex pair pushed to opposite edges: the label column
   and the value column are the same width in every row, so labels and values
   line up down the page however wide the column they sit in. No rule between
   rows: the uniform height carries the alignment. */
#tool .kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 0;
  font-size: 12.5px
}
#tool .kv .v { text-align: right }
#tool .kv .k { color: #41506f; display: flex; align-items: center }
#tool .kv .v { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 500 }

/* ===== tables ===== */
#tool table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  background: #fff
}
/* rows are separated by a rule ABOVE each row, never below: hidden rows and
   group breaks then never leave two rules touching */
#tool th, #tool td { text-align: right; padding: 5px 6px; border-top: 1px solid var(--rule2-soft) }
#tool th.l, #tool td.l { text-align: left }
#tool thead th {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: 11.5px;
  padding-bottom: 8px;
  border-top: 0;
  border-bottom: 1px solid var(--rule2);
  white-space: nowrap;
  vertical-align: bottom
}
#tool thead tr.unit th { font-weight: 400; padding-top: 0; padding-bottom: 6px }
#tool thead tr:first-child:not(:only-child) th { border-bottom: 0; padding-bottom: 0 }
#tool tbody tr:first-child td { border-top: 0 }
#tool tr.tot td, #tool tr.tot th { border-top: 1px solid var(--rule2); font-weight: 600; color: var(--navy); text-align: right }
#tool tr.tot td.l, #tool tr.tot th.l { text-align: left }
#tool td.muted { color: var(--grey) }
#tool td.name { color: var(--ink-soft); white-space: nowrap }

/* the pool table is the panel: no double border */
#tool .pooltab { border: 0 }
#tool .pooltab thead th { padding-top: 12px }
#tool .pooltab td, #tool .pooltab th { padding-left: 6px; padding-right: 6px; white-space: nowrap }
#tool td.share .rng { display: inline-flex; align-items: center; gap: 6px }
#tool td.share input[type=range] { width: 54px }
#tool td.share .rng-val { min-width: 30px; text-align: right; display: inline-block }

/* fuel parameters: a stronger rule where the class changes */
#tool .fueltab td, #tool .fueltab th { white-space: nowrap }
#tool .fueltab tr.grp td { border-top: 1px solid var(--rule2) }
#tool .fueltab td.l, #tool .fueltab th.l { color: var(--ink-soft) }
#tool .fueltab input[type=number] { width: 64px }


/* yearly penalties */
#tool .yeartab td, #tool .yeartab th { white-space: nowrap }
#tool .yeartab td.l { color: var(--ink-soft) }

/* input parameters */
#tool .inputtab td, #tool .inputtab th { white-space: nowrap }
#tool .inputtab input[type=text] { width: 130px }

/* ===== inputs inside table cells ===== */
#tool input[type=number], #tool input[type=text], #tool select {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule2);
  border-radius: 0;
  padding: 3px 5px
}
#tool input[type=number] { width: 64px; text-align: right; -moz-appearance: textfield; appearance: textfield }
#tool input[type=number]::-webkit-inner-spin-button, #tool input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
#tool select { min-width: 0; max-width: 104px; text-align: left; cursor: pointer }
#tool input:focus, #tool select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }
/* a derived cell (a blend, E minus Cf/LCV, 28.4 minus TtW) shows in the soft ink until typed over */
#tool input.derived { color: var(--ink-muted) }

/* 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 */
#tool .ii {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  /* Round, one of the deliberate exceptions to the square-corner rule: a
     squared marker reads as a tiny button rather than as the "there is more
     here" dot it is. */
  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 .grid2, #tool .grid2.viz, #tool .pool-foot { grid-template-columns: 1fr }
}

@media print {
  #tool .dz-right, #tool .acc-toggle { display: none }
  #tool .acc.closed .acc-body { display: block }
  #tool .panel, #tool .acc { break-inside: avoid }
}