/* ============================================================================
   Solar PV Tool - stylesheet.

   Ported from the Decarbonizer sandbox's LIVE rules, not from a description
   of them: where that stylesheet has several blocks for a selector, the one
   taken here is the last one, which is the one that applies. Written as a
   single pass so this file has no superseded blocks of its own.
   ========================================================================== */

:root {
  --navy: #0A1543;
  --green: #2f9e6f;
  --ets: #c00000;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --sel-row: #f0f1f3;
  --bg: #fff;

  --paper-warm: #f4f5f8;
  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;

  /* Row rules are almost invisible; band rules have to carry. */
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  --rule-band: rgba(10, 21, 67, .38);

  /* Air above every subsection body, so a subsection is not lopsided:
     below 20 + 30 + 7 = 57; above 7 + 50 = 57. One number retunes the
     whole tool. */
  --sub-top: 50px;

  /* The single gap that governs the summary band: below the section
     buttons, around the seam, and between the blocks and the seam. */
  --band-gap: 31px;

  /* One size for every field, label, unit and derived figure in a row. */
  --spd-fs: 12.5px;
  /* Width of the value column on every parameter row. */
  --param-w: 218px;

  --ship-row: 31px;
  --ship-rows: calc(18 * var(--ship-row) + 34px);

  /* Freemium: a monochrome padlock, inline so there is no asset to host and
     no codepoint escape to get mangled. Tints with currentColor. */
  --fr-lock-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V7z"/></svg>');
}

* { box-sizing: border-box }

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

h3 { font-weight: 600; margin: 0 }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px }
.hidden { display: none !important }
a { color: var(--navy); text-decoration: none }
a:hover { text-decoration: underline }

/* All explanatory copy: italic, justified. */
p, .note {
  font-style: italic;
  text-align: justify;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0 0 12px;
  white-space: pre-line;
}
.note:last-child { margin-bottom: 0 }

/* ------------------------------------------------------------------ header
   White, brand left, actions in column four of the same grid the tabs use.
   The rule is drawn by ::after inset to the gutter: a border-bottom would
   span the whole 1180px border box and sit 26px proud of the content column
   at each end. */
#siteHeader .dz-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 19px 26px;
  position: relative;
  background: #fff;
  color: var(--ink);
  border-bottom: 0;
  box-shadow: none;
}

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

.dz-left { grid-column: 1 / span 3; min-width: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
.dz-right { grid-column: 4; display: flex; align-items: center; gap: 10px; justify-content: flex-end; 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 { color: var(--ink-soft) }
.dz-product strong { color: var(--navy); font-weight: 500 }

.dz-info {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--rule2); background: transparent;
  color: var(--navy); font-family: inherit; font-size: 11px; line-height: 1;
  cursor: pointer; flex: none; padding: 0;
}
.dz-info:hover, .dz-info.active { background: var(--navy); color: #fff; border-color: var(--navy) }

.dz-btn2 {
  background: transparent; color: var(--navy);
  border: 1px solid var(--rule2); border-radius: 0;
  font-family: inherit; font-size: 12.5px; padding: 8px 14px; 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: 1px solid var(--navy);
  border-radius: 0; font-family: inherit; font-size: 12.5px;
  padding: 8px 14px; cursor: pointer;
}
.dz-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  background: #fff; border: 1px solid var(--rule2); min-width: 210px;
}
.dz-menu a { display: block; padding: 8px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-soft) }
.dz-menu a:hover { background: var(--soft); text-decoration: none }
.dz-menu a.menu-off { color: var(--grey); cursor: default }
.dz-menu a.menu-off:hover { background: transparent }

#siteHeader.pre-select .dz-right { visibility: hidden }

/* ----------------------------------------------------------------- landing
   Four columns: the drawing spans one and two, the picker in three, the
   buttons in four. A seam rule closes the selection area, then an 18-row
   scroll box with a sticky header, a closing rule and a justified note. */
