/* ------------------------------------------------------------------ theme --
   Every colour of the application is a variable, so that the dark theme is a
   set of values and not a second copy of the stylesheet. The theme and the
   font are chosen by the engineer in the header and are set on the root
   element as data attributes.

   The fonts are the ones the machine already has: no font is downloaded, so
   the application works with no network and the face is the same one the
   engineer reads in the rest of their software. */
:root {
  color-scheme: light;
  --bg: #eef1f4;
  --panel: #ffffff;
  --ink: #1d2733;
  --ink-soft: #5a6b7c;
  --ink-disabled: #9aa5b1;
  --line: #d3dae1;
  --accent: #1f6feb;
  --accent-hover: #1a5fcc;
  --accent-soft: #e7f0ff;
  --ok: #1a7f4b;
  --warn: #b06a00;
  --bad: #b3261e;
  --shell: #9aa5b1;
  --packing: #2f9e6e;
  --demister: #8fa3b8;
  --liquid: #2f7fbf;
  --nozzles: #e08a2e;
  --duct: #6b7684;
  --mono: 'Consolas', 'SFMono-Regular', 'Menlo', monospace;

  /* The print sheets are documents: they keep their own light colours in
     every theme, because they are printed. */
  --doc-bg: #ffffff;
  --doc-head: #f6f8fa;
  --doc-ink: #1d2733;

  /* The surfaces of the controls and of the tables. */
  --btn-bg: #f6f8fa;
  --btn-bg-hover: #eaeff4;
  --panel-head: #f6f8fa;
  --field-bg: #ffffff;
  --field-disabled-bg: #f2f4f6;
  --group-bg: #eef2f6;
  --calc-bg: #fbfcfd;
  --head-bg: #fafbfc;
  --col-head-bg: #f0f4f8;
  --total-bg: #f3f7ff;
  --ok-bg: #eef8f2;
  --ok-bg-strong: #f0fbf4;
  --warn-bg: #fff8ec;
  --warn-bg-strong: #fff4e0;
  --warn-bg-soft: #ffe9c7;
  --bad-bg: #fdf1f0;
  --invalid-bg: #fff6f5;
  --splitter: #e4e9ee;
  --scene-bg: #f4f6f8;
  --legend-bg: rgba(255, 255, 255, 0.94);

  /* The typeface of the application. The condensed face is the same stack
     with the narrow faces first, and it is used for the whole application. */
  --font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-condensed: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow',
    'Helvetica Neue Condensed', 'Franklin Gothic Medium Cond', 'Segoe UI Variable Display',
    'Segoe UI', system-ui, sans-serif;
  --font-size: 14px;
  --tracking: 0;

  /* The textbox of the application. Every input, every select and every
     textarea is the same box: the same face, the same size, the same height
     and the same width, so that a value is read the same way wherever it is
     typed. The width is the width of a value box in the stage grid, and the
     fields of a panel are laid out in as many columns of that width as the
     panel holds. A field that holds a name and not a value is twice as wide,
     because a name is longer than a number, a date picker is as wide as a
     date picker needs to be, and the gas flow box is one digit wider, because
     the flow at the top of its range is seven digits long. */
  --input-font-size: 12px;
  --field-width: 42px;
  --field-wide-width: 52px;
  --text-width: 84px;
  --select-width: 72px;
  --input-pad: 2px 3px;
}

