/* ============================================================
   Project BOEI - the Decarbonizer design language.

   Tokens, spacing and shapes are the Decarbonizer's, so the
   two read as one product. The notes below are the reasons a
   rule is the way it is, not a description of what it does.
   ============================================================ */

:root {
  --navy: #0A1543;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --grey: #aab2c2;
  --sel-row: #f0f1f3;
  --paper-warm: #f4f5f8;
  /* BLACK IS BLACK. The Decarbonizer settled on #000 after #15151a sat beside
     tables already written as #000 and read as two near-blacks. */
  --ink: #000;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  /* Row rules should be almost invisible; the header rule and the band seams
     have to carry. They are separate tokens for that reason and must not be
     collapsed into one. */
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  --rule-band: rgba(10, 21, 67, .38);
  --sub-top: 50px;
  --acc-gap: 26px;
  /* The value column on every parameter row, the Decarbonizer's own width. */
  --param-w: 218px;
  /* One prose size and leading for every piece of explanatory copy. */
  --copy-fs: 12.5px;
  --copy-lh: 1.8;
  --kv-unit: 64px;
  --green: #2f9e6f;
  --ets: #c00000;
}

* { box-sizing: border-box }

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

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

/* ---------- header ----------
   The rule is drawn by ::after with left and right insets, NOT as a
   border-bottom on the header itself: a border spans the whole 1180px border
   box and sits 26px proud of the content column at each end. */
.dz-header {
  position: relative;
  /* The SAME four column template the tabs read, so Save case ends on
     Business Case's right edge at every width rather than at one hand-tuned
     one. The brand takes the first three columns and the actions the fourth. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding: 19px 0;
  margin-bottom: 0;
}
.dz-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--rule-band);
}
.dz-left { grid-column: 1 / span 3; min-width: 0 }
/* THE BUTTON IS HALF OF COLUMN FOUR, not all of it. The Decarbonizer splits
   that column between Reset ship and Save case; with only one button here,
   taking the whole column made it twice the width of the reference. It sits
   in the right half so it still ends on the last tab's right edge. */
.dz-right {
  grid-column: 4; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  align-items: stretch;
}
.dz-right > .dz-dd { grid-column: 2 }
.dz-header.pre-select .dz-left { grid-column: 1 / -1 }
.dz-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.dz-mark { font-weight: 600; font-size: 1.25rem; color: var(--navy); letter-spacing: -.01em }
.dz-product { font-size: .9rem; color: var(--ink-soft) }
.dz-product strong { font-weight: 600; color: var(--navy) }

/* ---------- save case ----------
   The Decarbonizer's own control: a solid navy button opening a plain white
   menu. The menu is absolutely positioned so opening it moves nothing on the
   page; a menu that pushed the tabs down would make the first click land on
   whatever slid under the pointer. */
.dz-dd { position: relative; width: 100% }
.dz-save {
  width: 100%;
  background: var(--navy); color: #fff; border: 0;
  padding: 9px 16px;
  font-family: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.dz-save:hover { background: #16255c }
.dz-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--rule2);
  box-shadow: 0 8px 24px rgba(10, 21, 67, .12);
  min-width: 190px; z-index: 20; overflow: hidden;
}
.dz-menu a {
  display: block; padding: 10px 14px;
  font-size: .85rem; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--rule2-soft);
}
.dz-menu a:last-child { border-bottom: 0 }
.dz-menu a:hover { background: var(--paper-warm); color: var(--navy) }

/* ---------- the gate ---------- */
#gate { padding-top: 0 }
.gate-note { text-align: center; margin: 44px auto 26px; max-width: 720px }
/* The phrase is a button: one press puts it on the clipboard, so nobody has
   to transcribe it. It still reads as the quoted phrase in the sentence,
   because that is what it is. */