#landing { padding-top: 34px }

.land-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
  margin-bottom: var(--band-gap);
}
.land-art { grid-column: 1 / span 2; min-height: 150px; display: flex; align-items: center; justify-content: center }
.land-art img { max-width: 100%; max-height: 210px; display: block }
.land-art svg { width: 100%; height: auto; display: block }
.land-pick { grid-column: 3; display: flex; flex-direction: column; gap: 10px }
.land-act { grid-column: 4; display: flex; flex-direction: column; gap: 10px }

.land-seam { border-top: 1px solid var(--rule-band); margin-bottom: var(--band-gap) }
.land-foot-rule { border-top: 1px solid var(--rule-band); margin-top: 14px; margin-bottom: 14px }
.land-note { color: var(--navy) }

.shipscroll { overflow: auto; max-height: var(--ship-rows) }
.shiptable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums }
.shiptable thead th {
  position: sticky; top: 0; z-index: 2; background: #fff;
  text-align: right; font-weight: 600; font-size: 12.5px; color: var(--ink-muted);
  padding: 8px 9px; border-bottom: 1px solid var(--rule2); white-space: nowrap;
}
.shiptable th.l, .shiptable td.l { text-align: left }
.shiptable td { text-align: right; padding: 0 9px; height: var(--ship-row); border-bottom: 1px solid var(--rule2-soft) }
.shiptable tbody tr { cursor: pointer }
.shiptable tbody tr:hover { background: var(--soft) }
.shiptable tbody tr.sel { background: var(--sel-row) }

/* Single ship, so selection is a radio. Checkboxes are held back for the
   multi-ship tools. */
.shiptable td.pick { width: 34px; padding-left: 0 }
.pickradio {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--grey); display: inline-block; vertical-align: middle;
  position: relative; background: #fff;
}
tr.sel .pickradio { border-color: var(--navy) }
tr.sel .pickradio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--navy) }

.land-foot { color: var(--ink-muted); font-size: 11.5px; padding: 8px 9px }

/* -------------------------------------------------------------------- tabs
   White with a faint border; the active one is white on navy. No numbers:
   the labels carry the sequence. */
#tool .tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 19px 0 0;
}
#tool .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;
}
#tool .tab.active { color: #fff; background: var(--navy); border-color: var(--navy) }
#tool .tab:hover:not(.active) { color: var(--navy); border-color: var(--navy) }

/* -------------------------------------------------- eight summary blocks
   Four ship, four economics, sitting above the tabs and closed off by the
   fold seam below them. Each economic block carries a driver: the input
   that moves its figure. */
#tool .blk8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 14px;
  row-gap: 14px;
  margin: 14px 0 0;
}
#tool .blk {
  border: 1px solid var(--rule2);
  background: #fff;
  padding: 12px 13px 11px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .14s;
}
#tool .blk:hover { border-color: var(--navy) }
#tool .blk-lab {
  font-size: 10.5px; color: var(--ink-muted); font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
#tool .blk-lab-t { display: block; white-space: nowrap }
#tool .blk-val {
  font-size: 23px; font-weight: 600; line-height: 1.15; margin-top: auto;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
