/* CII Quickscan. The Decarbonizer design language: Poppins, navy, hairline
   rules, square corners with the tooltip markers and the accordion pills as
   the deliberate exceptions.

   Carried over from the EEDI Quickscan, which was written for its own page, so
   only what THIS page adds is appended: the rating table, the step tables, the
   formula column and the one accordion. */

:root {
  --navy: #0A1543;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --sel-row: #f0f1f3;
  --paper-warm: #f4f5f8;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  /* Row rules are almost invisible; the header rule and the band seam have to
     carry. Deliberately separate tokens. */
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  --rule-band: rgba(10, 21, 67, .38);
}

* { box-sizing: border-box }

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

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

/* ===== header: white, navy wordmark, one hairline band rule =====
   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 because this header
   sits INSIDE .wrap, which already carries the 26px gutter. */
#tool .dz-header {
  background: #fff;
  padding: 19px 0;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between
}
#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 }

#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(--paper-warm); color: var(--navy) }

#tool .block { margin-bottom: 30px }
/* Air under the header rule. The rule closes the header; without a gap the
   first thing on the page sits against it and reads as part of it. */
#tool .block.top { margin-top: 26px }

/* ===== two columns: the ship on the left, the controls on the right =====
   minmax(0, 1fr) rather than a bare 1fr, whose auto minimum lets a wide child
   blow the column out. */
/* The block that holds the drawing and the case. Its bottom margin is the only
   gap before the subsection under it, so it is set here rather than inherited
   from .block's 30px. A class rather than :has(), which is newer than this
   page needs to be. */
#tool .block.pair { margin-bottom: 16px }

#tool .grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px 40px;
  /* start, not center: the rating and the first input row share a top edge,
     and the drawing takes up whatever height is left rather than the two
     columns floating against each other's middle. */
  align-items: start
}

/* The case column. The grid starts both columns on the same edge, so this
   only has to stop the column stretching to a height it has no content for. */
#tool .side { align-self: start }

/* The drawing sits beside the case and starts on the same edge as its first
   row, so the two columns read as one block rather than two things that
   happen to be next to each other. CAPPED rather than stretched: a silhouette
   blown up to the column width dwarfs the panel it sits beside. */
#tool .figure {
  display: flex; align-items: center; justify-content: center; margin: 0;
  /* Centred against the case beside it, which is what the two columns are
     for; the grid starts both columns at the top, so this one says otherwise
     for itself. */
  align-self: center
}
/* Capped on both axes. NOTE WHICH ONE GOVERNS: these silhouettes are far
   wider than they are tall, so at 420px wide a hull lands around 140px high
   and the 300px height cap never bites. Raise the WIDTH to make the drawing
   bigger; the height cap is there for a tall subject - a cruise ship, a crane
   barge - that would otherwise overrun the case beside it. */
#tool .figure img { max-width: 420px; max-height: 300px; width: 100%; height: auto; display: block }
/* An image that has not resolved shows nothing rather than a broken-image
   glyph: the chain walks four candidates and the last miss is an empty state. */
#tool .figure img[src=""], #tool .figure img:not([src]) { display: none }

/* Label, value, marker. The marker has its own column so the tooltip dots
   line up down the panel rather than each sitting at the ragged end of its
   label. */
#tool .kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 24px;
  gap: 10px 14px;
  min-height: 40px;
  padding: 5px 0;
  align-items: center
}
#tool .kv .t { display: flex; align-items: center; justify-content: flex-end }
#tool .kv .t .ii { margin-left: 0 }
#tool .kv .k { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center }

#tool select {
  width: 100%; font-family: 'Poppins', sans-serif; font-size: 12.5px;
  line-height: 1.2; color: var(--ink); background: #fff;
  border: 1px solid var(--rule2); border-radius: 0; padding: 5px 8px;
  height: 30px; cursor: pointer
}
#tool select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }

/* ===== inputs ===== */
#tool input[type=text] {
  width: 100%; font-family: 'Poppins', sans-serif; font-size: 12.5px;
  /* The body's 1.55 is for prose. Left on a control it makes the content box
     taller than the text. */
  line-height: 1.2; color: var(--ink); background: #fff;
  border: 1px solid var(--rule2); border-radius: 0; padding: 5px 8px;
  height: 30px; text-align: left
}
#tool input: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 }

/* The unit sits INSIDE the field, as the Decarbonizer does it: the value reads
   left, the unit is pinned to the right edge, and the input reserves room for
   it so a long unit cannot land on the digits. */
#tool .v.un { position: relative }
#tool .v.un input { padding-right: 52px }
#tool .v.un i.u {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 11.5px; color: var(--ink-muted);
  pointer-events: none
}
#tool .v.un.wide input { padding-right: 74px }