.gate-copy {
  font: inherit; color: var(--navy); font-weight: 500;
  background: none; border: 0; border-bottom: 1px dashed var(--rule2);
  padding: 0 1px; cursor: pointer;
}
.gate-copy:hover { border-bottom-color: var(--navy); background: var(--soft) }
.gate-copy.done { border-bottom-style: solid; border-bottom-color: var(--green); color: var(--green) }
.gate-row { display: flex; gap: 10px; justify-content: center; align-items: center }
#gateInput { width: 180px; height: 34px; padding: 0 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink) }
#gateInput:focus { outline: 0; border-color: var(--navy) }

.btn {
  height: 34px; padding: 0 18px;
  background: var(--navy); color: #fff; border: 0;
  font: inherit; font-weight: 500; cursor: pointer;
}
.btn[disabled] { background: var(--soft); color: var(--grey); cursor: default }

/* ---------- tabs ----------
   The Decarbonizer's own treatment, measured from 25.197: a four column grid
   of plain cards, the open one inverted to solid navy. Not pills - a pill row
   reads as a filter, and these are the four parts of one document. And no
   numbers: the Decarbonizer's four read as names, and a number in front of a
   name invites the reader to work through them in order, which is not how any
   of these views is used. */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 19px 0 30px;
}
@media (max-width: 860px) { .dz-header { grid-template-columns: 1fr 1fr } .dz-left { grid-column: 1 } .dz-right { grid-column: 2 } }
.tab {
  background: #fff;
  border: 1px solid var(--rule2);
  color: #000;
  text-align: center;
  padding: 14px 8px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .14s;
}
.tab.active { color: #fff; background: var(--navy); border-color: var(--navy) }
.tab:hover:not(.active) { color: var(--navy); border-color: var(--navy) }
@media (max-width: 860px) { .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ---------- the ship slot ----------
   The Decarbonizer's .shipart: a fixed height box with the image fitted
   inside it, so the row keeps its height whichever ship is selected and
   whatever shape its photograph is. */
/* THE PHOTOGRAPH LEADS. Roughly two thirds to the ship and one to its inputs,
   the Decarbonizer's own proportion, and the two columns start at the same
   line. The right column is narrower than a half, so its parameter rows take a
   narrower value column than the full-width ones: at 218px a label as short as
   'Installed power' wrapped to two lines. */
.dz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 26px; align-items: start; padding: 24px 0 6px;
  --param-w: 150px;
}
.shipart {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* The photograph FILLS its frame. These are stock vessel shots with sky and
   water around the hull, so trimming the edges costs nothing and leaving a
   band of page colour around them makes the row look unfinished. The drawings
   under .art are the opposite case and are contained, not cropped. */
.shipart img { width: 100%; height: 100%; object-fit: cover; display: block }
/* The caption the reference carries, over the top-left corner of the photo. */
.shipart-cap {
  position: absolute; top: 12px; left: 14px; z-index: 1;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 3px rgba(10, 21, 67, .55);
}
/* While the photograph is loading, or where the bucket has none, the caption
   still has to be readable against the empty plate. */
.shipart:has(> .shipart-cap:only-child) .shipart-cap { color: var(--ink-muted); text-shadow: none }
@media (max-width: 880px) { .dz-hero { grid-template-columns: 1fr } }

/* ---------- the partner strip ----------
   The sheet in the bucket, not a typed list of names: the sheet is the one
   that is kept current. Capped so it reads as a footer band rather than as a
   picture of its own. */
.logos { padding: 20px 0 6px }
.logos img { max-width: 760px; margin: 0 auto }

/* ---------- customize further ----------
   The Decarbonizer's own reveal: a full width bar that reads as a button,
   with the checkbox kept in the DOM for its state and never drawn. The anchor
   turns through half a circle on open, which is the whole of the open/closed
   cue - a caret would say 'more below' where this says 'there is more of
   this'. */
.acc-moreinfo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  font: inherit; font-size: 12.5px; font-weight: 500; font-style: normal;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.acc-moreinfo:hover { border-color: var(--navy); background: #fafbfc }
.acc-moreinfo input { appearance: none; -webkit-appearance: none; width: 0; height: 0; border: 0; margin: 0 }
.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);
}
.acc-moreinfo input:checked + span::after { transform: rotate(180deg) }
.acc-gap { margin-top: var(--acc-gap) }

.subcap { font-style: italic; color: var(--navy); font-size: 13px; margin: 20px 0 8px; padding-left: 10px; border-left: 2px solid var(--rule2) }

/* ---------- the project's own drawings ----------
   A FIXED BOX WITH THE IMAGE FITTED INSIDE IT, not a box that follows the
   image. The drawings in the bucket range from 1280x720 to 4318x3352, and
   left to size themselves two side by side came out at wildly different
   heights - the cabling layout stood three times as tall as the field layout
   beside it. A box of one height with the image contained keeps a row level
   whichever pair is in it, and keeps a four thousand pixel drawing from
   taking over the page.

   The box collapses when there is nothing to show: these illustrate, and an
   empty frame where a drawing failed to load reads as a fault. */
.art {
  /* FULL WIDTH, OWN HEIGHT. One drawing to a row, filling the column, and the
     box takes whatever shape the drawing is rather than imposing one on it.
     Two to a row in a shared 16:9 frame was the wrong answer twice over: at
     half the column the lettering stopped being readable, and a 4318x3352
     survey sheet contained in a 16:9 plate sat in the middle with a band of
     empty page either side. These are drawings meant to be read, so they get
     the width and whatever height that implies. */
  width: 100%;
  margin-bottom: 20px;
}
.art img { width: 100%; height: auto; display: block }
.art:empty { display: none }
/* The partner strip is artwork too, but it is a strip rather than a drawing:
   no plate, no ratio, and it sizes to its own height. Written AFTER .art so
   it wins, rather than relying on a selector weight that is the same. */
.art.logos { padding: 20px 0 6px }

/* A PAIR OF DRAWINGS ON ONE ROW. The grid gap carries the spacing between
   the two, so the caption drops its own top margin and the drawing drops its
   bottom one: left on, the pair sat lower than the copy above it and further
   apart than the gutter. align-items:start in .grid2 lets the two cells keep
   their own heights, so neither drawing is stretched or cropped to match the
   other. */
.artpair { margin: 20px 0 }
.artpair .subcap { margin-top: 0 }
.artpair .art { margin-bottom: 0 }

/* ---------- blocks ---------- */
/* THE BAND SITS EVENLY BETWEEN ITS TWO RULES. The seam below it is drawn
   with 30px of air either side; above it there were 4, so the three boxes
   were pinned under the header rule and adrift from the tabs. The band is one
   object between two lines and should be centred between them. */
.blk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px }
.blk { border: 1px solid var(--rule2); padding: 16px 18px 18px }
.blk-lab { font-size: 12px; color: var(--ink-muted) }
.blk-val { font-size: 1.7rem; font-weight: 600; color: var(--navy); margin: 10px 0 2px; font-variant-numeric: tabular-nums }
.blk-sub { font-size: 12px; color: var(--ink-muted) }
.bandseam { height: 0; border-top: 1px solid var(--rule-band); margin: 30px 0 }