/* The dark theme. The print sheets keep their own light colours, because a
   printed calculation report is a document and not a screen. */
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #14181d;
  --panel: #1c222a;
  --ink: #e3e9ef;
  --ink-soft: #9aa7b4;
  --ink-disabled: #6b7684;
  --line: #2e3844;
  --accent: #4d94ff;
  --accent-hover: #6aa5ff;
  --accent-soft: #17263c;
  --ok: #4cc38a;
  --warn: #e0a340;
  --bad: #ff6f6f;
  --shell: #9aa5b1;
  --packing: #2f9e6e;
  --demister: #8fa3b8;
  --liquid: #2f7fbf;
  --nozzles: #e08a2e;
  --duct: #6b7684;

  --btn-bg: #242c36;
  --btn-bg-hover: #2d3743;
  --panel-head: #212933;
  --field-bg: #171d24;
  --field-disabled-bg: #1e242c;
  --group-bg: #232b35;
  --calc-bg: #191f26;
  --head-bg: #1a2027;
  --col-head-bg: #202833;
  --total-bg: #16233a;
  --ok-bg: #14291f;
  --ok-bg-strong: #14291f;
  --warn-bg: #2c2312;
  --warn-bg-strong: #2c2312;
  --warn-bg-soft: #33280f;
  --bad-bg: #2e1614;
  --invalid-bg: #2e1614;
  --splitter: #2a333e;
  --scene-bg: #171c22;
  --legend-bg: rgba(28, 34, 42, 0.94);
}

/* The condensed face. It is a face and not a size: the numbers stay the same
   size, so a value is not read differently from one font to the next. */
[data-font='condensed'] {
  --font-sans: var(--font-condensed);
  --tracking: 0.01em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  letter-spacing: var(--tracking);
}

/* Notation: real sub and superscripts, not Unicode look-alikes. */
.nt sub, .nt sup { font-size: 0.72em; line-height: 0; }
.nt sub { vertical-align: -0.28em; }
.nt sup { vertical-align: 0.42em; }

/* ---------------------------------------------------------------- header -- */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.app-header h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.app-header .subtitle { color: var(--ink-soft); font-size: 12px; }
.app-header .spacer { flex: 1 1 auto; }
.app-header .status { font-size: 12px; color: var(--ink-soft); min-height: 16px; }
.app-header .status.ok { color: var(--ok); }
.app-header .status.warn { color: var(--warn); }
.app-header .status.bad { color: var(--bad); }

/* The appearance controls. They are a preference of the engineer and not a
   value of the design, so they sit in the header with the file buttons. The
   two of them are one group, so that they wrap together and not one to a
   line. */
.appearance-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.appearance {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-soft);
}
.appearance select {
  font-size: var(--input-font-size);
  padding: var(--input-pad);
  width: auto;
  max-width: none;
}

button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--btn-bg);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}
button:hover { background: var(--btn-bg-hover); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-hover); }
button.danger { color: var(--bad); }
button.small { padding: 2px 7px; font-size: 12px; }

/* ----------------------------------------------------------------- layout -- */
/* The input panel and the 3D view share the width between them. The splitter
   between them is dragged to set the width of the input panel. */
