/* ============================================================
   Voyage Cost Calculator - styles
   ------------------------------------------------------------
   The Decarbonizer's design language as it renders today, written
   once rather than as accumulated overrides: white header closed by
   the band rule, de-boxed accordions, square corners with five
   exceptions, tables carried by their row rules, no vertical rules.
   ============================================================ */

:root {
  --navy: #0A1543;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --grey: #aab2c2;
  --ets: #c00000;
  --moss: #5C7C3E;
  --sel-row: #f0f1f3;
  --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 band seams have to be seen,
     unlike the row rules above. One value to dial if they want more or
     less presence. */
  --rule-band: rgba(10, 21, 67, .38);
  /* The air above every subsection body, matched to the gap from a body's
     last row down to the next header (20 + 30 + 7 = 57 below, 7 + 50 = 57
     above), so a subsection is not lopsided. */
  --sub-top: 50px;
  --spd-fs: 12.5px;
  --param-w: 218px;
  /* The landing table shows eighteen rows and then scrolls. A height, not a
     row count, because the box scrolls: 18 rows plus the sticky header. */
  --ship-row: 31px;
  --ship-rows: calc(18 * var(--ship-row) + 34px);
}

* { 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: 500; margin: 0 }
a { color: var(--navy); text-decoration: none }
a:hover { text-decoration: underline }
.hidden { display: none !important }
.xscroll { overflow-x: auto }

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

/* ---------------------------------------------------------------- header */
/* White, brand left. The rule is drawn by ::after inset 26px at each end,
   not a border-bottom on the header: that spans the whole 1180px border box
   and sits proud of the content column. */
#siteHeader .dz-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
  background: #fff;
  color: var(--ink);
  border-bottom: 0;
}
#siteHeader .dz-header::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  border-bottom: 1px solid var(--rule-band);
}
#siteHeader .dz-left { grid-column: 1 / span 3; min-width: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
#siteHeader .dz-right { grid-column: 4; display: flex; align-items: center; gap: 10px; justify-content: flex-start; 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-save {
  background: var(--navy); color: #fff; border: 0; padding: 9px 16px; border-radius: 0;
  font-family: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.dz-save:hover { background: #16224f }
.dz-btn2 {
  background: transparent; color: var(--navy); border: 1px solid var(--rule2);
  padding: 9px 16px; font-family: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.dz-btn2:hover { border-color: var(--navy); background: rgba(10, 21, 67, .04) }
#siteHeader.pre-select #resetShip, #siteHeader.pre-select .dz-dd { display: none }
.dz-dd { position: relative }
.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;
}
.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); text-decoration: none }
/* Parked menu entries: visible, inert. */
.dz-menu a.menu-off { opacity: .4; cursor: not-allowed; pointer-events: none }

/* ---------------------------------------------------------------- inputs */
input[type=text], input[type=number], select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border: 1px solid var(--rule2);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
input:focus, select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }
input[type=range]:focus { outline: none }
input[type=range]:focus-visible { outline: 1px solid var(--navy) }
input.bad, select.bad { border-color: var(--ets); outline-color: var(--ets) }

.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; text-align: center;
}
.btn:hover { background: #16224f; text-decoration: none }
.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) }

/* Tooltip markers are round: squared off they read as a tiny button rather
   than as the "there is more here" dot they are. */
.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); cursor: help; vertical-align: middle; flex-shrink: 0;
}
.ii:hover { border-color: var(--navy); color: var(--navy) }

/* ---------------------------------------------------------------- landing */
#landing { padding-top: 18px }
/* Four equal columns: the drawing takes 1-2, column 3 stays empty and the
   buttons take 4, so the control stack is a quarter and lines up with the
   table beneath. The column edges are structure, never drawn. */
.land-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center }
.land-top .shipart { grid-column: 1 / span 2 }
.land-pick, .land-act { display: flex; flex-direction: column; justify-content: center; gap: 12px }
.land-act .btn { padding: 9px 8px; line-height: 1.55 }
.land-help { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--ink-muted); font-style: italic }
.shipart { height: 150px; display: flex; align-items: center; justify-content: center }
.shipart img { width: 100%; height: 100%; object-fit: contain; display: block }
.shipart svg { width: 100%; height: 100% }
.land-noart { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--navy) }
/* The seam closes the selection area off from the table. */
.land-seam { border-top: 1px solid var(--rule-band); margin: 26px 0 14px }
/* The search sits at the upper right of the table it filters. */
.land-search { display: flex; justify-content: flex-end; margin-bottom: 10px }
.land-search input { width: 220px }
.shipscroll { position: relative; max-height: var(--ship-rows); overflow: auto }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums }
th, td { text-align: right; padding: 6px 9px }
th:first-child, td:first-child { text-align: left }
/* No frame and no vertical rules: the row rules carry the structure. */
thead th {
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2); background: #fff;
}
td { border-bottom: 1px solid var(--rule2-soft) }
tr.tot td { border-top: 1px solid var(--navy); font-weight: 600; color: var(--navy) }

