/* Compliance Cost Calculator. Design language taken from the Decarbonizer:
   Poppins, navy #0A1543, square corners everywhere except the tooltip
   markers, the accordion pills, the landing radios, the fold control and
   the slider thumbs. De-boxed subsections, hairline rules, white header
   closed by a single band rule inset to the page gutters. */

:root {
  --navy: #0A1543;
  --green: #2f9e6f;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --ets: #C00000;
  --imo: #5091CD;
  --fuel: #AFACAC;
  --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, the rule closing the summary band.
     A separate token from --rule2, which draws table rows: those are fine
     faint, these have to be seen. */
  --rule-band: rgba(10, 21, 67, .38);
  /* Content starts this far below its own subsection header, matched to the
     gap from one subsection down to the next. One number retunes the tool. */
  --sub-top: 50px;
  /* The landing table shows eighteen rows and then scrolls. A height rather
     than a row count, so retuning the row height moves the box with it. */
  --ship-row: 31px;
  --ship-rows: calc(18 * var(--ship-row) + 34px);
}

* { box-sizing: border-box }

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

h3 { font-weight: 500; font-size: 1.05rem; margin: 0 }
a { color: var(--navy); text-decoration: none }
.hidden { display: none !important }
.muted { color: var(--ink-muted) }

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

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

/* ===== header: white, navy wordmark. The rule is drawn by ::after, inset to
   the gutter, so it starts at the left edge of the content column and ends at
   the right edge of the last control. A border-bottom would span the whole
   1180px border box and sit 26px proud at each end. ===== */
.dz-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0;
  box-shadow: none;
}
.dz-header::after {
  content: '';
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  border-bottom: 1px solid var(--rule-band);
}
.dz-left { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
.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 }

/* ===== controls ===== */
input[type=text], input[type=number], select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--rule2);
  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) }

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

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; flex: none;
}
input[type=checkbox]:checked { background: var(--navy); border-color: var(--navy) }
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);
}

input[type=range] {
  appearance: none; -webkit-appearance: none; background: transparent; width: 100%;
}
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--line) }
input[type=range]::-moz-range-track { height: 3px; background: var(--line) }
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;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: none;
}

/* Small bordered i, in its own column at the row end. Round, as in the
   Decarbonizer: squared off it reads as a tiny button rather than as the
   "there is more here" dot it is. A deliberate exception to the square-corner
   rule, alongside the accordion pills and the slider thumbs. */
.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: none;
}
#tip {
  position: fixed; z-index: 40; max-width: 280px; background: var(--navy); color: #fff;
  font-size: 11.5px; line-height: 1.45; padding: 8px 10px; display: none;
}

/* ===== tables: white headers, rule beneath, no fills ===== */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums }
th, td { text-align: right; padding: 6px 9px; border-bottom: 1px solid var(--rule2-soft) }
th:first-child, td:first-child { text-align: left }
thead th { font-weight: 600; color: var(--ink-muted); font-size: 12.5px; padding-bottom: 8px; border-bottom: 1px solid var(--rule2); background: #fff }
tbody tr:last-child td { border-bottom: none }
tr.tot td { font-weight: 600; border-top: 1px solid var(--navy); border-bottom: none }
.num { text-align: right }

/* ===== ship selection ===== */
/* Four equal columns. The drawing takes 1-3 and the buttons take 4, so the
   button stack is a quarter and lines up with the right edge of the table
   beneath. The column edges are structure, not decoration: nothing draws a
   rule on them. */
#landing { padding-top: 18px }
.land-top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  align-items: center; margin-bottom: 0;
}
.land-top .shipart { grid-column: 1 / span 3 }
.land-act { display: flex; flex-direction: column; justify-content: center; gap: 18px }
/* The buttons take the inputs' padding rather than the .btn default, so they
   match the height of the search field beneath them. */
.land-act .btn { padding: 7px 8px; line-height: 1.55 }

/* The seam closes the selection area off from the table. */
.land-seam { border-top: 1px solid var(--line); margin: 26px 0 18px }

/* The search sits at the upper right of the table it filters. */
.land-search { display: flex; justify-content: flex-end; margin-bottom: 8px }
.land-search input { max-width: 240px }

