/* Fuel Cost Calculator styles.
   The Decarbonizer design language: Poppins, navy #0A1543, 1180px column,
   square corners, hairline panels, acc-head / acc-body accordions. */

/* 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. */
@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;
  --green: #5C7C3E;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --ets: #c00000;
  --sel-row: #f0f1f3;
  --bg: #fff;
  --paper-warm: #f4f5f8;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --rust: #c00000;
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  /* Structural seams: the header rule and the rule closing the control
     strip. Deliberately a separate token from --rule2, which draws table
     rows and panel borders. Those are fine faint; these have 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;
  /* cost line colours, shared with the charts (app.js LINECOL) */
  --c-fuel: #AFACAC;
  --c-ets: #C00000;
  --c-feu: #0A1543;
  --c-sur: #00544f;
  --c-imo: #5091CD;
}

* { box-sizing: border-box }

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

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

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

/* ===== header =====
   The Decarbonizer's header: white, navy wordmark, and a 3px navy rule inset to
   the gutters so it starts and ends level with the content column. */
.fcc-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  position: relative;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(10, 21, 67, .05);
}

/* The rule is drawn by ::after rather than as a border: a border spans the
   whole box and would sit 26px proud of the content at each end. */
.fcc-header::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  /* 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. */
  border-bottom: 1px solid var(--rule-band);
}

/* Wordmark and tool name sit on one baseline, the tool name second and
   unadorned. No mark before the wordmark, so it starts flush with the left
   edge of the content column below it. */
.fcc-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.fcc-mark {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--navy);
}
.fcc-product { font-size: .9rem; color: var(--ink-soft) }
.fcc-product strong { color: var(--navy); font-weight: 600 }
.fcc-right { display: flex; align-items: center; gap: 16px }

/* The Decarbonizer's primary header control, to the millimetre: filled
   navy, no border, 9px by 16px, .85rem at weight 500. It opens the menu
   rather than acting on its own, so the actions it holds can grow without
   the header growing with them. */
.fcc-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;
}
.fcc-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. */
.fcc-dd { position: relative }
.fcc-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;
}
.fcc-menu a {
  display: block;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--rule2-soft);
}
.fcc-menu a:last-child { border-bottom: 0 }
.fcc-menu a:hover { background: var(--paper-warm); color: var(--navy) }

/* ===== top charts ===== */
#top { padding-top: 22px }

.topgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.band {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.chartbox { position: relative; height: 240px }
.chartbox.tall { height: 300px }
.chartbox.wide { height: 320px }

/* ===== control strip ===== */
.ctrls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin: 26px 0 8px;
  padding-bottom: 33px;
  /* Closes the control strip in the same tone as the header rule above it,
     so the two seams read as one system. */
  border-bottom: 1px solid var(--rule-band);
}

.cklist { border: 0; background: #fff }
.ckrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.ckrow:hover { background: var(--paper-warm) }
.ckrow.off { color: var(--ink-muted) }

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;
}
input[type=checkbox].ck:checked { background: var(--navy); border-color: var(--navy) }
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);
}
input[type=checkbox].ck:focus-visible { outline: 1px solid var(--navy); outline-offset: 1px }

.slider-row {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr 52px;
  gap: 14px;
  align-items: center;
  min-height: 34px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.slider-row label { color: var(--ink-soft) }
.slider-row input[type=range] { width: 100%; accent-color: var(--navy) }

/* the value a slider is currently at, updated as it moves */
.rng-val {
  text-align: right;
  font-style: normal;
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* A row is a grid, not a flex pair pushed to opposite edges: the label
   column and the field column are the same width in every row, so labels
   and fields line up down the page however wide the column they sit in.
   The field track is fixed rather than fluid for the same reason. No rule
   between rows: the uniform height and the shared label column carry the
   alignment, and lines only add noise. */
.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 0;
  font-size: 12.5px;
}
.kv .k { color: var(--ink-soft) }
.kv.off .k { color: var(--grey) }
/* The field track above already sets the width, so the controls simply
   fill it and share both edges down the column. */
.kv input[type=text], .kv input[type=number] { width: 100%; text-align: right }
.kv select { width: 100%; text-align: right }
.kv .inp-unit { width: 100% }

input[type=text], input[type=number], select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #c8ccd4;
  background: #fff;
  color: var(--ink);
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
  transition: border-color .15s;
}
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 }
input:focus, select:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(10, 21, 67, .12) }
input[disabled], select[disabled] { background: var(--soft); color: var(--grey); cursor: not-allowed }

/* ===== accordions =====
   De-boxed: a subsection 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. */
.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 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Flush with the page edge, now that the frame it was inset inside is
     no longer drawn. */
  padding: 7px 0;
}
.acc-head h3 { font-size: 1.05rem; color: var(--navy) }
/* Hover deepens the label rather than fading it: a fade on the one thing
   you are pointing at reads as the control going away. */
.acc-head:hover h3 { opacity: 1; color: var(--navy) }