.shiptable thead th { position: sticky; top: 0; z-index: 3; color: var(--navy); text-align: center }
.shiptable th, .shiptable td { font-size: 11.5px; padding: 5px 10px; height: var(--ship-row); white-space: nowrap; color: #000 }
.shiptable td { text-align: left }
.shiptable td.num { text-align: right }
.shiptable td.l-name { font-weight: 500 }
.shiptable tbody tr { cursor: pointer }
.shiptable tbody tr:hover { background: var(--paper-warm) }
.shiptable tbody tr.sel { background: var(--sel-row) }
.shiptable th.l-ck, .shiptable td.l-ck { width: 30px; padding-right: 0 }
.shiptable tfoot td { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--rule2); text-align: left; color: #000; font-weight: 600 }
/* A single ship is analysed at a time, so the control is a round radio.
   Checkboxes are held back for the multi-ship tools. */
.shiptable input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; margin: 0;
  border: 1.5px solid var(--grey); border-radius: 50%;
  background: #fff; cursor: pointer; position: relative; vertical-align: middle;
}
.shiptable input[type=radio]:checked { border-color: var(--navy) }
.shiptable input[type=radio]:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--navy);
}
.land-foot-rule { border-top: 1px solid var(--rule-band); margin: 24px 0 0 }
.land-note { font-size: 12.5px; line-height: 1.75; color: var(--ink-muted); font-style: italic; text-align: justify; margin: 20px 0 30px }

/* ------------------------------------------------------------------ tool */
#tool { padding-top: 22px; padding-bottom: 40px }
.intro { margin-bottom: 34px }
/* The voyage table is its own step, not the tail of the chart above it. */
.voy-wrap { margin-top: 34px }
p, .note { font-style: italic; text-align: justify; color: var(--ink-muted); font-size: 12px; line-height: 1.7 }
.note { margin-top: 14px }   /* the only margin rule for .note; keep it here */
.band { font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 0 10px }

/* Splits are minmax(0, 1fr), never bare 1fr, so a wide child cannot blow
   the column out. A section with one column of content keeps the two-column
   grid with an empty second cell. */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
.grid2 > * { min-width: 0 }
@media (max-width: 880px) {
  .grid2, .land-top { grid-template-columns: minmax(0, 1fr) }
  .land-top .shipart { grid-column: auto }
}

.chartbox { position: relative; height: 260px; contain: layout }
.chartbox.chart-tall { height: 420px; margin-top: 10px }

/* Label, value, unit. No rule between rows: the uniform height and the
   shared label column carry the alignment, and the lines only add noise. */
