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

    * {
      box-sizing: border-box
    }

    body {
      font-family: 'Poppins', sans-serif;
      color: var(--navy);
      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
    }

    a {
      color: var(--green);
      text-decoration: none
    }

    .hidden {
      display: none !important
    }

    .muted {
      color: var(--grey)
    }

    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(--line)
    }

    th:first-child,
    td:first-child {
      text-align: left
    }

    thead th {
      font-weight: 600;
      color: var(--navy);
      border-bottom: 1.5px solid var(--navy)
    }

    tr.tot td {
      font-weight: 600;
      border-top: 1.5px solid var(--navy)
    }

    .pos {
      color: var(--green)
    }

    .neg {
      color: var(--ets)
    }

    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
    }

    .xscroll {
      overflow-x: auto
    }

    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 {
      padding-top: 18px
    }

    /* Four equal columns. The drawing takes 1-2, the dropdown and search take
       3, the buttons take 4 - so the two control stacks are a quarter each and
       line up with the table beneath. The column edges are structure, not
       decoration: nothing draws a rule on them. */
    .land-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      align-items: center;
      margin-bottom: 0
    }

    .land-top .shipart {
      grid-column: 1 / span 2
    }

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

    /* The buttons sit on the same two rows as the dropdown and the search, so
       they take the inputs' padding rather than the .btn default of 12px 22px.
       Equal heights, and the two stacks line up row for row. */
    .land-act .btn {
      padding: 7px 8px;
      line-height: 1.55
    }

    /* The seam closes the selection area off from the table. --line, not the
       #tool rule tokens: the tool's design language is scoped to #tool and
       the landing page keeps its own navy-on-white palette. */
    .land-seam {
      border-top: 1px solid var(--line);
      margin: 26px 0 18px
    }

    .shipart {
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .shipart svg {
      width: 100%;
      height: 100%
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 18px
    }

    .brand .mark {
      width: 48px;
      height: 48px;
      background: var(--navy);
      border-radius:0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px
    }

    .brand .name {
      line-height: 1.1
    }

    .brand .name b {
      font-size: 19px;
      font-weight: 600
    }

    .brand .name span {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: var(--grey);
      display: block;
      font-weight: 600
    }

    .shiptable tbody tr {
      cursor: pointer
    }

    .shiptable tbody tr:hover {
      background: var(--soft)
    }

    .shiptable tbody tr.sel {
      background: var(--sel-row)
    }

    .shiptable td,
    .shiptable th {
      padding: 9px 12px
    }

    .shiptable td:nth-child(2),
    .shiptable th:nth-child(2),
    .shiptable td:nth-child(3),
    .shiptable th:nth-child(3),
    .shiptable td:nth-child(4),
    .shiptable th:nth-child(4) {
      text-align: left
    }

    #tool {
      padding-top: 14px
    }

    .tool-top {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 20px;
      align-items: start;
      margin-bottom: 8px
    }

    .summary {
      border: 1px solid var(--line)
    }

    .summary .metric {
      display: flex;
      justify-content: space-between;
      padding: 9px 16px;
      border-bottom: 1px solid var(--line);
      font-size: 13px
    }

    .summary .metric:last-child {
      border-bottom: 0
    }

    .summary .metric .v {
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin: 22px 0 26px
    }

    .tab {
      position: relative;
      background: var(--navy);
      color: #fff;
      text-align: center;
      padding: 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .3px
    }

    .tab .n {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius:0;
      background: #fff;
      border: 1px solid var(--line);
      color: #6b7894;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tab.active {
      background: var(--soft);
      color: var(--navy);
      cursor: default;
      outline: 1px solid var(--navy)
    }

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

    .intro {
      margin-bottom: 26px
    }

    .acc {
      margin-bottom: 14px
    }

    .acc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0 12px
    }

    .acc-head h3 {
      font-size: 16px
    }

    .acc-toggle {
      display: flex;
      gap: 6px
    }

    /* Pills, restored by request: a deliberate exception to the square-
       corner house rule, like the round slider thumbs. Elongated (wider
       than tall) per the reference screenshot. */
    .acc-toggle button {
      width: 42px;
      height: 26px;
      border: 1px solid var(--line);
      background: #fff;
      cursor: pointer;
      color: var(--navy);
      font-size: 10px;
      border-radius: 999px
    }

    .acc-toggle button.on {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    .acc-body {
      border: 0;
      padding: 20px
    }

    .acc.closed .acc-body {
      display: none
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px
    }

    .grid2.viz {
      grid-template-columns: 1fr 360px
    }

    @media(max-width:880px) {

      .grid2,
      .grid2.viz,
      .tool-top,
      .land-top {
        grid-template-columns: 1fr
      }

      .tabs {
        grid-template-columns: 1fr 1fr
      }
    }

    .kv {
      /* uniform row: no dividing lines, identical height whether the row
         holds an input, a select or a plain value, so the left and right
         columns of a section line up row for row */
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 40px;
      padding: 2px 0;
      font-size: 12.5px;
      gap: 10px
    }

    .kv .k {
      color: #6b7894
    }

    .kv .v {
      font-weight: 500;
      text-align: right
    }

    .kv input[type=number],
    .kv input[type=text] {
      width: 130px;
      text-align: right;
      border: 1px solid #c8ccd4;
      border-radius:0;
      padding: 4px 8px;
      background: #fff;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
      transition: border-color .15s
    }

    .kv select {
      width: 160px;
      text-align: right;
      border: 1px solid #c8ccd4;
      border-radius:0;
      padding: 4px 8px;
      background: #fff;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
      transition: border-color .15s
    }

    .kv input:focus,
    .kv select:focus {
      outline: 0;
      border-color: var(--navy);
      box-shadow: 0 0 0 2px rgba(10,21,67,.12)
    }

    .chartbox {
      position: relative;
      height: 260px
    }

    .chartbox.sm {
      height: 210px
    }

    .note {
      font-size: 11px;
      color: #8a93a8;
      font-style: italic;
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 9px;
      white-space: pre-line
    }

    .band {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--grey);
      margin: 0 0 10px
    }

    .pie-wrap {
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .daylist {
      width: 100%;
      margin-top: 6px
    }
    .daylist input[type=number] {
      border: 1px solid #c8ccd4;
      border-radius:0;
      padding: 3px 6px;
      background: #fff;
      font-family: inherit;
      font-size: inherit
    }
    .daylist input[type=number]:focus {
      outline: 0;
      border-color: var(--navy)
    }

    .pill {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .4px;
      background: var(--sel-row);
      color: var(--ink-soft);
      border: 1px solid var(--line);
      padding: 2px 8px;
      margin-left: 8px;
      vertical-align: middle
    }

    .placeholder {
      background: var(--soft);
      border: 1px dashed var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--grey);
      font-size: 12px;
      min-height: 200px;
      text-align: center;
      padding: 20px
    }

    .slider-row {
      /* one shared column grid per panel: label | control | value.
         Every row aligns with its neighbours instead of wrapping. */
      display: grid;
      grid-template-columns: minmax(150px, 205px) 1fr 52px;
      gap: 14px;
      align-items: center;
      min-height: 34px;
      margin-bottom: 14px;
      font-size: 12.5px
    }

    .slider-row input[type=number] {
      justify-self: end
    }

    .slider-row .rng-val {
      text-align: right;
      font-variant-numeric: tabular-nums
    }

    .slider-row label {
      color: #41506f
    }

    .slider-row input[type=range] {
      width: 100%;
      accent-color: var(--navy)
    }

    .slider-row input[type=number] {
      text-align: right
    }

    .note.coming-soon {
      background: #f8f9fc;
      border: 1px dashed #b0b8cc;
      border-radius:0;
      padding: 18px 20px;
      color: #5a6480;
      font-size: 13px
    }

    .foot {
      text-align: center;
      color: var(--grey);
      font-size: 11px;
      padding: 30px 0
    }

    hr {
      border: 0;
      border-top: 1px solid var(--line)
    }

    .selrow {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      font-size: 12.5px
    }

    .selrow select {
      width: auto;
      min-width: 170px
    }

    .ck {
      width: 16px;
      height: 16px;
      accent-color: var(--navy)
    }

    .legend {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 11px;
      margin-top: 10px;
      color: #41506f;
      justify-content: center
    }

    .legend span {
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .legend i {
      width: 11px;
      height: 11px;
      display: inline-block;
      border-radius: 0
    }

/* ===== layout (was first <style> in <body>) ===== */
    /* ===== SS tool family design language (scoped to #tool; landing untouched) ===== */
    :root {
      --paper: transparent;
      --paper-warm: #f4f5f8;
      --ink: #15151a;
      --spd-fs: 12.5px;   /* v25.39: one size for every measure-panel text */
      --ink-soft: #3d3d47;
      --ink-muted: #6b6b75;
      --copper: #0A1543;
      --copper-dk: #0A1543;
      --moss: #5C7C3E;
      --rust: #c00000;
      --rule2: rgba(10, 21, 67, .12);
      --rule2-soft: rgba(10, 21, 67, .06);
      /* Structural seams - the header rule, the rule closing the summary
         band, and the fold rules. Deliberately a separate token from
         --rule2 (which draws table rows and block borders): those are
         fine faint, these have to be seen. One value to dial if it wants
         more or less presence. */
      --rule-band: rgba(10, 21, 67, .38);
      /* The single gap that governs the summary band: below the section
         buttons, around the seams, and between the blocks and the seam.
         One value so folded and expanded keep the same rhythm. */
      --band-gap: 31px;   /* v25.51: +20% air above and below every + seam */
      /* Width of the value column on every measure parameter row. */
      --param-w: 218px;
      /* Gap above the Case studies / Customize further row. Was an inline
         14px on three separate strings in measureActions(); one token now,
         opened up so the buttons read as their own step rather than the tail
         of the About paragraph. NOT inline: an inline margin beats any
         selector, which is exactly what made the More info frames uneven. */
      --acc-gap: 26px;
      /* The landing table shows eighteen rows and then scrolls. Expressed as
         a height rather than a row count because the box scrolls: 18 rows at
         31px plus the 34px sticky header. Retune the row height here and the
         box follows, so the count cannot drift away from the intent. */
      --ship-row: 31px;
      --ship-rows: calc(18 * var(--ship-row) + 34px);
      /* The breathing room at the TOP of every subsection's body, so a
         subsection is not lopsided: content should sit as far below its own
         header as the More info box sits above the next one.
             below  20px (.acc-body padding-bottom)
                  + 30px (#tool .acc margin-bottom)
                  +  7px (next .acc-head padding-top)   = 57px
             above   7px (this .acc-head padding-bottom)
                  + 50px (this token)                   = 57px
         Change this one number to retune the whole tool; nothing else sets
         the top padding of a subsection body. */
      --sub-top: 50px
    }

    #tool {
      font-family: 'Poppins', sans-serif;
      background: var(--paper);
      color: var(--ink)
    }

    #tool a {
      color: var(--copper)
    }

    #siteHeader .dz-header,
    #tool .dz-header {
      background: var(--navy);
      color: var(--paper);
      padding: 16px 26px;
      margin: 0 -26px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid var(--copper)
    }

    #siteHeader .dz-brand,
    #tool .dz-brand {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap
    }

    #siteHeader .dz-mark,
    #tool .dz-mark {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1.25rem;
      letter-spacing: -.01em;
      color: var(--paper-warm)
    }

    /* The square before the wordmark is gone, so "Sustainable Ships" starts
       flush with the left edge of the tool below it. */
    #siteHeader .dz-mark::before,
    #tool .dz-mark::before {
      content: none;
      display: none;
      width: 0;
      height: 0;
      background: none;
      border-radius:0;
      margin-right: 0;
      transform: none
    }

    #siteHeader .dz-product,
    #tool .dz-product {
      font-size: .9rem;
      opacity: .85
    }

    #siteHeader .dz-product strong,
    #tool .dz-product strong {
      color: #fff;
      font-weight: 600
    }

    #siteHeader .dz-right,
    #tool .dz-right {
      display: flex;
      align-items: center;
      gap: 16px
    }

    #siteHeader .dz-version,
    #tool .dz-version {
      font-family: 'Poppins', sans-serif;
      font-size: .7rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5)
    }

    #siteHeader .dz-save,
    #tool .dz-save {
      background: var(--copper);
      color: #fff;
      border: 0;
      padding: 9px 16px;
      border-radius:0;
      font-family: 'Poppins', sans-serif;
      font-size: .85rem;
      font-weight: 500;
      cursor: pointer
    }

    #siteHeader .dz-save:hover,
    #tool .dz-save:hover {
      background: var(--copper-dk)
    }

    #tool .dz-hero {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 26px;
      align-items: center;
      padding: 24px 0 6px
    }

    #tool .dz-hero .shipart {
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    #tool .summary {
      display: flex;
      flex-direction: column;
      gap: 10px;
      border: 0
    }

    #tool .summary .metric {
      display: block;
      background: #fff;
      border: 1px solid var(--rule2);
      border-left: 3px solid var(--navy);
      border-radius:0;
      padding: 12px 15px
    }

    #tool .summary .metric.k-cost {
      border-left-color: var(--rust)
    }

    #tool .summary .metric.k-emissions {
      border-left-color: var(--copper)
    }

    #tool .summary .metric>span:first-child {
      display: block;
      font-size: .66rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: 5px;
      font-weight: 500
    }

    #tool .summary .metric .v {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 1.4rem;
      color: var(--navy);
      letter-spacing: -.01em
    }

    /* section-nav tabs */
    /* The section buttons are four separate blocks on the SAME grid as
       the summary blocks above: 4 x 1fr with the same 14px gaps, so each
       button lines up column-for-column with the blocks and the outer
       edges stay flush. They were one joined grey strip with a copper
       underline on the active tab; now each is a white card, and the
       active one inverts to solid navy with white letters, the same
       behaviour as the Methodology button in the header. */
    #tool .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      background: none;
      border: 0;
      border-radius:0;
      overflow: visible;
      /* No bottom margin: whatever follows owns the gap, so the distance
         from the buttons to the seam is the same whether the blocks sit
         between them or not. */
      margin: 19px 0 0;
      padding: 0;
      box-shadow: none
    }

    #tool .tab {
      background: #fff;
      border: 1px solid var(--rule2);
      /* v25.41: the four section buttons read black, not muted grey. The
         active one keeps its white-on-navy treatment (.tab.active below). */
      color: #000;
      text-align: center;
      padding: 14px 8px;
      font-size: .88rem;
      font-weight: 500;
      opacity: 1;
      cursor: pointer;
      position: static;
      transition: border-color .14s
    }

    #tool .tab .n {
      position: static !important;
      display: inline !important;
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      background: none !important;
      border: 0 !important;
      border-radius:0;
      box-shadow: none !important;
      padding: 0 !important;
      color: var(--ink-muted);
      font-family: 'Poppins', sans-serif;
      font-size: .7rem;
      margin-right: 7px;
      line-height: 1
    }

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

    #tool .tab.active .n {
      color: #fff
    }

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

    /* The fade marks a tab that is not available yet (Business Case before
       a measure is picked). v25.43 removed it and Vincent put it back: the
       lock IS the fade. The four tab labels are black (v25.41); this one
       is deliberately pale while it is locked. */
    #tool .tab.tab-disabled {
      opacity: .38;
      cursor: not-allowed;
      pointer-events: none
    }

    /* accordions */
    /* De-boxed: subsections are a bare label with the toggle pills, and
       their content flows on the page. The frame and the rule under the
       bar are gone; spacing separates one subsection from the next. The
       More info frames (.mi-box) deliberately keep their border - that
       was decided separately and stands. */
    #tool .acc {
      border: 0;
      border-radius: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. */
    #tool .acc.closed {
      /* A touch of separation between one subsection header and the next:
         they read as a list rather than a solid stack. */
      margin-bottom: 8px
    }

    /* With no frame, the label and content sit flush with the page edge
       rather than inset inside a box that is no longer drawn. The rows sit
       tighter than the boxed version did: the border used to need air
       around it, a bare label does not. */
    #tool .acc-head {
      padding: 7px 0
    }

    #tool .acc-head h3 {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 1.05rem;
      color: var(--navy)
    }

    /* With no box, a closed subsection is a bare label and two pills, so
       the label itself answers the mouse: it deepens on hover. */
    #tool .acc-head:hover h3 {
      color: var(--copper)
    }

    #tool .acc-toggle button {
      border: 1px solid var(--rule2);
      background: #fff;
      color: var(--ink-muted)
    }

    #tool .acc-toggle button.on {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    /* Every subsection in every section: content starts --sub-top below the
       header, which is set to match the gap from its More info box down to
       the next header. One rule, so no section can drift from the others. */
    #tool .acc-body {
      border-top: 0;
      overflow: visible;
      padding: var(--sub-top) 0 20px
    }

    /* headings + copy */
    #tool .band {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 1.05rem;
      color: var(--navy)
    }

    #tool .subtxt,
    #tool .note {
      color: var(--ink-muted)
    }

    #tool .kv .k {
      color: var(--ink-soft)
    }

    #tool .placeholder {
      border: 1px solid var(--rule2);
      background: var(--paper-warm);
      color: var(--ink-muted);
      border-radius: 0
    }

    /* tables */
    #tool table {
      background: #fff;
      /* De-framed: the row rules carry the structure. Changed here rather
         than overridden further down, so there is one answer in the file. */
      border: 0;
      border-radius:0;
      overflow: hidden
    }

    #tool 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)
    }

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

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

    #tool tr.tot td {
      background: transparent;
      border-top: 1px solid var(--rule2);
      font-weight: 600
    }

    /* measure selection rows: unselected fade back, selected go gray */
    #tool .meastab tbody tr:not(.tot):not(.sel) {
      opacity: .55;
      transition: opacity .15s
    }

    #tool .meastab tbody tr:not(.tot):not(.sel):hover {
      opacity: .85
    }

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

    #tool tr.sel td.muted {
      color: #5a6376
    }

    #tool tr.sel .ck {
      accent-color: var(--navy)
    }

    /* The selected measure comes back to full strength - it is in the case
       now, so it reads at the same weight as the reference. */
    #tool tr.sel .lcabar-fill { background: var(--navy); }
    #tool .lcabar-val { min-width: 52px; text-align: right; font-size: 10px; color: #6a7386; font-variant-numeric: tabular-nums; }

    #tool td:not(:first-child),
    #tool th:not(:first-child) {
      font-family: 'Poppins', sans-serif
    }

    #tool .pos {
      color: var(--moss)
    }

    #tool .neg {
      color: var(--rust)
    }

    /* inputs */
    #tool input[type=text],
    #tool input[type=number],
    #tool select {
      font-family: 'Poppins', sans-serif;
      border: 1px solid var(--rule2);
      border-radius:0;
      background: #fff;
      color: var(--ink)
    }

    #tool select {
      font-family: 'Poppins', sans-serif
    }

    #tool input:focus,
    #tool select:focus {
      outline: 1px solid var(--copper);
      border-color: var(--copper)
    }

    /* A slider shows its state through the thumb, so the focus box around
       it is noise: dragging one drew a navy rectangle for the whole drag.
       Removed for pointer use only. :focus-visible still fires when the
       slider is reached by keyboard, so tabbing to it is not left silent. */
    #tool input[type=range]:focus {
      outline: none;
      border-color: transparent
    }

    #tool input[type=range]:focus-visible {
      outline: 1px solid var(--copper)
    }

    /* KPIs (compliance tab) */
    #tool .kpi {
      background: #fff;
      border: 1px solid var(--rule2);
      border-left: 3px solid var(--navy);
      color: var(--ink);
      border-radius: 0
    }

    #tool .kpi .v {
      font-family: 'Poppins', sans-serif;
      color: var(--navy);
      font-weight: 500
    }

    #tool .kpi .l {
      color: var(--ink-muted);
      opacity: 1
    }

    #tool .kpi.lt {
      background: var(--paper-warm)
    }

    /* buttons */
    #tool .btn {
      background: var(--copper);
      border-radius:0;
      font-family: 'Poppins', sans-serif;
      font-weight: 500
    }

    #tool .btn:hover {
      background: var(--copper-dk)
    }

    #tool .btn.btn2,
    #tool .btn.out {
      background: #fff;
      color: var(--navy);
      border: 1px solid var(--rule2)
    }

    #tool .btn.btn2:hover,
    #tool .btn.out:hover {
      background: var(--paper-warm)
    }

    /* achieved bar + misc accents */
    #tool .dz-moreinfo {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      color: #fff;
      font-size: .8rem;
      user-select: none
    }

    #tool .dz-moreinfo input {
      appearance: none;
      -webkit-appearance: none;
      width: 17px;
      height: 17px;
      border: 1.5px solid rgba(255, 255, 255, .55);
      border-radius:0;
      background: transparent;
      cursor: pointer;
      position: relative;
      flex: none
    }

    #tool .dz-moreinfo input:checked {
      background: #1c2c5e;
      border-color: #fff
    }

    #tool .dz-moreinfo input:checked::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1px;
      width: 4px;
      height: 9px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    #tool .achbar {
      margin: 14px 2px 2px;
      padding: 0
    }

    #tool .ach-lab {
      display: flex;
      justify-content: space-between;
      font-size: 12.5px;
      color: var(--ink);
      margin-bottom: 7px
    }

    #tool .ach-track {
      position: relative;
      height: 26px;
      background: var(--paper-warm);
      border-radius:0;
      overflow: visible
    }

    #tool .ach-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--navy);
      border-radius: 0
    }

    #tool .ach-track .achmark {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 2px;
      background: var(--ets)
    }

    #tool .ach-scale {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--ink-muted);
      margin-top: 5px
    }

    #tool .subtxt,
    #tool .note {
      font-style: italic
    }

    #tool .acc-head-r {
      display: flex;
      align-items: center;
      gap: 16px
    }

    #tool .acc-moreinfo {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: var(--ink-muted);
      font-size: .72rem;
      user-select: none;
      font-style: normal
    }

    /* More info is a button. The input stays in the DOM because it carries
       the toggle state and the click handler, but it is never drawn: the
       whole bar is the control, and the +/- glyph after the label is the
       only affordance. This overrides the global checkbox styling. */
    #tool .acc-moreinfo input[type=checkbox],
    #landing .acc-moreinfo input[type=checkbox] {
      appearance: none;
      -webkit-appearance: none;
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      pointer-events: none
    }

    #tool .acc-moreinfo input[type=checkbox]::after,
    #landing .acc-moreinfo input[type=checkbox]::after {
      content: none
    }

    /* More info opens and closes by COLLAPSING, not by display:none, so it
       can be animated. display has no in-between state; max-height does.
       The ceiling is deliberately far above any real block - it is only a
       bound for the transition, and content never reaches it. */
    #tool .acc.noinfo .note,
    #tool .acc.noinfo .acc-detail {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden
    }

    #tool .acc-detail {
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--rule2-soft)
    }

    #tool .lca-excluded td {
      opacity: 0.35;
      text-decoration: line-through
    }

    #tool .lca-excluded td:first-child {
      opacity: 1;
      text-decoration: none
    }

    #tool .lca-ck {
      width: 15px;
      height: 15px;
      cursor: pointer;
      accent-color: var(--navy)
    }

    #tool .acc-moreinfo-body {
      display: flex;
      justify-content: center;
      margin: 22px 0 4px;
      padding-top: 8px;
      width: 100%
    }

    #tool .fuelctrl {
      justify-content: flex-start;
      gap: 26px;
      flex-wrap: wrap;
      align-items: center
    }

    #tool .fuelctrl input {
      width: 82px
    }

    #tool .fueltab {
      font-size: 11px
    }

    #tool .fueltab th {
      font-weight: 600;
      white-space: nowrap
    }

    #tool .fueltab td {
      white-space: nowrap
    }

    #tool .foot {
      color: var(--ink-muted)
    }

    #tool .foot a {
      color: var(--copper)
    }

    /* input-field vertical rhythm */
    #tool .kv {
      padding: 7px 0;
      align-items: center;
      border-bottom: 1px solid var(--rule2-soft)
    }

    #tool .grid2>div>.kv:last-child {
      border-bottom: none
    }

    #tool .kv input {
      padding: 6px 8px
    }

    #tool .fg {
      gap: 14px 16px
    }

    #tool .f label {
      margin-bottom: 6px
    }

    #tool .slider-row {
      margin-bottom: 12px
    }

    #tool .selrow {
      margin-bottom: 14px
    }

    @media(max-width:860px) {
      #tool .dz-hero {
        grid-template-columns: 1fr
      }

      #tool .tabs {
        flex-wrap: wrap
      }

      /* the tabs follow the summary blocks down to two columns, so the
         two grids stay aligned on narrow screens too */
      #tool .tabs {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* header controls */
    #siteHeader .dz-btn2,
    #tool .dz-btn2 {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .35);
      padding: 8px 14px;
      border-radius:0;
      font-family: 'Poppins', sans-serif;
      font-size: .82rem;
      font-weight: 500;
      cursor: pointer
    }

    #siteHeader .dz-btn2:hover,
    #tool .dz-btn2:hover {
      border-color: #fff;
      background: rgba(255, 255, 255, .08)
    }

    #siteHeader .dz-btn2.active,
    #tool .dz-btn2.active {
      background: var(--copper);
      border-color: var(--copper)
    }

    #siteHeader .dz-dd,
    #tool .dz-dd {
      position: relative
    }

    #siteHeader .dz-menu,
    #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: 170px;
      z-index: 20;
      overflow: hidden
    }

    #siteHeader .dz-menu a,
    #tool .dz-menu a {
      display: block;
      padding: 10px 14px;
      font-size: .85rem;
      color: var(--ink);
      cursor: pointer;
      border-bottom: 1px solid var(--rule2-soft)
    }

    #siteHeader .dz-menu a:last-child,
    #tool .dz-menu a:last-child {
      border-bottom: 0
    }

    #siteHeader .dz-menu a:hover,
    #tool .dz-menu a:hover {
      background: var(--paper-warm);
      color: var(--navy)
    }

    /* key outputs card */
    #tool .keyout {
      border: 1px solid var(--rule2);
      border-radius:0;
      background: #fff;
      overflow: hidden
    }

    #tool .keyout-t {
      background: var(--navy);
      color: #fff;
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: 0;
      padding: 9px 14px
    }

    #tool .ko-row {
      display: grid;
      grid-template-columns: 1fr auto 20px;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      font-size: 12.5px;
      border-bottom: 1px solid var(--rule2-soft)
    }

    #tool .ko-row:last-child {
      border-bottom: 0
    }

    #tool .ko-row .ko-k {
      color: var(--ink-muted)
    }

    #tool .ko-row .ko-v {
      font-weight: 600;
      color: var(--navy);
      font-variant-numeric: tabular-nums;
      text-align: right
    }

    #tool .ko-row .ko-i {
      width: 16px;
      height: 16px;
      border-radius:0;
      border: 1px solid var(--rule2);
      font-size: 10px;
      font-style: italic;
      color: var(--ink-muted);
      cursor: help;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: Georgia, serif
    }

    #tool .ko-row.hl {
      background: var(--sel-row)
    }

    #tool .ko-row.hl .ko-v {
      color: var(--copper-dk)
    }

    #tool .sub {
      font-size: 11px;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin: 0 0 8px;
      font-weight: 600
    }

    /* methodology panel */
    /* The methodology page spans the same column as the rest of the tool,
       so its right edge lines up with everything else. */
    #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 Calculations band heading carries no rule of its own. */
    #tool #methCalc .band {
      border-bottom: 0
    }

    /* The pipeline: six blocks with arrows between them. */
    /* The 38px below the strip was 8px here plus the 30px bottom margin of
       the .mflow-cap caption that used to sit under it. The caption is gone
       by request, so the gap it was carrying moves onto the strip itself
       rather than being lost with it. One number, one owner. */
    #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);
      line-height: 1.35
    }

    #tool .mflow-a {
      flex: 0 0 26px;
      position: relative
    }

    #tool .mflow-a::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 5px;
      right: 5px;
      height: 1px;
      background: var(--navy)
    }

    #tool .mflow-a::before {
      content: '';
      position: absolute;
      top: 50%;
      right: 5px;
      width: 0;
      height: 0;
      transform: translateY(-50%);
      border-left: 6px solid var(--navy);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent
    }

    #tool .meth-topic ul {
      margin: 0;
      padding: 0;
      list-style: none
    }

    #tool .meth-topic li {
      position: relative;
      padding-left: 16px;
      font-size: 12.5px;
      line-height: 1.9;
      color: var(--ink)
    }

    #tool .meth-topic li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 5px;
      height: 5px;
      background: var(--navy)
    }

    @media (max-width: 900px) {
      #tool .mflow {
        flex-wrap: wrap;
        gap: 8px
      }

      #tool .mflow-a {
        display: none
      }

      #tool .mflow-b {
        flex: 1 1 45%
      }
    }

    #tool #methodPanel h3 {
      font-weight: 600;
      color: var(--navy);
      margin: 18px 0 6px;
      font-size: 1rem
    }

    #tool #methodPanel p {
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.6;
      margin: 0 0 8px
    }

    /* one tooltip icon everywhere: same size, colour, weight and face as
       the summary block's */
    #tool .ii,
    #tool .ko-row .ko-i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius:0;
      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
    }

    #tool.noinfo .subtxt {
      display: none
    }

    /* ===== selection page — same design language ===== */
    #landing {
      font-family: 'Poppins', sans-serif;
      background: var(--paper);
      color: var(--ink)
    }

    #landing a {
      color: var(--copper)
    }

    #landing .brand {
      align-items: baseline;
      gap: 12px
    }

    #landing .brand .mark {
      width: 9px !important;
      height: 9px !important;
      min-width: 9px;
      background: var(--copper) !important;
      border-radius:0;
      font-size: 0 !important;
      color: transparent !important;
      box-shadow: none !important;
      align-self: center
    }

    #landing .brand .name b {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1.3rem;
      color: var(--navy);
      letter-spacing: -.01em
    }

    #landing .brand .name span {
      font-family: 'Poppins', sans-serif;
      font-size: .66rem;
      letter-spacing: .18em;
      color: var(--copper);
      font-weight: 500
    }

    #landing .btn {
      background: var(--copper);
      border: 0;
      border-radius:0;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      color: #fff
    }

    #landing .btn:hover {
      background: var(--copper-dk)
    }

    #landing .btn.btn2 {
      background: #fff;
      color: var(--navy);
      border: 1px solid var(--rule2)
    }

    #landing .btn.btn2:hover {
      background: var(--paper-warm)
    }

    #landing .btn[disabled] {
      background: var(--paper-warm);
      color: var(--ink-muted);
      border: 1px solid var(--rule2-soft)
    }

    #landing select,
    #landing input[type=text] {
      font-family: 'Poppins', sans-serif;
      border: 1px solid var(--rule2);
      border-radius:0;
      background: #fff;
      color: var(--ink)
    }

    #landing select {
      font-family: 'Poppins', sans-serif
    }

    #landing input:focus,
    #landing select:focus {
      outline: 1px solid var(--copper);
      border-color: var(--copper)
    }

    #landing input[type=radio] {
      accent-color: var(--copper)
    }

    /* No frame. The rows and the frozen header carry the structure; the box
       around them read as a second border inside the page's own column. */
    #landing .shiptable {
      background: #fff;
      border: 0;
      border-radius:0;
      width: 100%
    }

    /* Eighteen rows, then scroll INSIDE the box so the page itself does not
       grow with the category. Vertical for the rows, horizontal for the
       expanded columns; the header stays put through both. */
    #landing .shipscroll {
      position: relative;
      max-height: var(--ship-rows);
      overflow: auto
    }

    #landing .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. */
    #landing .shiptable th,
    #landing .shiptable td {
      font-size: 11.5px;
      padding: 5px 10px;
      height: var(--ship-row);
      box-sizing: border-box;
      white-space: nowrap;
      color: var(--navy)
    }

    /* Every header centred; the body reads left for words and centred for
       figures, so a column of names and a column of years each line up on
       their own terms. The global `td { text-align: right }` and the
       nth-child overrides above are both switched off here. */
    #landing .shiptable thead th {
      text-align: center;
      color: var(--navy)
    }

    #landing .shiptable td {
      text-align: left
    }

    /* v25.153: the vessel count. Same size, weight and colour as the header
       so it reads as part of the table's frame rather than as data - it is a
       statement ABOUT the rows, not one of them. Left-aligned in the name
       column, and the footer is sticky like the header so the count stays
       visible while the list is scrolled. */
    #landing .shiptable tfoot td {
      position: sticky;
      bottom: 0;
      z-index: 3;
      background: #fff;
      border-top: 1px solid var(--rule, #e6e8ee)
    }

    #landing .shiptable td.l-count {
      text-align: left;
      /* v25.156: the HEADER's own colour. This said var(--navy) and sat AFTER
         the rule at the end of the file that paints every th and td #000 -
         so the count came out blue against black headers. Matching means
         taking the same value, not naming a colour that looks similar. */
      color: #000;
      font-weight: 600;
      white-space: nowrap
    }

    #landing .shiptable td.num {
      text-align: center
    }

    #landing .shiptable td.l-name {
      font-weight: 500
    }

    /* The control sits in its own column at the right of the table and is
       drawn once, on the row nearest the vertical middle, so it reads as a
       handle for the whole table rather than a per-row action. It lives in a
       cell, so it travels with the table when the widened view scrolls. */
    /* v25.155: the sticky dock. Zero-height so it takes no space in the
       flow; the button inside is offset to sit on the expander column,
       vertically centred in whatever part of the list is on screen. */
    /* v25.159: sticky on BOTH axes. The dock was a flex row justified to
       flex-end inside .shipscroll - and that box scrolls HORIZONTALLY too,
       so "the end" is the end of the CONTENT, not of what is on screen. With
       the columns expanded the control sat off beside Manager rather than at
       the visible right edge. Floating it and giving it a right offset makes
       it stick horizontally as well, so it holds the corner of the viewport
       wherever the table is scrolled to. */
    /* v25.160: OUTSIDE the scroller, in a wrapper that does not move. Inside
       .shipscroll the dock was sticky - and sticky follows its CONTAINING
       BLOCK, which in a two-axis scroller is the content box: "right: 16px"
       meant 16px from the right of all hundred columns, not of the visible
       table. Twice I tried to make sticky mean the viewport; it cannot. The
       wrapper is the viewport. */
    #landing .shipscroll-wrap {
      position: relative
    }

    #landing .l-exp-dock {
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      pointer-events: none
    }

    #landing .l-exp-dock > span {
      pointer-events: auto
    }

    /* The column behind it is dimmed as a COLUMN, not cell by cell, so the
       control reads as sitting on top of the table rather than inside a
       hole. */
    #landing .shiptable td.l-exp-cell,
    #landing .shiptable th.l-exp-cell {
      background: rgba(255, 255, 255, .72)
    }

    #landing .l-exp-cell {
      width: 58px;
      padding-left: 28px !important;
      padding-right: 0 !important;
      text-align: center
    }

    #landing .l-exp {
      width: 26px;
      height: 26px;
      padding: 0;
      border: 1.5px solid var(--navy);
      border-radius: 50%;
      background: #fff;
      color: var(--navy);
      cursor: pointer;
      font-family: inherit;
      font-size: 17px;
      font-weight: 500;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    #landing .l-exp:hover {
      background: var(--navy);
      color: #fff
    }

    /* The checkbox column stays put while the extra columns scroll past. */
    #landing .shiptable th.l-ck,
    #landing .shiptable td.l-ck {
      position: sticky;
      left: 0;
      z-index: 2;
      width: 30px;
      background: #fff
    }

    #landing .shiptable thead th.l-ck {
      z-index: 4
    }

    #landing .shiptable tbody tr.sel td.l-ck {
      background: var(--sel-row)
    }

    /* Holds the drawing's 240px exactly, so the page does not jump between a
       ship and no ship as the reader types in the search. */
    #landing .land-noart {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: 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.
    */
    #landing .land-foot-rule {
      border-top: 1px solid var(--line);
      margin: 34px 0 0
    }

    /* Justified, so the right edge lines up with the table and the tool's
       own column - the same rule the methodology lead paragraphs follow.
       Navy, not a tool grey: the landing keeps its own palette. */
    #landing .land-note {
      font-size: 12px;
      line-height: 1.75;
      color: var(--navy);
      text-align: justify;
      hyphens: auto;
      max-width: none;
      border-top: 0;
      padding-top: 0;
      margin: 26px 0 0;
      white-space: pre-line
    }

