/* ============================================================
   Fleet Compliance Cost Calculator
   ------------------------------------------------------------
   The Decarbonizer's design language, written once rather than
   inherited through override blocks: every rule below is the
   LIVE value measured from the sandbox stylesheet, not the
   superseded one further up that file.

   Notably: the header is WHITE with a navy wordmark and an
   inset rule drawn by ::after (a border-bottom would span the
   whole 1180px border box and sit 26px proud of the content
   column at each end).
   ============================================================ */

:root {
  --navy: #0A1543;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --sel-row: #f0f1f3;
  --paper-warm: #f4f5f8;
  --bg: #fff;

  /* Row rules should be almost invisible; band seams have to carry.
     Two tokens on purpose. */
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  --rule-band: rgba(10, 21, 67, .38);

  /* The five cost lines, in CALCULATIONS row order. MODEL_PARAMETERS
     C7:C10 carries the workbook's own colours. */
  --c-fuel: #AFACAC;
  --c-euets: #c00000;
  --c-ukets: #8a3a3a;
  --c-fueleu: #0A1543;
  --c-imo: #5091CD;

  /* Air above every subsection body, so a subsection is not lopsided:
       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;
  --band-gap: 31px;
  --param-w: 218px;
  --spd-fs: 12.5px;

  /* The ship table shows eighteen rows and then scrolls. Expressed as a
     height because the box scrolls: retune the row height and the box
     follows, so the count cannot drift away from the intent. */
  --ship-row: 31px;

  /* Free tier. One padlock, used by the Premium marker and anything else that
     has to carry a lock. */
  --fr-lock-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V7z"/></svg>');
  --ship-rows: calc(18 * var(--ship-row) + 34px);
}

* { 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: 600; margin: 0 }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px }
.hidden { display: none !important }

a { color: var(--navy); text-decoration: none }

/* Copy is italic and justified. */
p, .note, figcaption { font-style: italic; text-align: justify }

/* ------------------------------------------------------------ header */

.dz-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  position: relative;
  background: #fff;
  color: var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
  box-shadow: none;
}

/* The rule is inset to the gutter. A border-bottom on the header spans the
   whole border box, 26px proud of the content column at each end. */
.dz-header::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  border-bottom: 1px solid var(--rule-band);
}

.dz-left { grid-column: 1 / span 3; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0 }
.dz-right { grid-column: 4; display: flex; align-items: center; gap: 10px; min-width: 0 }
.dz-right > * { flex: 1 1 auto; min-width: 0 }

.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 }

.dz-info {
  width: 18px; height: 18px; margin-left: 8px; padding: 0;
  border: 1px solid var(--navy); border-radius: 50%;
  background: #fff; color: var(--navy);
  font-family: inherit; font-size: 11px; font-style: italic; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex: none;
}
.dz-info.active { background: var(--navy); color: #fff }

.dz-btn2 {
  background: transparent; color: var(--navy);
  border: 1px solid var(--rule2); border-radius: 0;
  padding: 8px 14px; font-family: 'Poppins', sans-serif;
  font-size: .82rem; font-weight: 500; cursor: pointer; width: 100%;
}
.dz-btn2:hover { border-color: var(--navy); background: rgba(10, 21, 67, .04) }
.dz-btn2[disabled] { opacity: .45; cursor: not-allowed }
.dz-btn2[disabled]:hover { border-color: var(--rule2); background: transparent }

.dz-save {
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 0;
  padding: 8px 14px; font-family: 'Poppins', sans-serif;
  font-size: .82rem; font-weight: 500; cursor: pointer; width: 100%;
}
.dz-save:hover { background: #16224f }
.dz-save[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none }

/* --------------------------------------------------------- save case menu */

.dz-dd { position: relative; width: 100% }
.dz-dd .dz-save { width: 100% }
.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: 30; overflow: hidden;
}
.dz-menu a {
  display: block; padding: 10px 14px; font-size: .85rem;
  color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--rule2-soft);
}
.dz-menu a:last-child { border-bottom: 0 }
.dz-menu a:hover { background: var(--paper-warm); color: var(--navy) }
.dz-menu a.menu-off { opacity: .4; cursor: not-allowed; pointer-events: none }

/* The landing carries the header stripped: the methodology icon, Save case and
   Reset only mean anything once a fleet is picked. */
#siteHeader.pre-select .dz-info,
#siteHeader.pre-select .dz-dd,
#siteHeader.pre-select #resetShips { display: none }