/* ---------- bands ---------- */
.band { font-weight: 500; font-size: 1.05rem; color: var(--navy); margin: 0 0 16px }

/* ---------- grids ----------
   minmax(0, 1fr) and never a bare 1fr: a wide child in a bare 1fr track blows
   the column out and the page scrolls sideways. A section with one column of
   content still uses the two-column grid with an empty second cell, because
   stretched across the full width a label and its field end up a page apart. */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start }
.grid2 > * { min-width: 0 }
.mt { margin-top: 20px }
@media (max-width: 880px) { .grid2, .blk3 { grid-template-columns: 1fr } }

/* ---------- rows ----------
   Label, value, unit. No rule between rows: the uniform height and the shared
   label column carry the alignment, and lines would only add noise. */
/* ONE GEOMETRY FOR BOTH KINDS OF ROW. A parameter row and a slider row sit in
   the same column of the same section, so their controls have to start on the
   same line: a label column that ends where the other's begins, a control
   column of one width, and the marker or readout after it. They were two
   different grids before, and every block that mixed them had its fields
   stepping in and out. */
.kv, .slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--param-w)) 58px;
  gap: 10px; min-height: 34px; padding: 6px 0; align-items: center;
}
.kv.kv-tight { grid-template-columns: max-content minmax(0, var(--param-w)) 16px; justify-content: start; gap: 14px }
.kv > .k { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px }
.kv > .v { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--navy) }
.kv > .u { font-size: 12px; color: var(--ink-muted); text-align: left }
.kv > .f { grid-column: 2 / 3; position: relative; display: block }
.kv > .ii { grid-column: -2 / -1; justify-self: end }
/* The marker sits where a slider's readout sits, so the two row kinds line up
   on their right edge as well as their left. */