/* Decarbonizer styles. Extracted from index.html. Order preserved so the
   cascade is identical to the original inline blocks. */

/* ===== base (was <style> in <head>) ===== */

    #landing .shiptable thead th {
      background: #fff;
      /* Opaque, not transparent: the header is frozen and the rows scroll
         UNDER it. Transparent let them show through and the text collided.
         White plus the z-index below is what makes them disappear cleanly. */
      color: var(--navy);
      font-size: 12.5px;
      letter-spacing: 0;
      font-weight: 600;
      padding-bottom: 8px;
      font-family: 'Poppins', sans-serif;
      border-bottom: 1px solid var(--line)
    }

    /* Every header sorts. The arrow only appears on the column in use, so
       the row stays quiet until the reader acts on it. */
    #landing .shiptable th.l-sort {
      cursor: pointer;
      user-select: none
    }

    #landing .shiptable th.l-sort:hover,
    #landing .shiptable th.l-sort:focus-visible {
      color: var(--green);
      outline: none
    }

    #landing .l-arrow {
      display: inline-block;
      width: 11px;
      font-size: 8px;
      line-height: 1;
      vertical-align: middle;
      margin-left: 3px;
      color: var(--green)
    }

    /* Three widths, so columns of similar content line up as a grid. The
       wide ones clip rather than pushing the table sideways: a manager's
       full registered name and address is not what the reader is scanning
       for, and the whole string is on hover. */
    #landing .shiptable th.w-s,
    #landing .shiptable td.w-s {
      max-width: 96px
    }

    #landing .shiptable th.w-m,
    #landing .shiptable td.w-m {
      max-width: 132px
    }

    #landing .shiptable th.w-l,
    #landing .shiptable td.w-l {
      max-width: 190px
    }

    /* v25.156: ALL THREE clamps clip, and so do their HEADERS. Only w-l did,
       so w-s and w-m carried a max-width with nothing to enforce it - the
       text simply overflowed into the next column, which is why "CRUISE
       PASSENGER SHIPS" sat on top of "Cruise Passenger Ship" and the longer
       header captions ran together. A max-width without overflow handling
       constrains the CELL and not the TEXT, which looks like a width bug and
       is not one. The full string is on hover, as before. */
    #landing .shiptable th.w-s,
    #landing .shiptable td.w-s,
    #landing .shiptable th.w-m,
    #landing .shiptable td.w-m,
    #landing .shiptable th.w-l,
    #landing .shiptable td.w-l {
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* 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. */
    #landing .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
    }

    #landing .shiptable input[type=radio]:checked {
      border-color: var(--navy)
    }

    #landing .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)
    }

    #landing .shiptable td {
      border-bottom: 1px solid var(--rule2-soft);
      font-variant-numeric: tabular-nums;
      font-family: 'Poppins', sans-serif
    }

    #landing .shiptable td:nth-child(2),
    #landing .shiptable td:nth-child(3),
    #landing .shiptable td:nth-child(4) {
      font-family: 'Poppins', sans-serif
    }

    #landing .shiptable tbody tr:hover {
      background: var(--paper-warm)
    }

    #landing .shiptable tbody tr.sel {
      background: var(--sel-row)
    }

    #landing .foot {
      color: var(--ink-muted)
    }