/* ------------------------------------------------------------ buttons */

.btn {
  background: var(--navy); color: #fff; border: 0; border-radius: 0;
  padding: 12px 22px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: #16224f }
.btn[disabled] { background: var(--paper-warm); color: var(--ink-muted); border: 1px solid var(--rule2-soft); cursor: not-allowed }
.btn.btn2 { background: #fff; color: var(--navy); border: 1px solid var(--rule2) }
.btn.btn2:hover { background: var(--paper-warm) }
.btn.btn2[disabled] { background: var(--paper-warm); color: var(--ink-muted) }

/* ------------------------------------------------------------ fields */

input[type=text], input[type=number], select {
  width: 100%; font-family: inherit; font-size: 13px; padding: 7px 8px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 0;
}
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: 1px solid var(--navy); border-color: var(--navy) }

/* Out of range is marked while the reader is still typing. */
input.oor, input.oor:focus { border-color: var(--c-euets); outline-color: var(--c-euets) }

.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 }

/* ------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; background: #fff }
th, td { text-align: right; padding: 6px 9px }
th:first-child, td:first-child { text-align: left }
thead th {
  background: transparent; color: var(--ink-muted);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2);
}
td { border-bottom: 1px solid var(--rule2-soft) }
tbody tr:last-child td { border-bottom: none }
tr.tot td { background: transparent; border-top: 1px solid var(--navy); font-weight: 600 }
tr.sel td { background: var(--sel-row); color: var(--navy); font-weight: 600 }
th.num, td.num { text-align: right }
td.ck, th.ck { text-align: center; width: 34px }

/* Wide tables scroll inside their own box rather than the page. */
.xscroll { overflow-x: auto }

/* ------------------------------------------------------------ grids */

/* minmax(0,1fr), never a bare 1fr: a wide child cannot blow the column out. */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch }
.grid2 > * { min-width: 0 }

.kv {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 16px;
  gap: 10px; min-height: 34px; padding: 6px 0; align-items: center;
}
.kv > .k { grid-column: 1; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px }
.kv > :not(.k):not(.ii) { grid-column: 2 }
.kv > .ii { grid-column: 3; margin-left: 0; justify-self: end }
.kv .v { font-weight: 500; text-align: right }

.selrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-bottom: 14px; font-size: 12.5px }
.selrow > * { position: relative }
/* A cell of the row fills its column. This used to be a 22px + 1fr grid, for a
   tooltip marker sitting to the left of a selector - markup that moved into
   .fp-params and no longer exists anywhere. The rule stayed behind, and a lone
   <select> auto-placed into the 22px column, which collapsed every selector in
   the tool to a chevron. Deleting a control means deleting its rule in the same
   pass. */
.selrow > span { display: block }
.selrow select { width: 100% }

.band { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 0 10px }

.note {
  font-size: 11px; color: var(--ink-muted); font-style: italic;
  margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; white-space: pre-line;
}

.subtxt { font-size: 12.5px; color: var(--ink-soft) }

/* The first band sits a full seam gap below the header rule, so the summary
   does not crowd the wordmark. */
.intro { margin-top: var(--band-gap) }

/* The row variant carries a third column for the tooltip marker. */
.spd-row-t { grid-template-columns: minmax(0, 1fr) var(--param-w) 22px }


.chartbox { position: relative; height: 300px; contain: layout }
/* A chart pulled into the gutter lines its plot area up with the column edge
   rather than with the axis labels. */
.chartbox.chart-gutter { margin-left: -26px; width: calc(100% + 26px) }
.chartbox.sm { height: 210px }

/* ------------------------------------------------------- tooltip marker */

/* Square corners everywhere, with five deliberate exceptions. This is one:
   a squared-off marker reads as a tiny button rather than as the "there is
   more here" dot it is. */
.ii {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--rule2); background: #fff; color: var(--ink-muted);
  font-size: 10px; font-style: italic; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; flex: none; user-select: none; position: relative;
}

#tip {
  position: fixed; z-index: 90; max-width: 340px;
  background: var(--navy); color: #fff; font-size: 11.5px; font-style: normal;
  line-height: 1.5; padding: 9px 11px; pointer-events: none;
  opacity: 0; transition: opacity .12s; text-align: left; white-space: pre-line;
}
#tip.on { opacity: 1 }