.slider-row > .ii { justify-self: end }
.kv > .f > .u {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--ink-muted); pointer-events: none;
}
.kv > .f:has(> .u) input, .kv > .f:has(> .u) select { padding-right: calc(var(--kv-unit) + 12px) }
.kv input, .kv select {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px;
  color: var(--navy); text-align: right;
}
.kv select { text-align: left }
.kv input:focus, .kv select:focus { outline: 0; border-color: var(--navy) }
/* OUT OF RANGE IS MARKED WHILE THE READER IS STILL TYPING, and clamped when
   the field is left. A field that only complains on blur lets a wrong figure
   sit on screen looking accepted. */
.kv input.oor { border-color: var(--ets); color: var(--ets) }

/* ---------- slider rows ----------
   The Decarbonizer's own three column grid: label, track, value. The LABEL is
   fixed and the TRACK flexes, so a narrow column loses slider length rather
   than legibility, and every row in a panel aligns with its neighbours instead
   of each one wrapping where its own label happens to end.

   THE UNIT LIVES IN THE LABEL AND THE VALUE COLUMN HOLDS ONLY THE NUMBER.
   A readout of '€ 0.29 per kWh' has to be as wide as its longest possible
   wording; a readout of '0.29' is as wide as the number. */
.slider-row { font-size: 12px }
.slider-row > label { color: var(--ink-soft) }
.slider-row > label .u { color: var(--ink-muted) }
.slider-row .rng-val {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--navy); font-weight: 500;
}
.spd-rng { display: block; min-width: 0 }
/* On a phone the label takes its own line and the track and value share the
   one below. */
@media (max-width: 880px) {
  .kv, .slider-row { grid-template-columns: minmax(0, 1fr) 58px; row-gap: 2px }
  .slider-row > label, .kv > .k { grid-column: 1 / -1 }
  .kv > .f { grid-column: 1 / 2 }
}
input[type=range] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 14px; background: transparent; cursor: pointer; margin: 0;
  accent-color: var(--navy);
}
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--line) }
input[type=range]::-moz-range-track { height: 3px; background: var(--line) }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--navy); margin-top: -5.5px; border: 0;
}
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 0 }

.chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); padding: 6px 0; cursor: pointer }
.chk input { width: 14px; height: 14px; accent-color: var(--navy) }

/* ---------- accordions ----------
   De-boxed: no frame, no panel fill, no rule under the head bar. A subsection
   is a bare label plus its toggle pills, with content flowing on the page.
   Spacing does the separating. */
.acc { border: 0; margin-bottom: 30px }
.acc.closed { margin-bottom: 8px }     /* closed ones read as a list */
.acc-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; cursor: pointer }
.acc-head h3 { margin: 0; font-weight: 500; font-size: 1.05rem; color: var(--navy) }
.acc-head:hover h3 { opacity: .78 }
/* The vessel reveal borrows the subsection head's SHAPE so the control is the
   one already learned, without borrowing its class: a second .acc-head inside
   a body is caught by every selector written for the section's own. */
.more-head {
  display: flex; align-items: center; justify-content: center;
  margin-top: 10px; border-top: 1px solid var(--rule2); padding-top: 12px;
  cursor: pointer; user-select: none;
}
.acc-body { border-top: 0; padding: var(--sub-top) 0 20px }
.acc.closed .acc-body { display: none }
.acc-toggle { display: flex; gap: 8px }
/* UP IS ALWAYS LEFT AND ALWAYS CLOSES; DOWN IS ALWAYS RIGHT AND ALWAYS OPENS.
   The lit one is the action available, so a closed section lights its down
   arrow. They never swap places and never swap meaning. */