/* Radios are round: one of the two deliberate exceptions to square corners. */
#tool input[type=radio] {
  appearance: none; -webkit-appearance: none; width: 14px; height: 14px;
  border: 1px solid var(--grey); background: #fff; border-radius: 50%;
  display: inline-grid; place-content: center; cursor: pointer; margin: 0; flex: 0 0 auto
}
#tool input[type=radio]:checked { border-color: var(--navy) }
#tool input[type=radio]:checked::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--navy)
}

/* 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]::-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 they read as tiny buttons rather than
   as the "there is more here" dot they are. */
#tool .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);
  margin-left: 8px; cursor: help; vertical-align: middle; flex-shrink: 0
}
#tip {
  position: fixed; z-index: 99999; background: var(--navy); color: #fff;
  font: 400 12px/1.45 'Poppins', sans-serif; padding: 9px 12px; border-radius: 0;
  max-width: 280px; box-shadow: 0 6px 18px rgba(10, 21, 67, .22);
  pointer-events: none; opacity: 0; transition: opacity .07s ease;
  white-space: normal; left: -9999px; top: 0
}

@media (max-width: 880px) {
  #tool .grid2 { grid-template-columns: minmax(0, 1fr) }
  #tool .kv { grid-template-columns: minmax(0, 1fr) 120px 24px }
}

/* ===== the one subsection =====
   De-boxed, as the Decarbonizer has them: no frame, no panel fill, no rule
   under the head bar. Spacing does the separating. */
#tool .acc { border: 0; background: #fff; margin-bottom: 30px }
/* A closed subsection is one line of a list. */
#tool .acc.closed { margin-bottom: 8px }
#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); margin: 0 }
/* Pills: a deliberate exception to the square-corner rule, with the tooltip
   markers. Wider than tall. Up is always left and always closes; down is
   always right and always opens. */
#tool .acc-toggle { display: flex; gap: 6px }
#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) }
/* 50px is the Decarbonizer's air between stacked subsections. This page has
   ONE, and it sits under a block that already carries 30px of its own, so the
   two together left a hand of white above "Show detailed calculations". */
#tool .acc-body { border-top: 0; padding: 26px 0 20px }
#tool .acc.closed .acc-body { display: none }

/* The line under the rating: why there is no grade, where there is none. */
#tool .note {
  font-style: italic; text-align: justify; color: var(--ink-muted);
  font-size: 12px; margin-top: 10px
}

/* ===== the rating per year =====
   One column per year, the letter large and navy. The whole point of the tool
   is these four characters, so they get the size a summary figure gets. */
#tool .band {
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.05rem;
  color: var(--navy); margin-bottom: 10px; display: flex; align-items: center
}
#tool table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums; background: #fff
}
/* No frame; the row rules carry the structure. No vertical rules ever. */
#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 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
}
#tool tbody tr:first-child td { border-top: 0 }
/* A total row takes a navy top rule, which is the only place navy is used on
   a table. */
#tool tr.tot td { border-top: 1px solid var(--navy); font-weight: 600; color: var(--navy) }
/* The rating fills the HALF it sits in, not the page. It is in the grid's
   first column with an empty second cell, so the column decides the width and
   the four years stay close enough to read as one trend. Fixed columns so the
   grades sit at even quarters. */
#tool .ratetab { width: 100%; table-layout: fixed }
#tool .ratetab th, #tool .ratetab td { text-align: center; width: 25% }
#tool .ratetab td { font-size: 23px; font-weight: 600; color: var(--navy); letter-spacing: -.01em }
/* A ship the regulation does not reach shows a dash, not a grade, and the
   dash is muted so it does not read as an answer. */
#tool .ratetab td.na { color: var(--grey); font-size: 15px }
/* The rating is its own band at the top, closed below by a seam so it reads
   as the answer rather than as the first row of the case. */
#tool #blk_rating { padding-bottom: 19px; border-bottom: 1px solid var(--rule-band); margin-bottom: 26px }

/* ===== the three steps =====
   Each step is a headed table; the formula it implements sits beside it, as
   the screenshot has them. */
#tool .step { margin-bottom: 30px }
#tool .step-h {
  font-weight: 600; font-size: 12.5px; color: var(--navy); text-align: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2)
}
#tool .formula {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: var(--navy); font-size: 13px; line-height: 1.7; text-align: center;
  padding: 26px 0; margin-bottom: 30px
}
/* A fraction drawn rather than written: the numerator over a rule over the
   denominator, which is how the screenshot sets them. */
#tool .formula .frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 4px }
#tool .formula .num { display: block; border-bottom: 1px solid var(--navy); padding: 0 6px 2px }
#tool .formula .den { display: block; padding: 2px 6px 0 }

/* ===== 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: this tool scopes .dz-save to
   #tool and the box sits outside it, so the class 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) }