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

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

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

    #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 */
    #tool .vol-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
    #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. */
    #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
    }

    #tool .capex-money input.capex-in {
      padding-left: 20px
    }

    #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 */
    #tool .fin-panel {
      margin: 12px 0 0;
      max-width: 460px
    }

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

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

    #tool .lcabar-fill {
      height: 100%;
      background: var(--navy);
      position: absolute;
      left: 0;
      top: 0
    }

    /* 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 */
    #tool .fuelp-inp {
      width: 72px;
      height: 26px;
      box-sizing: border-box;
      text-align: right;
      padding: 0 6px;
      font-size: 12px
    }

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

    /* ===== 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. */
    #tool .vol-info {
      font-size: 13px;
      line-height: 1.75;
      text-align: justify;
      hyphens: auto;
      padding: 14px 16px
    }

    /* ===== 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,
    #tool .vol-info {
      font-style: italic;
      font-size: 13px;
      line-height: 1.75;
      color: var(--navy)
    }

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

    #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. */
    #tool td.capex-lab {
      display: flex;
      align-items: center;
      gap: 8px
    }

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