.acc-toggle button {
  width: 42px; height: 26px; border-radius: 999px;
  border: 1px solid var(--rule2); background: #fff; color: var(--ink-muted);
  font-size: 10px; cursor: pointer; line-height: 1;
}
.acc-toggle button.on { background: var(--navy); border-color: var(--navy); color: #fff }

/* ---------- tables ----------
   No frame; the row rules carry the structure. No vertical rules, ever. */
.xscroll { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums }
/* The head rule is heavier than the row rules and in the ink colour, not the
   faint one: it separates the labels from the figures, which the row rules
   between figures must not compete with. */
.tbl th {
  font-weight: 600; color: var(--navy); text-align: right;
  padding: 6px 9px; border-bottom: 1.5px solid var(--navy); white-space: nowrap;
}
.tbl th:first-child { text-align: left }
.tbl td { padding: 6px 9px; text-align: right; color: var(--navy); border-bottom: 1px solid var(--line) }
.tbl td:first-child { text-align: left; color: var(--ink-soft) }
.tbl td.u { color: var(--ink-muted); font-size: 12px; text-align: left; width: 70px }
.tbl tr.total td { border-top: 1.5px solid var(--navy); font-weight: 600 }
.tbl tr.group td:first-child { font-weight: 500; color: var(--navy) }

/* ---------- charts ---------- */
.chartbox { position: relative; width: 100%; height: 260px }
/* A DOUGHNUT IS SIZED BY THE SHORTER SIDE, so in a wide column it grows to
   the box's width and spills past its height. Capping the width keeps it
   round and inside its own box whatever the column does. */
.chartbox.donut { height: 240px; max-width: 300px; margin: 0 auto }

/* Three bars and a legend. At 120px the legend took most of it and the bars
   were a strip; this is the height the three actually need. */
.chartbox.capexbar { height: 190px; margin: 20px 0 }
/* A header spanning several columns sits over the middle of them, not over
   the last one: the scenario table groups its columns under Infra, E-Anchor
   and Ship, and right-aligned those three read as labels for the wrong column. */
.tbl thead th[colspan] { text-align: center }
.chartbox canvas { width: 100% !important; height: 100% !important }
.chart-ylab { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 6px }

/* ---------- copy ----------
   House rule: explanatory copy is italic and justified. */
.nz-copy {
  font-style: italic; text-align: justify; hyphens: auto;
  color: var(--ink-muted); font-size: var(--copy-fs); line-height: var(--copy-lh);
  margin: 16px 0;
}
.nz-copy:empty { display: none }
.nx-foot { color: var(--ink-muted); border-top: 1px solid var(--rule2); padding-top: 14px; margin-top: 40px }

/* ---------- tooltip marker and its bubble ----------
   ONE node at the document root. An absolutely positioned pseudo-element is
   clipped by the first ancestor with overflow hidden - here every .xscroll
   wrapper - and, when it is not, it lengthens the page and sets the embed
   height reporter oscillating. */
.ii {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--rule2); color: var(--ink-muted);
  font-size: 9px; font-style: italic; cursor: help; user-select: none;
}
.nx-tip {
  position: fixed; z-index: 50; display: none; max-width: 300px;
  background: var(--navy); color: #fff; font-size: 12px; line-height: 1.45;
  padding: 8px 10px; pointer-events: none;
}

/* ---------- square corners everywhere ----------
   Three deliberate exceptions: tooltip markers, the accordion toggle pills and
   the slider thumbs. A tooltip marker squared off reads as a tiny button
   rather than as the 'there is more here' dot it is. */
#tool *, #gate * { border-radius: 0 }
#tool .ii { border-radius: 50% }
#tool .acc-toggle button { border-radius: 999px }
#tool input[type=range]::-webkit-slider-thumb { border-radius: 50% }
#tool input[type=range]::-moz-range-thumb { border-radius: 50% }