/* Shore Power Terminal Tool - Sustainable Ships
 *
 * The Decarbonizer design language, written out once rather than accumulated:
 * there is exactly one rule per selector, so the last-wins problem the
 * Decarbonizer stylesheet has cannot start here. Token values and the header,
 * accordion, table and row treatments are measured from the sandbox.
 */

:root {
  --navy: #0A1543;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --grey: #aab2c2;
  --sel-row: #f0f1f3;
  --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);
  --rule-band: rgba(10, 21, 67, .38);
  --band-gap: 31px;
  --sub-top: 50px;
  --param-w: 218px;
  --spd-fs: 12.5px;
  --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: 600; margin: 0 }
.hidden { display: none !important }
.muted { color: var(--ink-muted) }

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

/* ------------------------------------------------------------------ header */
/* White, brand left. The rule is drawn by ::after inset to the gutter so it
   starts and ends on the content column, not on the 1180px border box. */
.dz-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-bottom: 0;
}
.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 }
.dz-right { display: flex; align-items: center; gap: 10px }

.dz-info {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--rule2); background: #fff; color: var(--ink-muted);
  font-size: 11px; line-height: 1; cursor: pointer; font-family: inherit;
}
.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) }
.dz-dd { position: relative }
.dz-save {
  background: var(--navy); color: #fff; border: 0; padding: 9px 16px;
  font-family: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.dz-save:hover { background: #16224f }
.dz-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--rule2); min-width: 210px;
}
.dz-menu a { display: block; padding: 9px 14px; font-size: 12.5px; color: var(--navy); cursor: pointer }
.dz-menu a:hover { background: var(--paper-warm) }
.dz-menu a.menu-off { color: var(--grey); cursor: not-allowed }
/* Before a vessel is picked there is no case to save, no ship to reset and no
   methodology to read: the panel describes how THIS case is computed, and on
   the landing there is not one yet. The Decarbonizer hides the "i" here for
   the same reason. */
#siteHeader.pre-select .dz-dd,
#siteHeader.pre-select .dz-info,
#siteHeader.pre-select #resetShip { display: none }

/* ------------------------------------------------------------------ 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) }

.btn {
  background: var(--navy); color: #fff; border: 0; padding: 12px 22px;
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.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); cursor: not-allowed }

/* ----------------------------------------------------------------- landing */
#landing { padding-top: 18px }
.land-top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 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: 18px }
.land-act .btn { padding: 7px 8px; line-height: 1.55 }
.shipart { height: 240px; display: flex; align-items: center; justify-content: center }
.shipart img, .shipart svg { width: 100%; height: 100%; object-fit: contain; display: block }
.land-noart { color: var(--ink-muted); font-size: 12.5px; font-style: italic }
.land-seam { border-top: 1px solid var(--line); margin: 26px 0 18px }

.shipscroll-wrap { position: relative }
.shipscroll { max-height: var(--ship-rows); overflow: auto }
.shiptable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums }
.shiptable th, .shiptable td { text-align: right; padding: 6px 9px; border-bottom: 1px solid var(--rule2-soft); white-space: nowrap }
.shiptable th:first-child, .shiptable td:first-child,
.shiptable th:nth-child(2), .shiptable td:nth-child(2) { text-align: left }
.shiptable thead th {
  position: sticky; top: 0; background: #fff; z-index: 2;
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2);
}
.shiptable tbody tr { height: var(--ship-row); cursor: pointer }
.shiptable tbody tr:hover { background: var(--paper-warm) }
.shiptable tbody tr.sel { background: var(--sel-row) }
/* Single ship: the selector is a round radio. Checkboxes are held back for
   the multi-ship tools. */
.shiptable input[type=radio] { accent-color: var(--navy); margin: 0 }
.land-foot-rule { border-top: 1px solid var(--line); margin: 18px 0 14px }
.land-note { color: var(--navy) }