/* ---------------------------------------------------------- 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; border-radius: 0; background: #fff; margin-bottom: 30px }
.acc.closed { margin-bottom: 8px }   /* closed ones read as a list */

.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; cursor: pointer; user-select: none;
}
.acc-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }
.acc-head-r { display: flex; align-items: center; gap: 16px }

.acc-toggle { display: flex; gap: 6px }
.acc-toggle button {
  width: 42px; height: 26px; border-radius: 999px;
  border: 1px solid var(--rule2); background: #fff; color: var(--ink-muted);
  font-size: 10px; cursor: pointer; font-family: inherit;
}
.acc-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy) }

.acc-body { border-top: 0; overflow: visible; padding: var(--sub-top) 0 20px }
.acc.closed .acc-body { display: none }

/* ---------------------------------------------------------- More info

   Copied from the sandbox rule for rule, not written to resemble it.

   The marker is an ANCHOR, drawn as a mask over currentColor so it takes the
   label's own muted tone, and it turns through half a circle when the box
   opens. The half turn is the cue; it lands the right way up for the closed
   state on the way back. The spring in the easing is deliberate - a linear
   turn reads as a spinner rather than as a thing being weighed. */

.acc-moreinfo {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--ink-muted); font-size: .72rem; user-select: none; font-style: normal;
}
/* The checkbox that drives this bar is hidden further down the file, AFTER the
   global input[type=checkbox] rule. See the note there. */
.acc-moreinfo span::after {
  content: ""; display: inline-block; position: relative;
  width: 13px; height: 13px; margin-left: 9px; vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  transform-origin: 50% 55%;
  transition: transform .28s cubic-bezier(.34, 1.4, .5, 1), opacity .2s ease;
}
.showinfo .acc-moreinfo span::after { transform: rotate(180deg) }

/* Inside the frame both are the same bar - the frame centres it. These only
   carry what they are worth outside one. */
.acc-moreinfo-body { display: flex; justify-content: center; margin: 16px 0 2px; width: 100% }
.intro-mi { margin: 14px 0 0; width: 100%; clear: both }

.mi-box { border: 1px solid var(--rule2); margin-top: 14px }

/* The bar, measured off the sandbox rather than described from it:
     box 40px tall           -> .72rem text at line-height 1.55 plus 10px
                                top and bottom, inside a 1px border
     border rgb(225,227,232) -> var(--rule2) over white, exactly
     fill  rgb(254,254,255)  -> a hair of blue, not the page white beside it
     text  rgb(10,21,67)     -> var(--navy). NOT the muted grey the rest of
                                the small print uses: the bar is a control, and
                                it reads as one because it is the page colour.
     anchor rgb(10,21,67)    -> the same navy, because the mask is drawn over
                                currentColor and inherits it. */
.mi-box > .acc-moreinfo {
  margin: 0;
  border: none;
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  color: var(--navy);
  background: #fefeff;
}
.showinfo .mi-box > .acc-moreinfo { border-bottom: 1px solid var(--rule2) }

.mi-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px;
  align-items: start; padding: 18px;
}
.mi-grid.mi-solo { grid-template-columns: 1fr }
.mi-grid.mi-solo > .mi-aside { display: none }
.mi-text > * + * { margin-top: 10px }

:not(.showinfo) > .mi-box > .mi-grid {
  max-height: 0; opacity: 0; visibility: hidden;
  padding-top: 0; padding-bottom: 0; overflow: hidden;
}

.mi-box .intro-desc, .mi-box .note {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-muted);
  font-style: italic; text-align: justify; hyphens: auto;
  margin: 0; border-top: 0; padding-top: 0; white-space: normal;
}

/* Out of the frame it is a plain block; the frame does the revealing. */
.intro-desc { margin: 0 }

/* ------------------------------------------------------------- landing */

/* Four columns. The drawing spans 1-2, the picker sits in 3, the buttons
   in 4. The column edges are a grid, never drawn. */
.land-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; padding: 34px 0 26px }
.land-art { grid-column: 1 / span 2; min-width: 0 }
.land-pick { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.land-act { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.land-act .btn { padding: 7px 8px; line-height: 1.55 }


.land-seam { border-top: 1px solid var(--rule-band); margin: 0 0 var(--band-gap) }
.land-foot-rule { border-top: 1px solid var(--rule-band); margin-top: 0 }

.land-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px }
.land-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }

.shipscroll-wrap { position: relative }
.shipscroll { max-height: var(--ship-rows); overflow: auto }
.shiptable thead th {
  position: sticky; top: 0; z-index: 3; background: #fff;
  color: #000; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
.shiptable tbody td { height: var(--ship-row); padding: 0 9px; white-space: nowrap }
.shiptable tbody tr.sel td { background: var(--sel-row) }
.shiptable tbody tr { cursor: pointer }
.shiptable tfoot td { border-bottom: 0; border-top: 1px solid var(--rule2); color: var(--ink-muted); font-size: 11px }
.shiptable .srt { color: var(--grey); font-size: 9px; margin-left: 4px }
.shiptable tr.full td:not(.ck) { opacity: .45 }
.shiptable tr.full input[type=checkbox] { opacity: .3 }

/* Landing selection is a checkbox, not a radio: this is a fleet tool and the
   reader picks several. Radios are for the single-ship tools. */
input[type=checkbox] { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer }

/* The More info checkbox is NOT the control - the whole bar is. It stays in the
   document for the keyboard and for the change event, at zero size.

   It sits HERE, after the rule above, rather than up with the rest of the More
   info block. CSS is last-wins at equal specificity, and a box hidden 100 lines
   earlier is a box the rule above puts straight back at 14px in the middle of
   the bar. Higher specificity would settle it in a browser, but ordering
   settles it everywhere - and it is the ordering, not the specificity, that
   this file has caught out before. */
.acc-moreinfo input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  position: absolute; width: 0; height: 0; opacity: 0;
  border: 0; margin: 0; padding: 0; pointer-events: none;
}

.land-note { text-align: justify }
.land-count { font-style: normal }

/* ------------------------------------------------------------ summary */

.sum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
.sumtab td.ck { width: 34px }
.sumtab td.lab { text-align: left }
.sum-ctl { margin-top: 18px }
.sum-ctl .kv { border-bottom: 0 }

.legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; font-size: 11px; color: var(--ink-muted); font-style: normal }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.legend i { width: 10px; height: 10px; display: inline-block }

/* --------------------------------------------------------- input rows

   The Decarbonizer's parameter row: label, field, tooltip, on one grid so the
   rows of both columns line up horizontally, dividing lines included. The unit
   sits INSIDE the field and fades on focus, so a row is a label and one box
   rather than a label, a box and a stray word. */