#tool .blk-val.sm { font-size: 17px }
#tool .blk-unit { font-size: 12px; font-weight: 400; color: var(--ink-muted) }
#tool .blk-sub {
  font-size: 10.5px; color: var(--ink-muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
#tool .blk-sub b { font-weight: 500; color: var(--ink-soft) }

#tool .blk.editable .blk-val { margin-top: 0 }
#tool .blk-driver { margin-top: auto; padding-top: 8px }
#tool .blk-driver-lab { font-size: 10.5px; color: var(--ink-muted); margin-bottom: 3px }
#tool .blk-driver-lab b { font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums }
#tool .blk-driver-range { width: 100%; accent-color: var(--navy); margin: 0 }

/* The seam that closes the summary band, with its control sitting on it.
   The glyph is drawn, not typed, so the two strokes are identical and the
   minus is the plus with its upright removed. */
#tool .foldrule {
  position: relative;
  height: 0;
  border-top: 1px solid var(--rule-band);
  margin: var(--band-gap) 0;
}
#tool .foldbtn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--rule-band); border-radius: 50%; background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .14s;
}
#tool .foldbtn:hover { border-color: var(--navy) }
#tool .foldglyph { position: relative; display: block; width: 9px; height: 9px }
#tool .foldglyph::before, #tool .foldglyph::after { content: ''; position: absolute; background: var(--navy) }
#tool .foldglyph::before { left: 0; right: 0; top: 4px; height: 1px }
#tool .foldglyph::after { top: 0; bottom: 0; left: 4px; width: 1px }
#tool .foldbtn.is-minus .foldglyph::after { display: none }

/* -------------------------------------------------------------------- hero
   Reference ship photo left in a fixed 16:9 frame, operational profile
   right. */
#tool .vphoto-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#tool .vphoto-wrap img { width: 100%; height: 100%; object-fit: cover; display: block }
/* These are stand-in photos of the class, not the vessel itself, so the
   frame says so rather than leaving the reader to assume. */
#tool .vphoto-tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: transparent; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 10px;
}
#tool .vphoto-cap { font-size: 12px; color: var(--ink-muted); text-align: center; padding: 20px }

#tool .band {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500; text-align: center; margin-bottom: 8px;
}
.pie-wrap { display: flex; flex-direction: column; align-items: center }
.daylist { width: 100%; margin-top: 6px }

/* -------------------------------------------------------------- accordions
   De-boxed: no frame, no panel fill, no rule under the head bar. 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 }
.acc-head h3 { font-weight: 500; font-size: 1.05rem; color: var(--navy) }
.acc-body { border-top: 0; padding: var(--sub-top) 0 20px }
.acc.closed .acc-body { display: none }

.acc-toggle { display: flex; gap: 6px }
/* Up is always left and always closes; down is always right and always
   opens. They never interchange; the lit navy one is the action available. */
.acc-toggle button {
  width: 42px; height: 26px; border-radius: 999px;
  border: 1px solid var(--rule2); background: var(--soft); color: var(--grey);
  font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
}
.acc-toggle button.on { background: var(--navy); border-color: var(--navy); color: #fff }

.tabpanel { padding-top: 6px }

/* The hero is not two equal halves: the photograph carries the column and
   the operational profile sits in a fixed column beside it. */
.grid2.viz { grid-template-columns: minmax(0, 1fr) 360px }

/* ------------------------------------------------------------------- grids
   minmax(0, 1fr) never bare 1fr, so a wide child cannot blow the column
   out. A section with one column of content still uses the two-column grid
   with an empty second cell: stretched full width, a label and its field end
   up a page apart. */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

/* ----------------------------------------------------------------- selrow
   The caption or selector IS the chart's title, so it spans the chart box
   exactly: left edge on the chart's left edge, right edge on its right. It
   therefore mirrors .grid2's own template - two columns with the same 26px
   gap - and lives in column one. Spanning the full width is what floated
   the dropdown into the middle of the chart, and putting the caption inside
   the left column is what made the rows beside it start a caption's height
   too low. */
#tool .selrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 14px;
  align-items: center;
}
#tool .selrow > * { grid-column: 1 }
#tool .selrow-cap { font-size: 12.5px; color: var(--ink-soft) }
#tool .selrow select {
  width: 100%; height: 30px; font-family: inherit; font-size: var(--spd-fs);
  color: #000; padding: 0 8px; border: 1px solid var(--line);
  background: #fff; border-radius: 0;
}
#tool .selrow select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }

/* -------------------------------------------------------------------- rows
   One grid for every parameter row: label | value, with the tooltip marker
   pinned to the end of the row whichever element it is authored inside. All
   rows share a height, so both grid columns line up horizontally. */