.spd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--param-w) 22px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 6px 0;
}
.spd-row > label { font-size: var(--spd-fs); color: #000; display: flex; align-items: center; gap: 5px }
.spd-row > .ii { justify-self: start }
.spd-un { position: relative; display: block }
.spd-un input { width: 100%; height: 30px; text-align: left; padding: 0 8px; font-size: var(--spd-fs) }
.inp-unit { position: relative; display: block }
.inp-unit input { padding-right: 84px !important }
.spd-un > input:only-child { padding-right: 8px !important }
.inp-unit .u {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: var(--spd-fs); font-weight: 400; font-style: normal; color: #000;
  pointer-events: none; transition: opacity .12s;
}
.inp-unit input:focus + .u { opacity: 0 }
.spd-in { display: flex; align-items: center; width: 100% }
.spd-in select { width: 100%; height: 30px; font-size: var(--spd-fs); color: #000; padding: 0 8px }
.spd-un input:disabled { color: #8a93a8; background: #f6f7f9 }
/* One checkbox everywhere. */
.ck, input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer }

/* ------------------------------------------------------------ accordions */
/* De-boxed: a subsection is a bare label plus its toggle pills, with the
   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. */
.acc.closed { margin-bottom: 8px }
.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:hover h3 { color: #16224f }
.acc-head-r { display: flex; align-items: center; gap: 16px }
.acc-toggle { display: flex; gap: 6px }
/* The pills keep their rounded shape: one of the five deliberate exceptions
   to the square-corner rule. Up is always left and always closes; down is
   always right and always opens; the lit navy one shows what is available. */
.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; padding: var(--sub-top) 0 20px; overflow: visible }
.acc.closed .acc-body { display: none }

/* --------------------------------------------------------------- tables */
.costlist td { padding: 7px 9px; font-size: 12.5px }
.costlist td.ck-cell { width: 26px; padding-right: 0 }
.costlist td.name { text-align: left; color: var(--ink-soft) }
.costlist tr.off td.name, .costlist tr.off td.val { opacity: .4 }
.costlist input[type=checkbox] { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer }
.costlist select { width: auto; min-width: 88px; height: 30px; padding: 0 8px; font-size: var(--spd-fs); color: #000 }

/* The port table is its own block, not the tail of the chart above it. */
.voy-wrap { margin-top: 34px }
.voytab th, .voytab td { padding: 6px 8px; font-size: 12px; white-space: nowrap }
.voytab select { height: 30px; min-width: 128px; font-size: var(--spd-fs); padding: 0 8px; color: #000 }
.voytab td.derived { color: #000 }

.fueltab th, .fueltab td { font-size: 11.5px; padding: 6px 8px; white-space: nowrap }
.fueltab select { height: 30px; min-width: 104px; font-size: var(--spd-fs); padding: 0 8px; color: #000 }
.fuelctrl { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin: 22px 0 6px }
.fuelctrl .fc-row { display: flex; align-items: center; gap: 8px }
.fuelctrl label { font-size: var(--spd-fs); color: #000; white-space: nowrap }
.fuelctrl .spd-un, .fuelctrl .spd-in { width: 118px }
.fuelctrl input { height: 30px }
.proptab th, .proptab td { font-size: 11.5px; padding: 5px 8px }
.proptab td.fname, .proptab td.fclass { text-align: left }
/* Cells the sheet fills by lookup but the reader can type over are input
   fields showing the looked-up value: underlined so they read as editable
   inside a table of results. */
/* Cells the sheet fills by lookup but the reader can type over are input
   fields showing the looked-up value - the same field as everywhere else in
   the tool, not a table-only variant. */
.proptab input, .fueltab input.cons {
  width: 100%; height: 30px; text-align: left; padding: 0 8px;
  font-size: var(--spd-fs); border: 1px solid var(--rule2); background: #fff; border-radius: 0;
}
.proptab input.ov, .fueltab input.cons.ov { color: var(--navy); font-weight: 600 }

.pricetab td, .pricetab th { padding: 7px 8px; font-size: var(--spd-fs) }
.pricetab thead th { height: 23px; padding-top: 0; padding-bottom: 4px }
.pricetab td.price-ck, .pricetab th.price-ck { width: 34px; padding-right: 0 }
.pricetab td.price-ck input { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer }
.pricetab td.price-name, .pricetab th.price-name { text-align: left; color: #000; white-space: nowrap }
.pricetab td.price-basecell, .pricetab th.price-basecell { width: 132px }
.pricetab .price-field { display: block; position: relative; width: 100% }
.pricetab .price-field input { width: 100%; height: 30px; text-align: left; padding-left: 8px; padding-right: 46px !important; font-size: var(--spd-fs) }
.pricetab .price-trend { width: 170px; white-space: nowrap }
.pricetab .price-trend input[type=range] { width: 96px; vertical-align: middle; accent-color: var(--navy); height: 24px; margin: 0; padding: 0 }
.pricetab .price-idx-val { display: inline-block; min-width: 46px; margin-left: 8px; font-size: var(--spd-fs); color: #000 }
/* Unticking a row greys it and drops it from the chart, but never hides it;
   the first column stays legible so it can be ticked back on. */
.pricetab tr.price-off td { opacity: .45 }
.pricetab tr.price-off td.price-ck { opacity: 1 }
/* The lid over the rows this case does not use, on the subsection's own
   More info bar. */
.acc-actions { display: flex; justify-content: flex-end; margin: 22px 0 4px }
.acc-moreinfo { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-muted); font-size: .72rem; user-select: none }
.acc-moreinfo input[type=checkbox] { accent-color: var(--navy); width: 14px; height: 14px }

.opextab td.name, .yeartab td.year { text-align: left }
.opextab th, .opextab td, .yeartab th, .yeartab td { padding: 6px 9px }

#tool { padding-bottom: 40px }

/* ---------------------------------------------------------------- print */
@media print {
  #siteHeader .dz-right, .land-search, .acc-toggle { display: none }
  .acc.closed .acc-body { display: block }
  .wrap { max-width: none }
}

/* ===== free tier =====
   One treatment for every gate: greyed, reduced opacity, a lock, and never
   removed from the layout. A reader who cannot see that something exists
   cannot want it, so nothing here hides anything. */
.fr-lock { opacity: .5; cursor: not-allowed; pointer-events: auto }
input.fr-lock[type=range] { filter: grayscale(1) }
/* The voyage cap, said under the control rather than over it: the reader is
   mid-flow and a modal would interrupt a task in progress. */
.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; font-style: italic }