/* Eighteen rows, then scroll INSIDE the box so the page itself does not grow
   with the fleet. The header stays put through it. */
.shipscroll { position: relative; max-height: var(--ship-rows); overflow: auto }
.shiptable { border: 0; background: #fff; width: 100% }
.shiptable thead th { position: sticky; top: 0; z-index: 3; background: #fff }
/* Denser than the tool's tables: this is a list to scan, not figures to read.
   Row height is the token the scroll box is measured from. */
.shiptable th, .shiptable td {
  font-size: 11.5px; padding: 5px 10px; height: var(--ship-row);
  box-sizing: border-box; white-space: nowrap; color: var(--navy);
}
.shiptable thead th { text-align: center; color: var(--navy); font-weight: 600 }
.shiptable td { text-align: left; border-bottom: 1px solid var(--rule2-soft) }
.shiptable td.num { text-align: center }
.shiptable th.txt, .shiptable td.txt { text-align: left }
/* The selection column stays put while the rest scrolls past. */
.shiptable th.l-ck, .shiptable td.l-ck {
  position: sticky; left: 0; z-index: 2; width: 30px; background: #fff; text-align: center;
}
.shiptable tbody tr { cursor: pointer }
.shiptable tbody tr:hover { background: var(--paper-warm) }
.shiptable tbody tr.sel { background: var(--sel-row) }
.shiptable tbody tr.sel td.l-ck { background: var(--sel-row) }

/* Round, and visibly a one-of-many control: only one vessel can be analysed
   at a time. Checkboxes are held back for the multi-ship tools, where ticking
   several is the whole point. */
.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);
}

/* A full-width rule closes the table off before the closing copy, the same
   weight as the seam above it, so the table sits between two lines. */
.land-foot-rule { border-top: 1px solid var(--line); margin: 34px 0 0 }
#landing .land-note {
  font-size: 12px; line-height: 1.75; color: var(--navy); text-align: justify;
  hyphens: auto; border-top: 0; padding-top: 0; margin: 26px 0 46px;
}

/* ===== tool: summary band ===== */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch }
.grid2 > * { min-width: 0 }
.top { margin: 26px 0 8px }
.rep { display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: 300px; margin: 0 0 6px auto }
/* Both columns of the summary row start at the same line: the view and EOL
   controls sit above them, in the stack, not on top of the right column. */
#row1 { margin-top: 22px; align-items: start }
#row2 { margin-top: 26px }
.viewrow { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 8px; align-items: center }
.eolrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 42px; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-soft) }
.chartbox { position: relative; height: 240px }
.chartbox.sm { height: 210px }
.sumtab { margin-top: 18px }
.sumtab td.ck, .sumtab th.ck { width: 26px; text-align: left }
.cmphead {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 120px; gap: 12px;
  align-items: center; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px;
}
.cmphead select, .cmphead input[type=range] { max-width: 100% }
.trajlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px }
.trajlist.one { grid-template-columns: minmax(0, 1fr) }
.trajrow {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  gap: 8px; font-size: 12.5px; min-height: 32px;
}
.trajtarget { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 18px }

/* ===== accordions ===== */
/* De-boxed, as the Decarbonizer: a subsection is a bare label with its toggle
   pills, and the content flows on the page. The frame and the rule under the
   bar are gone; spacing separates one subsection from the next. */
.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 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; cursor: pointer; user-select: none;
}
/* With no box, a closed subsection is a bare label and two pills, so the
   label itself answers the mouse. */
.acc-head:hover h3 { color: var(--navy); opacity: .78 }
.acc-head-r { display: flex; align-items: center; gap: 16px }
.acc-toggle { display: flex; gap: 6px }
/* Pills: a deliberate exception to the square-corner house rule, like the
   round tooltip markers and slider thumbs. Elongated, wider than tall. */
.acc-toggle button {
  width: 42px; height: 26px; border: 1px solid var(--rule2); background: #fff;
  cursor: pointer; color: var(--ink-muted); font-size: 10px; border-radius: 999px;
}
.acc-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy) }
/* Content starts --sub-top below the header, matched to the gap from this
   subsection down to the next. One rule, so no section drifts from the others. */
