/* ============================================================
   Shore Power Socket Plug Quickscan

   The Decarbonizer's design language, rewritten rather than copied.
   The Decarbonizer stylesheet has accumulated override blocks over many
   versions, so a copy would carry rules this tool's markup never uses.
   Every value below is the LIVE value measured in that sheet: the last
   rule for the selector, not the first.

   Square corners everywhere. Two deliberate exceptions, both from the
   Decarbonizer: tooltip markers are round (50%), accordion pills are
   999px. This tool has no sliders, radios or fold control, so the other
   three exceptions do not arise.
   ============================================================ */

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

  /* Table rows and block borders: fine faint. */
  --rule2: rgba(10, 21, 67, .12);
  /* The faintest hairline, between input rows. */
  --rule2-soft: rgba(10, 21, 67, .06);
  /* Structural seams. These have to be seen. */
  --rule-band: rgba(10, 21, 67, .38);

  /* Air below the tab row and above every figure that opens a pane. */
  --sub-top: 50px;
  --gut: 26px;
}

* { 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 }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.hidden { display: none !important }

/* ---------- header --------------------------------------------------
   White, brand left. The rule is drawn by ::after inset to the gutter,
   NOT by a border-bottom: a border spans the whole 1180px border box,
   which leaves the rule 26px proud of the content column at each end. */

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

.dz-header::after {
  content: '';
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 0;
  border-bottom: 1px solid var(--rule-band);
}

.dz-header .dz-left { grid-column: 1 / span 3; min-width: 0 }
/* One control, so it sits at the far end of the header rather than at the
   left edge of its column. flex-end puts it on the same 26px gutter the
   header rule is inset to, so the button and the rule end together. */
.dz-header .dz-right {
  grid-column: 4;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Before a selection is made there is no tool to go back to, so the header
   carries the brand alone. */
#siteHeader.pre-select .dz-btn2 { display: none }

.dz-btn2 {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--rule2);
  padding: 7px 14px;
}

.dz-btn2:hover { border-color: var(--navy); background: rgba(10, 21, 67, .04) }

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

/* ---------- selection band ------------------------------------------ */

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

.grid2 > * { min-width: 0 }

/* ---------- landing ---------------------------------------------------
   Four equal columns, as the Decarbonizer's landing. The drawing takes 1-2,
   the selections take 3, the button takes 4, and align-items: center puts
   all three on one horizontal axis. The column edges are structure: nothing
   draws a rule on them. */

#landing { padding-top: 26px; padding-bottom: 60px }

#tool { padding-top: 10px; padding-bottom: 60px }

.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 2 }
.land-top .land-pick { grid-column: 3 / span 2 }

/* A fixed slot with the drawing contained inside it. Without the fixed
   height the drawing sets the row height, which pushes the selections down
   the page and leaves the air above them that the reader sees as a gap. */
.shipart {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shipart img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.land-pick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

/* The button is a third row of the same grid, so it lands in the value
   column directly under the two selects and takes their width and padding
   rather than the .btn default of 12px 22px. */
.land-act .btn { width: 100%; padding: 7px 8px; line-height: 1.55 }
.land-act { margin-top: 10px }

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

/* ---------- figures -------------------------------------------------- */

figure { margin: 0 }

.fig img {
  display: block;
  width: 100%;
  height: auto;
}

.fig.is-empty, .shipart.is-empty {
  min-height: 120px;
  background: var(--soft);
  border: 1px solid var(--rule2-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  padding: 12px;
  text-align: center;
}

.fig.is-empty img, .shipart.is-empty img { display: none }

/* The two full-width drawings: the socket and plug sheet at the head of
   Your ship, and the framework figure closing Standards. */
.fig-overview, .fig-socket { margin-bottom: var(--sub-top) }
 /* The framework figure was being stretched to the full 1128px column,
   which is past its native width, so it softened. Capped at 720px and
   centred: it now renders at or below its own resolution. */
.fig-framework {
  margin-top: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  text-align: justify;
  margin-top: 9px;
}

/* ---------- rows ----------------------------------------------------
   Label, value, unit. The uniform height and the shared label column
   carry the alignment across both grid columns; the hairline is the
   faintest token, so it separates without ruling. */

.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  min-height: 34px;
  border-bottom: 1px solid var(--rule2-soft);
}

.kv:last-child { border-bottom: none }

/* On the landing the two rows are controls rather than a read-out, so they
   carry no rule between them. */
.land-pick .kv { border-bottom: none; padding: 0 }

.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-size: 12.5px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.kv .u {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: normal;
}

/* The unit column of the specification table carries a second value, not
   a unit, on two of its rows, so it sits in the third column at full
   readability rather than as a faded suffix. */
.kv-3 { grid-template-columns: minmax(0, 1fr) 150px 90px }
.kv-3 > .ii { grid-column: 3; justify-self: end }
.kv-3 > .u { grid-column: 3; justify-self: start }

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

select:focus-visible, button:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ---------- tabs ------------------------------------------------------
   Four section buttons across the top, one pane at a time. Square, as
   everything else is; the active one is white on navy. */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 19px 0 var(--sub-top);
}