.spd-row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--param-w) 22px;
  gap: 14px; align-items: center; min-height: 42px;
}
.spd-row label { font-size: var(--spd-fs); color: #000 }

.spd-un { position: relative; display: block; width: 100% }
.spd-un input {
  width: 100%; height: 30px; box-sizing: border-box;
  text-align: left; padding-left: 8px; padding-right: 84px !important;
  font-size: var(--spd-fs);
}
.spd-un > input:only-child { padding-right: 8px !important }
.spd-un .u {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: var(--spd-fs); font-weight: 400; font-style: normal; color: #000;
  opacity: 1; pointer-events: none; transition: opacity .12s;
}
.spd-un input:focus + .u { opacity: 0 }
.spd-un input:disabled { color: #8a93a8; background: #f6f7f9 }

/* A select in a parameter row takes the whole value column, like a field. */
.spd-in { display: flex; align-items: center; gap: 8px; width: 100% }
.spd-in select { width: 100%; height: 30px; font-size: var(--spd-fs); color: #000; padding: 0 8px }


.spd-row > .ii { justify-self: start; align-self: center }

/* ------------------------------------------------------- fleet tables */

/* A value the reader can type over carries a dashed rule under it rather than
   a box, so an editable table still reads as a table and the cell still reads
   as a control.

   The rule is drawn with BORDER-BOTTOM, not text-decoration. The sandbox
   writes `text-decoration: underline dashed`, and Blink and WebKit do not
   paint a text decoration on the inner text of a form control - it renders in
   Firefox and nowhere else - so on Chrome the cells came out as flat text with
   no sign they could be edited. A dashed border renders in every engine and is
   the same mark.

   Written as input.cellin, not .cellin: a bare class is (0,1,0) and the
   `input[type=text]` rule at the top of this file is (0,1,1), so the plain
   form LOSES on specificity wherever it sits. Element plus class ties that
   rule and wins on order. */
input.cellin {
  width: 100%; height: 26px; box-sizing: border-box;
  border: 0; border-bottom: 1px dashed var(--rule2); border-radius: 0;
  background: transparent; text-align: right; padding: 0 2px;
  font-family: inherit; font-size: var(--spd-fs); color: #000;
  transition: border-color .15s, background .15s;
}
input.cellin:hover { border-bottom-color: var(--grey); background: var(--soft) }
input.cellin:focus {
  outline: 0; border: 0; border-bottom: 1px solid var(--navy); background: #fff;
}
input.cellin.oor {
  outline: 0; color: var(--c-euets);
  border: 0; border-bottom: 1px solid var(--c-euets);
}

/* An editable figure inside a figure table: the same mark, right aligned so it
   sits under the digits rather than under the whole cell. */
.fueltab input.fuelp-inp { text-align: right }
.cellsel {
  width: 100%; border: 0; border-bottom: 1px dashed var(--rule2); background: transparent;
  font-family: inherit; font-size: var(--spd-fs); color: #000; padding: 2px 0; border-radius: 0;
}
.cellsel:focus { outline: 0; border-bottom-color: var(--navy) }

.fueltab td, .regtab td, .shipstab td { height: 32px }
.fueltab th, .regtab th, .shipstab th { white-space: nowrap }

.regtab td.ck { width: 30px; text-align: center }
.regtab td.reg-val { text-align: right; white-space: nowrap }

/* ------------------------------------------------- fuel properties band

   Three parameters on ONE grid row above the table, closed by a rule. Copied
   from the sandbox: a three-column grid, the rows themselves full width inside
   their column, and a label that never wraps - a Framework label breaking onto
   two lines drags its own row taller than the two beside it. */

.fp-params {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 40px; align-items: center;
}
.fp-params > .fp-param { width: 100%; margin-left: 0; cursor: help }
.fp-params > .fp-param > label { cursor: help; white-space: nowrap }
.fp-rule { border-top: 1px solid var(--line); margin: 26px 0 }

/* Fuel properties: the name over the unit, two header rows, so the headers
   stay plain and the units ride with the numbers. */
.fueltab.capextab { table-layout: fixed; width: 100% }
.fueltab .fp-fuel, .fueltab th.fp-fuel { text-align: left; white-space: nowrap }
.fueltab .fp-cls, .fueltab th.fp-cls { text-align: left; color: #41506f; white-space: nowrap }
.fueltab td.fp-fuel { font-weight: 500 }
.fueltab thead tr:first-child th { border-bottom: 0; padding-bottom: 0 }
.fueltab thead tr:last-child th.th-u {
  font-weight: 400; color: #41506f; font-size: 9.5px; line-height: 1.2;
  height: 20px; padding-top: 0; white-space: normal; overflow-wrap: anywhere;
}
.fueltab thead th { vertical-align: bottom }

.calctab { font-size: 11px }
.calctab th { white-space: nowrap }
.calctab td { white-space: nowrap; height: 26px }
.calctab td:first-child, .calctab td:nth-child(2), .calctab td:nth-child(3) { text-align: left }
.calctab thead th { position: sticky; top: 0; background: #fff; z-index: 2 }
.calctab tr.grp td { font-weight: 600; color: var(--navy) }

/* --------------------------------------------------------------- prices

   Base price is a field; indexation is a SLIDER. A trend is a thing you sweep,
   and a slider says at a glance which way a price is going and how hard. */

.pricetab td.price-name, .pricetab th.price-name { text-align: left; white-space: nowrap }
.pricetab th.price-basecell { text-align: right }
.pricetab td.price-basecell { width: 132px }
.pricetab .price-field { width: 118px; margin-left: auto }
.pricetab .price-base {
  width: 100%; height: 30px; box-sizing: border-box; text-align: right;
  padding: 4px 34px 4px 8px !important; font-size: 12px;
  border: 1px solid #dfe3ea; border-radius: 0; background: #fff;
  font-family: inherit; color: var(--navy); transition: border-color .15s;
}
.pricetab .price-base:focus { outline: 0; border-color: var(--navy) }
.pricetab .price-base.oor { border-color: var(--c-euets); color: var(--c-euets) }
.pricetab .price-field .u { right: 9px }

.pricetab td.price-trend, .pricetab th.price-trend {
  text-align: left; white-space: nowrap; width: 190px;
}
.pricetab .price-trend input.price-rng { width: 120px; vertical-align: middle; margin: 0 }
.pricetab .rng-val {
  display: inline-block; min-width: 42px; margin-left: 8px;
  font-size: var(--spd-fs); color: #000; font-variant-numeric: tabular-nums;
}

/* The thumb is round on purpose: one of the five exceptions to square corners. */
input[type=range] {
  appearance: none; -webkit-appearance: none;
  height: 18px; background: transparent; cursor: pointer; accent-color: var(--navy);
}
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #e2e5ec }
input[type=range]::-moz-range-track { height: 4px; background: #e2e5ec }
input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--navy);
  border: 0; margin-top: -5px;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 0;
}
input[type=range]:focus { outline: none }
input[type=range]:focus-visible { outline: 1px solid var(--navy) }

/* ----------------------------------------------------- methodology panel

   Its own view, reached from the header icon. Same 1180px column as the tool,
   so stepping into it does not move the page under the reader. */

#methodPanel { padding-top: var(--band-gap) }
.mp { max-width: none }
/* A structural seam with nothing on it: the rule IS the element. */
.foldrule { position: relative; height: 0; border-top: 1px solid var(--rule-band); margin: var(--band-gap) 0 }
.mp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 18px;
}
#methodPanel h3 { font-weight: 600; color: var(--navy); margin: 18px 0 6px; font-size: 1rem }
#methodPanel p {
  color: var(--ink-soft); font-size: 13px; line-height: 1.75;
  margin: 0 0 10px; text-align: justify; hyphens: auto;
}
.mp-seam { border-top: 1px solid var(--rule-band); height: 0; margin: 34px 0 26px }

/* ------------------------------------------------------------ helpers */

.dash { color: var(--grey) }
.right { text-align: right }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--navy); color: #fff; font-size: 12px; font-style: normal;
  padding: 10px 16px; z-index: 95; opacity: 0; transition: opacity .16s; pointer-events: none;
}
.toast.on { opacity: 1 }

