/* EU ETS Quickscan. 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. Only the rules this page uses are carried over. */

:root {
  --navy: #0A1543;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --sel-row: #f0f1f3;
  --soft: #f6f7fa;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  /* Row rules are almost invisible; the header rule and the band seams have
     to carry. Kept as separate tokens for that reason. */
  --rule-band: rgba(10, 21, 67, .38);
  /* Air above every subsection body. One token, so no section can drift. */
  --sub-top: 50px;
  --fuel: #AFACAC;          /* MODEL_PARAMETERS "Fuel 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 }
.xscroll { overflow-x: auto }
#tool { font-family: 'Poppins', sans-serif; color: var(--ink); padding-bottom: 40px }

/* ===== header: white, navy wordmark, one hairline band rule ===== */
#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,
   which would span the whole border box. left/right are 0 here, NOT the
   sandbox's 26px: there the header carries its own max-width and gutter and
   sits outside any wrapper, while this header is inside .wrap, which already
   holds the 26px. Copying the number would inset the rule twice. */
#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 }

/* Save case. Navy rather than the sandbox's copper, which is the Decarbonizer's
   own accent and is not a token this tool carries: the sibling quickscans use
   navy for the same control. */
#tool .dz-right { display: flex; align-items: center; gap: 10px }
#tool .dz-dd { position: relative }
#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
}
#tool .dz-save:hover { background: #16224f }
#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: 200px;
  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)
}
#tool .dz-menu a:last-child { border-bottom: 0 }
#tool .dz-menu a:hover { background: var(--soft); color: var(--navy) }
.hidden { display: none !important }

/* ===== panels and accordions (the Decarbonizer .acc anatomy) =====
   De-boxed. No frame, no panel fill, no rule under the head bar: a subsection
   is a bare label plus its toggle pills, with the content flowing on the page.
   Spacing does the separating. */
#tool .panel,
#tool .acc {
  border: 0;
  background: #fff;
  margin-bottom: 30px
}
#tool .panel { padding: 0 }

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

/* With no frame, the label and content sit flush with the page edge rather
   than inset inside a box that is no longer drawn. */
#tool .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  cursor: pointer;
  user-select: none
}
#tool .acc-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }
#tool .acc-toggle { display: flex; gap: 6px }
/* Pills: a deliberate exception to the square-corner house rule, like the
   round slider thumbs and the tooltip markers. Elongated, wider than tall. */
#tool .acc-toggle button {
  width: 42px;
  height: 26px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  color: var(--navy);
  font-size: 10px;
  font-family: inherit;
  border-radius: 999px;
  padding: 0
}
#tool .acc-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy) }
/* Content starts --sub-top below the header, from one token, so no
   subsection can drift from the others. */
#tool .acc-body { border-top: 0; overflow: visible; padding: var(--sub-top) 0 20px }
#tool .acc.closed .acc-body { display: none }

/* ===== summary grid ===== */
/* minmax(0, 1fr) rather than a bare 1fr: a bare 1fr has an auto minimum, so
   a wide table or a long label blows the column out. */
#tool .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
#tool .grid2.viz { grid-template-columns: minmax(0, 1fr) 440px }
#tool .chartbox { position: relative; height: 240px }
#tool .ctrl { padding-top: 6px }

#tool .slider-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 96px;
  gap: 14px;
  align-items: center;
  min-height: 34px;
  margin-bottom: 8px;
  font-size: 12.5px
}
#tool .slider-row label { color: #41506f; display: flex; align-items: center }
#tool .slider-row .rng-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 500; white-space: nowrap }

/* reporting-year figures under the sliders */
#tool .sumtab { margin-top: 10px; border: 0 }
#tool .sumtab th, #tool .sumtab td { text-align: center }
#tool .sumtab td { font-weight: 600; color: var(--navy); font-size: 13px; padding-top: 9px }

/* ===== tables ===== */
#tool table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.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: 6px 9px; border-top: 1px solid var(--rule2-soft) }
#tool th.l, #tool td.l { text-align: left }
#tool th.c, #tool td.c { text-align: center }
#tool thead th {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: 12.5px;
  padding-bottom: 8px;
  border-top: 0;
  border-bottom: 1px solid var(--rule2);
  white-space: nowrap;
  vertical-align: bottom
}
#tool tbody tr:first-child td { border-top: 0 }
#tool tr.tot td { border-top: 1px solid var(--rule2); font-weight: 600; color: var(--navy) }