/* CONSTRUCTION OVER INSTRUCTION. The two columns are not two independent
   stacks that happen to use the same row height: each PAIR is one grid row
   holding the left row and the right row as siblings, so they share a
   baseline by construction and a group break moves both sides at once.
   Aligning two separate columns by matching their row counts is the thing
   that drifts the moment either side gains a row. */
#tool .spd-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

#tool .spd-row {
  display: grid;
  grid-template-columns: 1fr var(--param-w);
  gap: 14px;
  align-items: center;
  min-height: 38px;
  position: relative;
  padding-right: 24px;
}
#tool .spd-row label { font-size: var(--spd-fs); color: #000 }
#tool .spd-row .ii {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin-left: 0;
}

#tool .spd-in { display: flex; align-items: center; gap: 8px; justify-content: flex-end }
#tool .spd-in select {
  height: 30px; font-size: var(--spd-fs); color: #000; padding: 0 8px;
  width: 100%; font-family: inherit; border: 1px solid var(--line);
  background: #fff; border-radius: 0;
}

/* Units live inside the field and step aside while editing. */
.inp-unit { position: relative; display: block }
.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; opacity: 1; pointer-events: none; transition: opacity .12s;
}
.inp-unit input:focus + .u { opacity: 0 }

#tool .spd-un input {
  width: 100%; height: 30px; box-sizing: border-box;
  text-align: left; padding-left: 8px; padding-right: 84px;
  font-size: var(--spd-fs); font-family: inherit;
  border: 1px solid var(--line); background: #fff; color: #000; border-radius: 0;
}
#tool .spd-un input[readonly] { border-color: transparent; background: transparent }
#tool .spd-un input:focus, #tool .spd-in select:focus {
  outline: 1px solid var(--navy); border-color: var(--navy);
}
#tool .spd-un input.bad { border-color: var(--ets); outline: 1px solid var(--ets) }

/* A derived figure reads as text, not as a field. */
#tool .spd-val {
  font-size: var(--spd-fs); color: #000; text-align: left;
  padding-left: 8px; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ slider rows
   One shared column grid per panel: label | control | value. Every row
   aligns with its neighbours instead of wrapping, and the value column is a
   fixed width so a long figure cannot stack itself into four lines. */
#tool .slider-row {
  display: grid;
  grid-template-columns: minmax(150px, 205px) 1fr 96px;
  gap: 14px;
  align-items: center;
  min-height: 38px;
  margin-bottom: 12px;
  font-size: var(--spd-fs);
  position: relative;
  padding-right: 24px;
}
#tool .slider-row label { color: #000 }
#tool .slider-row input[type=range] { width: 100%; accent-color: var(--navy) }
#tool .slider-row .rng-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #000;
}
#tool .slider-row .ii { position: absolute; right: 2px; top: 50%; transform: translateY(-50%) }
/* A slider shows its state through the thumb, so the focus box around the
   track is dropped; focus-visible keeps it reachable by keyboard. */
#tool input[type=range]:focus { outline: none }
#tool input[type=range]:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }

.subhead {
  font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule2); margin-bottom: 6px;
}
/* A group break inside a column, matched on both sides so the two columns
   stay in step. */
.spd-gap { height: 26px }

/* A tooltip marker squared off reads as a tiny button rather than as the
   "there is more here" dot it is. */
.ii {
  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; user-select: none; font-style: normal; display: inline-block;
}
.ii:hover { border-color: var(--navy); color: var(--navy) }
.ii:empty { border: 0 }

/* ---------------------------------------------------------- more info
   Taken from the rules that APPLY in the sandbox, not the first block that
   matches: that stylesheet is last-wins and the opening .acc-moreinfo rule
   is superseded 1,000 lines further down.

   The bar is a full-width control in its own frame: white, navy, centred,
   38px tall, with the anchor glyph after the label. The checkbox stays in
   the DOM because it carries the state, but it is drawn at zero size - the
   whole bar is the control. */