/* ===== feedback batch overrides (was second <style> in <body>) ===== */
    /* ===== feedback batch overrides ===== */
    #siteHeader .dz-header,#tool .dz-header{background:#fff;color:var(--ink);border-bottom:1px solid var(--rule2);box-shadow:none}
    #siteHeader .dz-left,
    #tool .dz-left{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
    #siteHeader .dz-mark,
    #tool .dz-mark{color:var(--navy)}
    #siteHeader .dz-product,
    #tool .dz-product{color:var(--ink-soft);opacity:1}
    #siteHeader .dz-product strong,
    #tool .dz-product strong{color:var(--navy)}
    #siteHeader .dz-version,
    #tool .dz-version{color:var(--ink-muted)}
    #siteHeader .dz-btn2,
    #tool .dz-btn2{background:transparent;color:var(--navy);border:1px solid var(--rule2)}
    #siteHeader .dz-btn2:hover,
    #tool .dz-btn2:hover{border-color:var(--navy);background:rgba(10,21,67,.04)}
    #siteHeader .dz-btn2.active,
    #tool .dz-btn2.active{background:var(--navy);border-color:var(--navy);color:#fff}
    /* hero: keep original layout (image left, summary right); overlay + EOL slider added */
    #tool .shipart-wrap{position:relative}
    #tool .art-ov{position:absolute;left:14px;top:12px;background:rgba(10,21,67,.86);color:#fff;font-family:'Poppins',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.01em;padding:6px 12px;border-radius:0;max-width:80%;line-height:1.3}
    #tool .ach-col{display:flex;flex-direction:column;justify-content:flex-start;gap:16px}
    /* summary highlight: remove yellowish tint */
    #tool .ko-row.hl{background:transparent}
    #tool .ko-row.hl .ko-v{color:var(--navy)}
    /* EOL slider below the achieved graph, info icon at the far right */
    #tool #eol-hero-wrap{margin-top:0}
    #tool .eol-hero{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#41506f}
    #tool .eol-hero .eol-lab{font-weight:500;white-space:nowrap}
    #tool .eol-hero .eol-year{color:var(--navy);font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}
    #tool .eol-hero input[type=range]{flex:1;accent-color:var(--navy);margin:0}
    /* info tooltip is drawn by JS (fixed position, viewport-clamped) so it is instant, never clipped, and never resizes the frame */
    #tool .ii[data-tip],#tool .ko-i[data-tip]{position:relative;cursor:help}
    /* volumetric: each toggle aligned above its own graph */
    /* v25.150: the old .vol-head rule lived here and the v25.122 one lives
       further down - TWO HOMES for one layout, differing on
       justify-content, so which won depended on source order. The later one
       is the intended one (marker, dropdown, then the checkbox pushed right
       with margin-left:auto); this stale copy is removed rather than left to
       be found again. */
    #tool .vol-ck{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;white-space:nowrap;color:#41506f}
    /* Decarbonization: selection table + ranking chart side by side */
    #tool .dec-split{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;align-items:start}
    #tool .dec-split .intro{margin:0}
    #tool .dec-split table{width:100%}
    @media(max-width:1000px){#tool .dec-split{grid-template-columns:1fr}}



    /* ---- form and value standards (global) ---- */

    /* 5: the section dropdown sits above both columns so every label and
       input below it aligns horizontally across the grid */
    .selrow-top {
      justify-content: flex-end;
      margin: 0 0 10px
    }

    /* 7: units live inside the field and step aside while editing */
    .inp-unit {
      position: relative;
      display: inline-block
    }

    .inp-unit .u {
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11.5px;
      font-weight: 500;
      font-style: normal;
      color: var(--navy);
      opacity: .78;
      pointer-events: none;
      transition: opacity .12s
    }

    .inp-unit input {
      padding-right: 46px !important
    }

    .inp-unit input:focus + .u {
      opacity: 0
    }

    /* 4: More info and any paired action share one row of matching pills */
    .acc-actions {
      display: flex;
      gap: 10px;
      margin: 16px 0 2px
    }

    .acc-actions > * {
      flex: 1
    }

    #tool .acc-moreinfo,
    .acc-act-btn {
      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,
    .acc-act-btn:hover {
      border-color: var(--navy);
      background: #fafbfc
    }

    /* the checkbox becomes the chevron that marks the expander */
    #tool .acc-moreinfo input {
      appearance: none;
      -webkit-appearance: none;
      width: 0;
      height: 0;
      border: 0;
      margin: 0
    }

    /* the expander sign: + when closed, - when open, with the plus
       stroke rotating away as it opens */
    /* An anchor rather than a plus: same affordance, and it belongs to the
       subject. Drawn as a mask so it inherits currentColor. */
    #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,
    .intro.showinfo .intro-mi span::after {
      /* open: the upright stroke collapses, leaving a minus; the half
         turn keeps the change animated without ending upright */
      /* open: the anchor is weighed, turning through half a circle. The
         motion is the same cue the plus-to-minus gave, and it lands the
         right way up for the closed state on the way back. */
      transform: rotate(180deg)
    }

    #tool .acc-moreinfo-body {
      margin: 16px 0 2px;
      width: 100%
    }


    /* engine name: full-width field, no label, no tag */
    .engrow {
      /* one standard row, so the rows beneath align with the other column */
      display: flex;
      align-items: center;
      min-height: 40px;
      padding: 2px 0;
      margin: 0
    }

    .engrow input {
      width: 100%;
      border: 1px solid #dfe3ea;
      border-radius:0;
      padding: 4px 10px;
      height: 30px;
      background: #fff;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--navy);
      transition: border-color .15s
    }

    .engrow input:focus {
      outline: 0;
      border-color: var(--navy)
    }

    .engrow input::placeholder {
      color: #a7aebd;
      font-weight: 400
    }


    /* 2: the summary column sits tight under the metrics, no dead space */
    #tool .dz-hero {
      align-items: start
    }

    #tool .keyout {
      margin-bottom: 0
    }

    #tool .achbar {
      margin-top: 0
    }

    /* GLOBAL: explanatory copy in any view is hidden until its More info
       bar (always the last element in the view) is opened. Accordions
       follow the same default through .acc.noinfo. */
    .intro-mi {
      margin: 14px 0 0
    }

    /* Collapsed, not display:none, so the section intros slide like every
       other More info block. display cannot be transitioned. */
    .intro .intro-desc,
    .intro .note {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden
    }

    .intro.showinfo .intro-desc,
    .intro.showinfo .note {
      display: block;
      max-height: 3000px;
      opacity: 1
    }

    .intro .intro-desc {
      margin-top: 12px
    }


    /* the hero right column holds summary, end of life and achievement
       in one stack, so no empty grid cell can open a gap between them */
    #tool .dz-hero > .ach-col {
      align-self: start
    }

    #tool .ach-col > * {
      margin: 0
    }




    /* shared header: on the ship-selection view the tool actions are hidden */
    #siteHeader .dz-header {
      max-width: 1180px;
      margin: 0 auto
    }

    /* Alignment: the header sits inside the same 1180px column as the rest
       of the tool, so its rule starts at the left edge of the first block
       and ends at the right edge of the Save case button. It previously
       used negative margins to bleed past the wrapper. */
    #siteHeader .dz-header,
    #tool .dz-header {
      /* Centred in the same 1180px column as the content, with the same
         26px gutter, so the header rule starts at the left edge of the
         first summary block and ends at the right edge of Save case.
         `margin: 0 auto` is what centres it: setting margin-left/right to
         zero removed the centring and pulled it to the left. */
      max-width: 1180px;
      margin: 0 auto;
      padding-left: 26px;
      padding-right: 26px;
      padding-top: 19px;
      padding-bottom: 19px;
      position: relative;
      /* The shadow went with the border: it also spanned the full box, so
         it drew a faint line across the 26px at each end that the rule no
         longer covers. */
      box-shadow: none;
      /* The rule is drawn by ::after, inset to the gutter. A border-bottom
         spans the whole BORDER BOX, which is 1180px, while the content
         column is 1180 minus the two 26px gutters. Matching the header's
         box to the wrapper therefore still left the rule 26px proud at
         each end, which is what showed on screen. */
      border-bottom: 0
    }

    /* The header rule, drawn inside the gutters so it starts at the left
       edge of the first summary block and ends at the right edge of Save
       case, at every width rather than only at 1180px. */
    #siteHeader .dz-header::after,
    #tool .dz-header::after {
      content: '';
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 0;
      /* Softened with the other band rules, but in the seam tone so it
         stays visible. */
      border-bottom: 1px solid var(--rule-band)
    }

    /* Methodology now sits beside Save case rather than under the brand. */
    #siteHeader .dz-right,
    #tool .dz-right {
      display: flex;
      align-items: center;
      gap: 10px
    }

    #siteHeader.pre-select #resetShip2,
    #siteHeader.pre-select .dz-info,
    #siteHeader.pre-select #dzReport,
    #siteHeader.pre-select .dz-dd {
      display: none
    }

    /* save case is inert until the export flow exists */
    .dz-save[disabled] {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none
    }


    /* the whole section header is the toggle */
    #tool .acc-head {
      cursor: pointer;
      user-select: none
    }

    #tool .acc-head:hover h3 {
      opacity: 1
    }


    /* keep the browser's own scroll anchoring active and stop the tab
       panels collapsing to zero height while charts are rebuilt, which
       is the other source of the jump */
    html {
      overflow-anchor: auto
    }

    #tool .chartbox {
      contain: layout
    }

    #tool .acc-body,
    #tool .intro {
      overflow-anchor: none
    }


    /* both columns of a section march on the same row rhythm */
    .grid2 > div > .kv,
    .grid2 > div > div > .kv,
    .grid2 > div > .engrow,
    .grid2 > div > div > .engrow {
      min-height: 40px;
      box-sizing: border-box
    }

    /* inputs and selects share one height so no row is taller than another */
    .kv input[type=number],
    .kv input[type=text],
    .kv select,
    .engrow input {
      height: 30px;
      box-sizing: border-box
    }


    /* chart captions: smaller than section labels, centred over the plot.
       Scoped to #tool so it outranks '#tool .band', which sets 1.05rem and
       was previously winning on specificity. */
    #tool .band.chart-cap,
    .band.chart-cap {
      font-size: 10px;
      line-height: 1.35;
      text-align: center
    }


    /* fuel calculations table: many narrow numeric columns, so it scrolls
       horizontally rather than squeezing */
    #tool .fuelcalcs table {
      font-size: 12px;
      width: 100%;
      table-layout: auto
    }

    #tool .fuelcalcs th {
      font-size: 10px;
      line-height: 1.25;
      white-space: nowrap
    }

    #tool .fuelcalcs th small {
      font-weight: 400;
      font-size: 8px;
      color: var(--ink-muted);
      text-transform: none;
      letter-spacing: 0
    }

    #tool .fuelcalcs td {
      white-space: nowrap
    }

    /* the measure column may wrap; everything else stays on one line */
    #tool .fuelcalcs td:first-child {
      white-space: normal;
      min-width: 90px
    }

    /* unit suffix beside the number, muted like the type sub-lines */
    #tool .fuelcalcs .fc-unit {
      font-size: 9.5px;
      color: var(--ink-muted);
      letter-spacing: .2px
    }

    /* fuel type / measure type as a muted sub-line inside the cell */
    #tool .fuelcalcs .fc-type {
      font-size: 9.5px;
      color: var(--ink-muted);
      letter-spacing: .2px
    }

    #tool .fuelcalcs td {
      line-height: 1.35;
      vertical-align: top
    }

    #tool .fuelcalcs td,
    #tool .fuelcalcs th {
      padding: 4px 6px
    }


    /* framework tabs and the Cslip / Biofuels inputs share one aligned row */
    #tool .fuelctrl-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin: 8px 0 0
    }


    /* more air between stacked items and tables in the fuel properties
       and emissions section */
    #tool #acc_fuelprops .grid2 {
      gap: 32px
    }

    #tool #acc_fuelprops table {
      margin-top: 4px
    }


    /* The business-case panel used its own copy-left / units-right grid.
       That layout is now the shared one (.mi-grid), used by every More info
       block, so only the slider sizing is section-specific. */
    /* v25.113: the decarbonization More info runs 50/50 - the price labels
       are long and were being squeezed into at most 215px while the sliders
       took everything left over. Scoped to .dec-slider so the business case
       aside keeps its own proportions. */
    /* v25.115: 50/50 still left the labels short - "Methanol (e-methanol)"
       and the like wrap to two lines - so the label takes the larger share
       and the slider gives some back. The slider is a drag target, not a
       reading surface; it does not need the width the label does. */
    #tool .slider-row.dec-slider {
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      align-items: center
    }

    #tool .slider-row.dec-slider > label {
      white-space: normal;
      line-height: 1.35
    }

    #tool .bc-slider {
      grid-template-columns: minmax(170px, 215px) 1fr;
      min-height: 40px;
      margin-bottom: 0
    }

    #tool .bc-slider input[type=range] {
      accent-color: var(--navy)
    }

    @media (max-width: 760px) {
      #tool .mi-grid { grid-template-columns: 1fr; gap: 18px }
    }


    /* prices on the reference pattern: underlined base value, full-width
       trend slider, muted gap between the fuel and regulation groups */
    #tool .pricetab .price-base {
      width: 96px;
      height: 30px;
      box-sizing: border-box;
      text-align: right;
      border: 1px solid #dfe3ea;
      border-radius:0;
      background: #fff;
      font-family: inherit;
      font-size: 12px;
      color: var(--navy);
      padding: 4px 8px;
      transition: border-color .15s
    }

    #tool .pricetab .price-base:focus {
      outline: 0;
      border-color: var(--navy)
    }

    /* unticked rows stay visible, just quiet */
    #tool .pricetab .price-off td {
      opacity: .45
    }

    #tool .pricetab .price-off td:first-child {
      opacity: 1
    }

    #tool .pricetab .price-trend {
      width: 170px
    }

    #tool .pricetab .price-trend input[type=range] {
      width: 100%;
      accent-color: var(--navy)
    }

    #tool .pricetab td {
      padding: 7px 8px
    }

    #tool .pricetab .price-gap td {
      border: 0;
      height: 18px
    }


    /* CAPEX: package total headline, per-measure blocks, section rows */
    #tool .capex-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      margin-bottom: 14px
    }

    #tool .capex-total b {
      font-size: 17px;
      color: var(--navy)
    }

    #tool .capex-meas {
      margin-bottom: 22px
    }

    #tool .capex-meas-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-weight: 600;
      font-size: 12.5px;
      color: var(--navy);
      margin: 0 0 6px
    }

    /* v25.75: the CAPEX tables read like every other table in section 4 -
       one font size, black throughout, 32px rows and a bold header of the
       same size. They were 11.5px on a 5px padding, which made them denser
       than the two tables above them. */
    #tool .capextab {
      font-size: var(--spd-fs);
      color: #000;
      width: 100%
    }

    #tool .capextab td, #tool .capextab th {
      padding: 0 8px;
      height: 32px;
      color: #000
    }

    #tool .capextab thead th {
      height: 23px;
      font-weight: 600
    }

    /* The currency sits inside the field, left of the figure. */
    #tool .capex-money {
      position: relative;
      display: inline-block
    }

    #tool .capex-money > i.u.pre {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-style: normal;
      font-size: var(--spd-fs);
      color: #000;
      pointer-events: none
    }

    /* v25.81: the 20px was room for an absolutely-positioned $; the $ is a
       sibling now, so the padding only widened the field. */

    #tool .selrow > #capexSel {
      position: relative
    }

    #tool .capextab .capex-sec td {
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0;
      color: var(--ink-muted);
      padding-top: 12px;
      text-align: left
    }


    /* editable CAPEX cells: standard field look, compact; overridden
       values marked with a navy edge */
    #tool .capextab .capex-in {
      width: 76px;
      height: 26px;
      box-sizing: border-box;
      text-align: right;
      border: 1px solid #dfe3ea;
      border-radius:0;
      background: #fff;
      font-family: inherit;
      font-size: 11.5px;
      color: var(--navy);
      padding: 2px 7px;
      transition: border-color .15s
    }

    #tool .capextab .capex-in:focus {
      outline: 0;
      border-color: var(--navy)
    }

    #tool .capextab .capex-in.ovr {
      border-color: var(--navy);
      font-weight: 600
    }


    /* parked menu entries: visible, inert */
    #tool .dz-menu a.menu-off,
    .dz-menu a.menu-off {
      opacity: .4;
      cursor: not-allowed;
      pointer-events: none
    }


    /* OPEX section, quickscan pattern */
    #tool .opex-total {
      text-align: center;
      font-size: 12.5px;
      color: #41506f;
      margin-top: 10px
    }

    #tool .opex-total b {
      color: var(--navy);
      font-size: 14px
    }


    #tool .opex-yr {
      color: var(--navy);
      font-variant-numeric: tabular-nums;
      margin-left: 4px
    }


    /* OPEX rate rows: label | compact input | slider, one aligned grid */
    #tool .opex-rate {
      display: grid;
      grid-template-columns: 96px 158px 1fr;
      gap: 14px;
      align-items: center;
      min-height: 40px
    }

    #tool .opex-rate label {
      font-size: 12.5px;
      color: #41506f;
      white-space: nowrap
    }

    #tool .opex-rate .inp-unit input {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      /* value left, unit right, with room reserved for the longest unit
         ("per mT CO2e"); the global 46px reservation is too small here */
      text-align: left;
      padding-left: 10px;
      padding-right: 84px !important
    }

    #tool .opex-rate .inp-unit .u {
      font-size: 10.5px
    }

    #tool .opex-rate input[type=range] {
      width: 100%;
      accent-color: var(--navy);
      margin: 0
    }


    /* financing panel and OPEX totals */
    /* v25.91: the financing block runs FULL WIDTH now - copy, totals and
       schedule alike. The 460px cap dates from when it was a narrow
       single-column panel, and it was squeezing the copy while the table
       overflowed past it. */
    #tool .fin-panel {
      margin: 12px 0 0
    }

    #tool .fin-panel table {
      width: 100%
    }

    #tool .opex-note {
      font-size: 11px;
      color: #8a93a8;
      font-style: italic;
      margin-top: 10px;
      line-height: 1.6
    }

    #tool .opex-tot-grid > div {
      display: flex;
      align-items: baseline;
      gap: 12px;
      min-height: 40px;
      border-bottom: 1px solid var(--rule2)
    }

    #tool .opex-tot-grid span {
      flex: 1;
      font-size: 12.5px;
      color: #41506f
    }

    #tool .opex-tot-grid b {
      font-size: 13.5px;
      color: var(--navy)
    }

    #tool .opex-tot-grid i {
      font-style: normal;
      font-size: 11px;
      color: #8a93a8;
      width: 92px;
      text-align: right
    }


    /* paired actions: More info stretches, Financing rides beside it */
    #tool .acc-actions {
      display: flex;
      gap: 10px;
      align-items: stretch
    }

    #tool .acc-actions .acc-moreinfo {
      flex: 1
    }


    /* regulation summary tables: unit column, quiet */
    #tool .fc-unit-cell {
      text-align: left;
      font-size: 10px;
      color: #8a93a8;
      white-space: nowrap
    }


    /* squared corners across the whole tool (brand: no rounded boxes) */
    #tool *,
    #siteHeader *,
    #landing * {
      border-radius: 0
    }

    /* Tooltip markers are round. They were squared off by the blanket
       square-corner rule, which made them read as tiny buttons rather than
       as the "there is more here" dot they are. */
    #tool .ii,
    #tool .ko-i,
    #siteHeader .dz-info {
      border-radius: 50%
    }

    /* exceptions to the square-corner rule: the floating tooltip bubble
       and the accordion up/down toggles keep their rounded shape */
    #tooltip {
      border-radius: 0
    }

    #tool .acc-toggle button,
    .acc-toggle button {
      border-radius: 999px
    }

    /* achievement caption */
    #tool .ach-cap {
      font-size: 12px;
      color: #41506f;
      margin-bottom: 6px
    }

    #tool .ach-cap b {
      color: var(--navy);
      font-size: 13px
    }


    /* NPV row under the business case table */
    #tool .npv-sub {
      font-size: 11px;
      color: #8a93a8;
      font-weight: 400
    }

    #tool .npv-val {
      font-size: 13.5px;
      color: var(--navy);
      text-align: right;
      font-variant-numeric: tabular-nums
    }


    /* shore power measure detail */
    /* The value column was 168px; parameters read better with room for a
       thousands-separated figure and its unit ghost, so it is 30% wider.
       One number: every measure panel's rows are this grid. */
    #tool .acc-gap {
      margin-top: var(--acc-gap)
    }

    #tool .spd-row {
      display: grid;
      grid-template-columns: 1fr var(--param-w);
      gap: 14px;
      align-items: center;
      min-height: 38px
    }

    /* v25.39: ONE SIZE for everything in a measure panel - labels, input
       fields, units, derived figures, the About text and the generated
       tech / assumptions copy - and all of it black. Vincent: "the size in
       customize further appears best", so --spd-fs is the customize
       further field size (12.5px); the 14px assumptions / unit text and
       the 10.5px unit suffixes both move onto it. Graph text is NOT
       covered by any of these rules and keeps its own scale. */
    #tool .spd-row label {
      font-size: var(--spd-fs);
      color: #000
    }

    #tool .spd-in {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end
    }

    /* measure-detail fields: the app's unit-inside pattern, value left,
       unit ghost right, with room reserved for the longest units
       ("gCO2eq / MJ", "% MJ / MJ") */
    #tool .spd-un input {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      text-align: left;
      padding-left: 8px;
      padding-right: 84px !important;
      font-size: var(--spd-fs)
    }

    /* v25.61: a unit reads like the rest of the row - black, 400, opaque.
       It inherited navy at 78% OPACITY and weight 500 from .inp-unit, and
       text drawn at 78% opacity is what looked stretched and slightly
       blurry beside a solid black label. */
    #tool .spd-un .u {
      font-size: var(--spd-fs);
      font-weight: 400;
      color: #000;
      opacity: 1
    }

    #tool .spd-un input:disabled {
      color: #8a93a8;
      background: #f6f7f9
    }

    #tool .spd-in i {
      font-style: normal;
      font-size: 10.5px;
      color: #8a93a8;
      min-width: 34px
    }

    #tool .spd-in select {
      height: 30px;
      font-size: var(--spd-fs);   /* v25.42: one size with every other field */
      color: #000;
      padding: 0 8px
    }

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

    /* Tooltip (i) markers align at the very end of each input row,
       whichever element they are authored inside. */
    #tool .spd-row { position: relative; padding-right: 24px; }
    #tool .spd-row .ii {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
    }

    /* Customize further: field rows occupy the right half of the panel
       (left stays empty for now) so the label and its input sit together;
       images below span full width. */
    #tool .spd-custom .spd-row {
      width: calc(50% - 14px);
      margin-left: auto;
    }
    @media (max-width: 900px) {
      #tool .spd-custom .spd-row { width: 100%; margin-left: 0; }
    }
    /* Measure description (DATA_MEASURES [About] + this vessel's figures),
       sitting directly above the Case studies / Customize further row. */
    #tool .spd-about {
      font-size: var(--spd-fs);
      line-height: 1.8;
      color: #000;
      margin: 16px 0 0
    }

    /* v25.39: the About text's Read more / back control. It sits inline at
       the end of the sentence rather than on its own line, so the folded
       block is one line of prose plus its handle. */
    /* v25.54: the control reads as part of the copy - its own line, aligned
       with the text's left edge, italic like the paragraphs it opens. It
       used to ride inline at the end of the last sentence. */
    #tool .ab-more {
      font: inherit;
      font-style: italic;
      display: block;
      text-align: left;
      color: var(--brand-green, #2f9e6f);
      background: none;
      border: 0;
      padding: 0;
      margin-top: 10px;
      cursor: pointer;
      white-space: nowrap
    }

    #tool .ab-more:hover {
      text-decoration: underline
    }

    /* ===== eight summary blocks (ship | economics) ===== */
    #tool .blk8 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 14px;
      row-gap: 14px;
      position: relative;
      /* The blocks are closed off below by the same rule that sits above
         them, so the group reads as one band rather than trailing into the
         tabs. The air is mirrored top and bottom, measured rule to blocks
         rather than by one padding value: above, the 19px here is joined
         by #tool's 14px padding-top, so the gap from the top rule to the
         blocks is 33px. The bottom had only this 19px and read tight, so
         it is now 33px as well, and the tabs sit 19px below the lower
         rule, matching the 19px of header above the upper one. */
      padding-top: 0;
      padding-bottom: 0;
      /* The gap from the section buttons to the blocks is the SAME as the
         gap between the blocks themselves, so the band reads as one grid
         rather than as a row pushed away from the buttons. */
      margin: 14px 0 0;
      /* No rule of its own: the fold seam directly below the blocks is the
         line that closes this band, so the page carries three horizontal
         lines in total - header, summary seam, detail seam. */
      border-bottom: 0
    }

    /* The spine that divided ship from economics is gone by request: it
       read as clutter inside the block area rather than as structure. */

    #tool .blk8-lab {
      grid-column: span 2;
      font-size: 10.5px;
      letter-spacing: .06em;
      color: var(--ink-muted);
      font-weight: 500;
      padding-bottom: 2px
    }

    #tool .blk8-lab.right {
      text-align: right
    }

    #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-lab-t sub {
      font-size: .8em;
      line-height: 0
    }

    #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)
    }

    /* editable marker */
    #tool .blk .edit-mark {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--navy);
      opacity: .55;
      flex: none
    }

    #tool .blk.editable:hover .edit-mark {
      opacity: 1
    }

    /* an editable block keeps its output on top and the input beneath */
    #tool .blk.editable .blk-val {
      margin-top: 0
    }

    /* the capex figure IS the field: same size and weight as a static
       value, with only a hairline underneath to mark it editable */
    #tool .blk-val-edit {
      display: flex;
      align-items: baseline;
      gap: 4px
    }

    #tool .blk-val-edit .cur {
      font-size: 17px;
      font-weight: 500;
      color: var(--ink-soft)
    }

    #tool .blk-val-edit input {
      font-family: inherit;
      font-size: 23px;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -.015em;
      border: none;
      border-bottom: 1px solid var(--rule2);
      background: transparent;
      color: var(--navy);
      width: 100%;
      min-width: 0;
      padding: 0 0 1px;
      border-radius: 0;
      font-variant-numeric: tabular-nums
    }

    #tool .blk-val-edit input:hover {
      border-bottom-color: var(--navy)
    }

    #tool .blk-val-edit input:focus {
      outline: none;
      border-bottom: 1px solid var(--navy)
    }

    #tool .blk-driver {
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid var(--rule2-soft)
    }

    #tool .blk-driver-lab {
      font-size: 10px;
      color: var(--ink-muted);
      margin-bottom: 2px
    }

    #tool .blk-driver-in {
      display: flex;
      align-items: baseline;
      gap: 4px
    }

    #tool .blk-driver-in .cur {
      font-size: 11px;
      color: var(--ink-soft)
    }

    #tool .blk-driver-in input {
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border: none;
      border-bottom: 1px solid var(--rule2);
      background: transparent;
      color: var(--navy);
      width: 100%;
      min-width: 0;
      padding: 0 0 1px;
      border-radius: 0;
      font-variant-numeric: tabular-nums
    }

    #tool .blk-driver-in input:hover {
      border-bottom-color: var(--navy)
    }

    #tool .blk-driver-in input:focus {
      outline: none;
      border-bottom: 1px solid var(--navy)
    }

    #tool .blk-driver-range {
      width: 100%;
      display: block;
      margin-top: 4px
    }

    #tool .blk-driver-lab b {
      color: var(--navy);
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    #tool .blk-driver-in .u {
      font-size: 10px;
      color: var(--ink-muted);
      white-space: nowrap
    }

    #tool .blk-chips {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-top: auto
    }

    #tool .blk .chip {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--ink-soft)
    }

    #tool .blk .chip .dot {
      width: 6px;
      height: 6px;
      background: var(--navy);
      flex: none
    }

    #tool .blk .chip.empty {
      color: #a7aebd
    }

    #tool .blk .chip.empty .dot {
      background: #dfe3ea
    }

    #tool .blk-eol {
      margin-top: 7px
    }

    #tool .blk-eol input[type=range] {
      width: 100%;
      display: block
    }

    /* tooltip: bottom-left on the ship side, bottom-right on economics, so
       it never covers the neighbouring block */
    #tool .blk-tip {
      position: absolute;
      bottom: calc(100% + 6px);
      background: var(--navy);
      color: #fff;
      font-size: 11px;
      line-height: 1.5;
      font-weight: 300;
      padding: 9px 11px;
      width: 252px;
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: opacity .1s;
      pointer-events: none
    }

    #tool .blk:hover .blk-tip {
      opacity: 1;
      visibility: visible
    }

    #tool .blk-tip.bl {
      left: -1px
    }

    #tool .blk-tip.br {
      right: -1px
    }

    @media (max-width: 900px) {
      #tool .blk8 {
        grid-template-columns: repeat(2, 1fr)
      }



      #tool .blk8-lab.right {
        text-align: left
      }
    }

    /* Empty-state shown in place of a chart canvas when the series has
       nothing to plot (savings charts before a measure is selected). Fills
       the chartbox so the section keeps its height. */
    #tool .chart-ph {
      position: absolute;
      inset: 0;
      min-height: 0;
      font-style: italic;
      line-height: 1.6;
      max-width: 34em;
      margin: 0 auto
    }

    /* Case studies: three link cards sharing one picture frame so the row
       stays even. The frame is 16:9 because that is what the Squarespace
       OG images actually are (1500x841-852, ratio ~1.78); the earlier 2:1
       frame cropped 11-12% off the height, cutting the navy border and the
       title baked into the artwork. `contain` guarantees nothing is ever
       cut: an odd-sized image letterboxes into the frame instead. */
    #tool .cs-grid {
      display: grid;
      /* auto-fit so a measure with two case studies (hull coating) fills the
         row evenly rather than leaving a third column empty */
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin: 2px 0
    }

    #tool .cs-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius:0;
      overflow: hidden;
      background: #fff;
      text-decoration: none;
      color: var(--navy);
      transition: border-color .15s, box-shadow .15s
    }

    #tool .cs-card:hover {
      border-color: var(--navy);
      box-shadow: 0 2px 10px rgba(10, 21, 67, .08)
    }

    #tool .cs-img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--navy);
      border-bottom: 1px solid var(--rule2);
      overflow: hidden
    }

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

    /* no picture, or the picture failed: keep the frame, drop the border */
    #tool .cs-img.cs-noimg {
      background: linear-gradient(135deg, #eef1f6, #f7f8fa)
    }

    #tool .cs-title {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.45;
      padding: 12px 13px 0
    }

    #tool .cs-desc {
      display: block;
      font-size: 10.5px;
      line-height: 1.65;
      color: #6b7280;
      padding: 7px 13px 0;
      flex: 1
    }

    #tool .cs-more {
      display: block;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--navy);
      padding: 11px 13px 13px
    }

    #tool .cs-card.cs-load {
      pointer-events: none;
      opacity: .55
    }

    @media (max-width: 900px) {
      #tool .cs-grid {
        grid-template-columns: 1fr
      }
    }

    #tool .spd-imgs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin: 14px 0
    }

    #tool .spd-imgs figure {
      margin: 0
    }

    #tool .spd-imgs img {
      width: 100%;
      border: 1px solid var(--rule2)
    }

    #tool .spd-imgs figcaption {
      font-size: 10.5px;
      line-height: 1.7;
      color: #6b7280;
      margin-top: 8px
    }

    @media (max-width: 760px) {
      #tool .spd-imgs {
        grid-template-columns: 1fr
      }
    }


    /* ==== restored rules (casualties of the v9.63 slice edit) ==== */

    /* volumetric comparison controls: two columns as designed */
    #tool .vol-ctrl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 48px;
      align-items: start
    }

    /* v25.122: ONE row for the chart controls - the marker, the dropdown at
       the width every other section's dropdown uses, and the checkbox pushed
       to the far right. It used to be dropdown-then-checkbox jammed together
       on the left at whatever width the longest option name needed. */
    #tool .selrow.vol-head {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start
    }

    #tool .selrow.vol-head > .vol-sel {
      flex: 0 0 auto;
      /* the marker inside is absolute at right:100%, so this is its anchor */
      position: relative;
      /* room for it to the left, as sections 2 and 4 leave */
      margin-left: 26px
    }

    #tool .selrow.vol-head > .vol-sel select {
      width: var(--sel-w, 260px)
    }

    /* The checkbox takes the rest of the row, so it sits at the right edge
       of the chart rather than beside the dropdown. */
    #tool .selrow.vol-head > .vol-ck {
      margin-left: auto
    }

    /* The chart keeps a fixed height here - there is no table beside it to
       stretch to, unlike the historic and business case panels. */
    /* v25.164: the toggles live in the chart's own LABEL GUTTER, one per row,
       positioned from the y scale. Small and quiet - a control the reader can
       find when they want it, not a second legend competing with the bars.
       v25.162 put them in a strip underneath, which repeated every fuel name
       the axis already carries. */
    #tool .vol-gutter {
      position: absolute;
      inset: 0;
      pointer-events: none
    }

    #tool .vol-gutter .vol-tog {
      position: absolute;
      /* v25.172: in the 30px gutter the chart now leaves, not on top of the
         fuel names. */
      left: 2px;
      transform: translateY(-50%);
      pointer-events: auto;
      width: 16px;
      height: 16px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      font-size: 11px;
      line-height: 1;
      border: 1px solid #d7dbe4;
      border-radius: 50%;
      background: #fff;
      color: #8b93a7;
      cursor: pointer;
      opacity: .8
    }

    #tool .vol-gutter .vol-tog:hover {
      opacity: 1;
      border-color: var(--navy);
      color: var(--navy)
    }

    #tool .vol-gutter .vol-tog.is-off {
      opacity: 1;
      border-color: var(--navy);
      color: var(--navy);
      background: #fff
    }

    #tool .vol-chartbox {
      height: 300px;
      margin-bottom: 32px;
      position: relative
    }

    /* The one panel: parameters, rule, table, copy, closing rule. */
    #tool .vol-panel.hidden {
      display: none
    }

    /* The parameter tables are the OPEX price-row shape. Each row is a label,
       a typed field and a slider, and the two controls are twins - either one
       drives the value (see mirrorTwin). */
    /* v25.165: a DERIVED row - shown, not edited. Greyed, the field not
       focusable, the slider disabled and parked mid-track so it does not
       read as a control sitting at zero. */
    #tool table.volparams tr.vp-ro .price-name,
    #tool table.volparams tr.vp-ro input {
      color: #8b93a7
    }

    #tool table.volparams tr.vp-ro input[type=text],
    #tool table.volparams tr.vp-ro input[type=number] {
      cursor: default
    }

    #tool table.volparams tr.vp-ro .inp-unit .u {
      color: #8b93a7
    }

    #tool table.volparams tr.vp-ro input[type=range] {
      opacity: .4;
      cursor: default;
      pointer-events: none
    }

    #tool table.volparams {
      width: 100%
    }

    #tool table.volparams td.price-name {
      white-space: nowrap
    }

    /* The dual-range sits in the slider cell, so it needs the cell's width
       rather than the fixed one it had in the old .slider-row layout. */
    #tool table.volparams td.price-trend > .dualrange {
      width: 100%
    }

    /* The SoC field shows its own value and the window's other end as the
       unit, so the pair reads as one control even in the typed column. */
    #tool table.volparams .inp-unit .u {
      white-space: nowrap
    }

    /* v25.122: the comparison table takes the CAPEX conventions - it carries
       .capextab for the row height, the size and the colour - and every
       figure column an equal share, worked out the same way the fuel
       properties table does it. Black throughout: the greys were doing no
       work here. */
    /* v25.165: the table may be WIDER than the panel, and when it is, the box
       around it scrolls. At width:100% it could not: the table squeezed to
       fit, the cells clipped their content, and overflow-x had nothing to
       scroll - so the last columns were neither visible nor reachable.
       min-width lets it grow past the panel and hands the overflow to the
       wrapper, which is what makes the scrollbar appear at all. */
    #tool .voltab-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
    }

    /* v25.173: FIXED, EQUAL COLUMNS, as Vincent's table is. Auto layout
       (v25.163) let each column take what its content wanted, so the widths
       moved as the figures changed and no two views lined up. The colgroup
       gives Fuel a named share and divides the rest equally; min-width keeps
       the row scrollable rather than squeezed when the panel is narrow. */
    /* v25.183: NOT a .capextab any more. It carried that class to inherit
       the CAPEX row height and typography - and inherited, along with them,
       `#tool table.capextab td:nth-child(1) { width: 50% }`, a rule written
       for the CAPEX phase tables where the first column is a long line item.
       Under table-layout:fixed a cell width in the first row OVERRIDES the
       colgroup, so Fuel took half the table and the nine figure columns
       fought over the rest. That is the unequal layout that survived six
       rounds; the colgroup was correct every time and never had a say.
       Everything this table needs from capextab is restated below. */
    #tool table.voltab {
      width: 100%;
      border-collapse: collapse;
      /* v25.181: NO min-width, so NO SCROLLBAR. v25.180 widened the table to
         1,180px so the columns could hold their contents - which fixed the
         overlap by forcing a horizontal scrollbar Vincent does not want.
         The contents were made to FIT instead: the unit captions are "kWh/d",
         "m3/d", "TEU/d", "d" rather than "kWh / day" and the rest, which
         takes the widest cell from 104px to about 80 and leaves ten equal
         columns comfortable in a normal panel.
         MAKE THE CONTENT FIT THE SPACE, not the space fit the content - the
         table is the fixed thing here and the wording is not. */
      min-width: 0;
      table-layout: fixed;
      border-collapse: collapse
    }

    /* v25.158: the CAPEX row, stated rather than inherited. The table carries
       .capextab, but these voltab rules come later in the file and at equal
       specificity later wins - so anything not restated here silently
       reverted to the tool's default table padding, which is why the rows
       came out tall. Same 32px and same 0 8px as capextab and as the
       parameter rows above the table. */
    /* v25.163: NINE COLUMNS, each carrying its own unit, have to FIT. They
       were nowrap at 12px with 8px of padding either side, which put the row
       past the panel width - so the table sat in its overflow-x box and
       everything after Energy was simply scrolled out of sight. Nothing was
       missing; it was off the right-hand edge. Tighter type and padding, and
       the first column no longer takes a fixed share it does not need. */
    #tool table.voltab th,
    #tool table.voltab td {
      color: #000;
      height: 32px;
      padding: 0 4px;
      font-size: 11px;
      white-space: nowrap
    }

    /* The header's unit caption is its own line, and columns with no unit
       simply have none - no empty line holding space. */
    #tool table.voltab thead th .th-u {
      display: block;
      font-size: 9.5px;
      line-height: 1.2;
      font-weight: 400
    }

    /* The reference fuel's row, marked rather than inline-styled. */
    #tool table.voltab tr.vol-ref td {
      font-weight: 600;
      background: rgba(10, 21, 67, .03)
    }

    /* v25.180: NO width here. This said width:1% and, under table-layout:
       fixed, a width on a CELL overrides the colgroup - so the equal columns
       set in v25.178 never applied to the first one and everything after it
       shifted. Alignment only; the colgroup owns the widths. */
    #tool table.voltab th.vol-fuel,
    #tool table.voltab td.vol-name,
    #tool table.voltab td:first-child {
      text-align: left;
      white-space: nowrap
    }

    /* The header band, as the sheet prints it: navy, white, centred. */
    /* v25.175: the TOOL's header, not the sheet's. v25.173 copied the navy band
       from Vincent's Excel screenshot - which is how the sheet PRINTS, not how
       this tool's tables look; beside CAPEX and LCA, which carry a plain rule
       and nothing else, it read as a foreign object. The captions WRAP: at
       eight fixed columns "Normalized bunker size" has nowhere to go and
       nowrap ran it into Difference. */
    #tool table.voltab thead th {
      text-align: right;
      vertical-align: bottom;
      font-weight: 600;
      height: auto;
      padding: 6px 5px;
      line-height: 1.2;
      /* v25.184: ONE LINE. The captions were shortened to fit their tenth,
         so nothing needs to wrap and nothing may - a caption that wrapped
         would mean a column got narrower than its word, which is the thing
         to notice, not paper over. */
      white-space: nowrap;
      font-size: 10.5px;
      border-bottom: 1px solid var(--rule2)
    }

    #tool table.voltab thead th:first-child {
      text-align: left
    }

    /* Figures right, under their caption; a broken number is unreadable, so
       only the headers wrap. */
    #tool table.voltab tbody td {
      text-align: right
    }

    #tool table.voltab tbody td.num {
      text-align: right
    }

    @media (max-width: 860px) {
      #tool .vol-ctrl-grid {
        grid-template-columns: 1fr
      }
    }

    /* lifecycle-cost mini bars in the measures table */
    #tool .lcabar-wrap {
      display: block;
      width: 120px;
      margin-left: auto
    }

    #tool .lcabar-track {
      height: 6px;
      background: #e8ebf1;
      overflow: hidden;
      position: relative
    }

    /* v25.113: the measure bars step back so the CONVENTIONAL bar - the
       reference every one of them is read against - carries full navy. Same
       hue throughout: the reference is not a different colour, it is the
       same colour at full strength, so the column still reads as one family.
       rgba rather than opacity, so the tick and the overrun sitting on top
       are not faded with it. */
    #tool .lcabar-fill {
      height: 100%;
      background: rgba(10, 21, 67, .55);
      position: absolute;
      left: 0;
      top: 0
    }

    #tool .lcabar-fill-conv {
      background: #0A1543
    }

    /* Everything beyond the conventional-cost line: the overrun. A muted
       red-brown rather than a bright red - this is information, not an
       alarm, and it sits next to navy all day. */
    #tool .lcabar-over {
      position: absolute;
      top: 0;
      height: 100%;
      background: #9c4a3c
    }

    /* The conventional-cost baseline. Navy on the empty track; white where
       a bar has crossed it, so it never disappears into the fill. */
    #tool .lcabar-base {
      position: absolute;
      top: -2px;
      height: calc(100% + 4px);
      width: 2px;
      margin-left: -1px;
      background: var(--navy)
    }

    #tool .lcabar-base.on {
      background: #fff
    }

    /* dual-thumb range (battery SOC window): two overlapping inputs */
    #tool .dualrange {
      position: relative;
      height: 22px
    }

    #tool .dualrange input[type=range] {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      margin: 0;
      background: transparent;
      pointer-events: none;
      -webkit-appearance: none;
      appearance: none
    }

    /* Round, like every other slider thumb. Square corners are the house
       rule everywhere EXCEPT slider thumbs, and this pair was missed. */
    #tool .dualrange input[type=range]::-webkit-slider-thumb {
      pointer-events: auto;
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--navy);
      border: 0;
      margin-top: -5px
    }

    #tool .dualrange input[type=range]::-moz-range-thumb {
      pointer-events: auto;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--navy);
      border: 0
    }

    #tool .dualrange input[type=range]::-webkit-slider-runnable-track {
      height: 4px;
      background: #e2e5ec
    }

    #tool .dualrange input[type=range]::-moz-range-track {
      height: 4px;
      background: #e2e5ec
    }

    /* fuel-properties table inputs
       v25.112: UNDERLINE, no box. A frame around every cell turned the table
       into a form; a rule under the figure says "you may change this" and
       lets the numbers read as a table again. Same intent as the CAPEX
       fields. */
    /* v25.117: THE CAPEX FIELD, not a lookalike. Same dashed underline, same
       offset, same rule colour, same focus behaviour - the fuel table now
       carries .capextab so it inherits those rules directly instead of
       restating them here and drifting. Only what is specific to this table
       is set below. */
    #tool table.fueltab input.fuelp-inp {
      width: 100%;
      box-sizing: border-box;
      text-align: right;
      padding: 0;
      font-family: inherit;
      font-size: var(--spd-fs);
      color: #000;
      border: 0;
      border-radius: 0;
      background: transparent;
      text-decoration: underline dashed;
      text-underline-offset: 4px;
      text-decoration-color: var(--rule2)
    }

    #tool table.fueltab input.fuelp-inp:focus {
      outline: 0;
      text-decoration-color: var(--navy)
    }

    /* FIXED COLUMNS. The figures change width as they are edited and the
       framework switch changes the column COUNT; without a fixed layout the
       whole table re-measures itself on every keystroke. */
    #tool table.fueltab {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse
    }

    /* v25.121: widths come from the markup now - see colGroup() - because the
       count of figure columns changes with the framework and only the code
       that builds the table knows it. Fixed pixel widths here plus a percent
       there left a remainder, and a fixed-layout table hands a remainder back
       in PROPORTION, which is why LCV kept growing while the rest stayed
       slim. */
    /* v25.119: every figure column the SAME width. With table-layout:fixed
       and width:auto the browser splits what is left evenly only when no
       cell asks for more; the two-line unit headers ("MJ / gFuel") did ask,
       and LCV came out wider than the rest. An explicit equal share settles
       it, and the headers wrap inside their column instead of setting it. */

    /* Headers centred over their figures - the units line made them read as
       left-aligned against right-aligned numbers. HEADERS ONLY: the figures
       stay right-aligned, which is what makes a column of decimals
       readable. Fuel and Fuel Class keep their left edge. */
    /* v25.185: restated here what .fueltab used to inherit from .capextab -
       the class is gone (it carried a first-column width that overrode the
       colgroup, v25.183) - and the header is one line, nowrap, so a caption
       that no longer fits shows itself rather than folding. */
    #tool table.fueltab {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse
    }

    #tool table.fueltab th,
    #tool table.fueltab td {
      height: 32px;
      padding: 0 5px;
      font-size: 11px;
      color: #000
    }

    #tool table.fueltab thead th {
      text-align: center;
      /* v25.148: THE HEADERS MUST WRAP. table-layout:fixed makes the column
         widths binding, so a caption that cannot wrap simply overflows into
         its neighbour - which is why "CO2eq TtW" and "CO2eq WtW" ran into
         each other and the units line looked shuffled. Nothing here changed
         the widths; the captions were never allowed to break. */
      white-space: nowrap;
      vertical-align: bottom;
      line-height: 1.25;
      font-weight: 600;
      border-bottom: 1px solid var(--rule2);
      padding-left: 4px;
      padding-right: 4px
    }

    /* The unit caption under each name, on its own line and never wider than
       its column. */
    #tool table.fueltab thead th .th-u {
      display: block;
      white-space: normal;
      overflow-wrap: anywhere;
      font-size: 9.5px;
      line-height: 1.2
    }

    /* Figures never wrap - a broken number is unreadable - and the cells are
       tight so the columns can stay narrow. */
    #tool table.fueltab tbody td {
      padding-left: 4px;
      padding-right: 4px;
      white-space: nowrap
    }

    #tool table.fueltab thead th.fp-fuel,
    #tool table.fueltab thead th.fp-cls {
      text-align: left
    }

    #tool table.fueltab tbody td.num {
      text-align: right
    }

    #tool table.fueltab td.fp-fuel,
    #tool table.fueltab th.fp-fuel,
    #tool table.fueltab td.fp-cls,
    #tool table.fueltab th.fp-cls {
      text-align: left;
      white-space: nowrap
    }

    #tool table.fueltab td.fp-fuel { font-weight: 500 }
    #tool table.fueltab td.fp-cls { color: #41506f }

    /* The header carries the unit on its own line, so the two rows are one
       label - the second is lighter and does not repeat the rule. */
    #tool table.fueltab thead tr:first-child th {
      border-bottom: 0;
      padding-bottom: 0
    }

    #tool table.fueltab thead tr:last-child th {
      font-weight: 400;
      color: #41506f;
      height: 20px;
      padding-top: 0
    }

    /* ===== v25.112: fuel properties & emissions, three bands ===== */

    /* Band 1. Chart LEFT, table right - the tab's standard, which this
       section used to invert. The row stretches so the bars come out as tall
       as the table; the chartbox therefore carries no inline height. */
    #tool .fp-band.fp-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 30px;
      align-items: stretch
    }

    #tool .fp-chart {
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    #tool .fp-chartbox {
      flex: 1;
      min-height: 230px;
      position: relative
    }

    /* The table takes section 4's conventions: black, 12px, 32px rows. */
    #tool table.emtab {
      width: 100%;
      font-size: 12px;
      border-collapse: collapse
    }

    #tool table.emtab th,
    #tool table.emtab td {
      height: 32px;
      color: #000;
      padding: 0
    }

    #tool table.emtab thead th {
      height: 23px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--line);
      font-weight: 600
    }

    /* The two Reduced columns read as one pair: the figure and its share. */
    #tool table.emtab td.pos,
    #tool table.emtab th.pos { color: var(--moss) }

    /* The band rules. */
    #tool .fp-rule {
      border-top: 1px solid var(--line);
      margin: 26px 0
    }

    #tool .fp-rule-end {
      margin-bottom: 0
    }

    /* Band 2. THREE COLUMNS, TWO ROWS. Six will not sit on one line at the
       embed width, so they are placed rather than left to wrap where they
       land. Reading DOWN a column: framework / Cslip, Biofuels E / RFNBO,
       GWP CH4 / GWP N2O.
       v25.119: the rows are .spd-row.spd-row-t now - the decarbonization
       measure row - so the label, the field and its unit inherit that grid
       instead of a second one defined here. Only the placement is local. */
    #tool .fp-params {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px 40px;
      align-items: center
    }

    /* The row is already a grid; it must not be stretched by the outer one. */
    #tool .fp-params > .fp-param {
      width: 100%;
      margin-left: 0;
      cursor: help
    }

    #tool .fp-params > .fp-param > label {
      cursor: help;
      white-space: nowrap
    }

    /* v25.121: a <sub> carries its own line-height, and in a grid row that is
       enough to push the label off the baseline of the field beside it and
       make CH4 and N2O sit visibly lower than the other four. Zeroing the
       line box and setting the offset explicitly puts the digit back under
       the letter without moving the row. */
    #tool .fp-params sub {
      font-size: .7em;
      line-height: 0;
      vertical-align: -0.25em
    }

    /* Band 3 copy: the measures' own About fold, so the control and the
       wording behave the way they do under Full Electric. */
    #tool .fp-about {
      margin-top: 20px
    }

    /* numeric cells right-align */
    #tool td.num,
    #tool th.num {
      text-align: right
    }