.app-main {
  display: grid;
  grid-template-columns: var(--input-width, 460px) 6px 1fr;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 53px);
  min-height: 0;
}
@media (max-width: 1100px) {
  .app-main { grid-template-columns: 1fr; height: auto; }
  .splitter { display: none; }
}
.splitter {
  cursor: col-resize;
  background: var(--splitter);
  border-radius: 3px;
  touch-action: none;
}
.splitter:hover,
.splitter:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.column { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* Panels keep their own height; the column scrolls instead of squashing them. */
.column > .panel { flex: 0 0 auto; }
.column.inputs { overflow-y: auto; padding-right: 4px; }
.column.main { overflow-y: auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.panel > h2 {
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel > h2 .spacer { flex: 1 1 auto; }
.panel-body { padding: 12px; }

/* ------------------------------------------------------------------ forms -- */
/* The fields are narrow, so that as many of them as possible fit across the
   input panel. The column is wider than the box, so that the name of a field
   has room to be read, and the box in it is the one width of a value box. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--text-width), var(--text-width)));
  gap: 8px 10px;
}
.field-grid.one { grid-template-columns: var(--text-width); }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label { font-size: 11px; color: var(--ink-soft); }
.field .hint { font-size: 10px; color: var(--ink-soft); }
/* The boxes of a row line up. The box is the last thing in the field and the
   label takes the slack above it, so every box of the row sits on the same
   line, whatever the length of the name or of the description. The
   description sits between the name and the box, because it describes the
   value in the box. */
.field > label { order: 1; flex: 1 1 auto; }
.field .hint { order: 2; flex: 0 0 auto; }
.field > input,
.field > select,
.field > textarea { order: 3; }
/* A label and a hint are words, and a word that does not fit a narrow column
   wraps in it rather than running past it. */
.field > label,
.field .hint,
table.stage-grid th.param-head .param-name,
table.stage-grid th.param-head .hint {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
input[type='text'], input[type='number'], select, textarea {
  font-family: inherit;
  font-size: var(--input-font-size);
  line-height: 1.4;
  letter-spacing: inherit;
  padding: var(--input-pad);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
/* A text area holds a paragraph and not a value, so it is not boxed in. */
textarea { resize: vertical; max-width: none; }
/* The box of a field is the one width of a value box. A field that holds a
   name and not a value is wider, because a name is longer than a number. */
.field > input,
.field > select { width: var(--field-width); }
.field.text > input { width: var(--text-width); }
/* A field that carries a value with more digits than a value box holds, the
   gas flow at the top of its range, is one digit wider. */
.field.wide > input { width: var(--field-wide-width); }
/* A date picker shows the date and the calendar beside it, so it needs room
   that a value box does not. */
.field > input[type='date'] { width: 112px; }
/* No fiddling spinners on the numeric fields. */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
input.invalid { border-color: var(--bad); background: var(--invalid-bg); }
input:disabled, select:disabled { background: var(--field-disabled-bg); color: var(--ink-disabled); }
textarea { resize: vertical; }

.checkbox { display: flex; align-items: center; gap: 6px; font-size: var(--font-size); }
.checkbox input { width: auto; }

/* ------------------------------------------------------- collapsible parts -- */
.collapse { margin: 0 0 10px; }
.collapse-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 8px;
  background: var(--panel-head);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
}
.collapse-toggle:hover { background: var(--btn-bg-hover); }
.collapse-toggle .chevron { font-size: 11px; }
.collapse-toggle .hint { margin-left: auto; font-size: 10px; }
.collapse-body { padding: 9px 2px 0; }

/* ------------------------------------------------------------ stage grid -- */
/* The stage grid is a spreadsheet: the parameter column is fixed and the
   stage columns share what is left, scrolling sideways when they run out of
   room. The columns are narrow, so that two or three stages can be read side
   by side. */
.stage-grid-wrap { overflow-x: auto; }
table.stage-grid { table-layout: fixed; }
table.stage-grid th.param-head,
table.stage-grid td.param-head {
  width: 104px;
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  background: var(--calc-bg);
  /* The parameter name and its unit are read as words, not as a heading. */
  text-transform: none;
}
table.stage-grid th.param-head .hint { color: var(--ink-soft); font-weight: 400; }
table.stage-grid thead th.stage-head {
  text-align: left;
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  /* The stage column is as wide as a value box and its heading, so that the
     grid is a compact spreadsheet and not a row of boxes in a wide field. */
  width: 96px;
}
table.stage-grid thead th.stage-head .stage-name {
  font-weight: 600;
  margin-bottom: 4px;
  max-width: 92px;
}
table.stage-grid .stage-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
table.stage-grid tr.group-row td {
  background: var(--group-bg);
  color: var(--ink-soft);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 600;
  padding: 3px 8px;
}
table.stage-grid td .cell-input { padding: var(--input-pad); font-size: var(--input-font-size); max-width: var(--field-width); }
/* A dropdown carries a word and not a number, and a word that does not fit is
   cut off, so the dropdown is wider than the cell beside it. */
table.stage-grid td select.cell-input { max-width: 108px; }
/* A value outside its reasonable range is marked where it is typed. The value
   is the engineer's, so it is not rejected and not blocked from being used. */
table.stage-grid td .cell-input.out-of-range,
table.pollutant-table td .cell-input.out-of-range {
  border-color: var(--warn);
  background: var(--warn-bg);
}
/* A figure that follows from the figure it is paired with. The cell is still
   a design figure: typing a figure into it makes it the design figure. */
table.stage-grid td .cell-input.derived {
  background: var(--calc-bg);
  color: var(--ink-soft);
  font-style: italic;
}
table.stage-grid th.param-head .param-name { display: block; line-height: 1.25; }
table.stage-grid th.param-head .hint { display: block; font-size: 9.5px; }
/* The note under a row label: the industrial grades of a chemical, or what a
   row actually is. */
table.stage-grid th.param-head .hint.note-line { color: var(--warn); }

/* An option that applies to the whole plant, with the note that says what it
   does. */
.option-row { margin-bottom: 10px; }
.option-row .note { margin-top: 4px; }
table.stage-grid thead th.stage-head.plain {
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}
table.stage-grid td.calc, table.data td.calc {
  color: var(--ink-soft);
  font-style: italic;
  background: var(--calc-bg);
}

/* The pollutant frame: the pollutants are the columns and the quantities are
   the rows. A column that is too narrow wraps its text rather than pushing
   the table wider. */
.pollutant-scroll { overflow-x: auto; max-width: 100%; }
table.data.pollutant-table { min-width: 380px; width: auto; }
table.pollutant-table th:first-child, table.pollutant-table td:first-child { text-align: left; }
table.pollutant-table th,
table.pollutant-table td {
  white-space: normal;
  overflow-wrap: break-word;
}
table.pollutant-table td .cell-input,
table.pollutant-table th .cell-input { padding: var(--input-pad); font-size: var(--input-font-size); }
table.pollutant-table td input.cell-input,
table.pollutant-table th input.cell-input { width: var(--field-width); }
/* A dropdown carries a word and the arrow of the browser beside it, so it is
   wider than a value box. */
table.pollutant-table td select.cell-input,
table.pollutant-table th select.cell-input { width: var(--select-width); }
/* The heading of a pollutant: the pollutant itself, and the button that takes
   it out of the frame. */
table.pollutant-table th.pollutant-col {
  text-align: center;
  background: var(--col-head-bg);
  border-left: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
}
.pollutant-head { display: flex; gap: 4px; align-items: center; justify-content: center; }
.pollutant-remove { margin-top: 4px; }
/* The label of a row is a quantity and not a heading, so it is written as it
   is read. */
table.pollutant-table th.quantity {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
table.pollutant-table th.quantity.indent { padding-left: 16px; }
/* The figure the engine calculates under the input that asks for it: the
   removal the design delivers under the removal that is asked for. It is a
   marked line, so that the calculated figure is read as the calculated one
   and not as a second input. */
table.pollutant-table td .calc-sub {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 600;
  /* The figure and its unit stay together: a number does not break. */
  white-space: nowrap;
  color: var(--accent);
  background: var(--accent-soft);
}
/* A design that does not reach the removal that is asked for says so where the
   figure is read. */
table.pollutant-table td .calc-sub[data-state='short'] {
  color: var(--warn);
  background: var(--warn-bg);
}
table.pollutant-table td .calc-sub[data-state='muted'] {
  color: var(--ink-disabled);
  background: transparent;
  font-style: italic;
  font-weight: 400;
}
/* The outlet concentration of a stage, over the note of the outlet the design
   delivers where it is not the one that is asked for. */
table.pollutant-table td.calc .calc-value {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}

/* A sub-heading inside a fieldset: the gas analysis and the stage pollutant
   lists are two parts of the same pollutant frame. */
.sub-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
fieldset > .sub-head:not(:first-child) { margin-top: 12px; }

/* ------------------------------------------------------------ stage cards -- */
.stage-card { border: 1px solid var(--line); border-radius: 5px; margin-bottom: 10px; }
.stage-card > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
}
.stage-card > header .name { font-weight: 600; flex: 1 1 auto; }
.stage-card > header .tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.stage-card > header .tag.focus { background: var(--warn-bg-soft); color: var(--warn); }
.stage-card .stage-body { padding: 10px; }
.stage-card .stage-body[hidden] { display: none; }

fieldset {
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 0 0 10px;
  padding: 8px 10px 10px;
  /* A fieldset takes the width of its content by default, so a wide table in
     one of them pushes the panel wider instead of scrolling inside it. */
  min-width: 0;
}
fieldset > legend { font-size: 11px; color: var(--ink-soft); padding: 0 4px; }

/* ----------------------------------------------------------------- tables -- */
/* The cells are justified left and the columns sit next to each other, so a
   table is read across rather than hunted in. */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* The table hugs its content, so the columns sit next to each other and a
   value is read straight across from its label. */
#results-panel table.data { display: inline-table; width: auto; }
table.data th, table.data td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.data th {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* The column headings sit over the values they head, so they are read
     across: they are justified left like the cells below them. */
  text-align: left;
  background: var(--head-bg);
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data tr.total td { font-weight: 600; background: var(--total-bg); }
table.data tr.governing td { background: var(--ok-bg-strong); }
/* A cell may carry the mark on its own, so that one cell of a row can be
   marked: the governing pollutant of a stage, for one stage only. */
table.data td.governing { background: var(--ok-bg-strong); }
/* A cell that fails a check is marked the other way. */
table.data td.warn { background: var(--warn-bg-strong); color: var(--warn); font-weight: 600; }
/* A group row is a subheading: it is bold, and the rows under it are
   indented, so that the reader sees what belongs to the subheading. */
table.data tr.group td {
  background: var(--group-bg);
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 700;
  padding: 4px 8px;
}
table.data tr.indent td:first-child { padding-left: 20px; }
p.note { font-size: 11px; color: var(--ink-soft); margin: 6px 0 0; }
table.data caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
table.data td.num { font-variant-numeric: tabular-nums; }

.scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------------ scene -- */
.scene-wrap {
  position: relative;
  height: 44vh;
  min-height: 320px;
  flex: 0 0 auto;
  background: var(--scene-bg);
}
.scene-wrap canvas { display: block; }
.scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-hover-label {
  position: absolute;
  background: rgba(29, 39, 51, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.scene-hud {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.legend {
  background: var(--legend-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.legend div { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.45); }
.scene-tools { display: flex; gap: 6px; }

/* ----------------------------------------------------------------- notice -- */
.notice {
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.notice.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.notice.ok { border-left-color: var(--ok); background: var(--ok-bg); }

/* --------------------------------------------------------- message roll-up --
   Every note, warning and error of the design is rolled up into one section,
   and the section is closed by default, so that the results the engineer came
   for are the first thing on the screen. The status line of the page says how
   many of the messages are serious, so that a closed section is never a
   hidden one. */
.message-rollup {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  margin-bottom: 10px;
  font-size: 12px;
}
.message-rollup > summary {
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 600;
  color: var(--ink);
}
.message-rollup > summary::marker { color: var(--ink-soft); }
.message-rollup table.data { margin: 0; }
.message-rollup > .note { margin: 0 10px 10px 10px; }
table.data td.level-error { color: var(--bad); font-weight: 600; }
table.data td.level-warning { color: var(--warn); font-weight: 600; }
table.data td.level-info { color: var(--ink-soft); }

/* ----------------------------------------------------------------- report --
   The report and the reference check are documents: they are shown over the
   application and they are printed, so they keep their own light colours in
   the dark theme. A printed calculation report is a document and not a
   screen. */
#report-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--doc-bg);
}
#report-viewer[hidden] { display: none; }
.report-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--doc-head);
  border-bottom: 1px solid var(--line);
  /* The bar belongs to the document, so its text is the ink of the document
     and not the ink of the screen. */
  color: var(--doc-ink);
}
.report-bar .spacer { flex: 1 1 auto; }
#report-sheet {
  overflow: auto;
  padding: 24px 28px;
  color: #000;
  font-size: 10.5pt;
}
#report-sheet h1 { font-size: 16pt; margin: 0 0 6pt; }
#report-sheet h2 {
  font-size: 12pt;
  font-weight: 700;
  margin: 14pt 0 4pt;
  border-bottom: 1px solid #000;
  padding-bottom: 2pt;
}
#report-sheet h3 { font-size: 10.5pt; font-weight: 700; margin: 10pt 0 3pt; }
/* The content under a subheading is indented, so that the reader sees what
   belongs to the subheading. */
#report-sheet .section-body { padding-left: 12pt; }
#report-sheet table { width: 100%; border-collapse: collapse; margin-bottom: 8pt; }
#report-sheet caption {
  caption-side: top;
  text-align: left;
  font-size: 9pt;
  color: #444;
  padding-bottom: 3pt;
}
#report-sheet th, #report-sheet td { border: 1px solid #666; padding: 3pt 5pt; text-align: left; }
#report-sheet th { background: #eee; font-weight: 600; }
#report-sheet th:first-child, #report-sheet td:first-child { text-align: left; }
/* A group row is a subheading: it is bold, and the rows under it are
   indented. */
#report-sheet tr.group td { font-weight: 700; background: #eee; }
#report-sheet tr.indent td:first-child { padding-left: 12pt; }
#report-sheet .meta { width: 100%; border-collapse: collapse; margin-bottom: 10pt; }
#report-sheet .meta th { width: 16%; background: #f4f4f4; }
#report-sheet .meta td { border: 1px solid #666; padding: 3pt 5pt; text-align: left; }
#report-sheet .page-break { break-before: page; }
#report-sheet .note { font-size: 9pt; color: #333; }

/* ------------------------------------------------------- reference check -- */
/* The check is shown like the report: a full sheet over the application, so
   that it can be put side by side with the PDF it checks. */
#reference-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--doc-bg);
}
#reference-viewer[hidden] { display: none; }
#reference-sheet {
  overflow: auto;
  padding: 24px 28px;
  color: #000;
  font-size: 10.5pt;
}
#reference-sheet h1 { font-size: 16pt; margin: 0 0 6pt; }
#reference-sheet h2 {
  font-size: 12pt;
  font-weight: 700;
  margin: 14pt 0 4pt;
  border-bottom: 1px solid #000;
  padding-bottom: 2pt;
}
#reference-sheet table.data {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8pt;
  font-size: 9pt;
}
#reference-sheet th, #reference-sheet td {
  border: 1px solid #666;
  padding: 3pt 5pt;
  text-align: left;
  vertical-align: top;
}
#reference-sheet th { background: #eee; font-weight: 600; }
#reference-sheet tr.group td { font-weight: 700; background: #eee; }
#reference-sheet tr.indent td:first-child { padding-left: 12pt; }
/* The figures of the sheet and the figures of the tool are numbers. */
#reference-sheet td:nth-child(4), #reference-sheet td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}
/* The column that says whether the figure is an input or a result. */
#reference-sheet td:nth-child(3) {
  color: #555;
  font-size: 8pt;
  font-style: italic;
}
/* The last column says whether the row agrees with the sheet. */
#reference-sheet tr.match td:last-child { color: #14532d; background: #eef8f2; }
#reference-sheet tr.close td:last-child { color: #7a5b0d; background: #fdf8ec; }
#reference-sheet tr.differs td:last-child { color: #7a2e0d; background: #fdf1e7; }
/* An input is held as it is entered, so there is nothing to compare. */
#reference-sheet tr.input td:last-child { color: #444; background: #f2f6fa; }
#reference-sheet tr.sheet-only td:nth-last-child(-n+2) {
  color: #555;
  font-style: italic;
  background: #fafbfc;
}
#reference-sheet .note { font-size: 9pt; color: #333; }
/* The picker that chooses the sheet to check. */
.reference-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--doc-ink);
}
.reference-picker select {
  font-size: var(--input-font-size);
  padding: var(--input-pad);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--doc-bg);
  color: var(--doc-ink);
}

@media print {
  body { background: #fff; }
  body > * { display: none !important; }
  #report-viewer {
    display: block !important;
    position: static;
    inset: auto;
  }
  #report-viewer .report-bar { display: none !important; }
  #report-sheet {
    overflow: visible;
    padding: 0;
  }
  /* The roll-up of the messages is closed on the screen, and a printed sheet
     carries everything it has. The section is opened for the print. */
  #report-sheet details.message-rollup::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  #report-sheet details.message-rollup:not([open]) > *:not(summary) {
    display: revert !important;
  }
}