#tool .mi-box {
  border: 1px solid var(--rule2);
  margin-top: 14px;
}

#tool .acc-moreinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}

#tool .acc-moreinfo:hover {
  border-color: var(--navy);
  background: #fafbfc;
}

/* Inside the frame the bar IS the lid, so it drops its own border and gains
   a rule underneath only once the box is open. */
#tool .mi-box > .acc-moreinfo {
  margin: 0;
  border: none;
  width: 100%;
}
#tool .acc:not(.noinfo) .mi-box > .acc-moreinfo {
  border-bottom: 1px solid var(--rule2);
}

#tool .acc-moreinfo input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
}

/* An anchor rather than a plus: same affordance, and it belongs to the
   subject. Drawn as a mask so it inherits currentColor. Open, it is weighed:
   a half turn, which lands the right way up again on the way back. */
#tool .acc-moreinfo span::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 13px;
  height: 13px;
  margin-left: 9px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='4.4'%20r='2.4'/><path%20d='M12%206.8V21.5'/><path%20d='M7.2%2010.2h9.6'/><path%20d='M3.6%2014.6a8.4%208.4%200%200%200%2016.8%200'/><path%20d='M3.6%2014.6h3'/><path%20d='M20.4%2014.6h-3'/></svg>") center / 13px 13px no-repeat;
  transform-origin: 50% 55%;
  transition: transform .28s cubic-bezier(.34, 1.4, .5, 1), opacity .2s ease;
}

#tool .acc-moreinfo input:checked + span::after {
  transform: rotate(180deg);
}

/* Copy left, controls right - when there ARE controls. */
#tool .mi-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
  padding: 18px;
}

/* Nothing beside the copy means no second column: the text runs the full
   width of the frame rather than stopping short with an empty half next to
   it. Only a section that actually has controls to show splits in two. */
#tool .mi-grid.mi-solo { grid-template-columns: 1fr }
#tool .mi-grid.mi-solo > .mi-aside { display: none }
#tool .mi-grid.mi-empty { display: none }

/* One treatment for all explanatory copy inside the frame. No rule above
   it: the frame's border is the separation, and a second line between the
   bar and the text reads as a divider between two things rather than one
   block. */
#tool .mi-box .note {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-muted);
  font-style: italic;
  text-align: justify;
  hyphens: auto;
  margin: 0;
  border-top: 0;
  padding-top: 0;
}

/* Stacked copy reads as paragraphs of one block, not as two blocks. */
#tool .mi-text > * + * { margin-top: 10px }

/* Every revealed block SLIDES rather than appearing. The open state carries
   the ceiling and the transition; the closed state below only sets the
   collapsed values, so one rule governs the motion. */
#tool .mi-box > .mi-grid,
#tool .acc .note {
  max-height: 3000px;
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease,
              padding .3s cubic-bezier(.4, 0, .2, 1),
              visibility 0s;
}

/* Closed, the frame is just the lid. */
#tool .acc.noinfo .mi-box > .mi-grid,
#tool .acc.noinfo .note {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Someone who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  #tool .mi-box > .mi-grid,
  #tool .acc .note,
  #tool .acc-moreinfo span::after {
    transition: none;
  }
}

/* --------------------------------------------------- methodology panel
   Not a dialog: a panel like any other, shown in place of the tab panels
   when the header (i) is pressed and dismissed by pressing it again. */
#tool #methodPanel .mp { max-width: none }
/* No rule under the heading: the heading is the separation. */
#tool .mp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 0;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
/* The seam above Calculations, same line as everywhere else. */
#tool .mp-seam { margin: 34px 0 26px }