/* ===== ship selection ===== */
    /* The selector is a radio (one ship at a time) but is drawn square, to
       match every other control. The row is the click target, so the input
       itself takes no pointer events: one code path, no chance of the mark
       and the selection disagreeing. */
    #landing .shiptable input[type=radio] {
      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;
      margin: 0;
      flex: none;
      pointer-events: none
    }

    #landing .shiptable input[type=radio]:checked {
      background: var(--navy);
      border-color: var(--navy)
    }

    #landing .shiptable input[type=radio]:checked::after {
      content: '';
      width: 3px;
      height: 7px;
      border: solid #fff;
      border-width: 0 1.5px 1.5px 0;
      transform: translateY(-1px) rotate(45deg)
    }

    /* the whole row reads as one control */
    #landing .shiptable tbody tr {
      cursor: pointer
    }

    #landing .shiptable tbody tr:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: -2px
    }

/* ===== global control styling (squared checkboxes, restrained sliders) ===== */
    /* 5. Checkboxes: square, no rounding, navy only when checked. */
    #tool input[type=checkbox],
    #landing 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
    }

    #tool input[type=checkbox]:checked,
    #landing input[type=checkbox]:checked {
      background: var(--navy);
      border-color: var(--navy)
    }

    #tool input[type=checkbox]:checked::after,
    #landing 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)
    }

    /* 6. Sliders: thin neutral track, round navy thumb, no coloured fill.
       Every slider prints its value in the label, so the thumb position is
       the only cue needed and a filled track only added weight. */
    #tool input[type=range],
    #landing input[type=range] {
      appearance: none;
      -webkit-appearance: none;
      height: 14px;
      background: transparent;
      accent-color: auto;
      cursor: pointer
    }

    #tool input[type=range]::-webkit-slider-runnable-track,
    #landing input[type=range]::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 2px;
      background: var(--line)
    }

    #tool input[type=range]::-moz-range-track,
    #landing input[type=range]::-moz-range-track {
      height: 3px;
      border-radius: 2px;
      background: var(--line)
    }

    /* Firefox fills the track to the left of the thumb by default; match
       the unfilled look of the other browsers. */
    #tool input[type=range]::-moz-range-progress,
    #landing input[type=range]::-moz-range-progress {
      height: 3px;
      background: var(--line)
    }

    #tool input[type=range]::-webkit-slider-thumb,
    #landing 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,
    #landing input[type=range]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--navy);
      border: none
    }

    /* 7 + 9. The More info bar sits below the section content and whatever
       it reveals unfolds below the bar. The ordering is done in the DOM by
       orderInfoBlocks() rather than with flex `order`, because making
       .acc-body a flex column turns every .chartbox into a flex item and
       Chart.js canvases collapse when the parent has no definite height. */
    #tool .acc-moreinfo-body,
    #tool .intro-mi {
      width: 100%;
      clear: both
    }

    /* 8. One parameter-box treatment everywhere: same border, padding,
       label column and field width in every section. */
    /* One parameter-box treatment everywhere. No rule between rows: the
       consistent row height and label column carry the alignment, and the
       lines only added noise.

       The tooltip marker sits in its own column at the end of the row, so
       every marker lines up regardless of how long the label is. Rows
       without one simply leave that column empty. */
    #tool .spd-row,
    #tool .kv {
      display: grid;
      grid-template-columns: 1fr 150px;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      min-height: 34px
    }

    #tool .kv {
      grid-template-columns: 1fr 150px 16px
    }

    #tool .kv > .ii {
      grid-column: 3;
      margin-left: 0;
      justify-self: end
    }

    /* a row with no tooltip still reserves the column, so the fields above
       and below stay on the same vertical line */
    #tool .kv > .k {
      grid-column: 1
    }

    #tool .kv > :not(.k):not(.ii) {
      grid-column: 2
    }

    #tool .spd-row > label,
    #tool .kv > .k {
      font-size: 12px;
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      gap: 5px
    }

    #tool .spd-row input[type=number],
    #tool .spd-row input[type=text],
    #tool .spd-row select,
    #tool .kv input[type=number],
    #tool .kv input[type=text],
    #tool .kv select {
      width: 100%;
      border-radius: 0
    }

    /* 9. Sections in one row share a height, so the More info bar lines up
       instead of flopping to a different level in each column. */
    #tool .grid2 {
      align-items: stretch
    }

    #tool .grid2 > * {
      min-width: 0
    }