.acc-body { border-top: 0; overflow: visible; padding: var(--sub-top) 0 20px }
.acc.closed .acc-body { display: none }

/* key/value rows: uniform height and a shared label column carry the
   alignment. No rule between rows: the lines only added noise. */
.kv {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 16px; align-items: center;
  gap: 10px; min-height: 34px; padding: 6px 0; font-size: 12.5px;
}
.kv .k { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px }
.kv .v { text-align: right; font-weight: 500 }
.kv input, .kv select { text-align: right }
.kv select { text-align-last: right }
.kv .ckwrap { display: flex; justify-content: flex-end }
.kv > .ii { justify-self: end }

.shipart {
  height: 200px; display: flex; align-items: center; justify-content: center;
  padding: 8px; overflow: hidden;
}
.shipart img { max-width: 100%; max-height: 100%; object-fit: contain; display: block }
.shipart-cap { font-size: 12px; font-style: italic; color: var(--ink-muted); text-align: center }
.fuelgrid { margin-top: 4px }
.fuelgrid td, .fuelgrid th { padding: 5px 8px }
.fuelgrid input { width: 74px; padding: 3px 6px; font-size: 12px; text-align: right }
.fuelgrid select { width: 104px; padding: 3px 6px; font-size: 12px }
.voyrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px }

.pricetab td, .pricetab th { padding: 9px 8px }
.pricetab input[type=number] { width: 84px; text-align: right }
.pricetab input[type=range] { width: 130px }
.scenrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; margin-bottom: 10px }
.scenrow select { max-width: 150px }

.fpctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: center; margin-bottom: 14px; font-size: 12.5px }
.fpctl label { display: block; color: var(--ink-soft); margin-bottom: 3px }
.ftab { font-size: 11.5px }
.ftab th, .ftab td { padding: 5px 6px }
.ftab thead th { vertical-align: bottom }
.ftab .unit { font-weight: 400; color: var(--ink-muted); font-size: 10px }
/* Every field in the table reads black, edited or not. A value carried from
   the database is still a real figure, so greying it made it look disabled. */
.ftab input { width: 62px; padding: 2px 5px; font-size: 11.5px; text-align: right; color: var(--navy) }
.ftab input.soft { color: var(--navy) }

.regblock { border-top: 0; padding-top: 0; margin-top: var(--sub-top) }
.regblock .grid2 { align-items: start }
.band { font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 0 14px }
.regblock h4 { text-align: left }
.regtxt { font-size: 12.5px; font-style: italic; text-align: justify; color: var(--ink-soft) }
/* Closes the description it belongs to, so it reads as part of that column
   rather than as a footnote to the table opposite. */
.learn { display: inline-block; margin-top: 14px; border-top: 0; padding-top: 0; text-align: left; font-size: 12.5px }
.helpwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; height: 100% }
.helpnote { font-size: 10px; letter-spacing: .04em; color: var(--ink-muted); background: var(--soft); padding: 2px 10px }

.regfilters { display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); gap: 14px; align-items: center; font-size: 12.5px; margin-bottom: 16px }
.regfilters label { display: flex; align-items: center; gap: 7px; cursor: pointer }
.regsearch { display: flex; justify-content: flex-end; margin-bottom: 6px }
.regsearch input { max-width: 220px }
.regtab th { cursor: pointer; white-space: nowrap }
.regtab th .ar { color: var(--grey); font-size: 9px; margin-left: 3px }
.regtab td:nth-child(2) { text-align: left }
.regtab td:nth-child(3), .regtab td:nth-child(4) { text-align: left }

.endnote { text-align: center; margin: 34px 0 12px; font-size: 12.5px; color: var(--ink-soft) }
.endwrap { text-align: center; margin-bottom: 46px }
.note { font-size: 11px; color: var(--ink-muted); font-style: italic; margin-top: 14px; border-top: 1px solid var(--rule2-soft); padding-top: 9px }

@media (max-width: 900px) {
  .grid2, .trajlist { grid-template-columns: minmax(0, 1fr) }
  .land-top { grid-template-columns: minmax(0, 1fr) }
  .land-top .shipart { grid-column: auto }
  .regfilters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .fpctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .rep, .viewrow, .eolrow { margin-left: 0; max-width: none }
}