/* The pipeline: blocks with arrows between them. */
#tool .mflow { display: flex; align-items: stretch; gap: 0; margin: 4px 0 38px }
#tool .mflow-b {
  flex: 1;
  border: 1px solid var(--navy);
  padding: 18px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
}
#tool .mflow-a {
  flex: 0 0 18px;
  align-self: center;
  height: 1px;
  background: var(--navy);
  position: relative;
}
#tool .mflow-a::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  border-left: 5px solid var(--navy);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

#tool .meth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px }
#tool .meth-topic { margin-bottom: 22px; break-inside: avoid }
#tool .meth-topic h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 6px;
}
#tool .meth-topic ul { margin: 0; padding-left: 18px }
#tool .meth-topic li {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 2px;
}
#tool .meth-lead { margin-bottom: 18px }
#tool .dz-info.active { background: var(--navy); color: #fff; border-color: var(--navy) }

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

/* ------------------------------------------------------------------ charts */
.chartbox { position: relative; width: 100%; height: 230px }
.chartbox.sm { height: 190px; width: 240px }
.chartbox canvas { width: 100% !important; height: 100% !important }

/* ----------------------------------------------------------------- buttons */
.btn {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: 0; font-family: inherit; font-size: 13px;
  padding: 9px 14px; cursor: pointer; width: 100%;
}
.btn:disabled { background: var(--soft); color: var(--grey); border-color: var(--line); cursor: default }
.btn2 { background: transparent; color: var(--navy) }
.btn2:disabled { background: transparent; color: var(--grey) }

.land-pick select, .land-pick input {
  width: 100%; font-family: inherit; font-size: 13px; padding: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 0;
}
.land-pick input:focus, .land-pick select:focus { outline: 1px solid var(--navy); border-color: var(--navy) }

/* ----------------------------------------------------------------- tooltip */
#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;
}

/* --------------------------------------------------------------- regblocks */
.regblock { margin-bottom: 40px }
.regblock + .regblock { border-top: 1px solid var(--rule2); padding-top: 40px }
.regblock h4 { text-align: center; font-size: 13px; font-weight: 600; color: var(--navy); margin: 0 0 14px }
.reglink { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; text-decoration: underline }

/* ================================================== freemium 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 withheld cell. An <i> rather than plain text so it can be told apart
   from a real value at a glance and by a selector. */
.fr-pm {
  font-style: normal;
  font-size: .72em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: .75;
}
.fr-pm::before {
  content: "";
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-right: 5px;
  vertical-align: -1px;
  opacity: .65;
  background: currentColor;
  -webkit-mask: var(--fr-lock-ico) center / contain no-repeat;
  mask: var(--fr-lock-ico) center / contain no-repeat;
}

#l_rows tr.fr-row td { opacity: .55 }
#l_rows tr.fr-row, #l_rows tr.fr-row .pickradio { cursor: not-allowed }
#l_rows tr.fr-row:hover { background: transparent }

/* The count carries the withheld scale, so it is read rather than glanced
   at. */
body.is-free .land-foot { color: var(--ink-muted) }

/* The currency gate, stated once under the prices it describes. */
.fr-snap {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 6px;
  font-style: italic;
}


@media (max-width: 900px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) }
  .land-top { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .land-art { grid-column: 1 / span 2 }
  .land-pick { grid-column: 1 }
  .land-act { grid-column: 2 }
  #siteHeader .dz-header { grid-template-columns: minmax(0, 1fr) }
  .dz-left, .dz-right { grid-column: 1 }
  #tool .blk8 { grid-template-columns: repeat(2, 1fr) }
  .grid2.viz { grid-template-columns: minmax(0, 1fr) }
  #tool .spd-pair { grid-template-columns: minmax(0, 1fr); gap: 0 }
  #tool .selrow { grid-template-columns: minmax(0, 1fr) }
  #tool .meth-cols { grid-template-columns: 1fr }
  #tool .mflow { flex-wrap: wrap; gap: 8px }
  #tool .mflow-a { display: none }
  #tool .mflow-b { flex: 1 1 45% }
}