/* ===== vessel photo controls and the ship update commit ===== */
    /* The photo controls sit inside the image, lower right. The previous
       flex-column wrapper made the image a flex item and collapsed it. */
    #tool .vphoto-wrap {
      position: relative;
      /* A fixed 16:9 frame, cropped to fill. This reverses the earlier
         letterbox: ship photography is overwhelmingly wide, so 16:9 is
         close to the source ratio and the crop takes very little off,
         while a fixed ratio keeps the column the same height whatever
         photo lands in it. */
      aspect-ratio: 16 / 9;
      background: var(--paper-warm, #f0f1f3);
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* These are stand-in photos of the class, not the vessel itself, so the
       frame says so rather than leaving the reader to assume. Hidden once
       the user uploads a photo of their own ship. */
    #tool .vphoto-tag {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      /* White letters straight on the photo, no plate behind them. A thin
         text-shadow keeps them readable over a light sky or hull. */
      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-tag[hidden] {
      display: none
    }

    /* no photo available: keep the frame and the controls, caption the gap */
    #tool .vphoto-wrap.vphoto-empty {
      display: flex;
      align-items: center;
      justify-content: center
    }

    #tool .vphoto-cap {
      font-size: 12px;
      color: var(--ink-muted);
      text-align: center;
      padding: 20px
    }

    #tool .vphoto-ov {
      position: absolute;
      right: 8px;
      bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 2
    }

    #tool .vphoto-ov .vphoto-btn {
      background: rgba(10, 21, 67, .86);
      border-color: transparent;
      color: #fff;
      padding: 5px 10px;
      font-size: 11px;
      backdrop-filter: blur(2px)
    }

    #tool .vphoto-ov .vphoto-btn:hover {
      background: var(--navy);
      border-color: transparent
    }

    #tool .vphoto-ov .vphoto-msg {
      background: rgba(10, 21, 67, .86);
      color: #fff;
      font-size: 10.5px;
      font-style: normal;
      padding: 4px 9px;
      margin: 0
    }

    #tool .vphoto-ov .vphoto-msg:empty {
      display: none
    }

    /* the upload pill reads as not-yet-active while the flag is off */
    #tool .vphoto-ov .vphoto-btn.soon {
      opacity: .75;
      cursor: default
    }



    #tool .vphoto-btn {
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 500;
      padding: 6px 12px;
      border: 1px solid var(--rule2);
      background: #fff;
      color: var(--navy);
      cursor: pointer;
      border-radius: 0
    }

    #tool .vphoto-btn:hover {
      border-color: var(--navy);
      background: rgba(10, 21, 67, .04)
    }

    #tool .vphoto-btn.primary {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
      margin-left: auto
    }

    #tool .vphoto-btn.primary:hover {
      background: #16224f
    }

    #tool .vphoto-btn:disabled {
      opacity: .5;
      cursor: default
    }

    #tool .vphoto-msg {
      font-size: 11px;
      color: var(--ink-muted);
      font-style: italic
    }

/* ===== CALCS_TECH specification block inside Customize further ===== */
    /* divider marks where the sheet's specification rows begin */
    #tool .spd-tech {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--rule2)
    }

    #tool .spd-tech-h {
      font-size: 11px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 8px
    }

    /* Two columns: pictures and graphs left, input fields right. Rows
       inside are already in their own column, so the .spd-custom rule that
       pushes a row into the right half (leaving room for images beside it)
       must not apply again here, or the fields end up at a quarter width. */
    #tool .spd-tech-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: start
    }

    #tool .spd-tech .spd-row {
      width: 100%;
      margin-left: 0
    }

    #tool .spd-tech-col {
      min-width: 0
    }

    #tool .spd-tech-pic {
      margin: 0
    }

    /* the CALCS_TECH visual sits in the left column, matching the row block
       beside it rather than the taller charts elsewhere */
    #tool .spd-tech-chart {
      height: 250px;
      width: 100%
    }

    /* a derived row is a value, not a field: one line of text, aligned with
       the field column above it */
    #tool .spd-derived {
      font-size: var(--spd-fs);
      color: #000;
      font-variant-numeric: tabular-nums;
      padding: 0 2px
    }

    @media (max-width: 900px) {
      #tool .spd-tech-grid {
        grid-template-columns: 1fr
      }

      #tool .spd-tech .spd-row {
        width: 100%;
        margin-left: 0
      }
    }

    #tool .spd-tech-pic img {
      width: 100%;
      height: auto;
      display: block;
      border: 1px solid var(--rule2)
    }

    #tool .spd-tech-table {
      overflow-x: auto;
      margin-top: 4px
    }

    #tool .spd-tech-table table {
      width: 100%;
      border-collapse: collapse
    }

    #tool .spd-tech-table th,
    #tool .spd-tech-table td {
      padding: 5px 8px;
      font-size: 11.5px
    }

    #tool .spd-tech-table td.num {
      text-align: right;
      font-variant-numeric: tabular-nums
    }

    #tool .spd-tech-txt {
      font-size: 11.5px;
      line-height: 1.75;
      color: var(--ink-soft);
      margin: 14px 0 0
    }

/* ===== More info: one bordered frame everywhere ===== */
    /* The bar is the lid of the frame: closed, it reads as a button; open,
       the border continues around the content so the connection between
       press and reveal is visible rather than implied. Every section uses
       this, so a More info block looks the same wherever it appears. */
    #tool .mi-box {
      border: 1px solid var(--rule2);
      margin-top: 14px
    }

    /* The lid is the bar itself and nothing else, so it is the same object
       in every section whether or not the section also has buttons.

       The margin reset here is what makes every closed More info box the
       same height, and it can only work if the bar carries no margin of its
       own INLINE: an inline style beats any selector, so a stray
       style="margin-top:12px" on the label sat inside the frame's border and
       made that box taller than the rest. Voyage, Power demand, Engine
       characteristics, Operational overview and all three regulation
       subsections carried one; Ship properties and the section intros did
       not, which is exactly the set that looked wrong. Spacing above the
       frame belongs to .mi-box, never to the bar. */
    #tool .mi-box > .acc-moreinfo {
      margin: 0;
      border: none;
      width: 100%
    }

    /* Two columns in every frame: copy left, controls right. The copy keeps
       the same measure whether or not anything sits beside it, which is why
       the grid stays in place when the second column is empty. */
    #tool .mi-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 44px;
      align-items: start;
      padding: 18px
    }

    #tool .mi-grid.mi-empty {
      display: none
    }

    /* 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
       (data-mi-aside) splits in two. */
    #tool .mi-grid.mi-solo {
      grid-template-columns: 1fr
    }

    #tool .mi-grid.mi-solo > .mi-aside {
      display: none
    }

    /* One treatment for all explanatory copy, whichever class carries it.
       No rule above it: inside the frame the border is the separation, and
       a second line between the bar and the text read as a divider between
       two things rather than one block. */
    #tool .mi-box .note,
    #tool .mi-box .intro-desc,
    #tool .mi-box .bc-info-text {
      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
    }

    /* Tables and control grids the bar reveals sit below both columns at
       full width, sharing the frame's padding, with no rule of their own. */
    #tool .mi-box > .acc-detail,
    #tool .mi-box > .note,
    #tool .mi-box > .intro-desc {
      margin: 0;
      border: none;
      border-top: 0;
      padding: 0 18px 18px
    }

    /* a rule between the lid and the content, only while open */
    #tool .intro.showinfo .mi-box > .intro-mi,
    #tool .acc:not(.noinfo) .mi-box > .acc-moreinfo {
      border-bottom: 1px solid var(--rule2)
    }

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

    /* The tool used to stop dead at the last section. A tail the height of a
       collapsed section gives it somewhere to end. */
    #tool {
      padding-bottom: 72px
    }