.tab {
  background: #fff;
  border: 1px solid var(--rule2);
  color: #000;
  text-align: center;
  padding: 14px 8px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color .14s;
}

.tab:hover:not(.active) { color: var(--navy); border-color: var(--navy) }

.tab.active {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  cursor: default;
}

.pane { padding-bottom: 20px }

/* ---------- headings and copy ---------------------------------------- */

/* All explanatory paragraphs: italic, justified. */
p, .note, figcaption {
  font-style: italic;
  text-align: justify;
}

p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

p:last-child { margin-bottom: 0 }

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

/* ---------- tooltip marker ------------------------------------------
   Round: squared off it reads as a tiny button rather than as the
   "there is more here" dot it is. */

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

#tooltip {
  position: fixed;
  z-index: 40;
  max-width: 320px;
  background: var(--navy);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 9px 11px;
  border-radius: 0;
  pointer-events: none;
  display: none;
}

/* ---------- tables ---------------------------------------------------
   No frame: the row rules carry the structure. No vertical rules ever. */

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 0;
  border-radius: 0;
}

thead th {
  background: transparent;
  color: var(--ink-muted);
  font-size: 12.5px;
  letter-spacing: 0;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule2);
  text-align: right;
}

th, td { padding: 8px 9px; text-align: right; vertical-align: middle }

th:first-child, td:first-child { text-align: left; padding-left: 0 }
th:last-child, td:last-child { padding-right: 0 }

td {
  border-bottom: 1px solid var(--rule2-soft);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

tbody tr:last-child td { border-bottom: none }

tr.sel td {
  background: var(--sel-row);
  color: var(--navy);
  font-weight: 600;
}

/* The standards description table: a code and its title, so the second
   column reads as prose rather than as a figure. */
.desc td:last-child { text-align: left; font-style: normal }
.desc td:first-child { white-space: nowrap; font-weight: 500; color: var(--navy) }
.desc-h {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--navy);
  margin: 24px 0 8px;
}
.desc-h:first-child { margin-top: 0 }

/* ---------- suppliers gate -------------------------------------------
   The header row closes straight onto the gate, so the gate draws the rule
   and the header does not draw a second one. */

.supt thead th { border-bottom: 0 }

.gate {
  border-top: 1px solid var(--rule2);
  padding: 54px 20px;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-muted);
}

/* ---------- narrow ---------------------------------------------------- */

@media (max-width: 900px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) }
  .kv, .kv-3 { grid-template-columns: minmax(0, 1fr) 130px 16px }
  /* The drawing takes the full width and the controls drop beneath it. */
  .land-top { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .land-top .shipart { grid-column: 1 / span 2 }
  .land-top .land-pick { grid-column: 1 / span 2 }
.land-top .land-pick { grid-column: 3 / span 2 }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dz-header { grid-template-columns: 1fr }
  .dz-header .dz-left { grid-column: 1 }
  .dz-header .dz-right { grid-column: 1 }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important }
}