/* -------------------------------------------------------------------- tabs */
.tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 19px 0 0;
}
.tab {
  background: #fff; border: 1px solid var(--rule2); color: #000; text-align: center;
  padding: 14px 8px; font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: border-color .14s;
}
.tab.active { color: #fff; background: var(--navy); border-color: var(--navy) }
.tab:hover:not(.active) { color: var(--navy); border-color: var(--navy) }

/* ------------------------------------------------------------ summary band */
.blk6 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: var(--band-gap);
}
.blk {
  background: #fff; border: 1px solid var(--rule2); border-left: 3px solid var(--navy);
  padding: 12px 15px;
}
.blk .k {
  display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 5px; font-weight: 500;
}
.blk .v { font-weight: 500; font-size: 1.4rem; color: var(--navy); letter-spacing: -.01em }
.blk .v small { font-size: .82rem; color: var(--ink-muted); font-weight: 400; margin-left: 4px }

.foldrule {
  border-top: 1px solid var(--rule-band);
  margin: var(--band-gap) 0;
  position: relative; height: 0;
}
/* A small circle centred on the seam, glyph only, no label. The glyph is
   drawn rather than typed so both strokes match and the minus is the plus
   with its upright removed. */
.foldbtn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--rule-band); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .14s;
}
.foldbtn:hover { border-color: var(--navy) }
.foldglyph { position: relative; display: block; width: 9px; height: 9px }
.foldglyph::before, .foldglyph::after { content: ''; position: absolute; background: var(--navy) }
.foldglyph::before { left: 0; right: 0; top: 4px; height: 1px }
.foldglyph::after { top: 0; bottom: 0; left: 4px; width: 1px }
.foldbtn.is-minus .foldglyph::after { display: none }

/* The same control under a table rather than under the summary band. It needs
   its own positioned seam, or the absolutely positioned circle escapes to
   whichever ancestor happens to be positioned. */
.subfold {
  border-top: 1px solid var(--rule2);
  margin: 20px 0 4px;
  position: relative; height: 0;
}

/* -------------------------------------------------------------- accordions */
/* De-boxed: a subsection is a bare label plus its toggle pills, with content
   flowing on the page. Spacing does the separating. */
.acc { border: 0; margin-bottom: 30px }
.acc.closed { margin-bottom: 8px }
.acc-head {
  padding: 7px 0; display: flex; align-items: center; justify-content: space-between;
  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); cursor: pointer; font-size: 10px; line-height: 1;
}
/* The lit one shows the action available: down opens, up closes. They never
   interchange - up is always left, down is always right. */
.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 }

/* ------------------------------------------------------------------- grids */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
.grid2 > * { min-width: 0 }
.viz { grid-template-columns: minmax(0, 1fr) 360px }

/* -------------------------------------------------------------------- rows */
/* Label, field, tooltip. One height whatever the row holds, so the two grid
   columns line up row for row, dividing lines included. */
.spd-row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--param-w);
  gap: 14px; align-items: center; min-height: 42px;
  position: relative; padding-right: 24px;
  /* No rule between rows. The uniform height and the shared label column
     carry the alignment; lines only add noise. */
}
.spd-row label { font-size: var(--spd-fs); color: #000 }
/* One tooltip marker everywhere: round, quiet, pinned to the end of its row.
   Left in the grid flow it took a column of its own and wrapped under the
   label. Both row types share this rule rather than repeating it. */
.spd-row .ii,
.slider-row .ii {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rule2);
  color: var(--ink-muted); font-size: 9px; line-height: 12px; text-align: center;
  cursor: help; font-style: normal; background: #fff;
}
.spd-un { position: relative; display: block }
.spd-un input { width: 100%; height: 30px; text-align: left; padding: 0 8px; font-size: var(--spd-fs) }
.spd-un.has-u input { padding-right: 84px }
/* Out of range while it is still being typed. The field says so quietly and
   keeps the entry; leaving it clamps the figure to the allowed span. */
.spd-un input.bad, input.bad { border-color: var(--rust); outline-color: var(--rust) }