/* ===== cashflow rescale ===== */
    /* White while the frame still fits, navy once the series has moved
       outside it: the button carries the state, so the reader is told the
       scale is stale without the chart having to shout. */
    #tool .rescale-btn {
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 500;
      padding: 5px 13px;
      border: 1px solid var(--rule2);
      background: #fff;
      color: var(--navy);
      cursor: pointer;
      border-radius: 0;
      transition: background .15s, border-color .15s, color .15s
    }

    #tool .rescale-btn:hover {
      border-color: var(--navy)
    }

    #tool .rescale-btn.on {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    #tool .rescale-btn.on:hover {
      background: #16224f
    }

    /* The business case control row mirrors the grid below it, so the
       dropdown sits at the left of the chart and Rescale at its right
       edge, not at the right edge of the page. */
    #tool .selrow.bizctl {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items: center
    }

    /* Both controls share the first cell. They must BOTH be placed
       explicitly: an auto-placed item skips a cell an explicit one has
       taken, which threw the dropdown into the right-hand column. */
    /* v25.65: the dropdown IS the heading, spanning the chart column with
       its marker in the gutter - section 2's shape. Rescale is no longer
       beside it; it sits under the chart, right-aligned to the same column. */
    #tool .selrow.bizctl > #bizSel {
      grid-column: 1;
      grid-row: 1;
      justify-self: stretch;
      position: relative;
      display: block
    }

    #tool .selrow.bizctl > #bizSel select {
      width: 100%
    }

    #tool .biz-rescale {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px
    }

    @media (max-width: 880px) {
      #tool .selrow.bizctl {
        grid-template-columns: 1fr
      }
    }

    /* Compliance view headings: the subtitle now lives in the tooltip, so
       the caption carries the marker rather than a paragraph beneath it. */
    #tool .band.compl-cap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    #tool .band.compl-cap .ii {
      margin-left: 0;
      border-color: rgba(255, 255, 255, .45);
      color: #fff
    }

    #tool .compl-foot {
      text-align: center;
      font-size: 13px;
      margin-top: 8px
    }

    /* A measure switching itself off is surprising unless it says why. */
    #measNote,
    .meas-note {
      position: fixed;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%) translateY(10px);
      max-width: 520px;
      background: var(--navy);
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      line-height: 1.5;
      padding: 11px 16px;
      border-radius: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 90
    }

    .meas-note.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    @media (prefers-reduced-motion: reduce) {
      .meas-note { transition: none }
    }

    /* The whole measure row is the target, so it must read as one: the
       pointer says clickable, the row lifts on hover, and the selected
       row keeps its existing .sel treatment. Mirrors the landing table. */
    #tool .meastab tbody tr {
      cursor: pointer
    }

    #tool .meastab tbody tr:hover:not(.sel) {
      background: var(--soft)
    }

    #tool .meastab tbody tr[aria-disabled="true"] {
      cursor: not-allowed
    }

    #tool .meastab tbody tr:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: -2px
    }

    /* The last row carries no bottom rule, so a table - and a Total row -
       ends open rather than closed off. Cell insets stay as they were. */
    #tool table tbody tr:last-child > td {
      border-bottom: 0
    }

    /* The measure-row hover is bounded by the table, not the page: the row
       tint stops at the table's own edge. */
    #tool .meastab {
      table-layout: auto
    }

    /* Vessel line drawing behind the Ship block. Faint enough to read as
       paper texture rather than a picture, anchored to the block's own box
       and clipped by it, and never in the way of a click: the slider and
       the hover tip sit above it. */
    /* The block does not clip by default, so the drawing is clipped here
       rather than letting it spill over the block's own border. */
    #tool .blk:has(.blk-wm) {
      overflow: hidden
    }

    #tool .blk-wm {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: right bottom;
      opacity: .06;
      pointer-events: none;
      z-index: 0
    }

    /* Lift the block's CONTENT above the watermark. Deliberately excludes
       .blk-tip: that is the hover tooltip, absolutely positioned above the
       block, and forcing it to relative made it claim vertical space in
       every block and pushed the content to the bottom. Anything else that
       positions itself must be excluded here too. */
    #tool .blk > *:not(.blk-wm):not(.blk-tip) {
      position: relative;
      z-index: 1
    }

    /* The tick has its own narrow column, so the Measure header lines up
       with the measure names instead of sitting over the checkboxes, and
       the names get room to breathe away from the controls. */
    /* v25.128: FIXED COLUMNS. The table was auto-layout, so Measure and Type
       - both nowrap, and Measure additionally reserving its own bold width -
       took whatever they needed and the four figure columns split the
       remainder. Narrow fixed widths for the two text columns, an EQUAL
       share for the four figures.
       Not all seven equal: "CO2" needs nothing like the width of "Wind
       Assisted Propulsion", and forcing them equal would put that name back
       into wrapping - which is what made the row height jump in v25.115. */
    #tool table.meastab {
      table-layout: fixed;
      width: 100%
    }

    #tool table.meastab col.mc-ck   { width: 34px }
    #tool table.meastab col.mc-name { width: 200px }
    #tool table.meastab col.mc-type { width: 104px }
    #tool table.meastab col.mc-num  { width: auto }

    /* The bar column is the widest thing in the row and was sized by its
       content; with fixed layout it takes its share like the rest, so the
       track fills the cell instead of a fixed 120px inside it. */
    #tool .meastab td.lcabar .lcabar-wrap {
      width: 100%
    }

    /* The percentage beside the dayrate. Small, and it inherits the row's
       green or red from the cell - it is the same fact stated twice, so it
       should not read as a separate one. */
    /* v25.152: the dayrate cell never wraps. It holds a figure AND a
       percentage, and a wrap between them made the row taller - the height
       on a td is a MINIMUM, so wrapped content overrides it. Same rule that
       held the measure NAME to one line in v25.115; this cell was missed
       because the percentage only arrived in v25.128. */
    /* v25.154: the percentage sits UNDER the figure, not beside it. Beside
       it, nowrap in a fixed-width column simply overflowed and the
       percentage was clipped out of sight (v25.152); wrapping instead made
       the row grow. On its own line inside a row pinned tall enough for two,
       neither happens - and the dash rows, which are one line, sit at the
       same height because the height is fixed, not content-driven. */
    #tool .meastab td.dayrate-cell {
      white-space: nowrap;
      line-height: 1.15
    }

    /* v25.156: THE CELL'S CONTENT IS A FIXED-HEIGHT BOX. Twice now the row
       height has been "pinned" with height:40px on the td and twice the table
       still moved - because height on a td is a MINIMUM the browser may
       exceed, and a dashed cell (one line) against a valued one (figure plus
       percentage, two lines) is exactly the case where it does. This does not
       ask the browser to honour a minimum: both states are laid out inside a
       26px block that overflows hidden, so the CONTENT height is identical
       whatever is in it, and the row cannot respond to it at all. Construction
       rather than instruction. */
    #tool .meastab td.dayrate-cell .dr-box {
      display: block;
      height: 26px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end
    }

    #tool .meastab .dr-pct {
      display: block;
      font-size: 10px;
      opacity: .75;
      white-space: nowrap
    }

    /* v25.128: a bar that runs past twice the conventional case. The scale
       has run out, not the value - so it is marked at the end of the track
       rather than the bar being silently clamped. */
    #tool .lcabar-clip {
      position: absolute;
      right: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: repeating-linear-gradient(180deg, #fff 0 2px, transparent 2px 4px)
    }

    #tool .meastab th.meas-ck,
    #tool .meastab td.meas-ck {
      width: 34px;
      padding-right: 0;
      text-align: left
    }

    #tool .meastab th.meas-ck + th,
    #tool .meastab td.meas-ck + td {
      padding-left: 14px
    }

    /* v25.111: BLACK, and scoped to this table alone. The greys were doing
       three different jobs - .muted on Type, the lifecycle figure, the column
       headers - and none of them was a distinction worth spending a colour
       on here. Dayrate keeps its green and red: that IS a distinction. */
    #tool .meastab th,
    /* v25.154: the dayrate keeps its green/red. This rule and #tool .pos have
       the SAME specificity (0,1,1), so the later one wins - and this is
       later, which is why the colour vanished. :not() excludes the dayrate
       cell rather than raising specificity, so #tool .pos can still reach it
       without an !important anywhere. */
    #tool .meastab td:not(.dayrate-cell),
    #tool .meastab td.muted,
    #tool .meastab tr.sel td.muted,
    #tool .meastab .lcabar-val {
      color: #000
    }

    /* The selected measure carries the weight, so the eye lands on the row
       that is actually in the case. */
    #tool .meastab tr.sel td {
      font-weight: 600
    }

    /* Ruled out by the decision tree: still legible, plainly not on offer.
       The row is NOT hidden - the reader should see that Methanol exists and
       that choosing Biofuels is what took it off the table. */
    #tool .meastab tr.meas-out td {
      color: #8a90a0
    }

    /* The control stays live and stays a pointer - clicking a dashed row
       swaps to it. Only the ring is quietened, to match the row. */
    #tool .meastab tr.meas-out td.meas-ck input.ck {
      border-color: #d2d6e0
    }

    /* The starting point, set apart from the measures the way Total is. */
    #tool .meastab tr.conv td {
      border-bottom: 1px solid var(--line)
    }

    /* v25.113: FIXED ROW HEIGHT. The cells hold different things depending on
       state - a bar, a dash, a bold label - and each has its own natural
       height, so the table jumped every time a measure was picked. Pinning
       the row means the content changes and the layout does not.
       v25.115: height on a td is only a MINIMUM - wrapped content overrides
       it, which is why the jump survived. Selecting a row takes it to weight
       600, the name gets wider, and a long one ("Hydrogen Fuel Cell", "Wind
       Assisted Propulsion") wrapped to a second line and took the row with
       it. The names are now nowrap, so the weight cannot add a line. */
    #tool .meastab td {
      height: 40px;
      padding-top: 0;
      padding-bottom: 0
    }

    #tool .meastab td.meas-name,
    #tool .meastab td.meas-type {
      text-align: left;
      white-space: nowrap
    }

    /* And the COLUMN cannot resize either. Every name cell reserves the width
       of its own text AT WEIGHT 600, in a zero-height invisible copy, so the
       column is already as wide as the bold version before anything is
       selected. Without this, nowrap stops the row growing taller but the
       column still jumps sideways as the weight changes. */
    #tool .meastab td.meas-name::after {
      content: attr(data-n);
      display: block;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      font-weight: 600;
      pointer-events: none
    }

    /* The bar cell is a fixed block either way, so a dash and a bar occupy
       the same space. */
    #tool .meastab td.lcabar .lcabar-wrap {
      height: 24px
    }

    #tool .meastab th {
      height: 30px
    }

    /* The bar cell is the tallest thing in a row; give it a fixed line box so
       a dash and a bar occupy exactly the same space. */
    #tool .meastab td.lcabar {
      line-height: 40px
    }

    #tool .meastab td.lcabar .lcabar-wrap {
      line-height: 1.3
    }

    /* Total closes the table: a rule under it, and air before whatever comes
       next, so it does not read as one more measure. */
    #tool .meastab tbody tr.tot:last-child td {
      border-bottom: 1px solid var(--line)
    }

    #tool table.meastab {
      margin-bottom: 26px
    }

    /* v25.110: ROUND, not square. Only one measure can be chosen at a time,
       and a square box is the shape the whole interface uses for "tick as
       many as you like" - the price rows, the region and fuel pickers. A
       round control says one-of instead, which is what this menu actually
       is, so the shape now matches the behaviour.

       Still an <input type=checkbox>, deliberately. A radio cannot be
       cleared by clicking it again, and clicking the chosen measure to drop
       back to the baseline is behaviour this menu already has. So the
       ELEMENT keeps the semantics the handler needs and only the PAINT
       changes - which means appearance:none, because accent-color alone
       cannot reshape a native box.

       Scoped to .meastab: every other .ck on the tab stays square, since
       those genuinely are multi-select. */
    #tool .meastab td.meas-ck input.ck {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      margin: 0;
      border: 1.5px solid #b3bacb;
      /* v25.146: SQUARE again. They were made round in v25.110 to read as
         one-per-slot, when the frontend cap allowed only one measure at a
         time. Stacking is on (v25.145) - shore, prevent and change are
         genuinely multi-select together - so a round control now says the
         wrong thing about what the reader may do. Square, like every other
         .ck on the tab. */
      border-radius: 2px;
      background: #fff;
      display: inline-block;
      position: relative;
      cursor: pointer
    }

    #tool .meastab td.meas-ck input.ck:hover {
      border-color: var(--navy)
    }

    #tool .meastab td.meas-ck input.ck:checked {
      background: var(--navy);
      border-color: var(--navy)
    }

    /* The tick. A rotated rectangle rather than a dot, since the control is
       square again - two borders on the corner of a box, the conventional
       checkmark. */
    #tool .meastab td.meas-ck input.ck:checked::after {
      content: '';
      position: absolute;
      left: 4.5px;
      top: 1px;
      width: 4px;
      height: 8px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    /* appearance:none removes the focus ring with the box, and this control
       is reachable by keyboard. */
    #tool .meastab td.meas-ck input.ck:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: 2px
    }

    /* ===== fold controls ===== */
    /* A rule with a control sitting on it. The rule is deliberately quiet -
       it marks a seam, it is not a frame - and the control is a small
       circle centred on it. Glyph only, no label, by request. */
    #tool .foldrule {
      position: relative;
      height: 0;
      border-top: 1px solid var(--rule-band);
      /* Equal air above and below, from the same token as the rest of the
         band: folded, the buttons sit one gap above the seam and the
         content one gap below; expanded, the blocks take that upper gap
         and keep their own below. */
      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, background .14s
    }

    #tool .foldbtn:hover {
      border-color: var(--navy)
    }

    #tool .foldbtn:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: 2px
    }

    /* The glyph is drawn, not typed, so the two strokes are identical and
       the minus is the plus with its upright removed. */
    #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
    }

    /* Block folding: none / top row / all eight. The top row is the four
       the reading order puts first - Ship, CO2, CAPEX, Dayrate. */
    /* Sliding open rather than appearing, so the eye can follow what moved.
       Height is animated rather than display toggled: the blocks keep their
       columns while opening, so nothing jumps sideways. The ceiling is
       generous - it only has to exceed two rows of blocks - because a
       max-height that is too tight clips the content instead of easing it. */
    #tool .blk8 {
      overflow: hidden;
      max-height: 640px;
      opacity: 1;
      transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease
    }

    #tool .blk8.fold-0 {
      max-height: 0;
      opacity: 0;
      margin-top: 0
    }

    /* The first thing inside a panel used to butt straight up against the
       seam above it. Give it the same air the seam has. */
    #tool .tabpanel > .intro:first-child {
      padding-top: 8px
    }

    #tool .blk8.fold-1 > .blk:nth-child(n+5) {
      display: none
    }

    /* Subsection folding, per panel. */
    /* The subsections ease in the same way. They are siblings rather than
       one group, so each animates its own height; closed accordions are
       short, so the ceiling can be tight enough to feel immediate. */
    #tool .tabpanel > .acc {
      overflow: hidden;
      max-height: 4000px;
      transition: max-height .28s ease, opacity .2s ease, margin .28s ease
    }

    #tool .tabpanel.subs-folded > .acc {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      margin-bottom: 0
    }

    @media (prefers-reduced-motion: reduce) {
      #tool .blk8,
      #tool .tabpanel > .acc {
        transition: none
      }
    }

    /* The header actions occupy the same column as the last section button:
       Methodology's left edge lines up with Business Case's left edge, and
       the pair splits that column in half. The tab grid is four equal
       columns with a 14px gap, so one column is (100% - 3 gaps) / 4. */
    #tool .dz-right {
      width: calc((100% - 42px) / 4);
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: stretch
    }

    #tool .dz-right > .dz-btn2,
    #tool .dz-right > .dz-dd {
      width: 100%
    }

    #tool .dz-right .dz-save {
      width: 100%
    }

    @media (max-width: 900px) {
      /* the tabs drop to two columns, so the actions follow to a half */
      #tool .dz-right {
        width: calc((100% - 14px) / 2)
      }
    }

    /* Methodology page: the workbook's own wording, two columns so the
       topics scan rather than run as one long page. */
    /* Both intro paragraphs are justified, so their right edges line up
       with the blocks and the table beneath them. */
    /* Methodology page copy: the lead, the Calculations paragraph and the two
       closing notes. `.note` carries a border-top globally, which is right
       where a note closes a section but wrong here - it drew a rule under
       "Calculations" and two more under the table, so the page read as a
       stack of fenced-off boxes rather than one document. The headings and
       the .mp-seam are the only structure this page needs. Full column width
       rather than 62ch, justified, per house style. */
    #tool .meth-lead,
    #tool #methodPanel .note {
      font-size: 13px;
      line-height: 1.75;
      color: var(--ink);
      text-align: justify;
      hyphens: auto;
      max-width: none;
      border-top: 0;
      padding-top: 0;
      margin: 14px 0 26px
    }

    /* The two closing notes sit together as one block of small print, not as
       two separated paragraphs. */
    #tool #methodPanel .note + .note,
    #tool #methCalc > .note {
      margin-top: 18px
    }

    #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 p {
      font-size: 12px;
      line-height: 1.75;
      color: var(--ink-muted);
      margin: 0
    }

    @media (max-width: 900px) {
      #tool .meth-cols {
        grid-template-columns: 1fr
      }
    }

    /* Calculations viewer: an iOS-style toggle for the case and a dropdown
       for the table, over a wide scrolling grid of the sheet's own rows. */
    #tool .calcbar {
      display: flex;
      align-items: center;
      gap: 18px;
      margin: 16px 0 12px
    }

    #tool .calc-what {
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-muted)
    }

    #tool .swtoggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none
    }

    #tool .swtoggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    #tool .swtrack {
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--rule-band);
      position: relative;
      transition: background .18s ease, border-color .18s ease
    }

    #tool .swknob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--navy);
      transition: transform .18s ease, background .18s ease
    }

    #tool .swtoggle input:checked + .swtrack {
      background: var(--navy);
      border-color: var(--navy)
    }

    #tool .swtoggle input:checked + .swtrack .swknob {
      transform: translateX(18px);
      background: #fff
    }

    #tool .swtoggle input:focus-visible + .swtrack {
      outline: 2px solid var(--navy);
      outline-offset: 2px
    }

    #tool .swlab {
      font-size: 12.5px;
      color: var(--navy)
    }

    #tool .calcwrap {
      overflow-x: auto;
      max-height: 620px;
      overflow-y: auto
    }

    #tool .calctab {
      font-size: 11px;
      white-space: nowrap
    }

    /* The two label columns stay put while the years scroll under them. */
    #tool .calctab .ca,
    #tool .calctab .cp {
      position: sticky;
      background: #fff;
      text-align: left
    }

    #tool .calctab .ca { left: 0; min-width: 104px }
    #tool .calctab .cp { left: 104px; min-width: 150px }

    #tool .calctab thead th {
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 2
    }

    #tool .calctab thead th.ca,
    #tool .calctab thead th.cp { z-index: 3 }

    #tool .calctab td.tot,
    #tool .calctab th.tot {
      font-weight: 500;
      color: var(--navy)
    }

    /* ===== volumetric comparison (v25.9) ===== */

    /* Units sit with the value, not baked into the label text, so a unit
       change is a generator run rather than an edit to eleven strings. */
    #tool .vol-ctrl-grid .row-u {
      font-size: 11px;
      color: var(--ink-muted);
      min-width: 62px;
      text-align: left
    }

    #tool .voltab th .th-u {
      display: block;
      font-weight: 400;
      font-size: 10.5px;
      color: var(--ink-muted);
      margin-top: 2px
    }

    #tool .vol-ctrl-head {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .4px;
      font-size: 11px;
      margin-bottom: 10px
    }

    /* The More info paragraph reads as prose, like the other .mi-box copy. */
    /* ===== generated CALCS_TECH sections (v25.10) ===== */

    /* Signature visual beside the inputs, italic text below - the measures
       deck's arrangement. Where a section has no visual the text takes that
       column instead, so the slot is never empty. */
    #tool .tg-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 44px;   /* v25.54: more air between the copy and the drawing */
      align-items: start
    }

    #tool .tg-visual img {
      width: 100%;
      height: auto;
      display: block
    }

    /* v25.46: the copy starts at the TOP of its column, level with the first
       parameter beside it. It was centred, so a short block floated down the
       column and a long one (Transformer specifications) sat off the rows. */
    #tool .tg-visual-text {
      display: block
    }

    /* v25.46: section headings are BOLD, not shouted - same size and colour
       as every other text in a measure panel (--spd-fs, black). They were
       11px uppercase with letter-spacing, the only capitalised type here. */
    #tool .tg-h {
      font-weight: 600;
      font-size: var(--spd-fs);
      color: #000;
      margin-bottom: 14px
    }

    #tool .tg-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 4px 0;
      font-size: 12.5px
    }

    #tool .tg-row label {
      color: var(--ink)
    }

    /* Read-only throughout: these are the sheet's figures, not fields. */
    #tool .tg-val {
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap
    }

    /* Vessel-dependent and not yet wired to the engine. Said plainly rather
       than shown as a stale number from the saved workbook. */
    #tool .tg-todo {
      color: var(--ink-muted);
      font-style: italic
    }

    #tool .tg-more {
      margin-top: 10px;
      padding: 5px 12px;
      font-family: inherit;
      font-size: 12px;
      background: #fff;
      border: 1px solid var(--rule2);
      color: var(--ink);
      cursor: pointer
    }

    #tool .tg-more:hover {
      border-color: var(--copper)
    }

    #tool .tg-text {
      font-style: italic;
      font-size: 13px;
      line-height: 1.75;
      margin: 16px 0 0
    }

    #tool .tg-divide {
      margin: 30px 0
    }

    /* The text control reads as a link rather than a second grey button, so
       it does not compete with Show more on the table beside it. */
    #tool .tg-more-text {
      border: 0;
      padding: 0;
      margin-top: 14px;
      color: var(--copper);
      text-decoration: underline;
      background: none
    }

    #tool .tg-more-text:hover {
      border: 0;
      opacity: .75
    }

    /* ===== tech section refinements (v25.18) ===== */

    /* Label, value, then the tooltip - three columns, so the icons line up
       at the row's right edge instead of ragging along with the label. */
    #tool .tg-row {
      display: grid;
      grid-template-columns: 1fr auto 20px;
      align-items: baseline;
      gap: 12px
    }

    #tool .tg-row .ii {
      justify-self: end
    }

    /* Rows with no tooltip keep the column, so the values stay aligned. */
    #tool .tg-row .ii-gap {
      display: inline-block;
      width: 16px
    }

    /* The assumptions block opens Customize further: how the tool models
       this measure, beside its layout drawing. */
    #tool .tg-assume .tg-text {
      margin-top: 0
    }

    /* A missing drawing collapses the grid to one column rather than leaving
       a hole - the same rule the no-picture sections follow. */
    #tool .tg-grid.tg-grid-1 {
      grid-template-columns: 1fr
    }

    #tool img[data-zoom] {
      cursor: zoom-in
    }

    /* v25.47: the lightbox scrim is WHITE, not navy - a whiteout rather than
       a blackout, so a chart or a line drawing keeps its own contrast
       against it. Applies to the drawings too, so both behave alike. */
    .img-zoom {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(255, 255, 255, .97);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      cursor: zoom-out
    }

    .img-zoom img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: #fff
    }

    /* The assumptions and the input rows are ONE two-column row of their own.
       This was a float first, which pushed every section after it to the
       right: a float is only cleared by what follows it in the same flow, and
       the generated sections sit inside .spd-custom too. A grid contains it. */
    #tool .spd-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: start;
      margin-bottom: 8px
    }

    /* Inside .spd-top the rows already have their own column, so the
       right-half rule that positions them in the wider panel is switched off. */
    #tool .spd-custom .spd-top .spd-row {
      width: 100%;
      margin-left: 0
    }

    #tool .spd-assume .tg-text {
      margin: 0
    }

    /* Twenty lines, then Show more: the text must not set the height of the
       whole block. */
    #tool .spd-assume .tg-text.clamped {
      display: -webkit-box;
      -webkit-line-clamp: 20;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    #tool .spd-assume img {
      width: 100%;
      height: auto;
      display: block;
      margin-top: 14px
    }

    @media (max-width: 900px) {
      #tool .spd-top { grid-template-columns: 1fr }
    }

    /* Rows whose tooltip is a SIBLING of the input rather than a child of the
       label get a third column for it, so the marker sits to the RIGHT of the
       field. Inside the label it was absolutely positioned at the row's edge,
       which landed it on top of the input - visible as a marker inside the
       chemistry dropdown. Rows that still author the tooltip in the label are
       untouched and keep the absolute rule. */
    #tool .spd-row.spd-row-t {
      grid-template-columns: 1fr var(--param-w) 22px;
      padding-right: 0
    }

    /* v25.50: justified to the START of its column, so the icon sits 10px
       from the field rather than 16 - it is 16px wide inside a 22px column,
       and justified to the end that difference read as a wider gap. */
    #tool .spd-row.spd-row-t > .ii {
      position: static;
      transform: none;
      justify-self: start;
      align-self: center
    }

    /* ===== More info slide (v25.24) ===== */

    /* Every revealed block slides rather than appearing. The open state
       carries the ceiling and the transition; the closed states above only
       set the collapsed values, so one rule governs the motion. */
    #tool .mi-box > .note,
    #tool .mi-box > .acc-detail,
    #tool .mi-box > .intro-desc,
    #tool .mi-box > .mi-grid,
    #tool .acc .note,
    #tool .acc .acc-detail,
    #tool .intro .intro-desc,
    #tool .intro .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
    }

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

    /* ===== ship properties actions (v25.25) ===== */

    /* Update ship information is not wired yet. Greyed and disabled rather
       than hidden, so the reader can see the function is coming - the same
       treatment the Export case (CSV) menu item gets. The tooltip carries
       the explanation, in the same marker style as everywhere else. */
    /* Sits at the right edge, where Reset ship selection used to be. */
    #tool .acc-actions > .acc-act-btn.is-soon {
      margin-left: auto
    }

    #tool .acc-act-btn.is-soon {
      opacity: .45;
      cursor: not-allowed;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    #tool .acc-act-btn.is-soon:hover {
      opacity: .45
    }

    /* The marker inside a disabled button must still take a hover: the button
       ignores pointer events when disabled, so the tooltip would never show. */
    #tool .acc-act-btn.is-soon .ii {
      pointer-events: auto;
      cursor: help;
      opacity: 1
    }

    /* ===== one look for every reveal control and every italic block (v25.27) ===== */

    /* Show more / Show less: one style, centred in its column. Two variants
       had drifted - one grey button, one underlined link - and they sat left
       while the content above them was centred. The counts are gone too:
       "Show more (17)" invited reading the number instead of the label. */
    #tool .tg-more,
    #tool .tg-more-text {
      display: block;
      margin: 12px auto 0;
      padding: 5px 14px;
      font-family: inherit;
      font-size: 12px;
      font-style: normal;
      text-decoration: none;
      background: #fff;
      border: 1px solid var(--rule2);
      color: var(--navy);
      cursor: pointer
    }

    #tool .tg-more:hover,
    #tool .tg-more-text:hover {
      border-color: var(--navy);
      opacity: 1
    }

    /* Every italic block reads the same: black, italic, one size. The
       assumptions were grey, the section text was another size, and the
       parameter labels were a blue-grey. One colour throughout. */
    #tool .tg-text,
    #tool .spd-assume .tg-text,
    /* v25.39: these were navy; the measure panels are all black now (the
       rule at the end of this file). Kept as the one home for tg/spd
       label colour so there is nothing left to disagree with it. */
    #tool .tg-row label,
    #tool .tg-val,
    #tool .spd-row label,
    #tool .spd-derived {
      color: #000
    }

    /* ===== methodology marker (v25.27) ===== */

    /* The Methodology button is a marker beside the product name now: it is
       a signpost to a reference panel, not an action on the case, so it reads
       as an info circle rather than competing with Save case. Same shape and
       weight as the tooltip markers used throughout. */
    .dz-info {
      width: 18px;
      height: 18px;
      margin-left: 8px;
      padding: 0;
      border: 1px solid var(--navy);
      border-radius: 50%;
      background: #fff;
      color: var(--navy);
      font-family: inherit;
      font-size: 11px;
      font-style: italic;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      flex: none
    }

    .dz-info:hover,
    .dz-info.active {
      background: var(--navy);
      color: #fff
    }

    .dz-brand {
      display: flex;
      align-items: center
    }

    /* ===== header aligned to the tab grid (v25.28) ===== */

    /* The header mirrors the tabs' own grid - four equal columns, same 14px
       gap - and the right-hand group sits in column four. That puts the left
       edge of Reset ship exactly on the left edge of Business Case, and it
       stays aligned if the tab count ever changes, because both read the
       same template rather than a hand-tuned percentage. */
    #tool .dz-header {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px
    }

    #tool .dz-header .dz-left {
      grid-column: 1 / span 3;
      min-width: 0
    }

    #tool .dz-header .dz-right {
      grid-column: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start;
      min-width: 0
    }

    /* ===== chart selector as heading (v25.29) ===== */

    /* The dropdown 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. The table
       beside it then starts at the same top line as the chart. */
    /* The selector sits ABOVE .grid2 but must line up with the chart, which
       is only .grid2's FIRST column. So it mirrors grid2's own template -
       1fr 1fr with the same 26px gap - and the marker plus dropdown live in
       column one. Spanning the full width was why the dropdown floated
       somewhere in the middle of the chart instead of over its right edge. */
    #tool .selrow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin-bottom: 14px
    }

    /* v25.33: the dropdown's LEFT edge must sit on the chart's left edge
       too (the canvas edge, where the axis labels begin), not 32px inside
       it. The marker used to take a 22px column plus gap inside the span,
       which pushed the dropdown right of the chart. It now hangs in the
       gutter to the LEFT of the column, so the dropdown fills column one
       edge to edge and the marker reads "before" it as before. */
    #tool .selrow > span:first-child {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: center;
      gap: 10px
    }

    /* Compliance selector only (the volumetric selector on tab 3 keeps its
       narrow dropdown): one column, so the dropdown fills it edge to edge. */
    #tool .selrow > #complSel {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative
    }

    #tool .selrow select {
      width: 100%
    }

    /* The marker explains the view the dropdown names, so it sits before it:
       centred on the dropdown's height, 10px clear of its left edge. */
    /* Selector carries the attribute too, or #tool .ii[data-tip]
       {position:relative} outranks this and the marker keeps its grid row. */
    /* The marker sits to the LEFT of the dropdown it explains, in the page
       gutter - the shape section 2 has always had and the one Vincent wants
       everywhere. (v25.59 moved it right because at the 1160px embed width
       it lands at x=0, flush against the edge; he prefers it left, so it is
       left. If it ever needs breathing room there, widen the wrap's padding
       rather than move the marker.) */
    #tool .selrow-i,
    #tool .selrow-i[data-tip] {
      position: absolute;
      right: 100%;
      left: auto;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
      margin-right: 10px
    }

    /* v25.35 (was v25.33): every compliance view draws its chart at the
       SAME size: the column's full width, and 15% TALLER than the table.
       The height is one number, --compl-chart-h, written by the render
       (1.15 x the table's own height) so it follows the table by rule;
       the 285px fallback only matters while the panel is hidden. */
    #tool #complBody .grid2 {
      align-items: start
    }

    #tool #complBody .grid2 > div:first-child > .chartbox {
      position: relative;
      height: var(--compl-chart-h, 285px);
      /* v25.36: the canvas reaches 26px into the gutter for the y-axis
         labels; the axis line itself is on the column's left edge. */
      margin-left: -26px;
      width: calc(100% + 26px)
    }

    /* v25.36: the header ROW's line sits on the chart's top gridline: the
       table is pulled up by the header's height minus the plot's top
       inset (thead 22px; plot top 6px into the canvas), so the first data
       row starts exactly where the bars' area starts. */
    #tool #complBody .grid2 > div:nth-child(2) > table {
      margin-top: -16px
    }

    /* v25.35: the table's header row sits ON the chart's top line - its
       text centred on the top axis label (the plot top is 8px into the
       canvas for the 9px axis font: 16px line, no top padding) - and in
       BLACK, not the muted grey the general #tool thead rule uses. */
    #tool #complBody thead th {
      padding-top: 0;
      padding-bottom: 6px;
      vertical-align: top;
      line-height: 16px;
      color: #000
    }

    /* Chart and table share a top line: the grid already puts them in one
       row, but the table carried its own leading space. */
    #tool .grid2 > div > table {
      margin-top: 0
    }

    /* Room between a tick and its label: they were touching. */
    #tool .grid2 table input.ck {
      margin-right: 9px
    }

    /* The table's first header is empty now - the column is self-evidently
       the cost lines - so the row still holds its height. */
    #tool .grid2 table thead th:empty::after {
      content: '\00a0'
    }

    /* ===== table and chart alignment (v25.31) ===== */

    /* The table's header row and the chart's top edge start on the same
       line. The chart box carries no leading space, so the table must not
       either - it was sitting a few pixels low against the plot area. */
    #tool .grid2 > div > table {
      margin-top: 0
    }

    #tool .grid2 > div > .chartbox {
      margin-top: 0
    }

    /* More info bars that follow a table need the table's own bottom space,
       or the lid rides up against the last row. .acc-body's padding sits
       OUTSIDE the frame, so it does not do this job. */
    #tool .acc-body table + .mi-box,
    #tool .acc-body table + .acc-moreinfo,
    #tool .acc-body > table {
      margin-bottom: 18px
    }

    /* Business case More info: the figure beside each parameter is data, not
       a heading, so it reads at normal weight like every other value. */
    #tool #panel3 .mi-box b,
    #tool #panel3 .mi-box strong {
      font-weight: 400
    }

    /* v25.39: everything textual inside a measure panel on one size, in
       black. Listed by class rather than a blanket "*" so nothing outside
       the panel (charts, the measure table, tooltips) is touched. */
    #tool .spd-custom,
    #tool .spd-row label,
    #tool .spd-row input,
    #tool .spd-row select,
    #tool .tg-row label,
    #tool .tg-val,
    #tool .spd-custom input,
    #tool .spd-custom select,
    #tool .spd-custom .u,
    #tool .spd-un .u,
    #tool .inp-unit,
    #tool .inp-unit .u,
    #tool .fc-unit,
    #tool .spd-derived,
    #tool .spd-assume,
    #tool .spd-assume .tg-text,
    #tool .spd-top .tg-text,
    #tool .tg-text,
    #tool .tg-lab,
    #tool .spd-about {
      font-size: var(--spd-fs);
      color: #000
    }

    /* v25.40: paragraphs inside the workbook copy blocks. Same size and
       colour as everything else in a measure panel; the spacing is what
       makes a long cell readable. */
    #tool .tg-p {
      margin: 0 0 10px;
      font-size: var(--spd-fs);
      color: #000;
      line-height: 1.8
    }

    #tool .tg-p:last-child {
      margin-bottom: 0
    }

    #tool p.spd-about + p.spd-about {
      margin-top: 10px
    }

    /* v25.41: the summary block tooltips were being CLIPPED, not missing.
       .blk8 carries overflow:hidden for its max-height collapse, and
       .blk-tip opens upward - outside the group - so it was cut away at
       the container edge. Both rows now open INWARD: the top row opens
       downward into the gap above the second row, the second row keeps
       opening upward. Every tip then lies inside .blk8 and survives the
       clip, and the collapse animation is untouched. */
    #tool .blk8 > .blk:nth-child(-n+4) .blk-tip {
      top: calc(100% + 6px);
      bottom: auto
    }

    #tool .blk8 > .blk:nth-child(n+5) .blk-tip {
      bottom: calc(100% + 6px);
      top: auto
    }

    /* v25.42: a dropdown row is a parameter row - the control fills the
       same column width as the text fields beside it rather than shrinking
       to its content, and the tooltip sits in the third column. */
    #tool .spd-row-t > .spd-in {
      justify-content: stretch;
      width: 100%
    }

    #tool .spd-row-t > .spd-in select {
      width: 100%
    }

    /* The live price figure in the slider labels reads at normal weight,
       the same as the business case list. */
    #tool .price-live {
      font-weight: 400
    }

    /* v25.46: the fold pair that replaced the square "Show more" button.
       Same control as the subsections (.acc-toggle), left-aligned under the
       block it opens rather than centred in a rule. */
    #tool .acc-toggle.tg-fold {
      justify-content: flex-start;
      margin-top: 12px
    }

    /* Spec rows carry the same rhythm as the core input rows, so a panel
       reads as one list rather than two densities (v25.46). */
    #tool .tg-row {
      padding: 6px 0;
      min-height: 30px;
      font-size: var(--spd-fs)
    }

    #tool .tg-sec .tg-text,
    #tool .spd-assume .tg-text {
      margin-top: 0
    }

    /* v25.51: NO chart carries an enlarge affordance any more. v25.49 took
       out the handler but left the zoom-in cursor and the overlay's rules
       behind, so charts in Power demand, Engine characteristics, Compliance
       costs and the Business Case still LOOKED clickable and reported
       "enlarge" to a reader. Charts show their values on hover instead.
       The line-drawing lightbox (img[data-zoom]) is untouched. */
    #tool .chartbox {
      cursor: default
    }

    /* v25.48: the ship panel uses the measure panels' row shape, so the two
       read alike. A blank row separates the main engine block from the aux
       one now that both are shown (the Customize switch is gone). */
    #tool .spd-gap {
      height: 18px
    }

    /* Read-only figures in these rows sit right-aligned like the sheet's
       own, and a select fills the field column like every input. */
    #tool .spd-row-t > .spd-derived {
      text-align: right
    }

    /* v25.48: Update ship information sits beside the More info lid, each
       half the width; anything the lid opens spans both columns. */
    #tool .mi-box.mi-box-paired {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch
    }

    /* Whatever the lid opens spans both columns: the copy keeps one full
       measure rather than being squeezed into half the frame. */
    #tool .mi-box.mi-box-paired > *:not(.acc-act-btn):not(.acc-moreinfo) {
      grid-column: 1 / -1
    }

    /* The button is the LEFT half, the lid the right - stated as order so a
       repaint cannot swap them (v25.56). The button carries the column rule
       between the two. */
    #tool .mi-box.mi-box-paired > .acc-act-btn {
      order: 1;
      border: 0;
      border-right: 1px solid var(--rule2);
      margin: 0
    }

    #tool .mi-box.mi-box-paired > .acc-moreinfo {
      order: 2
    }

    #tool .mi-box.mi-box-paired > *:not(.acc-act-btn):not(.acc-moreinfo) {
      order: 3
    }

    /* Open, the rule under the lid must run the WHOLE width - it used to
       stop halfway, under the lid's own half, and the column rule appeared
       to end in nothing. */
    #tool .mi-box.mi-box-paired:has(input[data-accinfo]:checked) > .acc-act-btn {
      border-bottom: 1px solid var(--rule2)
    }

    /* v25.50: the tooltip sits closer to the field it belongs to - 10px,
       the gap Voyage already had, instead of the grid's 14px. Applied to
       every .spd-row-t so the ship panel and the measure panels stay
       identical to each other. */
    #tool .spd-row-t > .ii-gap {
      justify-self: start
    }

    /* ONE ROW HEIGHT whatever the row holds. Rows with an input were 42px
       and rows with a read-only figure 34px, so the right column drifted
       8px further up with every derived row and Name no longer sat level
       with Main engine. */
    #tool .spd-row {
      min-height: 42px
    }

    /* v25.52: a parameter list's arrow pair sits CENTRED under the list,
       like a regular accordion's. (The copy blocks use the worded control
       instead, so this is the only place the pair appears here.) */
    #tool .tg-inputs > .acc-toggle.tg-fold {
      justify-content: center;
      margin-top: 14px
    }

    /* Spec rows carry the SAME grid as the core inputs and Customize
       further - label | 218px field | tooltip, 10px gaps - so a panel has
       one column rhythm rather than three. They were 1fr auto 20px / 12px. */
    #tool .tg-row {
      display: grid;
      grid-template-columns: 1fr var(--param-w) 22px;
      column-gap: 10px;
      align-items: center
    }

    #tool .tg-row > .tg-val {
      text-align: right
    }

    #tool .tg-row > .ii,
    #tool .tg-row > .ii-gap {
      justify-self: start
    }

    /* An input with no unit uses the whole field: the 84px the unit
       reserves left main engine / aux engine / name looking clipped. */
    #tool .spd-un > input:only-child {
      padding-right: 8px !important
    }

    /* v25.53: the Aux engine block starts ONE ROW below the block above it,
       so Aux engine lines up with Deadweight on the left. The gap was 18px,
       which is less than a row and put every aux row out of step. */
    #tool .spd-gap {
      height: 42px
    }

    /* Power demand's mode selector reads like the compliance one: the
       dropdown IS the heading, spanning the chart column, with the marker
       in the gutter to its left. */
    #tool .selrow > #powSel {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative
    }

    /* v25.54: a spec row is the same height as a core input row, so every
       parameter in the tool sits on one rhythm. The grid matched from
       v25.52; the HEIGHT did not. */
    #tool .tg-row {
      min-height: 42px
    }

    /* The Modelling assumptions heading spans the block now, so it needs
       the same air under it a section heading has. */
    #tool .spd-custom > .tg-h {
      margin-bottom: 14px
    }

    /* v25.55: a chart whose dropdown is its heading reaches 26px into the
       gutter, so its y-axis labels sit beside the column and the plot's
       left edge lands on the dropdown's. Section 2 has done this since
       v25.36; this is the same thing as a reusable class. */
    #tool .chartbox.chart-gutter {
      margin-left: -26px;
      width: calc(100% + 26px)
    }

    #tool .selrow > #engSel {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative
    }

    /* v25.58: NO y-axis caption. Section 2's charts carry none - the
       dropdown names the view and the marker beside it explains it - and
       these two now read the same way. (v25.55 added one because the axis
       TITLE would not fit the gutter; the answer was to drop the label
       altogether, not to move it.) */

    /* v25.56: revealed copy gets the same air above it as the control below
       it - it used to sit flush under the drawing block. */
    #tool .tg-sec > .tg-text {
      margin-top: 10px
    }

    /* v25.58: a range inside a parameter row - the slider takes the field
       column and its value sits at the right, like a unit. */
    #tool .spd-un.spd-rng {
      display: flex;
      align-items: center;
      gap: 8px
    }

    /* v25.67: the slider is the width of an input field, with its value to
       the LEFT of it rather than trailing behind. */
    #tool .spd-un.spd-rng {
      justify-content: flex-start
    }

    #tool .spd-un.spd-rng input[type=range] {
      flex: 1;
      padding: 0 !important;
      height: 18px
    }

    #tool .spd-un.spd-rng .rng-val {
      font-size: var(--spd-fs);
      color: #000;
      white-space: nowrap
    }

    /* v25.59: the y-axis label is back - Vincent was reporting its ABSENCE,
       not asking for it to go (v25.58 read that the other way round). It is
       a caption above the plot rather than a rotated axis title, which the
       26px gutter has no room for. */
    #tool .chart-ylab {
      font-size: 10px;
      color: #000;
      margin-bottom: 6px
    }

    /* v25.63: the price table reads like every other parameter list - taller
       rows, black centred headers, and the name and the field each taking
       half the width. The indexation slider is shorter, with its value
       beside it. */
    #tool .pricetab th {
      color: #000;
      text-align: center;
      vertical-align: middle
    }

    /* v25.74: the same density as the section 4 intro table - 32px rows and
       a 23px header - so the two tables in the same section read alike. */
    #tool .pricetab td,
    #tool .pricetab th {
      height: 32px
    }

    #tool .pricetab thead th {
      height: 23px;
      padding-top: 0;
      padding-bottom: 4px
    }

    #tool .pricetab .price-field input,
    #tool .pricetab .price-trend input[type=range] {
      height: 24px
    }

    /* The cells' own padding was adding 11px on top of a 32px row. */
    #tool .pricetab td {
      padding-top: 0;
      padding-bottom: 0
    }

    #tool .pricetab td.price-name,
    #tool .pricetab th.price-name {
      width: 50%;
      text-align: left;
      color: #000
    }

    #tool .pricetab td.price-basecell,
    #tool .pricetab th.price-basecell {
      width: 50%
    }

    #tool .pricetab .price-field {
      display: block;
      position: relative;
      width: 100%
    }

    #tool .pricetab .price-field input {
      width: 100%;
      text-align: left;
      padding-left: 8px
    }

    #tool .pricetab .price-trend {
      white-space: nowrap
    }

    #tool .pricetab .price-trend input[type=range] {
      width: 96px;
      vertical-align: middle
    }

    #tool .pricetab .price-idx-val {
      display: inline-block;
      min-width: 46px;
      margin-left: 8px;
      font-size: var(--spd-fs);
      color: #000
    }

    /* v25.65: the business-case table starts on the chart's top line, with
       black headers - the same treatment section 2 has. */
    /* v25.66: the header rule lands on the chart's top gridline by moving
       the CHART DOWN, not by pulling the TABLE UP. The negative margin took
       the header row outside its own box, where the block above painted over
       it - the headers vanished. Never pull an element out of its container
       to align it; move the other one instead. */
    #tool .intro .grid2 > div > .chartbox.chart-gutter {
      margin-top: 16px
    }

    #tool #lcaTableWrap thead th {
      padding-top: 0;
      padding-bottom: 6px;
      vertical-align: top;
      line-height: 16px;
      color: #000
    }

    /* v25.66: the landing table reads black, like every table in the tool.
       Its note takes the SAME italic the More info copy uses everywhere
       (.intro-desc: grey, italic, justified) so explanatory text looks the
       same wherever it appears. The rest of the landing palette is
       untouched. */
    #landing .shiptable th,
    #landing .shiptable td,
    #landing .shiptable thead th {
      color: #000
    }

    /* v25.156: the count starts at the SECOND column - the left edge of IMO -
       so it lines up with the data rather than with the checkbox. The footer's
       first cell is the checkbox column, so the padding here is the same one
       every other cell carries. */
    #landing .shiptable tfoot td.l-count {
      padding-left: 10px
    }

    #landing .land-note {
      color: var(--ink-muted);
      font-style: italic;
      font-size: 12.5px;
      text-align: justify
    }

    /* v25.67: the slider fills the field column, exactly as wide as an input
       box; its value sits at the right of the LABEL cell, so it reads
       "Change SFC ... -3 g/kWh" with the control beside it. */
    #tool .spd-row-t > label.lab-val {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px
    }

    #tool label.lab-val > .rng-val {
      font-size: var(--spd-fs);
      color: #000;
      white-space: nowrap
    }

    /* v25.68: with the caption gone the value is the whole label, so it sits
       at the left of its column like any other label would. */
    #tool .spd-row-t > label.lab-val {
      justify-content: flex-start
    }

    /* The selector row carries the plot's own inset as padding (set after
       the chart draws), so the box may not add its own. */
    #tool .selrow > #powSel,
    #tool .selrow > #engSel {
      padding-left: 0
    }

    /* v25.69: the CAPEX summary reads like the business case intro - the
       same table density, black bold headers, and the phase table's header
       rule on the chart's top line. */
    #tool #capexSel {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative
    }

    #tool #capexSel select {
      width: 100%
    }

    #tool table.capexsum th {
      font-weight: 600;
      color: #000
    }

    #tool table.capexsum td.capex-ph,
    #tool table.capexsum th.capex-ph {
      text-align: left;
      color: #000;
      width: 46%
    }

    #tool table.capexsum td,
    #tool table.capexsum th {
      height: 34px
    }

    /* Detail tables: one size, bold headers, wider inputs, money right. */
    #tool table.capextab th {
      font-weight: 600;
      color: #000;
      font-size: var(--spd-fs)
    }

    #tool table.capextab td {
      font-size: var(--spd-fs);
      color: #000
    }

    #tool table.capextab input.capex-in {
      width: 118px;
      text-align: right
    }

    #tool table.capextab tr.price-off td {
      opacity: .45
    }

    /* v25.70: the operational-profile days are parameter rows now - full
       field width, so "300" is not cramped, with the sheet's own tooltips. */
    #tool .daylist .spd-row-t {
      grid-template-columns: 1fr var(--param-w) 22px
    }

    /* The marker sits INSIDE the row for the two indented selectors: the
       dropdown is pushed right by the plot inset, and that space is where
       the marker belongs. Outside (right:100%) it landed at x=0, against
       the frame's edge, which is where it kept disappearing. */
    #tool .selrow > #powSel > .selrow-i,
    #tool .selrow > #engSel > .selrow-i {
      right: auto;
      left: 0;
      margin-right: 0
    }

    /* v25.71: the line label is a field, with a small remove control at its
       left and a + closing each phase. Both stay quiet until the row is
       hovered, so the table reads as a table. */
    /* v25.79: the label controls live in a SPAN inside the cell. Making the
       <td> itself display:flex took it out of the table layout, so
       table-layout:fixed could not size it and the name field stopped
       short - the text looked cut off half way across the column. */
    #tool span.capex-lab {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%
    }

    #tool input.capex-name {
      flex: 1;
      border: 1px solid transparent;
      background: transparent;
      font: inherit;
      color: #000;
      padding: 2px 4px;
      min-width: 120px
    }

    #tool input.capex-name:hover,
    #tool input.capex-name:focus {
      border-color: var(--rule2);
      background: #fff
    }

    #tool button.capex-del,
    #tool button.capex-add {
      border: 1px solid var(--rule2);
      background: #fff;
      color: #000;
      width: 18px;
      height: 18px;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      opacity: .25
    }

    #tool tr:hover button.capex-del,
    #tool button.capex-add {
      opacity: 1
    }

    #tool tr.capex-addrow td {
      padding-top: 2px;
      padding-bottom: 10px
    }

    /* v25.77: one table per phase - its name is the header cell, the column
       headings repeat above each, and everything reads black. */
    #tool .capextab + .capextab {
      margin-top: 18px
    }

    #tool .capextab thead th {
      border-bottom: 1px solid var(--rule2)
    }

    #tool .capextab .capex-sec td {
      color: #000
    }

    /* Values are underlined rather than boxed, so the table reads as a
       table and not as a form (Vincent's reference layout). */
    #tool table.capextab input.capex-in,
    #tool table.capextab input.capex-name {
      border: 0;
      border-bottom: 1px solid var(--rule2);
      background: transparent;
      border-radius: 0
    }

    #tool table.capextab input.capex-in:focus,
    #tool table.capextab input.capex-name:focus {
      border-bottom-color: var(--navy);
      background: transparent
    }

    #tool .capex-money {
      border: 0
    }

    /* Round controls, not squares. */
    #tool button.capex-del,
    #tool button.capex-add {
      border-radius: 50%
    }

    /* v25.77: the CAPEX chart's top gridline meets the summary table's
       header rule, the same way the business case intro does it - by moving
       the CHART down, never by pulling the table out of its box. */
    #tool .grid2.capex-top .chartbox {
      margin-top: 26px   /* measured: 16 left the plot 10px above the rule */
    }

    /* The dropdown is indented to the plot, so the marker goes INSIDE that
       indent - in the page gutter it lands at x=0 at the embed width, which
       is exactly where it kept being reported missing. */
    #tool .selrow > #capexSel > .selrow-i {
      right: auto;
      left: 0;
      margin-right: 0
    }

    #tool table.capexsum thead th {
      border-bottom: 1px solid var(--rule2)
    }

    /* v25.78: every phase table shares one column grid, so the six read as
       one table broken into parts - half the width for the item, the rest
       split between hours, price and cost. */
    #tool table.capextab {
      table-layout: fixed
    }

    #tool table.capextab th:nth-child(1),
    #tool table.capextab td:nth-child(1) {
      width: 50%
    }

    #tool table.capextab th:nth-child(2),
    #tool table.capextab td:nth-child(2),
    #tool table.capextab th:nth-child(3),
    #tool table.capextab td:nth-child(3),
    #tool table.capextab th:nth-child(4),
    #tool table.capextab td:nth-child(4) {
      width: 16.666%
    }

    /* The rule sits under the CHARACTERS, not across the cell: a dashed
       text underline rather than a border on a full-width box. */
    #tool table.capextab input.capex-in,
    #tool table.capextab input.capex-name {
      border: 0;
      background: transparent;
      text-decoration: underline dashed;
      text-underline-offset: 4px;
      text-decoration-color: var(--rule2);
      border-radius: 0
    }

    #tool table.capextab input.capex-in:focus,
    #tool table.capextab input.capex-name:focus {
      text-decoration-color: var(--navy);
      outline: none
    }

    #tool table.capextab input.capex-in {
      width: 100%;
      text-align: right;
      padding: 0
    }

    /* v25.80: $ IMMEDIATELY in front of the figure. The field is sized to
       its own text, but a text input still reserves room for the caret and
       a little padding, which left a visible gap; the two now sit together
       and the pair is pushed to the right of the cell. */
    #tool .capex-money {
      display: flex;
      align-items: baseline;
      gap: 2px;
      justify-content: flex-end
    }

    #tool .capex-money > input.capex-in,
    #tool .capex-qty > input.capex-in {
      padding: 0;
      margin: 0
    }

    #tool .capex-money > i.cur {
      font-style: normal;
      color: #000
    }

    #tool .capex-money > input.capex-in {
      width: auto;
      flex: 0 1 auto;
      max-width: 100%
    }

    /* v25.79: the $ sits right against its figure, and the figure is sized
       to what it holds rather than to the column. */
    #tool .capex-money,
    #tool .capex-qty {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 3px
    }

    #tool .capex-money > input.capex-in,
    #tool .capex-qty > input.capex-in {
      width: auto;
      flex: 0 1 auto;
      min-width: 0;
      field-sizing: content
    }

    /* The unit the quantity is measured in, from the sheet's number format. */
    #tool .capex-qty > i.uom {
      font-style: normal;
      color: #000;
      white-space: nowrap
    }

    /* The label fills its column: it is the widest thing on the row and was
       being clipped to a fixed width. */
    #tool table.capextab td:has(> .capex-lab) {
      overflow: hidden
    }

    #tool table.capextab input.capex-name {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%
    }

    /* The quantity keeps its unit beside it, and both fields are only as
       wide as their figure so the $ and the unit sit against the number. */
    #tool .capex-qty {
      display: flex;
      align-items: baseline;
      gap: 4px;
      justify-content: flex-end
    }

    #tool .capex-qty > input.capex-in,
    /* v25.81: SPECIFICITY. "#tool table.capextab input.capex-in { width:100% }"
       is (1,2,2) and outranked the (1,2,1) rule that asked for auto, so the
       field filled the whole cell and left the $ stranded at the far side.
       Scoped to the same table, it wins. */
    #tool table.capextab .capex-money > input.capex-in,
    #tool table.capextab .capex-qty > input.capex-in {
      width: auto;
      flex: 0 1 auto;
      text-align: right;
      min-width: 0
    }

    #tool .capex-qty > i.uom {
      font-style: normal;
      color: #000
    }

    /* v25.82: the savings total floats inside the plot, bottom right. */
    #tool .chartbox.opex-chartbox {
      position: relative
    }

    #tool .opex-chartbox > .opex-total {
      position: absolute;
      right: 10px;
      bottom: 26px;
      margin: 0;
      pointer-events: none
    }

    /* Financing and More info sit side by side, as the paired buttons in
       section 1 do. */
    #tool .acc-actions.opex-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    #tool .selrow > #opexSel {
      grid-template-columns: 1fr;
      gap: 0;
      position: relative
    }

    #tool .selrow > #opexSel select {
      width: 100%
    }

    /* v25.83: the label gets the room it needs and the slider takes about a
       third, so "Reporting year" is not pressed against its field. */
    #tool .opex-rate {
      grid-template-columns: 1fr 158px 33%
    }

    /* The savings total is a row of its own under the reporting year -
       same rhythm as a parameter, centred, black. It used to float inside
       the plot, where a tall bar could land on it. */
    #tool .opex-rate.opex-savings {
      display: block;
      text-align: center;
      color: #000
    }

    #tool .opex-rate.opex-savings b {
      color: #000
    }

    /* Financing and More info: a real gap between them, and the financing
       block opens BELOW the pair rather than above it. */
    #tool .acc-actions.opex-actions {
      gap: 18px
    }

    #tool .fin-panel {
      margin-top: 14px
    }

    #tool .selrow > #opexSel > .selrow-i {
      right: auto;
      left: 0;
      margin-right: 0
    }

    /* v25.84: the savings line reads as a parameter row - same font and
       colour, only the amount bold - and sits a full row below the last
       parameter rather than pressed against it. */
    #tool .opex-rate.opex-savings {
      font-size: var(--spd-fs);
      font-weight: 400;
      margin-top: 18px
    }

    #tool .opex-rate.opex-savings b {
      font-weight: 600
    }

    /* Air above the pair, and the pair itself matches the CAPEX one. */
    #tool .acc-actions.opex-actions {
      margin-top: 26px !important;
      margin-bottom: 0 !important
    }

    /* v25.92: the OPEX body ended with the pair, and the section padding was
       adding a second gap under it. */
    #tool #acc_opex_bc .mi-box.mi-box-paired {
      margin-bottom: 0
    }

    /* The dropdown ends where the chart's plot ends, not where the box does. */
    #tool .selrow > #opexSel {
      padding-right: 0
    }

    #tool .selrow > #opexSel > .selrow-i {
      left: 4px
    }

    /* v25.85: the dropdown spans the plot - it was sitting at its own
       intrinsic width because the host is a flex item that never stretched. */
    /* The host sits in the .selrow layout, so it has to be told to fill its
       track as well as to be a block - width:100% alone left it at its
       intrinsic 262px inside a 551px column. */
    #tool .selrow > #opexSel {
      display: block;
      flex: 1 1 auto;
      grid-column: 1 / -1;
      justify-self: stretch;
      align-self: stretch;
      width: 100%
    }

    #tool .selrow > #opexSel > select {
      width: 100%
    }

    /* A real gap between Financing and More info. The pair lives in the
       .mi-box grid, not in .acc-actions, which is why setting it there did
       nothing. Scoped to OPEX so the ship-properties pair keeps its rule. */
    /* v25.88: no frame around the pair - two plain buttons side by side
       with a rule under them, the way a measure's Case studies / Customize
       further behave. The box belonged to a single lid, not to a pair. */
    #tool #acc_opex_bc .mi-box.mi-box-paired {
      gap: 18px;
      border: 0;
      background: none;
      padding: 0
    }

    /* v25.90: the rule under the pair belongs to whatever is OPEN, not to
       the pair - as a border on the box it stayed on with both reveals
       folded, drawing a line under nothing. Each reveal already carries its
       own .foldrule at the top, so the box carries none.
       v25.90b: and the reveal carries none either - a collapsed .acc-detail
       does not clip its children, so a rule as its first child kept painting
       a line under a folded panel. Measured: 1092px wide with the panel
       shut. Anything that must vanish with the panel has to be INSIDE
       content that collapses, not a bare border on the container. */

    #tool #acc_opex_bc .mi-box.mi-box-paired > .acc-act-btn {
      border: 1px solid var(--rule2)
    }

    /* v25.86: the OPEX rate list is the prices table without its checkbox,
       so section 4 presents every parameter list the same way. */
    #tool table.pricetab.opexrates td.price-name,
    #tool table.pricetab.opexrates th.price-name {
      width: 34%
    }

    #tool table.pricetab.opexrates td.price-basecell,
    #tool table.pricetab.opexrates th.price-basecell {
      width: 33%
    }

    #tool table.pricetab.opexrates label {
      color: #000
    }

    /* The per-year tables (CAPEX / OPEX / Total, and the financing
       schedule) read like every other table in the section. */
    #tool table.pricetab.opexyears td,
    #tool table.pricetab.opexyears th {
      white-space: nowrap
    }

    #tool table.pricetab.opexyears td.price-name,
    #tool table.pricetab.opexyears th.price-name {
      width: auto;
      text-align: left
    }

    #tool table.pricetab.fin-heads {
      width: auto;
      margin-bottom: 12px
    }

    #tool table.pricetab.fin-heads td {
      padding-right: 28px
    }

    /* v25.86: the financing copy is NOT a .note - boxInfo lifts every .note
       into the More info text column, which took this one out of the panel
       it belongs to. Same look, different class. */
    #tool .fin-note {
      font-style: italic;
      color: var(--ink-muted);
      text-align: justify;
      font-size: 12.5px;
      margin-bottom: 12px
    }

    /* v25.87: the rate table's header rule meets the chart's top gridline,
       the same way the business case intro does it - by moving the CHART
       down, never by pulling the table out of its box. */
    /* v25.89: the TABLE moves down, not the chart up. A negative margin on
       the chartbox raised the plot onto its own dropdown - the standing
       rule again: never pull an element out of its container to align it,
       move the other one. */
    #tool table.pricetab.opexrates {
      margin-top: 35px
    }

    /* The savings line sits under the chart again. */
    #tool .opex-rate.opex-savings {
      margin-top: 10px
    }

    #tool table.pricetab.opexrates thead th {
      border-bottom: 1px solid var(--rule2)
    }

    /* No percentage readout in this column, so the slider has it all. */
    #tool table.pricetab.opexrates .price-trend input[type=range] {
      width: 100%
    }

    /* Each half is its own bordered button, as in Vincent's layout. */
    #tool #acc_opex_bc .mi-box.mi-box-paired > .acc-act-btn,
    #tool #acc_opex_bc .mi-box.mi-box-paired > .acc-moreinfo {
      border: 1px solid var(--rule2);
      justify-content: center;
      padding: 10px 14px
    }

    /* The two tables carry an Aspect and a Parameter column, both left. */
    #tool table.pricetab.opexyears td.price-name:nth-child(2),
    #tool table.pricetab.opexyears th.price-name:nth-child(2) {
      padding-right: 18px
    }

    /* v25.91: the CAPEX frame belongs to the LID only - it had been drawn
       around the lid, the text column and the whole detail with its tables. */
    #tool #acc_capex_bc .mi-box {
      border: 0;
      background: none;
      padding: 0
    }

    #tool #acc_capex_bc .mi-box > .acc-moreinfo {
      border: 1px solid var(--rule2)
    }

    /* The financing block runs full width - copy, totals and schedule. */
    #tool .fin-panel {
      width: 100%
    }

    #tool .fin-panel > .fin-note,
    #tool .fin-panel > .fin-heads {
      width: 100%;
      max-width: none
    }

    #tool .acc-act-btn.has-anchor {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    #tool .bc-buy {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px
    }

    /* v25.104: the FuelEU choice as a row of the More info aside. It sits in
       the grid's SECOND column so the box lines up with the left edge of the
       slider tracks above it, rather than with their labels. The empty first
       cell holds that column open - the label is not pulled out of the grid
       to align it. margin-top is cleared because the row's own min-height
       already carries the spacing, and the label is allowed to wrap: at the
       1160px embed width the aside is too narrow for one line, and .vol-ck
       is nowrap by default, which would have pushed the panel wider. */
    /* v25.104b: the checkbox starts at the LABEL column - the D of
       Depreciation sits directly above it - and the label then runs the
       full width of the aside rather than stopping at the slider gutter.
       So the label spans both grid columns instead of sitting in the
       second one. */
    #tool .bc-buy-row .bc-buy {
      grid-column: 1 / -1;
      margin-top: 0;
      white-space: normal;
      align-items: flex-start
    }

    #tool .bc-buy-row .bc-buy input[type=checkbox] {
      margin-top: 2px;
      flex: 0 0 auto
    }

    /* v25.93: FIXED column widths. The table was auto-sizing to whatever
       figures happened to be in it, so every change of interest rate or
       period resized every column and the whole table appeared to jump.
       130px holds "$ 100,000,000" at 12.5px with room to spare. */
    #tool table.pricetab.finyears {
      table-layout: fixed;
      width: max-content;
      min-width: 100%
    }

    #tool table.pricetab.finyears th,
    #tool table.pricetab.finyears td {
      width: 130px
    }

    #tool table.pricetab.finyears th.price-name,
    #tool table.pricetab.finyears td.price-name {
      width: 120px
    }

    /* Less air between the buttons and the copy that follows them. */
    #tool .fin-panel {
      margin-top: 7px
    }

    #tool .fin-panel > .fin-note {
      margin-bottom: 10px
    }

    /* v25.107: air between the More info button and the panel it opens. The
       7px above is the shared fin-panel default; this is scoped to the prices
       info panel so the financing and historic panels keep theirs. Written as
       .fin-panel.price-info-panel rather than .price-info-panel alone: at
       equal specificity the later rule wins by source order, and relying on
       source order is what makes a rule look ignored two rounds later. */
    #tool .fin-panel.price-info-panel {
      margin-top: 30px
    }

    /* v25.118: the OPEX panels were sitting straight under their buttons,
       so the table read as part of the control rather than as its result.
       A row's worth of air (32px, the capextab row height) between them. */
    #tool .opex-actions + .fin-panel,
    #tool .opex-actions + .fin-panel + .fin-panel {
      margin-top: 32px
    }

    /* v25.118: the business case chart stretches to the table beside it.
       The inline height:320px came off the box for this - inline beats every
       selector, so no rule could have grown it. */
    #tool .biz-grid {
      align-items: stretch
    }

    #tool .biz-main {
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    #tool .biz-chartbox {
      flex: 1;
      min-height: 320px;
      position: relative
    }

    /* v25.114: a button that is off says so by looking off. aria-disabled
       rather than disabled, so the tooltip explaining WHY stays reachable -
       the whole point of greying it. The label keeps pointer events for that
       reason; the input inside is what refuses the click. */
    #tool .acc-moreinfo.is-off {
      opacity: .5;
      cursor: help
    }

    #tool .acc-moreinfo.is-off input[type=checkbox] {
      cursor: help
    }

    /* The copy sits under its table now, so it needs air above rather than
       below. */
    #tool .fin-panel > .fin-note:last-child {
      margin-top: 14px;
      margin-bottom: 0
    }

    /* v25.97: the historic panel - chart three quarters, pickers beside it. */
    /* v25.98: three columns of chart, copy and button; the fourth holds
       the pickers. Everything gets room to breathe. */
    #tool .hist-panel {
      margin-top: 18px
    }

    /* v25.108: the chart FILLS - the pickers take only the width their
       labels need, the chart takes everything else, and the row STRETCHES so
       the chart is as tall as the Regions and Fuels tables beside it. The
       note and the download moved out of this grid to full panel width, so
       nothing under the chart stops short of the edge any more. */
    #tool .hist-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--hist-pick-col);
      gap: 22px;
      align-items: stretch
    }

    /* v25.109: one width for both picker tables, and a column wide enough to
       hold the longest label - "LA / Long Beach" - on ONE line. Declared once
       here so the two cannot drift apart. */
    #tool .hist-picks {
      --hist-pick-w: 178px
    }

    #tool .hist-grid {
      --hist-pick-col: 200px
    }

    /* The chart column is a flex column so the box can take the leftover
       height. The chartbox carries no inline height for exactly this reason:
       an inline style would beat flex: 1 and pin it back to 320px. */
    #tool .hist-main {
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    #tool .hist-chartbox {
      flex: 1;
      min-height: 360px;
      position: relative
    }

    #tool .hist-ranges {
      display: flex;
      gap: 6px;
      margin-bottom: 10px
    }

    #tool button.hist-range {
      border: 1px solid var(--rule2);
      background: #fff;
      color: #000;
      font: inherit;
      font-size: 11.5px;
      padding: 3px 10px;
      cursor: pointer
    }

    #tool button.hist-range.on {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    #tool table.histtab + table.histtab {
      margin-top: 14px
    }

    #tool table.histtab td {
      height: 28px
    }

    #tool .hist-ranges {
      margin-bottom: 18px;
      gap: 10px
    }

    #tool .hist-note {
      margin-top: 26px
    }

    #tool .acc-actions.hist-dl {
      margin-top: 18px
    }

    #tool .hist-picks table.histtab + table.histtab {
      margin-top: 30px
    }

    #tool table.histtab thead th {
      border-bottom: 1px solid var(--rule2);
      font-weight: 600;
      color: #000;
      text-align: left
    }

    /* v25.99: the row name and the Total column carry the weight, so the
       figures that matter are found first. */
    #tool table.pricetab.finyears td.price-name,
    #tool table.pricetab.finyears tbody td:nth-child(2) {
      font-weight: 600
    }

    #tool .fin-panel > .fin-note {
      margin-top: 16px;
      margin-bottom: 18px
    }

    /* A quieter scroll bar, clear of whatever sits under the table. */
    #tool div[style*="overflow-x"] {
      scrollbar-width: thin;
      scrollbar-color: var(--rule2) transparent;
      padding-bottom: 10px
    }

    #tool div[style*="overflow-x"]::-webkit-scrollbar {
      height: 8px
    }

    #tool div[style*="overflow-x"]::-webkit-scrollbar-track {
      background: transparent
    }

    /* Square, like everything else - the scroll bar is quieter by colour,
       not by shape. */
    #tool div[style*="overflow-x"]::-webkit-scrollbar-thumb {
      background: var(--rule2)
    }

    /* v25.100: the label sits against its box, and the chart gets air under
       the buttons without moving the pickers.
       v25.108: tighter still - 26px to 18px, and the label's indent from 6px
       to 4px. The inline style="width:34px" that was overriding all of this
       came off in v25.106. */
    #tool table.histtab td:first-child,
    #tool table.histtab th:first-child {
      width: 18px;
      padding-right: 0
    }

    #tool table.histtab td.price-name,
    #tool table.histtab th.price-name {
      padding-left: 4px
    }

    /* v25.108: and the pair sits at the RIGHT of the picker column rather
       than being stretched across it, so box and label read as one unit
       against the panel edge.
       v25.109: width:auto let EACH table size to its OWN longest label, so
       Regions (which carries "LA / Long Beach") came out wider than Fuels
       and the two checkbox columns landed in different places. Both now take
       the SAME explicit width and are right-aligned, so the boxes line up
       across the two tables by construction rather than by coincidence. */
    #tool .hist-picks table.histtab {
      width: var(--hist-pick-w);
      table-layout: fixed;
      margin-left: auto
    }

    /* THE GAP. "#tool .pricetab td.price-name { width: 50% }" applies here
       too - histtab IS a pricetab - so the label column was taking half the
       table and the checkbox column the other half, which is the wide gap,
       and it is also why the 18px first column read as ignored: in an
       auto-layout table a cell width is a suggestion, and a competing 50%
       outranked it. table-layout:fixed makes the first column's width
       binding; the selector below outranks the 50% rule on specificity
       (three classes and two types against two classes and one). The
       checkbox column keeps its ONE definition - the 18px rule above, which
       table-layout:fixed finally makes binding. */
    #tool .hist-picks table.histtab td.price-name,
    #tool .hist-picks table.histtab th.price-name {
      width: auto;
      padding-left: 8px;
      white-space: nowrap
    }

    #tool .hist-ranges {
      margin-top: 10px;
      margin-bottom: 26px
    }

    /* v25.189: an overridable summary Cost cell. Dotted underline - the same
       signal the detail table's figures carry - and a SOLID one once the
       reader has typed, so an overridden phase reads as theirs rather than
       the engine's. */
    #tool .capex-sum-edit input.capex-in {
      border: 0;
      border-bottom: 1px dotted #b3bacb;
      background: transparent;
      text-align: right;
      font: inherit;
      padding: 0 0 1px 0
    }

    #tool .capex-sum-edit input.capex-in:focus {
      outline: none;
      border-bottom-color: var(--navy)
    }

    #tool .capex-sum-edit.is-ov input.capex-in {
      border-bottom-style: solid;
      border-bottom-color: var(--navy);
      font-weight: 600
    }

    #tool td.capex-sumcell {
      white-space: nowrap
    }