/* No frame anywhere, so the fleet table needs no inset either: its cells sit
   on the same left edge as every other block. */
#tool .fleettab { border: 0 }
#tool .fleettab td, #tool .fleettab th { padding-left: 0; padding-right: 18px; white-space: nowrap }
#tool .fleettab td:last-child, #tool .fleettab th:last-child { padding-right: 0 }
/* A ship past the fleet size is hidden wherever it is listed. Scoped to the
   fleet table this only hid it there, so the yearly overview went on showing
   all ten rows while the fleet showed the chosen number. */
#tool tr.off { display: none }

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

/* yearly overview */
#tool .yeartab td.c, #tool .yeartab th.c { text-align: center }
#tool .yeartab td.no { color: var(--grey) }

/* ===== inputs inside table cells ===== */
#tool input[type=number], #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: 4px 8px
}
#tool input[type=number] { width: 86px; 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 { width: 100%; min-width: 118px; text-align: left; cursor: pointer }
#tool .fleettab select { width: 100% }
#tool td.sel { min-width: 130px }
#tool td.sel.gt { min-width: 110px }
#tool input:focus, #tool select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }
/* A figure outside its bounds while it is still being typed. Cleared when the
   field is left, which is when it is clamped. */
#tool input.oor, #tool input.oor:focus { outline: 1px solid #b3261e; border-color: #b3261e }
/* a derived cell (2x LNG, a blend, a MAX) shows in the soft ink until typed over */
#tool input.derived { color: var(--ink-muted) }

/* checkboxes: square, navy only when checked */
#tool input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--grey);
  background: #fff;
  border-radius: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  margin: 0;
  vertical-align: middle
}
#tool input[type=checkbox]:checked { background: var(--navy); border-color: var(--navy) }
#tool input[type=checkbox]:checked::after {
  content: '';
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg)
}

/* 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 }
#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 markers are round. Squared off by the blanket square-corner rule
   they read as tiny buttons rather than as the "there is more here" dot they
   are. */
#tool .ii {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  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 { grid-template-columns: minmax(0, 1fr) }
  #tool .slider-row { grid-template-columns: 130px minmax(0, 1fr) 90px }
}

/* ===== email report modal =====
   One box for all three outputs, in the tool's own vocabulary: navy caption
   bar, hairline border, square corners. .hidden carries !important so it
   beats the flex here. */
.rpt-mask {
  position: fixed; inset: 0; background: rgba(10, 21, 67, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 60;
}
.rpt-box {
  background: #fff; border: 1px solid var(--rule2);
  box-shadow: 0 18px 48px rgba(10, 21, 67, .22); width: 100%; max-width: 440px;
}
.rpt-head {
  background: var(--navy); color: #fff; font-weight: 600; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px;
}
.rpt-body { padding: 16px }
.rpt-lab {
  display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500; margin-bottom: 6px;
}
.rpt-inp {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--navy);
  background: #fff; border: 1px solid var(--rule2); border-radius: 0; padding: 9px 11px;
}
.rpt-inp:focus { outline: 0; border-color: var(--navy) }
/* Empty until app.js writes to it, so the box does not jump when a message
   appears. */
.rpt-msg:empty { display: none }
.rpt-msg {
  margin-top: 12px; padding: 8px 10px; font-size: 12.5px; background: var(--soft);
  border-left: 3px solid var(--navy); color: var(--navy);
}
.rpt-msg.bad { border-left-color: #b3261e; color: #b3261e }
.rpt-act { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px }
/* The two buttons carry their own rules here rather than leaning on .dz-save
   and .dz-btn2: this tool scopes those to #tool, and the box sits outside it,
   so the classes alone would give Cancel the browser's default button. */
.rpt-act .dz-save {
  background: var(--navy); color: #fff; border: 0; padding: 9px 18px; border-radius: 0;
  font-family: 'Poppins', sans-serif; font-size: .85rem; font-weight: 500; cursor: pointer
}
.rpt-act .dz-save:hover { background: #16224f }
.rpt-act .dz-save[disabled] { opacity: .55; cursor: default }
.rpt-act .dz-btn2 {
  background: transparent; color: var(--navy); border: 1px solid var(--rule2);
  padding: 9px 18px; border-radius: 0;
  font-family: 'Poppins', sans-serif; font-size: .85rem; font-weight: 500; cursor: pointer
}
.rpt-act .dz-btn2:hover { border-color: var(--navy); background: rgba(10, 21, 67, .04) }