.spd-un .u {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: var(--spd-fs); font-weight: 400; color: #000; font-style: normal; pointer-events: none;
}
.spd-in select { height: 30px; font-size: var(--spd-fs); color: #000; padding: 0 8px }
.spd-in { display: flex; flex-direction: column; gap: 6px }
.spd-derived { font-size: var(--spd-fs); color: #000; font-variant-numeric: tabular-nums; text-align: right; padding: 0 2px }
.spd-check { display: flex; justify-content: flex-end }
.spd-check input { accent-color: var(--navy); width: 15px; height: 15px }

/* ------------------------------------------------------------------ tables */
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 {
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2);
}
tbody tr:last-child td { border-bottom: none }
tr.tot td { border-top: 1px solid var(--navy); font-weight: 600; border-bottom: none }
table input[type=checkbox] { accent-color: var(--navy); margin: 0 }
td.ck, th.ck { width: 26px; text-align: left }

/* ------------------------------------------------------------------ charts */
.chartbox { position: relative; width: 100%; height: 260px }
.chartbox.tall { height: 300px }
.chartbox.bar { height: 70px }

/* ------------------------------------------------------------------- copy */
p, .note { font-style: italic; text-align: justify; color: var(--ink-muted); font-size: 13px }
.note-navy { color: var(--navy) }

/* ----------------------------------------------------------------- sliders */
/* Label, control, value - one shared column grid, so every slider lines up
   with its neighbours. The tooltip marker is taken out of the grid and pinned
   to the end of the row, as on .spd-row; left in flow it wrapped onto a line
   of its own under the label. */
.slider-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px;
  gap: 14px; align-items: center; min-height: 42px;
  position: relative; padding-right: 24px;
}
.slider-row label { font-size: var(--spd-fs); color: #000 }
.slider-row input[type=range] { width: 100%; accent-color: var(--navy); margin: 0 }
.slider-row .v { font-size: var(--spd-fs); text-align: right; font-variant-numeric: tabular-nums }

/* The vessel count under the landing table. Premium states it plainly; the
   freemium build replaces this element's class with the gate treatment. */
.land-count { color: var(--ink-muted); text-align: left; font-style: italic }

/* -------------------------------------------------------------------- misc */
.figure { position: relative }
.figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule2) }
.figure figcaption { font-size: 11.5px; margin-top: 6px }
/* A photograph is labelled over the top rather than captioned underneath. The
   shadow is what keeps it readable over a bright horizon. */
.fig-label {
  position: absolute; left: 14px; top: 12px;
  color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(10, 21, 67, .55);
  pointer-events: none;
}
.placeholder {
  border: 1px solid var(--rule2); background: var(--paper-warm); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  font-size: 12.5px; font-style: italic; text-align: center; padding: 20px;
}
.tip {
  position: fixed; z-index: 90; max-width: 320px; background: var(--navy); color: #fff;
  font-size: 11.5px; line-height: 1.5; padding: 8px 10px; pointer-events: none;
}
.propsrow {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin: 20px 0 14px; font-size: var(--spd-fs);
}
.propsrow label { color: #000 }
.propsrow select, .propsrow input { width: 150px; height: 30px; font-size: var(--spd-fs) }
.propsrow .off { color: var(--grey) }
.propsrow .off select { color: var(--grey); background: var(--soft) }

.linkline { font-size: 12.5px; margin-top: 10px }
.linkline a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--rule2) }

@media (max-width: 900px) {
  .grid2, .viz, .land-top { grid-template-columns: minmax(0, 1fr) }
  .land-top .shipart { grid-column: auto }
  .blk6 { grid-template-columns: minmax(0, 1fr) }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ===== 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 }
.rpt-act .dz-save, .rpt-act .dz-btn2 { padding: 9px 18px }

/* The methodology panel is the report box with room to read in: wider, and
   the body scrolls rather than the page behind it. */
/* The methodology panel. Full column width, the page's own scroll, two
   columns of topics so they scan rather than run as one long page. */
.mp { max-width: none }
/* No rule under the heading: the heading is the separation. */
/* The panel's own heading, in the tool's section-heading weight. No rule
   under it: the heading is the separation. */
.mp-head { border-bottom: 0; padding-bottom: 10px; margin-bottom: 18px }
.mp-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 }
.meth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px }
.meth-topic { margin-bottom: 22px; break-inside: avoid }
.meth-topic h4 {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--navy); margin: 0 0 6px;
}
.meth-topic p { font-size: 12px; line-height: 1.75; color: var(--ink-muted); margin: 0 }
@media (max-width: 900px) { .meth-cols { grid-template-columns: 1fr } }
/* The info button lights up while its panel is open, so the state is on the
   control that toggles it. */
.dz-info.active { background: var(--navy); color: #fff }