/* ============================================================
   Power Barge Tool
   ------------------------------------------------------------
   Everything above this seam is the Decarbonizer stylesheet,
   copied verbatim (v25.189). Re-sync it by replacing the part
   above the seam; keep this block. Below: the tool's own views,
   drawn with the same tokens and the same de-boxed language.
   ============================================================ */

/* Six summary blocks. Same shape as .blk8 - grid under the section
   buttons, closed by the fold rule - with two 3-up halves either side of
   a dotted spine, labelled Power barge and Ship. */
#tool .blk6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 14px;
  position: relative;
  margin: 14px 0 0;
  overflow: hidden;
  max-height: 640px;
  opacity: 1;
  transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease
}
#tool .blk6.fold-0 {
  max-height: 0;
  opacity: 0;
  margin-top: 0
}
#tool .blk6::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  border-left: 1px dotted var(--rule2)
}
#tool .blk6-lab {
  grid-column: span 3;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-muted);
  font-weight: 500;
  padding-bottom: 2px
}
#tool .blk6-lab.right {
  text-align: right
}
/* One row of blocks sits directly under the section buttons, so every
   tooltip opens downward, as the top row of the eight does. */
#tool .blk6 > .blk .blk-tip {
  top: calc(100% + 6px);
  bottom: auto
}
@media (max-width: 900px) {
  #tool .blk6 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  #tool .blk6::after { display: none }
  #tool .blk6-lab, #tool .blk6-lab.right { grid-column: span 2; text-align: left }
}
@media (prefers-reduced-motion: reduce) {
  #tool .blk6 { transition: none }
}