.acc-toggle { display: flex; gap: 6px }
.acc-toggle button {
  width: 42px;
  height: 26px;
  border: 1px solid var(--rule2);
  background: #fff;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 10px;
  /* One of the deliberate exceptions to the square-corner rule. */
  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 }
.acc.closed .acc-body { display: none }

.note {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
  /* Justified, like every other note in the Decarbonizer. */
  text-align: justify;
  white-space: pre-line;
}

/* ===== tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: #fff;
}
th, td { text-align: right; padding: 7px 9px; border-bottom: 0 }
th:first-child, td:first-child { text-align: left }
thead th {
  font-weight: 600;
  color: var(--ink-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule2);
  white-space: nowrap;
}
thead th.sub { font-weight: 400; border-bottom: 0; padding-top: 0; color: var(--grey) }
tbody tr:hover td { background: var(--paper-warm) }
tr.tot td { font-weight: 600; border-top: 1px solid var(--rule2); border-bottom: none }

/* units live inside the field and step aside while it is being edited */
.inp-unit { position: relative; display: inline-block; width: 100% }
.inp-unit .u {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 500;
  font-style: normal;
  color: var(--navy);
  opacity: .78;
  pointer-events: none;
  transition: opacity .12s;
}
.inp-unit input { padding-right: 46px !important }
.inp-unit input:focus + .u { opacity: 0 }

/* fuel input table: the fuel select and consumption are the editable cells */
.fueltab td select { width: 128px; font-size: 12.5px }
.fueltab td .cons { width: 100%; text-align: right; font-size: 12.5px }
.fueltab td .inp-unit { width: 108px }
.fueltab td .inp-unit input { padding-right: 32px !important }
.fueltab td .inp-unit .u { right: 7px; font-size: 11px }
/* a slot that only mirrors slot 1's energy is shown, not offered for editing */


/* non-numeric table columns read better centred between the numbers */
td.txt, th.txt { text-align: center }

/* ===== price list ===== */
.pricegrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: start;
}

.plist { border: 0 }
.plist-head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 92px minmax(88px, 1fr);
  gap: 10px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule2);
}
.plist-head span:nth-child(3) { text-align: right }
.plist-head span:nth-child(4) { text-align: center }

.prow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 92px minmax(88px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 3px 12px;
  font-size: 12.5px;
}
.prow:hover { background: var(--paper-warm) }
.prow.sep { border-top: 1px solid var(--rule2); margin-top: 8px; padding-top: 10px }
.prow .pval { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px }
.prow .pcur { font-size: 12px; color: var(--ink-muted) }
.prow input[type=text].pnum,
.prow input[type=number] {
  width: 100%;
  text-align: right;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid var(--rule2);
  font-size: 12.5px;
  background: transparent;
}
.prow input[type=text].pnum:focus,
.prow input[type=number]:focus { outline: 0; border-bottom-color: var(--navy) }
.prow input[type=range] { width: 100%; accent-color: var(--navy) }
.prow .pidx { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center }
.prow .pidx .rng-val { font-size: 11.5px; font-weight: 400 }
.prow .pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* forecast view: one row per source, scenario wording included */
.fctab { font-size: 12px }
.fctab td:nth-child(2) { text-align: left; white-space: normal; line-height: 1.4; padding-right: 14px }
.fctab td:nth-child(3) { text-align: left; white-space: normal }
.fctab .param { color: var(--ink-muted) }
.fctab td:nth-child(4), .fctab th:nth-child(4) { white-space: nowrap; width: 1%; padding-left: 16px }

/* costs per year: the chart and the figures it plots, side by side */
.year-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: start }
.yrtab { font-size: 11.5px }
.yrtab th, .yrtab td { padding: 6px 6px }

/* the fuel list beside the VLSFO eq. chart */
.fuelpick { border: 0; max-height: none }
.fuelpick .prow { grid-template-columns: 26px minmax(0, 1fr) }

.selrow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.selrow select { width: auto; min-width: 190px }
.selrow-top { margin: 0 0 14px }

.propctl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule2-soft);
}
/* The properties row inherits the .kv grid above; only the wider select
   for the longer price-view names is set here. Six identical declarations
   used to be repeated at this point, silently restating the block above. */
#s_pricemode { width: 232px }

/* the long regulatory units need the room the short ones do not */
.kv .inp-unit input { padding-right: 96px !important }
#priceCtl .inp-unit .u { font-size: 11px }

.chart-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 26px; align-items: start }
.chart-split .note { margin-top: 0; border-top: 0; padding-top: 0 }

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  margin-top: 10px;
  color: var(--ink-soft);
  justify-content: center;
}
.legend span { display: inline-flex; align-items: center; gap: 5px }
.legend i { width: 10px; height: 10px; display: inline-block; border-radius: 0 }

/* tooltip trigger, same face as the Decarbonizer's */
.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;
}

.foot { text-align: center; color: var(--ink-muted); font-size: 11px; padding: 30px 0 40px }

@media (max-width: 980px) {
  .topgrid, .ctrls, .pricegrid, .chart-split, .year-split { grid-template-columns: 1fr }
  .propctl { grid-template-columns: 1fr }
  .ctrls { gap: 22px }
}