@media (max-width: 860px) {
  .dz-header { grid-template-columns: 1fr; gap: 10px }
  .dz-left, .dz-right { grid-column: 1 }
  .grid2, .sum-grid, .selrow { grid-template-columns: minmax(0, 1fr) }
  .land-top { grid-template-columns: minmax(0, 1fr) }
  .land-art { grid-column: 1 }
}

/* ============================================================ free tier

   One consistent treatment for everything gated. Greyed, locked, never hidden
   and never removed from the layout: a reader who cannot see that a feature
   exists cannot want it.

   pointer-events stays AUTO on a locked control. A disabled input takes no
   hover, and a lock with no tooltip is a control that simply looks broken. */

.fr-lock { opacity: .5; cursor: not-allowed; pointer-events: auto }
/* A greyed range still drags until it is disabled, and a disabled one still
   reads as draggable until it is greyed. Both, or neither works. */
input.fr-lock[type=range] { filter: grayscale(1) }

.fr-pm {
  font-style: normal; font-size: .72em; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted); opacity: .75;
}
.fr-pm::before {
  content: ""; display: inline-block;
  width: .9em; height: .9em; vertical-align: -1px;
  background: currentColor; opacity: .65;
  -webkit-mask: var(--fr-lock-ico) center / contain no-repeat;
  mask: var(--fr-lock-ico) center / contain no-repeat;
}

/* A gated row carrying real figures cannot be dimmed as hard as one that says
   "Premium": it still has to be readable, because reading it is the point. */
tr.fr-row td { opacity: .62 }
tr.fr-row { cursor: not-allowed }
tr.fr-row:hover td { background: transparent }

.fr-note {
  margin: 8px 0 0; padding: 8px 10px;
  font-size: 12px; line-height: 1.45; color: var(--navy);
  background: var(--soft); border-left: 3px solid var(--navy);
}

.fr-snap { font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); margin-top: 6px }


/* ------------------------------------------------------- the address box

   Outside #tool so it overlays whatever is on screen. One box for all three
   output routes; the title, the label and the button change, and the consent
   line and the note appear on the email route alone. */

.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;
}
input.rpt-inp {
  width: 100%; height: auto; font-family: inherit; font-size: 13px;
  color: var(--navy); background: #fff;
  border: 1px solid var(--rule2); border-radius: 0; padding: 9px 11px;
}
input.rpt-inp:focus { outline: 0; border-color: var(--navy) }
.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: var(--c-euets); color: var(--c-euets) }
.rpt-act { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px }
.rpt-act .btn { padding: 9px 18px }