/* Technical drawings (scope definition, component breakdown): one faint
   frame, the same rule the vessel photo carries. */
#tool .drawing {
  border: 1px solid var(--rule2);
  background: #fff;
  overflow: hidden;
  margin-bottom: 16px
}
#tool .drawing img {
  width: 100%;
  display: block
}

/* Image beside copy, in the scope sections. */
#tool .imgrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start
}
#tool .imgrow .imgcell {
  border: 1px solid var(--rule2);
  overflow: hidden
}
#tool .imgrow .imgcell img {
  width: 100%;
  display: block
}
#tool .imgrow p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0
}

/* Two drawings side by side: general arrangement and the isometric. */
#tool .gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  margin-top: 26px
}
#tool .gallery figure {
  margin: 0;
  border: 1px solid var(--rule2);
  overflow: hidden
}
#tool .gallery img {
  width: 100%;
  display: block
}
#tool .gallery figcaption {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 6px 10px;
  text-align: left
}
@media (max-width: 760px) {
  #tool .imgrow, #tool .gallery { grid-template-columns: minmax(0, 1fr) }
}

/* The scope and equipment narrative is the section's own copy, not
   optional detail, so it stays visible and is not hidden behind More
   info the way .intro-desc is. */
#tool .scopetext {
  margin-top: 14px
}
#tool .scopetext p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px
}
#tool .scopetext p:last-child {
  margin-bottom: 0
}

/* Two parameter columns must line up row for row. A row holding an
   input is naturally taller than one holding a figure, so the height is
   pinned rather than set as a minimum: one row height whatever the row
   holds. The heading above the first row is pinned for the same reason.
   A long read-only value keeps to one line and runs into the free space
   of the label column rather than wrapping. */
#tool .grid2.aligned > div {
  display: flex;
  flex-direction: column
}
#tool .grid2.aligned > div > .band {
  height: 30px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 8px
}
#tool .aligned .spd-row {
  height: 42px;
  min-height: 42px
}
#tool .aligned .spd-row-t > .spd-derived {
  white-space: nowrap;
  justify-self: end
}
/* Units longer than the 84px the field reserves ("kWh per year") sit
   beside the figure rather than over it. */
#tool .spd-un input[data-sep] {
  padding-right: 60px !important
}
#tool .spd-in input[type=checkbox] {
  display: inline-grid
}
#tool .emis-ctl {
  margin-top: 12px
}
#tool .ops-note {
  margin-top: 10px
}
#tool .fueleu-copy {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0
}
#tool table.opex-tab {
  margin-top: 26px
}

/* The CAPEX component checklist: a tick column, the component name left. */
#tool table.checklist td.ck,
#tool table.checklist th.ck {
  width: 26px;
  text-align: center;
  padding-left: 0;
  padding-right: 0
}
#tool table.checklist td.comp {
  text-align: left
}
#tool table.checklist tr.off td:not(.ck) {
  color: #a7aebd
}

/* Line-item CAPEX detail: the item name is the table's heading, as the
   phase tables in the Decarbonizer are headed. */
#tool .li-table {
  margin-top: 26px
}
#tool .li-table h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px
}

/* The stacked barge / ship share under the component table. */
#tool .capex-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 11px;
  color: var(--ink-muted)
}
#tool .capex-bar .track {
  flex: 1;
  height: 16px;
  background: var(--paper-warm);
  display: flex
}
#tool .capex-bar .seg-barge {
  background: var(--navy);
  height: 100%
}
#tool .capex-bar .seg-ship {
  background: var(--grey);
  height: 100%
}

/* Per-mode day counts under the OPEX column headers. */
#tool .modehead th {
  font-weight: 600;
  color: var(--ink-muted)
}
#tool .modehead .sub,
#tool thead th .sub {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 11px
}

/* The business case charts: the outcome line under each plot and the
   two slider rows that drive it. */
#tool .biz-outcome {
  text-align: center;
  font-weight: 600;
  margin-top: 6px;
  font-size: 12.5px
}
#tool .biz-ctl {
  margin-top: 14px
}
#tool .chartbox.biz {
  height: 280px
}

/* Out-of-range while typing: marked, not corrected, until the field is
   left. */
#tool input.out-of-range {
  border-color: var(--rust);
  color: var(--rust)
}

/* Landing: the barge drawing sits where the Decarbonizer puts its ship. */
#landing .shipart svg {
  max-height: 150px
}

/* Ship properties start one row below the reference image and blurb. */
#tool .ship-props {
  margin-top: 26px
}

/* ---- Freemium tier. Nothing is hidden: a withheld vessel keeps its row, a
   locked field keeps its place at its default, greyed, with a lock in
   the tooltip column. The same treatment everywhere. ---- */
#landing .shiptable tbody tr.lk {
  cursor: default;
  color: var(--ink-muted)
}
#landing .shiptable tbody tr.lk:hover {
  background: transparent
}
#landing .shiptable tbody tr.lk td {
  color: var(--ink-muted)
}
#landing .shiptable tbody tr.lk td.l-name {
  font-weight: 400
}
#landing .shiptable td.prem {
  color: var(--grey);
  font-style: italic;
  cursor: help
}
#landing .shiptable input[type=radio][disabled] {
  border-color: var(--line);
  background: var(--paper-warm);
  cursor: default
}
#landing input[type=text][disabled] {
  background: var(--paper-warm);
  color: var(--ink-muted);
  cursor: help
}
#landing .shiptable tfoot td.l-count {
  color: var(--ink-muted);
  font-weight: 500
}
#tool .spd-row.lk label,
#tool .spd-row.lk .rng-val,
#tool .spd-row.lk .spd-un .u {
  color: var(--ink-muted)
}
#tool .spd-row.lk input[type=text][disabled],
#tool .spd-row.lk select[disabled] {
  background: var(--paper-warm);
  color: var(--ink-muted);
  border-color: var(--rule2-soft);
  cursor: default;
  opacity: 1
}
#tool .spd-row.lk input[type=checkbox][disabled] {
  border-color: var(--line);
  cursor: default
}
#tool input[type=range][disabled] {
  cursor: default;
  opacity: .45;
  pointer-events: none
}
#tool .ii.lk,
#tool .blk .ii.lk {
  width: 16px;
  height: 16px;
  border: 1px solid var(--rule2);
  color: var(--ink-muted);
  background: #fff;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none
}
#tool .blk.lk .blk-val-edit input[disabled],
#tool .blk.lk .blk-driver-in input[disabled] {
  color: var(--ink-muted);
  border-bottom-color: var(--rule2-soft);
  cursor: default;
  opacity: 1
}
#tool .blk.lk:hover {
  border-color: var(--rule2)
}
#siteHeader .dz-menu a.menu-off[data-tip] {
  pointer-events: auto;
  cursor: help
}